《用户界面设计概述》由会员分享，可在线阅读，更多相关《用户界面设计概述（66页珍藏版）》请在金锄头文库上搜索。
1、用户界面设计概述上节回顾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 Interface）是一 个静态的术语。n用户界面设计（User Interface Design）关心的是用户界面本身的 组件、布局和风格，以有效支撑
2、交 互设计的需求。界面设计与交互设计n狭义上，用户界面设计是交互设计 的重要组成部分，交互设计不只是 用户界面设计。n存在没有用户界面的交互设计n广义上，用户界面设计包括概念设 计、交互设计和外观设计。2.1.1 用户界面设计的定义n确定交互设计的过程，以获得描述并传 达交互行为的有效形式，称为“用户界 面设计” n交互行为决定用户界面设计的约束条件n界面上的组件必须为交互行为服务，可以对 界面进行美化、抽象，甚至艺术化，但不能 破坏交互行为 2.1.2 用户界面设计的约束条 件n交互方式n界面空间的尺寸n屏幕分辨率n兼容性（操作系统、浏览器）n硬件n网络带宽n2.1.3 用户界面设计的内容n
3、概念设计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自以为是典型用户用户/设计师的交互模型工程师 设计师用 户构 思接触 新产品界面形式联 想诱导行为判断行为一 致经验与需求设计
4、目标是否好的设计误导/不满 意的设计用户的特征n界面风格n儿童n老人n界面内容的用词n一本正经n诙谐幽默n界面的工作方式n手机/PDAn电脑n地域、文化和语言用户的两种阅读方式用户的角色n界面设计的需求分析以用户为中心，具 有很大的主观性n从用户自身特征开始，划分用户群，引 出用户角色的概念n按照一定参考体系划分用户的类型，代表一 定的用户特征，描述用户个体的集合用户的行为模型n用户行为模型也称为“用户任务模型”n人机交互的行为模型（4个阶段）n确定目标，形成意图n指定动作，执行动作n领会系统状态，解释系统状态n评价结果 目标计划实施评价用户行为模型示例（攒机）序号任务名行为阶段存在问题改进建
5、议 1准备目的：准备部件 计划：打开各部件包装零部件较多 实施：打开包装确定连接关系 评价： 异常场景： 2组装目的： 计划： 实施：打开机箱、固定主板、连接开关电 源线、固定光驱硬盘、插入扩展卡和内存 条等、盖上机箱开关电源线 路连接复杂评价： 异常场景： 3使用目的：测试机器组装结果 计划：加电开机运行 实施：连接电源线、按下主机开关、查看 界面提示信息 评价： 异常场景：用户的需求分析n用户对计算机系统的要求n用户对计算机系统的期望n用户在技能方面的使用要求n用户在习惯方面的使用要求n用户在经验方面的使用要求2.1.3.2 交互设计n交互概念n交互设计概念n交互设计方法使用与交互n“使用
6、”，人发出的主观行为，作用于 客观对象的关系n人主导n客观对象辅助 n“交互”，参与的双方对等，没有主从 之分n交互，是用户（服务使用者）与系统（ 服务提供者）之间的交换信息的过程。交互设计n交互设计（Interaction Design）n关注交互，特别是用户体验，的一门学科n诞生于20世纪八十年代n1984年，由IDEO的联合创始人 Bill Moggridge首次提出。n开始称为“软面（Soft Face）”n后来更名为交互设计交互设计n交互设计是人工产品、环境和系统 的行为、以及传达这种行为的外观 元素的设计和定义。(Alan Cooper)n交互设计首先规划和描述事物的行为 方式n然
7、后描述传达这种行为的有效形式交互设计的定义n交互设计，是指设计师对产品及其使用 者之间的互动机制进行分析、预测、定 义、规划、描述和探索的过程。n简单地说，交互设计是设计产品交互方式的 过程。n具体地说，交互设计是设计和定义使用者如 何使用产品完成某一任务的过程。交互设计的特点n交互设计是关于如何创建新的、有效的 用户体验的问题；n交互设计注重产品与用户行为的交互以 及交互的过程；n交互设计可以增强和扩展人们通信及交 互的方式，提高产品的可用性； 可用性 vs. 交互设计n可用性(Usability)是交互设计的基本而重要 的指标n对可用程度的总体评价n从用户角度衡量产品是否易学、好记、有效、
8、高效 、安全、少错的质量指标n交互设计(Interaction Design)的不仅要考虑 可用性，还要考虑用户的期望和体验。n可用性保证产品可用，基本功能完备且方便；n用户体验提供给用户与众不同的或意想之外的感觉 。交互设计的内容n定义与“产品的行为和使用”密切相关 的产品形式n预测产品的使用如何影响产品与用户的 关系，以及用户对产品的理解 n探索系统、人和环境（物质、文化和历 史）之间的有效对话方式交互设计的目的n通过对产品的界面和行为进行交互 设计，在产品和用户之间建立有机 关系，从而有效达到用户的目标。n交互设计是一种关于“如何让产品 易用、有效，从而令人愉悦”的技 术，它致力于：n了
9、解用户的目标及期望n了解用户的交互行为n了解“人”本身的心理和行为特点n了解各种有效的交互方式，并对其进 行增强和扩展交互设计的关键特征n以用户为中心n让用户参与整个设计和评估的过程n可用性标准的特殊性n开始就明确可用性目标和用户体验目 标n迭代设计n在迭代中改进设计交互设计的4个基本活动n用户需求分析n了解目标用户n设计交互方案n让用户参与方案设计n构建设计的交互式版本n给出设计的交互式版本n可能只是个线框图，未必能够真正运行n设计评估n评估设计版本的可用性，用户能否接受交互设计的工作流程n产品定位与市场分析n由新产品研发部门以及市场确定需求n设计师了解产品的市场定位、产品定义、客户群体 、
10、运营方式等n用户研究与分析n非常重要，团队配合完成n设计师搜集相关资料，分析目标用户的使用特征、 情感、习惯、心里、需求等，提出用户研究报告和 可用性设计建议。n架构设计n确定界面交互与流程的设计n制定交互方式、操作与跳转流程、结构、布局、信 息和其他界面元素交互设计的工作流程（Cont.）n原型设计n阶段性标志n“手绘图形FLASH视频”n原型的本质是一个DEMO，无需全部功能，但要体现 出设计对象的基本特性n外观设计n结合经过反复讨论过的分析结果进行n色调、风格、窗口、图标、皮肤的表现是关键n界面输出n设计师配合开发人员完成界面整合n完善工作n多部门协作参与n可用性研究、测试回馈，以及可行
11、性建议的完善交互设计的基本方法n结构图法n对产品信息架构的设计方法n自然语言法n对产品交互过程细节的设计方法n任务走查法n对整个产品的审查和优化方法结构图法n抛开界面细节，只考虑信息的组织形式n操作步骤n明确描述全部内容，总结产品所需要表达的 所有信息n画出信息的树状结构图n在纸上画出各界面的草图。草图包含：页面 标题、导航、重要的链接和按钮n模拟演示界面的操作行为 自然语言法n设计界面交互细节的方法n界面表达的要求n清晰，明确，简洁，得体n使用自然的语言表达界面的信息n用面对面的交流来传达信息n将面对面的传达转变为书面表达n再用界面语言翻译书面表达任务走查法n以用户任务为线索，以可用性准则
12、为依据的主观评估 n操作步骤n分析并总结所有用户任务n根据用户任务进行可用性评估 交互设计的原则n用户控制界面。“下一步”、“完成”，面对不同层 次提供多种选择，给不同层次的用户提供多种可能性 。n允许工作中断。例如用手机写新短信的时候，收到短 信或电话，完成后回来仍能够找到刚才正写的新短信 。n方便退出。如手机的退出，是按一个键完全退出，还 是一层一层的退出。尽量提供两种可能性。n导航功能。随时转移功能，很容易从一个功能跳到另 外一个功能。n快速反馈。给用户心理上的暗示，避免用户焦急。n使用用户的语言，而非技术的语言。n清楚的错误提示。误操作后，系统提供有针对性的提 示。n允许兼用鼠标和键盘
13、。同一种功能，同时可以使用鼠 标和键盘，并提供多种实现可能性。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进一步确
14、认的输入和删除n已输入的数据假删除n对致命错误，给出警告并退出n对不可信的数据输入，给出提示信息，并提 供修改的机会，但不必退出数据输入设计的方法(续)n提供反馈n提示有效的输入格式或数值范围n用户能够查看已输入的内容n按用户速度输入和自动格式化n用户能控制数据输入的速度n能接受用户输入的空格，并进行格式化n允许编辑n用户输入后允许再编辑，且采用风格一致的 编辑界面屏幕显示设计n屏幕显示设计要引导用户注意到最重要 的信息n布局(Layout)n文字用语(Message)n颜色(Color)屏幕布局n因功能不同而侧重点不同n重点突出功能区文字用语n设计标题n正文n提示信息n控制命令文字用语注意事
15、项n用语简洁性n避免使用专业术语n尽量用肯定句，而不要用否定句n用主动语态，而不用被动语态n用礼貌而不过分的强调语句n对不同的用户，用语结合心理学原则n英文词语尽量避免缩写n在按钮、功能键的标示中尽量使用描述操作的动词文字用语注意事项(续)n格式n一屏幕的文字不要太多n同行文字字型统一，可以给关键词粗体、变体等特 殊处理n英文词语尽量采用小写和易认的字体（标题除外）n信息内容n信息内容显示简洁清楚，尽量不左右滚屏n内容较多时以空白分段或以小窗口分块n重要字段可用粗体和闪烁吸引注意力和强化颜色n有效的强化手段n具有美学价值颜色注意事项n一屏不超过4或5种，最多7种。可用不同 层次及形状来配合颜色
16、，增加变化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界面的协调一致。如手机界面按钮排放 ，左键肯定；右键否定；
