软件交互设计[72页]

1、软件交互设计,课程介绍,软件交互设计,什么是人机界面与交互,谁来做软件界面与交互设计,UI设计中的常见问题,UI设计准则与规范,对UI设计进行评估,联创软件学院,Page-2,第一章,什么是人机界面与交互,联创软件学院,Page-3,什么是人机界面与交互,1 人机交互（Human-Computer Interaction）： 关于设计、评价和实现供人们使用的交互计算机 系统以及有关这些现象进行研究的科学。,2 人机界面（Human-Computer Interface）： 人与计算机之间传递、交换信息的媒介和对话接 口，计算机系统的重要组成部分。,联创软件学院,Page-4,生活中的人机交互-

2、减速板的困扰,住宅区或学校道路上的减速板，是凸 起的一道铁板，用于限制机动车的行驶 速度，是增强行人安全性的好办法。 但骑自行车的人只能溜边，从减速板 和马路牙子间的狭小缝隙中穿过。,联创软件学院,Page-5,生活中的人机交互-减速板的困扰,解决方案：把长长的减速板分 成若干块短板，短板间留出十几 厘米的空隙便于自行车通过。,这就是“人性化”思维方式在人 机交互设计中的体现，考虑了“可 用性”和“用户体验”，才能真正提 升用户在使用产品时的感受。,联创软件学院,Page-6,生活中的人机交互-失败的产品设计,如果你不考虑用户，或者说没有考 虑所有的用户，那么有可能就会出现 类似下面这种情况：

3、,联创软件学院,Page-7,为什么没有设计UI的产品还能被用户接受,只有在没有选择的条件下，用户才忽略用户界面,在功能相似的条件下，用户会重点关注用户界面,不幸的是，很多产品或服务在原始 设计的时候，虽然从功能的角度来看 或许可以工作，但往往忽略了真实用 户如何方便地使用系统的要求。,联创软件学院,Page-8,软件界面与交互设计的目标,软件界面与交互设计的目标：优化人机界面，让 软件界面更具可用性，让用户有更好的体验，使用 户更方便地完成任务，从而提高我们的商业价值。,软件界面与交互涉及人体工程学、 软件工程学、心理学、美学、计算机 科学、社会科学,联创软件学院,Page-9,软件界面上存

4、在什么问题？,联创软件学院,Page-11,不容乐观的现状,尽管国内有很多技术出色、聪明过人的软件 工程师，但开发的软件产品却既难用又难看， 客户很不满意，导致经常要修改软件的用户界 面，造成极大的生产力浪费。,联创软件学院,Page-12,不容乐观的现状,我们见到的用户界面设计缺陷不胜枚举：,界面措辞含糊，甚至有错别字。 连简单的消息框都设计不好，经常存在文不对题的语病。 界面布局混乱，缺乏逻辑，凡是能放的东西都堆积在屏幕 上，让用户不知从何下手。 没有出错处理，不对用户输入的数据进行检验。 不根据用户权限自动隐藏或禁用某些功能。 不提供进度条、动画反映正在进行的耗时过程。 对于重要的操作也

5、不返回结果，让用户干着急。 执行破坏性的操作之前，不提醒用户确认，总之，如果用 户执行了错误的操作，那他活该。 。,联创软件学院,Page-13,第二章,谁来做软件界面与交互设计,联创软件学院,Page-16,谁来做软件界面与交互设计,很多从事界面图形设计的人 经常会彼此发牢骚：“那个程序 员刚才又在叫我美工了。”,联创软件学院,Page-17,谁来做软件界面与交互设计,很多管理者并不了解美术设计师和UI设计师的 区别。认为用户界面只是一个应用程序的外壳， 漂亮和酷就等于好用，所以安排美术设计师来设 计用户界面，往往产品演示看起来很吸引人，而 一旦真正工作起来就不好用或者不实用了。,联创软件学

