首页> 中文学位 >基于交互元素的扁平化设计可用性问题研究
【6h】

基于交互元素的扁平化设计可用性问题研究

代理获取

目录

声明

摘要

1.1.1 图形用户界面概述

1.1.2 图形用户界面设计风格的发展

1.1.3 扁平化设计问题的出现

1.2 国内外研究现状

1.2.1 国内研究现状

1.2.2 国外研究现状

1.3 研究意义与研究目的

1.3.1 研究意义

1.3.2 研究目的

1.4 研究思路与内容框架

1.4.1 研究方法与思路

1.4.2 研究内容框架

第2章 文献综述

2.1 扁平化设计

2.1.1 扁平化设计的起源、定义与特点

2.1.2 扁平化设计与拟物化设计的对比研究

2.1.3 扁平化问题的初步发现

2.2 交互元素

2.2.1 交互性视觉元素

2.2.2 交互元素特征

2.3 人机交互与交互成本

2.3.1 人机交互界面与信息处理

2.3.1 交互成本的定义

2.4 视觉认知心理学

2.4.1 视觉行为过程

2.4.2 视觉搜索与认知

2.3.3 认知负荷

2.5 可用性工程

2.5.1 可用性

2.5.2 可用性评估

2.5.3 眼动跟踪与评估指标

2.6 本章小结

第3章 扁平化设计的可用性问题研究

3.1 扁平化设计的可用性问题

3.1.1 降低交互元素的视觉搜索和识别效率

3.1.2 弱化隐喻—交互元素的功能可见性

3.1.3 相对狭隘的人群适用性

3.2 可用性问题带来的负面影响

3.2.1 依赖间接线索,交互成本提升

3.2.2 界面缺乏信息层级

3.2.3 低效的交互行为模式

3.3 本章小结

第4章 探索优化的扁平化设计实践

4.1 赋予交互元素明确的视觉信号,强化隐喻

4.2 创新的形态与场景化的交互元素

4.2.1 新的设计形态提供新的认知方式

4.2.2 场景化的交互元素选取

4.3 交互元素优化设计方案的实践

4.3.1 交互元素的选取

4.3.2 交互元素优化设计方案

4.4 交互元素优化设计方案喜爱度调查

4.4.1 调查目的及方法

4.4.2 问卷设计

4.4.3 数据收集

4.4.4 数据分析

4.5 本章小结

第5章 基于眼动追踪的扁平化交互元素优化方案可用性测试

5.1 实验设计

5.1.1 实验目的

5.1.2 实验设备与环境

5.1.3 实验被试

5.1.4 实验材料

5.1.5 眼动实验与试后主观满意度调查

5.1.6 实验豌强

5.2 实验结果分析

5.2.1 眼动数据收集

5.2.2 实验变量与眼动数据指标

5.2.3 按钮组眼动数据分析

5.2.4 图标组眼动数据分析

5.2.5 文字链接组眼动数据分析

5.2.6 试后主观满意度调查结果分析

5.3 实验结果讨论

5.4 本章小结

6.1 结论

6.2 创新点

6.3 展望

附录

参考文献

致谢

攻读学位期间参加的科研项目和成果

展开▼

摘要

扁平化设计自2011年成为一种流行的界面设计风格。扁平化设计的核心意义是去除冗余和繁杂的装饰效果,具体表现为去掉了多余的阴影、纹理、渐变等3D效果,从而凸显核心信息本身。扁平化设计在界面简洁、快速高效,更迭快,适应性好,开发成本低等方面表现出比以往风格更多的优势。然而,扁平化设计的长期和过度使用,尤其是全盘弃用任何一种拟物效果的过度扁平化设计带来了一些可用性问题。
  交互元素定义了人机界面交互的行为方式。过度扁平化的网站交互元素在界面中不突出,可发现性差;元素的功能逻辑让人困惑,易产生功能迷航;所有元素均扁平,信息缺乏主次,界面缺乏深度。这些可用性问题导致用户不得不借助解读上下文语境线索、鼠标悬停和操作反馈等行为寻找和辨别交互元素,理解和操作界面,致使用户交互成本的提升。
  为了降低这种额外的交互成本,在界面中凸显交互元素,提高用户认知和操作的效率,构建信息层级和界面深度,本研究先将交互成本细分为感知成本、认知成本和操作成本,依次排查得知交互成本提升的主要原因是交互元素被去除了过多的视觉表现特征而缺乏清晰的可点击线索,感知性差;隐喻不足而功能可见性被弱化,认知负荷高;感知和认知障碍,浪费点击且出错率高。
  筛选出网页中最基础的过度扁平化交互元素:按钮、图标和文字链接。尝试添加微妙的视觉效果,如阴影、渐变、新形态设计等方式,丰富交互元素的视觉表现,从而赋予其明确的可点击信号并强化隐喻。借助眼动测试的量化研究,收集眼动数据验证优化的交互元素设计方案在视觉搜索和识别效率、准确度方面比过度的扁平化设计有显著的优势。
  眼动实验数据结合试后主观测评的结果显示,为过度扁平化的交互元素添加微妙的视觉效果可以提高用户视觉寻找和认知的效率,降低交互成本,优化界面的可用性。其中,按钮的阴影和圆形设计效果,文本链接的颜色、下划线和颜色加下划线效果均优势显著,按钮的渐变和图标的优化方案暂没有表现出明显的优越性。本研究为后扁平化时代的发展提供了一些可靠的设计思路。

著录项

  • 作者

    杨琴;

  • 作者单位

    浙江工业大学;

  • 授予单位 浙江工业大学;
  • 学科 设计学
  • 授予学位 硕士
  • 导师姓名 黄薇;
  • 年度 2017
  • 页码
  • 总页数
  • 原文格式 PDF
  • 正文语种 中文
  • 中图分类 TP393.09;
  • 关键词

    网站界面; 扁平化设计; 交互元素; 可用性;

相似文献

  • 中文文献
  • 外文文献
  • 专利
代理获取

客服邮箱:kefu@zhangqiaokeyan.com

京公网安备:11010802029741号 ICP备案号:京ICP备15016152号-6 六维联合信息科技 (北京) 有限公司©版权所有
  • 客服微信

  • 服务号