第二章用户界面设计概述

用户界面设计概述上节回顾基本概念人机交互人机交互系统人机交互方式讨论界面设计的内涵界面结构界面布局界面风格界面色彩……界面交互内容概述用户界面设计概念设计交互设计数据输入设计数据输出显示设计控制设计外观（视觉）设计用户/任务分析用户界面的软件开发过程用户界面的标准化2.1.用户界面设计用户界面是一个静态的名词，用户界面设计关心的是用户界面本身的组件、布局和风格，以保障能够有效支撑交互设计的需求。狭义上，用户界面设计是交互设计的重要组成部分，交互设计不只是用户界面设计。存在没有用户界面的交互设计广义上，用户界面设计包括概念设计、交互设计和外观设计。2.1.1用户界面设计的定义确定交互设计，描述并传达交互行为的有效形式，称为“用户界面设计（UserInterfaceDesign）”交互行为决定用户界面设计的约束条件界面上的组件是为交互行为服务的，可以对用户界面进行美化、抽象，甚至艺术化，但不能破坏交互行为2.1.2用户界面设计的约束条件交互方式界面空间的尺寸浏览器的不兼容性屏幕分辨率硬件级网络带宽等2.1.3用户界面设计的内容概念设计认知与抽象交互设计交互方式外观（视觉）设计组件外观2.2.1交互“使用”，从人类发出的主观行为，作用于客观对象的一种关系人为主导客观对象为辅助“交互”，参与的双方对等，没有主从之分交互，是用户（服务使用者）与系统（服务提供者）之间的交换信息的过程。2.2.2交互设计交互设计（InteractionDesign）一门关注交互，特别是用户体验的学科诞生于20世纪八十年代1984年，由IDEO的创始人之一比尔•莫格里奇首次提出。开始称为“软面（SoftFace）”后来更名为交互设计交互设计交互设计是人工产品、环境和系统的行为，以及传达这种行为的外观元素的设计和定义。（AlanCooper）交互设计首先规划和描述事物的行为的方式然后描述传达这种行为的最有效形式。交互设计（Cont.）交互设计的内容：定义与“产品的行为和使用”密切相关的产品形式预测产品的使用如何影响产品与用户的关系，以及用户对产品的理解探索系统、人和环境（物质、文化和历史）之间的有效对话方式交互设计（Cont.）交互设计就是设计产品交互方式的过程具体地说，交互设计是关于如何创建新的、有效的用户体验的问题；交互设计目的是增强和扩展人们工作、通信及交互的方式。交互设计的定义交互设计，是指设计师对产品及其使用者之间的互动机制进行分析、预测、定义、规划、描述和探索的过程。交互设计是设计和定义使用者如何使用产品并达到其完成某一任务的目标的过程。通过对界面和操作行为的设计以提高产品的可用性。交互设计的目的交互设计目的通过对产品的界面和行为进行交互设计，在产品和用户之间建立有机关系，从而有效达到用户的目标。交互设计是一种关于“如何让产品易用、有效，从而令人愉悦”的技术，它致力于：了解用户目标及其期望了解用户的交互行为了解“人”本身的心理和行为特点了解各种有效的交互方式，并对其进行增强和扩展交互设计的关键特征以用户为中心让用户参与整个设计和评估的过程可用性标准的特殊性开始就明确可用性目标和用户体验目标迭代在迭代中改进设计交互设计的4个基本活动用户需求分析了解目标用户设计交互方案让用户参与方案设计构建设计的交互式版本给出设计的交互式版本可能只是个线框图，未必能够真正运行设计评估评估设计版本的可用性，用户能否接受交互设计的工作流程产品定位与市场分析由新产品研发部门以及市场确定需求设计师了解产品的市场定位、产品定义、客户群体、运营方式等用户研究与分析非常重要，团队配合完成设计师搜集相关资料，分析目标用户的使用特征、情感、习惯、心里、需求等，提出用户研究报告和可用性设计建议。架构设计确定界面交互与流程的设计制定交互方式、操作与跳转流程、结构、布局、信息和其他界面元素交互设计的工作流程（Cont.）原型设计阶段性标志对上述设计工作的实施，“手绘－图形－FLASH-视频”原型的本质是一个DEMO，无需全部功能，但要体现出设计对象的基本特性界面设计结合经过反复讨论过的分析结果进行色调、风格、界面、窗口、图标、皮肤的表现是本环节的关键。界面输出设计师配合开发人员完成相关的界面整合完善工作多部门协作参与可用性的研究、用户体验回馈、测试回馈，以及可行性建议的完善交互设计的基本方法结构图法对产品信息架构的设计方法自然语言法对产品交互过程细节的设计方法任务走查法对整个产品的审查和优化方法结构图法抛开界面细节，只考虑信息的组织形式操作步骤明确描述全部内容，总结产品所需要表达的所有信息画出信息的树状结构图在纸上画出各界面的草图。草图包含的关键元素：页面标题、导航、重要的链接和按钮模拟演示界面的操作行为自然语言法设计界面交互细节的方法界面表达的要求清晰，明确，简洁，得体使用自然的语言表达界面的信息用面对面的交流来传达信息将面对面的传达转变为书面表达再用界面语言翻译书面表达任务走查法以用户任务为线索，以可用性准则为依据的主观评估操作步骤分析并总结所有用户任务根据用户任务进行可用性评估可用性vs.交互设计可用性(Usability)是交互设计的基本而重要的指标对可用程度的总体评价从用户角度衡量产品是否易学、好记、有效、高效、安全、少错的质量指标交互设计(InteractionDesign)的不仅要考虑可用性，还要考虑用户的期望和体验。可用性保证产品可用，基本功能完备且方便；用户体验提供给用户与众不同的或意想之外的感觉。2.3.1数据输入界面设计数据输入界面耗费用户的大部分时间计算机系统中最易出错的部分数据输入界面设计的总目标简化用户的输入，尽可能采用自动输入降低输入出错率，尽可能给用户提供选择容忍用户的错误，提供必要的验证反馈数据输入设计的方法减轻用户记忆，尽可能采用列表选择设置默认值自动填入用户已输入过的内容使界面具有预见性和一致性用户控制数据输入顺序采用与系统环境(如Windows)风格一致的数据输入界面数据输入设计的方法(续)防止用户出错需要确认的输入和删除明确的移动明确的取消已输入的数据假删除对致命错误，给出警告并退出对不可信的数据输入，给出提示信息，不必停止数据输入设计的方法(续)提供反馈提示有效的输入格式或数值范围用户能够查看已输入的内容按用户速度输入和自动格式化用户能控制数据输入的速度能接受用户输入的空格，并进行自动格式化允许编辑用户输入后允许再编辑，且采用风格一致的编辑界面2.3.2屏幕显示设计屏幕显示设计要引导用户注意到最重要的信息布局(Layout)文字用语(Message)颜色(Color)屏幕布局因功能不同而侧重点不同重点突出功能区文字用语设计标题正文提示信息控制命令文字用语注意事项用语简洁性避免使用专业术语尽量用肯定句，而不要用否定句用主动语态，而不用被动语态用礼貌而不过分的强调语句对不同的用户，用语结合心理学原则英文词语尽量避免缩写在按钮、功能键的标示中尽量使用描述操作的动词文字用语注意事项(续)格式一屏幕的文字不要太多同行文字字型统一，可以给关键词粗体、变体等特殊处理英文词语尽量采用小写和易认的字体（标题除外）信息内容信息内容显示简洁清楚，尽量不左右滚屏内容较多时以空白分段或以小窗口分块重要字段可用粗体和闪烁吸引注意力和强化颜色一种有效的强化手段具有美学价值颜色注意事项一屏不超过4或5种，最多7种。可用不同层次及形状来配合颜色，增加变化焦点对象颜色鲜明，非焦点对象暗淡前景色鲜艳，背景色暗淡避免不兼容的颜色在一起（对比除外）用颜色表示某种信息或对象属性，要保证用户懂得这种表示，符合用户的文化背景2.3.3控制设计用户主导控制，提供防“呆”的操作方式控制界面设计的主要任务设计控制会话窗口、菜单、功能键、图标、命令语言和自然语言等界面组件控制设计注意事项清晰明确的动作指令必要的状态信息和反馈信息按照用户的步调和主导性设计交互一个功能对应一个命令2.4用户分析用户分类内向型、外向型；感知型、直觉型；程序员、非程序员；2.4.1用户特征用户界面风格儿童老人界面内容的用词一本正经诙谐幽默界面的工作方式手机/PDA电脑地域、文化和语言用户的两种阅读方式2.4.2用户角色界面设计的需求分析以用户为中心，具有很大的主观性从用户自身特征开始，划分用户群，引出用户角色的概念按照一定参考体系划分用户的类型，代表一定的用户特征，描述用户个体的集合2.4.3用户行为模型用户行为模型也称为“用户任务模型”人机交互的行为模型（4个阶段）确定目标，形成意图指定动作，执行动作领会系统状态，解释系统状态评价结果目标计划实施评价用户行为模型示例（攒机）序号任务名行为阶段存在问题改进建议1准备目的：准备部件计划：打开各部件包装零部件较多实施：打开包装确定连接关系评价：异常场景：2组装目的：计划：实施：打开机箱、固定主板、连接开关电源线、固定光驱硬盘、插入扩展卡和内存条等、盖上机箱开关电源线路连接比较复杂评价：异常场景：3使用目的：测试机器组装结果计划：加电开机运行实施：连接电源线、按下主机开关、查看界面提示信息评价：异常场景：2.4.4用户vs.设计师用户约束客观规律实际意义文化差异思维逻辑社会环境设计师约束设计时间个性要求工作压力面向不同的用户自以为是典型用户用户/设计师的交互模型工程师设计师用户构思接触新产品界面形式联想诱导行为判断行为一致经验与需求设计目标是否好的设计误导/不满意的设计2.5用户界面的开发过程开发用户界面友好的应用系统功能分析设计界面分析设计用户界面的开发过程定义阶段可行性分析需求分析分析设计阶段界面设计用户验证构造阶段界面实现测试评价维护阶段2.5.1需求阶段用户行为用户生理、心理、经验、环境全过程用户体验2.5.2分析设计阶段商业目标、用户目标、设计目标界面原型文字图形纸上原型软件DEMO2.5.3构造阶段概念设计详细设计界面编码综合测试与评价2.5.4维护阶段改正性维护，诊断和改正系统/界面错误适应性维护，修改系统/界面以适应环境变化完善性维护，根据用户的要求改进或扩展系统/界面预防性维护，为将来的维护活动预先修改系统/界面2.6.界面的标准化标准化的目的用户界面的开发工作量很大，标准化可以大大减少低水平的重复劳动；标准化可以提高用户界面的质量2.6.1窗口系统标准化窗口系统控制位映射显示器和输入设备的系统软件管理屏幕、窗口、字体、光标、图像资源和输入设备X窗口系统标准-MSWindows平台图形用户界面OSF/Motif2.6.2用户界面设计的其他问题响应时间及显示速率屏幕设计标题区、菜单区、工作区、消息区色彩信息提示联机帮助出错处理