6、院,Page-18,谁来做软件界面与交互设计,软件设计师 or 美术设计师,对于软件设计师来说,即使是拔尖的程序员，即便是在时间和资源都很充足 的情况下，也仍然可能开发出拙劣的用户界面。,缺乏设计用户界面的经验 编程经验丰富的程序员并不一定具有 很多设计用户界面的经验。进行用户界 面设计也不一定需要太多编程知识。,拔尖的程序员往往意志坚强 不愿意和他人协商，不轻易妥协。不 同程序员开发的界面风格严重的不统一， 每个人都按自己的理解去做界面开发。,联创软件学院,Page-19,谁来做软件界面与交互设计,软件设计师 or 美术设计师,对于美术设计师来说,擅长设计各种元素和控件的艺术外观，形象地表

7、达功能，为软件创建一致的艺术风格，让数据排列 起来更美观，让用户感觉软件确实漂亮或很酷。 但美术设计师很少关心怎样使用户更方便地使用 产品，漂亮和酷并不等于好用，很可能产品只是 “看上去很美”，但其实只是个绣花枕头。,联创软件学院,Page-20,谁来做软件界面与交互设计,UI设计师（User Interface Designer，用户界 面设计师）：对软件的人机交互、操作逻辑、 界面美观的进行设计。使软件的操作变得更舒 适、简单、自由，体现软件的定位和特点。,联创软件学院,Page-21,UI设计师的具体工作,擅长分析和理解用户的任务需求，使控件和信息的 安排更合理，简化产品复杂度。能认识到

8、用户在学习 或使用产品的过程中，可能会在哪些地方遇到问题。,协助为拟定开发的产品定义用户模型。 参与产品的可用性测试和评估，并提出修改建议。 将完成一个普通任务所需要的鼠标动作减少一半。 将网站中弹出窗口的总数量从27个减少到15个以内。 修改菜单中的命令，将原来不一致的、令人困惑的短语 改成容易理解的词。 ,联创软件学院,Page-22,UI设计师与美术设计师的区别,页面上需要放置一个按钮。美术设计师考虑的 是让按钮更好看，显得时髦，或者符合界面中其 它元素的美术风格。UI设计师考虑的是按钮的摆 放位置、显示什么文字，或者要不要这个按钮。,联创软件学院,Page-23,广义的UI设计岗位,交

9、互式产品的范围已经大大拓宽，人们对界面重要性 的认识也随之提高，广义的UI设计岗位包括：,UI设计师：参与交互设计，不仅是界面美术设计 可用性工程师：使用可用性方法及原理进行产品优化 Web 设计师：设计网站的视觉效果，例如排版和按钮 信息规划师：规划和组织信息的架构，尤其是网站 用户体验工程师：组织用户测试、分析结果并且协助 制定改进方案 ,联创软件学院,Page-24,UI设计工作的分工,联创软件学院,Page-25,第三章,UI设计中的常见问题,联创软件学院,Page-26,人员意识上的误区,用户界面是次要的工作,很多软件开发人员和产品经理都认为，用户界面 与其它工作相比是次要的，觉得雇

10、一个只是写点代 码（或者干脆不写）的人来做用户界面设计和可用 性测试，这简直是一种浪费。,联创软件学院,Page-27,人员意识上的误区,可用性不太重要，又很浪费钱,有些人认为用户界面的好坏对于产品销售影响不大， 重视可用性在开发初期增加了开销（人员、时间、资 金），但今后可以从增加的收入中收回投资，并节省后 期开销（例如售后服务费用）。 一个更为可用的产品，会很快被市场和客户接纳。如 果产品未考虑可用性而匆匆上市，必定减缓销售量的增 长，导致用户的抱怨。,联创软件学院,Page-28,人员意识上的误区,用户界面不过就是“字体和颜色”,有些人对于“用户界面”的理解很狭隘，认为不过就是 让界面更

11、清晰、漂亮一些而已，可以等到发布之前再 做，甚至干脆不做。用户界面包含深层次的问题：,用户学习使用产品的时候是否感到费力 产品功能是否能满足用户的目标 用户完成任务的效率如何,这些问题不能在开发后期才考虑，如果不进行用户 界面设计及测试，那么最终版本一定不能满足要求。,联创软件学院,Page-29,人员意识上的误区,认为用户能够适应所有的情况,有些人坚信，只要软件提供足够的功能，用户就 能学会使用。但一个潜在用户会不顾用户界面的糟 糕状况，只是为了产品功能而购买产品，这种逻辑 是错误的。 如果竞争者的产品更加容易使用，也提供相似的 功能。不管什么原因，只要用户觉得你的产品“有点 讨厌”，他们就

