用户界面设计概述.ppt

《用户界面设计概述.ppt》由会员分享，可在线阅读，更多相关《用户界面设计概述.ppt（66页珍藏版）》请在三一办公上搜索。

1、用户界面设计概述,上节回顾,基本概念人机交互人机交互系统人机交互方式,讨论,界面设计的内涵界面结构界面布局界面风格界面色彩界面交互,内容概述,用户界面设计概念（结构）设计(Conceptual Design)交互设计(Interactive Design)数据输入设计数据输出显示设计控制设计视觉（外观）设计(Visual Design)用户界面的软件开发过程用户界面的标准化,2.1.用户界面设计,用户界面（User Interface）是一个静态的术语。用户界面设计（User Interface Design）关心的是用户界面本身的组件、布局和风格，以有效支撑交互设计的需求。,界面设计与交互设

2、计,狭义上，用户界面设计是交互设计的重要组成部分，交互设计不只是用户界面设计。存在没有用户界面的交互设计广义上，用户界面设计包括概念设计、交互设计和外观设计。,2.1.1 用户界面设计的定义,确定交互设计的过程，以获得描述并传达交互行为的有效形式，称为“用户界面设计”交互行为决定用户界面设计的约束条件界面上的组件必须为交互行为服务，可以对界面进行美化、抽象，甚至艺术化，但不能破坏交互行为,2.1.2 用户界面设计的约束条件,交互方式界面空间的尺寸屏幕分辨率兼容性（操作系统、浏览器）硬件网络带宽,2.1.3 用户界面设计的内容,概念设计认知与抽象的整体架构交互设计人机交互方式外观（视觉）设计愉悦

3、的颜色、字体和风格等,2.1.3.1 概念设计,通过对用户和任务的分析，制定出产品的整体架构。目录体系的逻辑分类和术语定义。基于纸质的线框图。,用户分析,用户的分类内向型、外向型；感知型、直觉型；程序员、非程序员；偶然用户、间歇式用户、经常用户；,用户 vs.设计师,用户约束客观规律实际意义文化差异思维逻辑社会环境,设计师约束设计时间个性要求工作压力面向不同的用户自以为是典型用户,用户/设计师的交互模型,用户的特征,界面风格儿童老人界面内容的用词一本正经诙谐幽默界面的工作方式手机/PDA电脑地域、文化和语言,用户的两种阅读方式,用户的角色,界面设计的需求分析以用户为中心，具有很大的主观性从用户

4、自身特征开始，划分用户群，引出用户角色的概念按照一定参考体系划分用户的类型，代表一定的用户特征，描述用户个体的集合,用户的行为模型,用户行为模型也称为“用户任务模型”人机交互的行为模型（4个阶段）确定目标，形成意图指定动作，执行动作领会系统状态，解释系统状态评价结果,用户行为模型示例（攒机）,用户的需求分析,用户对计算机系统的要求用户对计算机系统的期望用户在技能方面的使用要求用户在习惯方面的使用要求用户在经验方面的使用要求,2.1.3.2 交互设计,交互概念交互设计概念交互设计方法,使用与交互,“使用”，人发出的主观行为，作用于客观对象的关系人主导客观对象辅助“交互”，参与的双方对等，没有主从

5、之分交互，是用户（服务使用者）与系统（服务提供者）之间的交换信息的过程。,交互设计,交互设计（Interaction Design）关注交互，特别是用户体验，的一门学科诞生于20世纪八十年代1984年，由IDEO的联合创始人BillMoggridge首次提出。开始称为“软面（Soft Face）”后来更名为交互设计,交互设计,交互设计是人工产品、环境和系统的行为、以及传达这种行为的外观元素的设计和定义。(Alan Cooper)交互设计首先规划和描述事物的行为方式然后描述传达这种行为的有效形式,交互设计的定义,交互设计，是指设计师对产品及其使用者之间的互动机制进行分析、预测、定义、规划、描述和

6、探索的过程。简单地说，交互设计是设计产品交互方式的过程。具体地说，交互设计是设计和定义使用者如何使用产品完成某一任务的过程。,交互设计的特点,交互设计是关于如何创建新的、有效的用户体验的问题；交互设计注重产品与用户行为的交互以及交互的过程；交互设计可以增强和扩展人们通信及交互的方式，提高产品的可用性；,可用性 vs.交互设计,可用性(Usability)是交互设计的基本而重要的指标对可用程度的总体评价从用户角度衡量产品是否易学、好记、有效、高效、安全、少错的质量指标交互设计(Interaction Design)的不仅要考虑可用性，还要考虑用户的期望和体验。可用性保证产品可用，基本功能完备且方

