人机交互设计 课件 第7章 界面设计

人机交互设计第七讲界面设计延迟符界面设计原则界面设计前的任务分析界面设计流程目录CONTENTS12301界面设计原则1.1从用户角度进行思考1．思考方向（1）要清楚不同类别的用户在什么样的环境下喜欢哪些视觉元素。（2）要清楚哪些视觉符号有通用含义，以及适用于哪些类别的功能。01界面设计原则1.1从用户角度进行思考2．思考范围用户的种类、层次、能力等因素各不相同，审美差异和需求的特殊性必然存在，满足所有用户的需求是不可能的。01界面设计原则1.1从用户角度进行思考3．思考立场作为产品的使用者，用户希望花最少的时间学习产品的架构和原理，并以最快、最便捷的方式置身于产品内容中，这就要求产品在引导方面注重合理性和科学性，没有其他复杂的干扰因素，使用户能在最短的时间内掌握产品的使用方法。01界面设计原则1.2功能与界面的匹配（1）“一致性”体现在以下四个方面：①界面视觉元素的标准统一、色彩呼应、构成相似。②功能实现的流程应保持一致、功能所在的位置应保持一致。③对象的功能应与用户的期待保持一致。④交互设计应与用户的行为惯性保持一致。01界面设计原则（2）“信息获取的有效性”体现在以下四个方面：①便于用户获取信息。②信息应在明显的位置进行展示。③信息量不宜过大。④提供结果优于提供数据。02界面设计前的任务分析任务分析也被称为“迭代法”，是一种不断使用变量的旧值递推新值的过程。2.1任务分析概述任务分析分为以下五个阶段，用户始终是每个阶段的核心。

（1）用户调研阶段。（2）任务建模阶段。（3）需求定义阶段。（4）框架定义阶段。（5）优化阶段。02界面设计前的任务分析2.2任务分析的流程任务分析具体展开，按流程包含了以下的基本分析方法：决策表分析流程图分析语句描述时间列任务清单综合使用这些基本方法，才算一个完整的任务分析，供设计师找到具体将影响界面设计的环节。02界面设计前的任务分析2.3任务模型的实施任务模型是用户为了完成任务所采用的有目的的行为过程。一般来说用户任务模型包括：用户行为动机、目的、行为计划、操作、结果评估。03界面设计流程3.1结构设计阶段通过总功能明确用户目标，进而锁定用户群体，分类用户以便划分不同层级的操作界面。通过功能分支，确定处于同一层次目录；再利用菜单划分目录类别、页面板块分区细节内容，引导用户操作。03界面设计流程3.1结构设计阶段03界面设计流程3.1结构设计阶段03界面设计流程3.2交互设计阶段1．让用户感觉到能够“控制局面”2．使用图标和分类提示替代文字03界面设计流程3.2交互设计阶段3．避免出现“门口效应”03界面设计流程3.2交互设计阶段4．使用用户语言而非技术语言进行交互5．重视微妙的用户心理活动和情感变化03界面设计流程3.3视觉设计阶段1．图片的配置。（1）照片要兼具质量与刷新速度（2）照片的选择和图标的设计，其内容和风格都需要针对平台需要而定。03界面设计流程3.3视觉设计阶段2．文字的类型。（1）字体的装饰性与信息的传递效率呈现负相关。（2）文字的尺寸从小到大变化在信息识别度之间的关系类似开口朝下的抛物曲线。03界面设计流程3.3视觉设计阶段3．留白的比例和位置。（1）留白不仅可以用于分类显示内容，还能够参与到构图之中。（2）当板块较多时，留白间隙则需要根据功能分类进行规范统一，以便达到更清晰的分区和美观的效果。03界面设计流程3.3视觉设计阶段4．页面元素的逻辑。（1）需要参考人眼的视觉习惯和手的行为习惯。（2）不同的逻辑层级应该由不同的表现形式，同理，相同的逻辑层级则使用同一种表现形式，以便更好的提示用户按流程正确操作03界面设计流程3.3视觉设计阶段5．色彩搭配。（1）主色彩决定整体风格。（2）色彩搭配数量应和功能的种类相对应。（3）色彩纯度决定页面的视觉噪音。03界面设计流程3.3视觉设计阶段6.线条形状的选择。03界面设计流程3.3视觉设计阶段7．功能和信息密度。界面所展现的功能和信息并非是数量越多越受用户欢迎。精炼、简洁的界面更加容易突出功能以及信息重点。03界面设计流程3.3视觉设计阶段8．动画效果。（1）动效应吻合用户的预期。（2）动效应结合视、听、触觉。（3）动效具备比图片和文字更好的引导性。03界面设计流程3.3视觉设计阶段9．视口设置。（1）视口的概念和用途。（2）视口类型。（3）分辨率的概念和种类。（4）视口设置的目标是满足移动端设备标准多样化不会影响视口内容的显示，以维系用户稳定的操作体验。本章总结界面设计的出发点是——按照用户的理解去设计界面和功能的关联；界面设计的过程是——要经过详尽的任务分析，将所有流程明晰，为界面的布局指明方向；而界面设计的终级目标就是——越来越弱化“界面”，实现人-机接口的无缝交互。课后思考题1．请简要叙述界面设计的一