12、不会去购买和使用你的产品。,谁受到了损失？不是用户，而是你自己。,联创软件学院,Page-30,人员意识上的误区,资源不足时可以放弃用户界面设计,有些产品经理在预算紧张、资源不足或时间进 度很紧的情况下，认为只能“挑重要的事情来做”， 而用户界面这种“不太重要”的事情可以放在一边。 用户界面不是产品的一种特性，而是超越了产 品的所有特性，可以决定每一个特性的好坏，进 而决定了整个产品的好坏。,一个无有效用户界面的产品就像一个没有窗户 和门的仓库：货物就在里面，但没有人能拿到。,联创软件学院,Page-31,常见的UI设计缺陷 界面视觉表达不清,没有明显的视觉顺序和用户焦点。例如页面的内容 之间

13、没有明确分类、用户不清楚什么地方可以点击、 到处都是闪动的信息等，用户很难把注意力集中到关 键信息上。,用户想得到的信息才是屏幕 中最应明确显示的部分！,联创软件学院,Page-32,常见的UI设计缺陷 操作步骤非常繁琐,哪怕是最常见的基本任务也需要执行很多步骤。,即使产品功能再强大，开发人员夜以继日 地开发代码，如果用户做一个操作需要超过 20分钟的时间，其间经过一系列繁琐、缓慢 地步骤，而到头来却发现往往不能如愿，这 个软件不会受到欢迎。,联创软件学院,Page-33,常见的UI设计缺陷,提示信息十分混乱,例如：没有明确告诉用户所要执行的操作 到底是什么意思，是否能达到自己的目标。,请稍候

14、再试什么样 的操作？,联创软件学院,Page-34,常见的UI设计缺陷 使用难以理解的词汇,例如：使用了很多用户不太能理解的词汇， 或者容易引起误解的词汇。,难以理解的词汇,联创软件学院,Page-35,常见的UI设计缺陷 强迫用户接受糟糕的界面,系统提供的一些元素让用户难以接受。例 如：难听的按钮点击声音，或强制播放的背 景音乐。,精美绝伦、眼花缭乱的Flash演示片头，从 美术角度来看很完美，但用户要花上数分钟的 下载时间，也许他们在下载完之前就不耐烦地 把页面给关掉了，连一个画面都没显示出来。,联创软件学院,Page-36,常见的UI设计缺陷,当然这也有点夸张,联创软件学院,Page-3

15、7,第四章,UI设计准则与规范,联创软件学院,Page-38,软件界面与交互设计的关键,设计的关键：如何优化用户与产品之间的交互， 从而使产品满足用户的期望，设计依据涉及到：,考虑人们擅长什么、不擅长什么。 考虑什么可能对用户的当前做法有所帮助。 考虑如何提供高质量的用户体验。 听取人们想要些什么，并让他们参与设计。 在设计过程中，让用户来尝试和验证。,联创软件学院,Page-39,UI设计流程,第一步：用户需求分析,了解谁是目标用户、他们需要哪些支持， 才可能设计出能支持这些用户的产品。 首先找到真正的用户，然后从他们那里找 到需求。 用户需求是所有设计、开发工作的基础。 简而言之，在这个阶

16、段我们需要知道：,用户想要什么？ 我们要做什么？,联创软件学院,Page-40,练习：分析软件用户的类型和特征？,要求：试分析软件用户分为哪几种类型，,不同类型的用户对软件界面与交互有哪些,不同的需求。,联创软件学院,Page-41,用户分类,偶然型用户：既没有计算机应用领域的专业知识，也缺少计算机系统基本知识的用户。 生疏型用户：他们更常使用计算机系统，因而对计算机的性能及操作使用，已经有一定程度的理解和经验。但他们往往对新使用的计算机系统缺乏了解，不太熟悉，因此对新系统而言，他们仍旧是生疏用户。 熟练型用户：这类用户一般是专业技术人员，他们对需要计算机完成的工作任务有清楚地了解，对计算机系

