第3章设计的目标和原则 3.1可用性目标与度量 3.1.1用户界面的可用性目标 用户界面的可用性就是用户界面的可使用程度，或者是用户对于界面的满意程度。可用性高的用户界面一定是在最大限度满足用户需求的基础上，能够使用户方便快捷学习和使用的界面。 20世纪70年代末，研究者们提出了可用性(Usability)的概念。Hartson认为可用性包含两层含义： 有用性和易用性。有用性指的是产品是否实现了一定的功能； 易用性指的是产品对于用户的易学程度，用户与产品的交互效率以及用户对于产品的满意程度。Hartson的定义相对来说比较全面，但是对于概念的可操作性缺乏进一步的分析。 Nielsen认为可用性包括易学性、交互效率、易记性、出错频率和严重性、用户满意度。其中，易学性指的是产品对于用户来说是否易于学习； 交互效率是指用户使用产品完成具体功能的效率； 易记性是指用户搁置该产品一段时间后，是否仍记得是怎么操作的； 出错频率和严重性是指产品操作错误出现的频率以及这样错误的严重程度； 用户满意度是指用户对于产品是否满意。产品要在每个要素上都达到很好的水平，才具有高可用性。 国际标准化组织(ISO)在ISO 924111(Guide on Usability)国际标准中对可用性做出了如下定义： 产品在特定使用环境下，为特定用户用于特定目的时所具有的有效性(Effectiveness)、交互效率(Efficiency)和用户主观满意(Satisfaction)。其中，有效性是指用户完成特定任务达到特定目的所具有的正确和完整程度； 交互效率是用户完成任务的正确和完整程度与所使用资源的比率； 满意度是用户在使用产品过程中所感受到的主观满意度和接受程度。 综上所述，用户界面也属于可用性概念中的产品。因此，用户界面在可用性方面，至少要具备易学性、易用性、有效性、交互效率和用户满意度5个可用性目标。易学性要求用户界面对用户来说容易上手，能很快熟练； 易用性要求用户界面的操作不复杂，在最少的操作次数下完成特定功能； 有效性要求用户界面在最大程度上满足用户需求，保证正确度和完整度实现功能； 交互效率要求用户界面使用最少的资源满足用户完成界面交互； 用户满意度要求用户界面的设计具有合理性、美观性等，给用户除了满足功能外的视觉和听觉上的额外享受。 3.1.2可用性的度量 可用性的度量是系统化收集交互界面的可用性数据并对其进行评定和改进的过程。可用性度量的目的包括： 改进现有的用户界面，提高其可用性； 在对新界面进行设计时，对已有界面进行可用性评估，可以取长补短，更有效地达到可用性目标。界面设计是一个设计、可用性度量、改进相互叠加和往复的过程，需要对界面设计进行可用性度量再改进，从而不断完善界面。因此，可用性度量在界面设计中的地位十分重要。可用性度量的方法主要包括可用性测试、启发式评估、认知过程浏览、用户访谈和行为分析等。 可用性测试是通过组织典型目标用户组成测试用户，使用界面设计的原型完成一组预定的操作任务，并通过观察、记录和分析测试用户行为获取相关数据，对界面进行可用性度量的一种方法。可用性测试适用于界面设计中后期界面原型的评估，通常是由测试人员和观察人员在特定的测试环境下进行，测试人员完成预定的测试任务，观察人员在一旁记录测试用户的行为过程，也可借助摄像机、眼动跟踪技术、鼠标轨迹跟踪技术等进行数据收集，最后分析数据得到结论。可用性测试是可用性度量中最常用的方法之一。 启发式评估也称为经验性评估，主要是邀请可用性度量专家根据自身的实践积累和经验，在通过用户界面可用性指南、标准和人机交互界面设计原则的基础上，对测试的界面进行可用性度量。启发式评估也是可用性度量的方法之一，这样的度量方法直接、简单、易行，但是缺乏精度，适用于界面设计的中前期。 认知过程浏览是通过邀请其他设计者和用户共同浏览并分析界面的典型任务和操作过程，从而发现可用性问题并提出改进意见的一种方法。认知过程浏览适用于界面设计的初级阶段，当具备了界面设计的详细说明后，可以采用认知过程浏览方法进行可用性度量。 用户访谈是一种探究式的可用性度量方法，在界面设计的前期，通过用户访谈了解用户的需求和期望值，在界面设计的中后期通过用户访谈了解用户对于设计的看法，对界面的设计进行增删改查，在用户完成测试任务后再进行访谈，这样目标性更强，容易挖掘出更多的问题。 行为分析是用来发现人机交互中可用性问题的可用性度量方法，一般是将用户的操作过程分解成连续的基本动作，再根据交互设计原则确定评价标准，然后与用户测试过程进行对比分析，发现存在的问题。行为分析法既适用于界面设计中的原型，也适用于已经成型的用户界面。行为分析法可以帮助分析功能完成过程的步骤与完成时间的关系。 3.2认 知 过 程 图3.1人的信息处理过程 用户使用用户界面的过程实际上是对界面所提供的信息进行加工处理的过程。如图3.1所示，用户接收到界面颜色、光、声音的刺激，通过视觉、听觉、触觉等感知系统产生感觉，形成对信息的第一印象和最初理解，这是了解信息存在的阶段； 感觉到的信息经过人脑的处理，主要是用户判断这些信息是否存在于记忆中，与记忆中的信息进行比对，产生知觉，这是了解信息种类的阶段； 最后通过感觉和知觉获取到的信息在大脑里建立信息的概念，就是用户认识信息的阶段。用户对于用户界面的认知经过感觉、知觉和认识三个阶段，其中，感觉阶段涉及的是用户的认知生理，知觉和认识阶段涉及的是用户认知心理。 人们对任何事物的了解都是从感觉开始的，感觉是一切复杂心理活动的前提和基础，在人的各种活动过程中起着极其重要的作用。人的感觉包括视觉、听觉、触觉、嗅觉、味觉、运动觉等。 1. 视觉 视觉是人类最重要的感觉，外界80%的信息都是通过视觉获得的。视觉的感觉器官是眼球，是直径为21~25mm的球体，是人类认识活动中最有效的器官，光线通过瞳孔进入眼中，经过晶状体聚焦到视网膜上，眼睛的焦距是依靠眼部周围肌肉调整晶状体的曲率实现的。眼睛成像原理如图3.2所示。 图3.2眼睛成像原理 由于外界80%的信息都是通过视觉获得，所以视觉显示界面是人机交互中最常见的用户界面，基于用户视觉心理的界面设计成为用户界面设计的一项重要研究课题。在用户界面设计中，设计人员要充分了解并掌握视觉心理对用户的影响，遵循接近性原则、闭合性原则、联想性原则、连续性原则进行视觉上的界面设计。 接近性原则是考虑用户在视觉信息认知时，习惯找寻不同视觉元素之间的关系，往往会根据视觉元素的颜色、位置等将其进行分类，因此设计人员要根据设计的要求将同种类型的视觉信息聚集到一起，便于用户更快地熟悉界面。 图3.3计算器 闭合性原则是指把某个局部元素认定成一个整体且闭合的图形趋势。在界面设计中，不完整的视觉元素传递是无法获得用户认可的，因此视觉元素要构成一个有机联合的整体，每一个部分不能单独存在，单独的视觉元素除了占据有限的空间外，还影响界面设计的整体性。如早期的计算器操作界面就不具备闭合性原则，这样的计算器无法进行复杂的运算，也无法保存数据，如图3.3所示。 联想性原则是考虑用户在进行视觉信息收集时，会自动把某个区域的元素联想为一个相近的图形，在界面设计时，可以采用相近的视觉元素来进行图标的设计。运用人类视觉信息收集的联想，在设计界面图标时，不用担心用户是否知道图标的含义。如看到齿轮的图标，用户会联想到这是“设置”功能，产生这样联想的原因除了齿轮在实际生活中扮演设置的工具外，目前很多界面都使用这样的图标表示“设置”，易于理解和联想。如图3.4所示是生活中的齿轮，图3.5为界面中使用到的齿轮图标。 图3.4生活中的齿轮 图3.5界面中的齿轮图标 连续性原则是考虑在用户的视觉认知的观念里倾向于把元素组成连续轮廓或者重复的图形，人们认为视觉元素不是单独存在的，每个视觉元素之间都有一定的联系，所以在界面设计中，会有布局这样的概念。如在苹果的手机界面中，如图3.6所示，每一个应用程序的图标都不是散列摆放的，基本上都是处于对齐放置，这样的摆放方式会让用户看起来非常舒适自然。很少会有操作系统或是网页的界面会将视觉元素随机摆放。如图3.7所示是支付宝用户界面，也是考虑了连续性原则。 图3.6苹果手机界面 图3.7支付宝用户界面 2. 听觉 图3.8耳朵 听觉也是人类重要的感觉，耳朵是听觉信息的接收 器，如图3.8所示耳朵把外部声波翻译成大脑内部的语言，完成信息的听觉传递。外界的声音通过外耳道传递到鼓膜，当声波撞击鼓膜时，引起鼓膜的振动，之后经过由鼓室中锤骨、砧骨、镫骨三块听小骨以及与其相连的听小肌构成的杠杆系统传递，引起耳蜗中淋巴液及其底膜的振动，使底膜的毛细胞产生兴奋，声波在此处转变为听神经纤维上的神经冲动，并对声音进行编码最后传递到大脑皮层，产生听觉。 由于人类接收的信息中很大一部分是从听觉系统获得的，所以对于用户界面而言，利用用户的听觉感知系统向用户传递提示信息、输出警告等是设计中不可或缺的一个部分。在界面设计中使用到的声音可分为语音和非语音，语音是具体的语言交流，主要显示信息的内容； 非语音主要是对交互信息进行及时的反馈，如12306网站刷到票后会有一声火车的鸣笛声，Windows操作系统的回收站清空时是倒垃圾的声音表示正在清空回收站。语音的交互除了在输出方面，随着计算机技术的发展，语音识别技术日益成熟，很多软件系统的输入也采用了语音输入，如搜狗输入法、讯飞输入法可以用语音输入文字。 3. 触觉 触觉也是人类的重要感知。触觉的生理基础来源于外界对皮肤和皮下组织的触觉感受器所施加的机械刺激。在界面设计中，充分利用用户的触觉感知系统传递信息，如单击界面上的控件时，鼠标左键会按下然后抬起，表示单击了这个控件。如果用户没有在鼠标的左键上有这样的感受，操作有可能失败。用户可以通过触觉来判断操作是否顺利进行。 目前计算机行业飞速发展，和用户进行接触，并让用户产生触觉的交互设备除了鼠标、键盘外，手机屏幕、虚拟现实设备的手柄都可以成为与系统交互的设备。如用户可通过滑动手机屏幕来进行屏幕解锁等操作，如图3.9所示。用户也可以使用手柄来模拟乒乓球拍，在虚拟现实中进行乒乓球游戏。 图3.9滑动解锁界面 3.3界面设计的基本原则 1. 以用户为中心原则 首先，界面的设计必须要以用户的需求来确定，要最大限度地实现用户所要求的功能，界面的设计不能由功能流程和硬件设施的限制来推动； 其次，要让用户参与设计，参与界面中各项决策环节，界面设计的每个阶段都需要用户的参与。 2. 一致性原则 界面设计中的一致性包括宏观维度一致性、界面维度一致性、流程维度一致性、元素维度一致性。 宏观维度是站在整个产品角度而言的，界面设计风格是否与产品的风格定位一致。如产品的风格定位是商业的邮件收发系统，那么界面设计的风格应该简洁大方，而不是色彩丰富； 还要考虑界面设计是否符合产品的商业维度，如产品是免费的文献查阅网站，通过文献下载收费来盈利，那么在整个页面设计中要引导用户去消费，与产品在商业维度上保持一致性。 界面维度是站在界面角度而言的，指的是界面的风格、界面布局、聚焦方式是否一致，视觉设计中的视觉效果、色彩搭配、关键信息传递能力与意义表达是否一致。从整个界面角度看上去，保持一致性。 流程维度是站在整个与用户交互流程角度而言的。在人与界面的交互流程中，用户是否感到自然、容易理解以及便于记忆，交互流程要符合用户思维模式，与用户的认知过程一致。如在交互中，确认操作的对话框中至少要包含确认和取消两个控件，如果只有一个，则不符合用户的交互习惯。 元素维度是站在界面中控件的角度而言的，整个界面维度的一致性要由元素维度的一致性来保证。对于界面中的交互控件，以用户的视觉感知规律为依据，统一元素风格，无论是按钮还是下拉菜单都需要统一，对于界面用词也要统一，如“确定”还是“确认”。 界面的一致性原则不仅能使界面看上去有亲和力，也能使得整个产品项目取得良好的效果。 3. 简单可用原则 一个复杂的操作界面会使得原本有限的布局空间更加拥挤，复杂的操作流程会增加用户使用界面的压力，因此用户界面设计时要遵循简单可用原则，从降低用户视觉干扰和精简操作流程两个方面来设计界面。 界面中大量的视觉干扰会对一个感觉很复杂的界面造成影响，当界面中显示的文字或图片信息远远大于用户需要时，会增加用户阅读的负担，使得用户产生抵触感，从而放弃使用界面。为了帮助用户能在短时间内找到关键信息和功能，界面设计时应精简文字，将图文信息合理分类，通过合理的布局和版式设计，让用户迅速获得界面所传达的信息，减少用户的视觉负担。如图3.10所示是百度Echarts界面，布局精简，能够缩短用户寻找关键信息的时间。在大多数的新闻门户中，文字多是一个比较明显的特点，如新浪网等，如图3.11所示。 图3.10Echarts界面 图3.11新浪首页 界面复杂的操作流程会增加用户思考的时间，也会增加用户的记忆负担，需要花大量的记忆和时间去熟悉界面的交互流程。因此界面设计需要精简操作流程，使得操作更具有目的性，让用户可以在极短时间内完成目标所需要执行的操作，尽可能将操作数量降到最少，保证用户与界面交互时的舒适感和流畅感。 4. 用户记忆最小化 由于用户是在记忆的帮助下来学习界面的使用，所以一个设计优良的用户界面，能合理运用人类的再认与再忆，减少用户短期记忆的负担。界面可以通过提供可视化的交互方式，使得用户能够识别过去的动作、输入和结果，减轻用户的认知负担； 保持用户操作行为和操作结果的一致，对用户的操作及时给出反馈； 图标和图像的表达应该基于现实事件，是现实世界事物的象征，减少用户记忆和学习的时间； 界面设计时要考虑是否需要帮助用户记住重要信息，如用户输入登录用户名和密码时，可以提示用户是否需要记住密码，以减少用户的记忆负担，如图3.12所示。 图3.12记住密码 5. 具有较强的容错功能 考虑用户在认知过程中的易出错性，界面需要具有较强的容错功能。有良好容错性的界面会预判用户容易出现错误的地方，并在这些地方给予用户提示和解决办法来引导用户，保证用户在错误操作之后还能按照一定方式完成任务。如微软公司的Office办公软件有词法、语法、句法等错误提示及修改功能。 界面设计中除了要考虑有错误提示和引导正确操作以外，还要考虑帮助功能，帮助用户学习如何使用和操作界面，从而实现软件系统的功能，避免用户自己摸索遇到难以解决的问题。以王者荣耀游戏为例，一个新用户进入游戏时，会有操作说明和提醒，更直观地将操作展示给用户，让用户快速上手。如图3.13所示是王者荣耀的新手教程界面。 图3.13王者荣耀新手教程 习题 1. 用户界面在可用性方面要具备哪些目标？ 2. 什么是可用性度量？它的目的是什么？ 3. 对于中后期的界面评估，应该选择哪些评估方法？ 4. 请通过一个详细的例子说明为什么用户使用界面的过程就是对界面信息进行加工的过程。 5. 人的认知过程有哪些阶段？ 6. 考虑用户的视觉特性，在用户界面设计中要遵循哪些原则？ 7. 请简单阐述用户界面设计的基本原则。 8. 为什么有的应用程序会有“记住密码”的选项？请从设计原则方向进行阐述。 9. 界面设计是否美观是最重要的？