7、便；用户体验提供给用户与众不同的或意想之外的感觉。,交互设计的内容,定义与“产品的行为和使用”密切相关的产品形式预测产品的使用如何影响产品与用户的关系，以及用户对产品的理解 探索系统、人和环境（物质、文化和历史）之间的有效对话方式,交互设计的目的,通过对产品的界面和行为进行交互设计，在产品和用户之间建立有机关系，从而有效达到用户的目标。,交互设计是一种关于“如何让产品易用、有效，从而令人愉悦”的技术，它致力于：了解用户的目标及期望了解用户的交互行为了解“人”本身的心理和行为特点了解各种有效的交互方式，并对其进行增强和扩展,交互设计的关键特征,以用户为中心让用户参与整个设计和评估的过程可用性标准

8、的特殊性开始就明确可用性目标和用户体验目标迭代设计在迭代中改进设计,交互设计的4个基本活动,用户需求分析了解目标用户设计交互方案让用户参与方案设计构建设计的交互式版本给出设计的交互式版本可能只是个线框图，未必能够真正运行设计评估评估设计版本的可用性，用户能否接受,交互设计的工作流程,产品定位与市场分析由新产品研发部门以及市场确定需求设计师了解产品的市场定位、产品定义、客户群体、运营方式等用户研究与分析非常重要，团队配合完成设计师搜集相关资料，分析目标用户的使用特征、情感、习惯、心里、需求等，提出用户研究报告和可用性设计建议。架构设计确定界面交互与流程的设计制定交互方式、操作与跳转流程、结构、布

9、局、信息和其他界面元素,交互设计的工作流程（Cont.）,原型设计阶段性标志“手绘图形FLASH视频”原型的本质是一个DEMO，无需全部功能，但要体现出设计对象的基本特性外观设计结合经过反复讨论过的分析结果进行色调、风格、窗口、图标、皮肤的表现是关键界面输出设计师配合开发人员完成界面整合完善工作多部门协作参与可用性研究、测试回馈，以及可行性建议的完善,交互设计的基本方法,结构图法对产品信息架构的设计方法自然语言法对产品交互过程细节的设计方法任务走查法对整个产品的审查和优化方法,结构图法,抛开界面细节，只考虑信息的组织形式操作步骤明确描述全部内容，总结产品所需要表达的所有信息画出信息的树状结构图

10、在纸上画出各界面的草图。草图包含：页面标题、导航、重要的链接和按钮模拟演示界面的操作行为,自然语言法,设计界面交互细节的方法界面表达的要求清晰，明确，简洁，得体使用自然的语言表达界面的信息用面对面的交流来传达信息将面对面的传达转变为书面表达再用界面语言翻译书面表达,任务走查法,以用户任务为线索，以可用性准则为依据的主观评估 操作步骤分析并总结所有用户任务根据用户任务进行可用性评估,交互设计的原则,用户控制界面。“下一步”、“完成”，面对不同层次提供多种选择，给不同层次的用户提供多种可能性。允许工作中断。例如用手机写新短信的时候，收到短信或电话，完成后回来仍能够找到刚才正写的新短信。方便退出。如

11、手机的退出，是按一个键完全退出，还是一层一层的退出。尽量提供两种可能性。导航功能。随时转移功能，很容易从一个功能跳到另外一个功能。快速反馈。给用户心理上的暗示，避免用户焦急。使用用户的语言，而非技术的语言。清楚的错误提示。误操作后，系统提供有针对性的提示。允许兼用鼠标和键盘。同一种功能，同时可以使用鼠标和键盘，并提供多种实现可能性。,2.1.3.3 视觉设计,数据输入界面平面显示界面控制界面,数据输入界面设计,数据输入界面耗费用户的大部分时间计算机系统中最易出错的部分 数据输入界面设计的总目标简化用户输入，尽可能采用自动输入降低输入出错率，尽可能提供选择容忍用户错误，提供必要的验证反馈,数据输

