用户界面设计概述.ppt

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