17、统也有相当多的知识和经验，并且能熟练地操作、使用。 专家型用户：对需要计算机完成的工作任务和计算机系统都很精通的，通常是计算机专业用户，称为专家型用户。,UI设计流程,第一步：用户需求分析,用户界面需求举例：,在客户资料录入界面中，,应明确标示哪些信息是必填信息，哪些信息是选填信息。 在客户资料录入界面 中，输入框如果是选择项方式录入，必须显示信息的中文意 义，不能用0、1、2或a、b、c等数字或英文代码代替。 在客户资料录入界面中，所 有中文均为宋体，12号字，英文和数字均为Arial，12号字。,联创软件学院,Page-42,UI设计流程,第二步：概念设计与物理设计,形成多个设计方案，进行

18、评审，确定最优方案。,概念设计：用一种用户能够理解的方式去描述产品 应该做些什么、如何运作、外观如何；,物理设计：考虑的是产品的细节，包括要使用的色 彩、声音和图像，还有菜单设计和图标设计。,联创软件学院,Page-43,UI设计流程,第三步：制作软件界面原型,软件界面原型并不是能够运行的最终软件版本， 可以采用很多工具来实现“交互”设计。比如使用 AxureRP Pro工具软件来设计WEB软件界面原型， 可在设计的早期阶段发现问题。,联创软件学院,Page-44,案例：使用AxureRP工具绘制的软件界面原型,联创软件学院,Page-45,UI设计流程,第四步：用户测试和评估,制作某个设计方

19、案的软件界面原型，请用户进 行评估，从而得到反馈，比如进行哪些界面修 改，或哪些需求仍未满足等。再次明确需求，提 出修改设计的方案。,这个相互联系并且重复进行的特征被称为“迭代”， 是交互设计过程的关键特征之一。,不论设计人员多么优秀，也不论用户对新产品 多么有想象力，都必须使用反馈来修正构思，而 且需要反复若干次。,联创软件学院,Page-46,UI设计遵循的原则,可行性,用户能否通过产品达到意图，还有达到 意图的程度有多少。,例1：用户提出的界面需求，哪些需求得到了 实现，哪些需求未被实现。 例2：用户通过系统操作，是否可以得到预期 的输出结果。,联创软件学院,Page-47,UI设计遵循

20、的原则,有效性,用户在执行任务时，产品支持用户的方式 是否有效，从而避免繁琐的操作。,例如：在查询框中输入关键字后，按“回车”键 就触发搜索动作。如果还要把手从键盘挪到鼠标 上，再点击“查询”按钮，很明显就不够灵活有效。,目标：用最少的操作步骤完成操作任务， 获得最高的使用效率。,联创软件学院,Page-48,UI设计遵循的原则,安全性,保护用户以避免发生错误，以及令人不快的 情形。不管是新手还是老手，他们都有可能会 犯错误。,例1：降低用户按错键或按钮的风险，从而预防用 户犯严重的错误（例如不要把“退出”或“删除”命令与 “保存”命令安排在一起）； 例2：为用户提供出错后的复原方法，从而让他

21、们 更有信心，敢于尝试新操作； 例3：采用其他安全机制，包括取消选项和确认对 话框，让用户有机会再次考虑自己的意图。 例4：用户有权自主中断某进程，而不是当系统出 错或误操作后，只能看着错误继续发展而无可奈何。,联创软件学院,Page-49,UI设计遵循的原则,易学性,对于任何产品，用户都希望能立即开始操作， 而且不费多大力气就能学会使用。,所有界面元素提供必要的提示，图标按钮的含义 直观明了，辅之以文字说明，防止用户误解。当鼠 标移动到图标按钮时，该图标旁出现功能提示。 界面结构能够清晰地反映工作流程，以便用户按 部就班地操作。 为帮助用户学习使用产品，或者解决实际问题， 应该提供易于检索和

22、学习的帮助信息。,联创软件学院,Page-50,UI设计遵循的原则,易记性,用户在学会使用某个产品后，是不是能迅速 回想起使用方法。不应该每次都需要重新学习 如何执行任务，借助一些简单提示就能回想起 操作方法。,例1：使用简洁明了的图形或文字提示用户某项操 作的功能、目的以及可能发生的结果；或者把同类 型的命令或选项归置在同一个区域内。 例2：使用用户的语言，使用他们熟悉的那些词 汇、惯用语和概念，而不是高深莫测的技术用语。,联创软件学院,Page-51,UI设计遵循的原则,一致性,在设计界面时使用相似的操作，并且为相似的任务 使用相似的元素。,例1：一般点击鼠标左键选取界面对象。如果有个界面