12、入设计的方法,减轻用户记忆，采用列表选择设置默认值自动填入用户已输入过的内容使界面具有预见性和一致性用户控制数据输入顺序采用与系统环境(如Windows)风格一致的数据输入界面,数据输入设计的方法(续),防止用户出错明确的移动明确的取消进一步确认的输入和删除已输入的数据假删除对致命错误，给出警告并退出对不可信的数据输入，给出提示信息，并提供修改的机会，但不必退出,数据输入设计的方法(续),提供反馈提示有效的输入格式或数值范围用户能够查看已输入的内容按用户速度输入和自动格式化用户能控制数据输入的速度能接受用户输入的空格，并进行格式化允许编辑用户输入后允许再编辑，且采用风格一致的编辑界面,屏幕显示

13、设计,屏幕显示设计要引导用户注意到最重要的信息布局(Layout)文字用语(Message)颜色(Color),屏幕布局,因功能不同而侧重点不同重点突出功能区,文字用语,设计标题正文提示信息控制命令,文字用语注意事项,用语简洁性避免使用专业术语尽量用肯定句，而不要用否定句用主动语态，而不用被动语态用礼貌而不过分的强调语句对不同的用户，用语结合心理学原则英文词语尽量避免缩写在按钮、功能键的标示中尽量使用描述操作的动词,文字用语注意事项(续),格式一屏幕的文字不要太多同行文字字型统一，可以给关键词粗体、变体等特殊处理英文词语尽量采用小写和易认的字体（标题除外）信息内容信息内容显示简洁清楚，尽量不左

14、右滚屏内容较多时以空白分段或以小窗口分块重要字段可用粗体和闪烁吸引注意力和强化,颜色,有效的强化手段具有美学价值,颜色注意事项,一屏不超过4或5种，最多7种。可用不同层次及形状来配合颜色，增加变化焦点对象颜色鲜明，非焦点对象暗淡前景色鲜艳，背景色暗淡避免不兼容的颜色在一起（对比除外）用颜色表示某种信息，要保证用户懂得其涵义，符合用户的文化背景,控制界面设计,用户主导控制，提供防“呆”的操作方式,控制界面设计的主要任务设计控制会话窗口、菜单、功能键、图标、命令语言和自然语言等界面组件,控制界面设计的注意事项,清晰明确的动作指令必要的状态信息和反馈信息按照用户的步调和主导性设计交互一个功能对应一个

15、命令,视觉设计的原则,界面条理清晰；图片、文字的布局和隐喻不要让用户去猜。依赖认知而非记忆。如打印图标的记忆、下拉菜单列表中的选择。减少用户短期记忆的负担。让计算机帮助记忆，例：浏览器访问界面地址等。提供视觉线索。图形符号的视觉的刺激；GUI（图形界面设计）：Where,What,Next Step。提供默认（default）、撤销（undo）、恢复（redo）的功能。,视觉设计的原则（续）,尽量使用真实世界的隐喻，尊重用户以往的使用经验。如：图标设计。界面的协调一致。如手机界面按钮排放，左键肯定；右键否定；或按内容摆放。同样功能用同样的图标。色彩与内容。整体软件不超过5个色系，尽量少用红色、

16、绿色。相似的颜色表示近似的意思。提供界面操作的快捷方式。,2.2 用户界面的开发过程,用户界面不是一个独立的软件系统开发界面友好的应用系统功能分析设计界面分析设计,界面开发的4个阶段,定义阶段可行性分析需求分析设计阶段概要设计：任务设计、原型设计、用户验证详细设计：环境设计、交互设计、显示布局设计、艺术设计、帮助和出错设计构造阶段原型建立、界面实现测试评价维护阶段,2.2.1 需求阶段,用户行为用户生理、心理、经验、环境全过程用户体验,2.2.2 分析设计阶段,商业目标、用户目标、设计目标,界面原型,文字图形纸上原型软件DEMO,2.2.3 构造阶段,概念设计详细设计界面编码综合测试与评价,2

17、.2.4 维护阶段,改正性维护，诊断和改正系统/界面错误适应性维护，修改系统/界面以适应环境变化完善性维护，根据用户的要求改进或扩展系统/界面预防性维护，为将来的维护活动预先修改系统/界面,2.3 界面的标准化,标准化的目的用户界面的开发工作量很大，标准化可以大大减少低水平的重复劳动；标准化可以提高用户界面的质量,2.3.1 窗口系统标准化,窗口系统控制位映射显示器和输入设备的系统软件管理屏幕、窗口、字体、光标、图像资源和输入设备X窗口系统标准-MS Windows平台图形用户界面MS WindowsUnix with GTK+,MotifMac OS,2.3.2 其他问题,响应时间及显示速率屏幕设计标题区、菜单区、工作区、消息区色彩信息提示联机帮助出错处理,