23、， 某些对象用左键选取，另一些对象却用鼠标右键选取，这种 不一致性导致用户很难记住，当然也更容易出错。 例2：如果用户无法确定不同词汇/情景/动作，是否具有相 同含义，比方说软件中的确定按钮都是“确定”两个字，但突 然冒出个“OK”或者“好的”，用户就会很莫名其妙。,例3：所有需要用户确认操作的对话框都至少包含“确,认”和“放弃”两个按钮。,联创软件学院,Page-52,UI设计遵循的原则,信息最小化,避免使用无关或极少使用的信息，最简 单的方法：把每个认为可能不必要的元素 逐一去掉，如果没有它系统仍能很好的工 作，那么就撤销它。,如果把过多的信息塞进有限 的屏幕空间中去，用户便很难 找到自己

24、感兴趣的东西！,联创软件学院,Page-53,案例：信息繁杂的软件界面,联创软件学院,Page-54,UI设计规范,常见的界面配色方案,联创软件学院,Page-55,案例：界面配色方案-SP服务门户,联创软件学院,Page-56,案例：界面配色方案-动感地带,联创软件学院,Page-57,UI设计规范,系统响应时间,时间长度：,系统响应时间过长，用户会感到不安和沮丧；响应时间过 短，会造成用户加快操作节奏，从而导致错误系统易变性。,时间的易变性：,指相对于平均响应时间的偏差，即使响应时间较长，低的 响应时间易变性，有助于用户建立稳定的操作节奏。,联创软件学院,Page-58,UI设计规范,系统

25、响应时间,系统响应时间长度遵循的界面设计规则：,0-10 秒：鼠标显示成为沙漏 10-15秒：由微帮助显示处理进度（状态栏提示或 控件上提示文本） 15秒：显示处理窗口或显示进度条 一个长时间的处理完成时，应给予完成提示信息,联创软件学院,Page-59,UI设计规范,屏幕信息显示,屏幕信息显示遵循的界面设计规则：,只显示与当前用户语境环境有关的信息。 不要用数据将用户包围，使用便于用户迅速吸取信 息的方式表现信息。 使用一致的标记：标准缩写和可预测的颜色显示， 信息含义非常明确，用户不必参考其它信息源。 在页面上分隔不同类型的信息。,联创软件学院,Page-60,UI设计规范,数据输入,数据

26、输入遵循的界面设计规则：,尽量减少用户输入动作的数量； 应对键盘和鼠标输入的灵活性提供支持； 对输入数据进行正确性校验； 让用户控制交互流，可跳过不必要的动作，改变动作 的顺序，在不退出系统的情况下从错误状态中恢复。 消除冗余输入，提供缺省值，绝不要让用户计算和填 写可自动获取或计算出来的数据。,联创软件学院,Page-61,UI设计规范,预防错误,在系统设计中可以合理限制用户的操作， 预防错误现象的发生。,例如：把某些按钮或菜单选项设 置为灰色，无法点击，把用户活动 限制在允许范围内，无法进行不正 确操作，错误就不会发生。,联创软件学院,Page-62,UI设计规范,出错信息和警告,用户操作出现问题时系统应给出出错信息和警告，遵 循的界面设计规则：,信息以用户可以理解的术语描述； 信息应提供如何从错误中恢复的建设性意见； 信息应指出错误可能导致那些不良后果，以便用户检查 是否出现了这些情况或帮助用户进行改正； 信息应伴随视觉的提示，如特殊图像颜色或信息闪烁；,信息不能带有判断色彩，即任何情况下不能指责用户。,屏幕上冷冰冰地出现一行文字： “由于类型2错误，本程序意外终止”。,联创软件学院,Page-63,UI设计规范,常见提示信息,常见的提示信息遵循的界面设计规则：,当操作会带来严重后果时，默认按钮为“否“； 当操作会带来