软件交互设计ppt课件.ppt

软件交互设计课程介绍软件交互设计什么是人机界面与交互谁来做软件界面与交互设计UI设计中的常见问题UI设计准则与规范对UI设计进行评估联创软件学院Page-2第一章什么是人机界面与交互联创软件学院Page-3什么是人机界面与交互1 人机交互（Human-Computer Interaction）：关于设计、评价和实现供人们使用的交互计算机系统以及有关这些现象进行研究的科学。2 人机界面（Human-Computer Interface）：人与计算机之间传递、交换信息的媒介和对话接口，计算机系统的重要组成部分。联创软件学院Page-4生活中的人机交互-减速板的困扰 住宅区或学校道路上的减速板，是凸起的一道铁板，用于限制机动车的行驶速度，是增强行人安全性的好办法。 但骑自行车的人只能溜边，从减速板和马路牙子间的狭小缝隙中穿过。联创软件学院Page-5生活中的人机交互-减速板的困扰 解决方案：把长长的减速板分成若干块短板，短板间留出十几厘米的空隙便于自行车通过。 这就是“人性化”思维方式在人机交互设计中的体现，考虑了“可用性”和“用户体验”，才能真正提升用户在使用产品时的感受。联创软件学院Page-6生活中的人机交互-失败的产品设计 如果你不考虑用户，或者说没有考虑所有的用户，那么有可能就会出现类似下面这种情况：联创软件学院Page-7为什么没有设计UI的产品还能被用户接受只有在没有选择的条件下，用户才忽略用户界面在功能相似的条件下，用户会重点关注用户界面 不幸的是，很多产品或服务在原始设计的时候，虽然从功能的角度来看或许可以工作，但往往忽略了真实用户如何方便地使用系统的要求。联创软件学院Page-8软件界面与交互设计的目标 软件界面与交互设计的目标：优化人机界面，让软件界面更具可用性，让用户有更好的体验，使用户更方便地完成任务，从而提高我们的商业价值。 软件界面与交互涉及人体工程学、软件工程学、心理学、美学、计算机科学、社会科学联创软件学院Page-9软件界面上存在什么问题？联创软件学院Page-11不容乐观的现状 尽管国内有很多技术出色、聪明过人的软件工程师，但开发的软件产品却既难用又难看，客户很不满意，导致经常要修改软件的用户界面，造成极大的生产力浪费。联创软件学院Page-12不容乐观的现状我们见到的用户界面设计缺陷不胜枚举： 界面措辞含糊，甚至有错别字。 连简单的消息框都设计不好，经常存在文不对题的语病。 界面布局混乱，缺乏逻辑，凡是能放的东西都堆积在屏幕上，让用户不知从何下手。 没有出错处理，不对用户输入的数据进行检验。 不根据用户权限自动隐藏或禁用某些功能。 不提供进度条、动画反映正在进行的耗时过程。 对于重要的操作也不返回结果，让用户干着急。 执行破坏性的操作之前，不提醒用户确认，总之，如果用户执行了错误的操作，那他活该。 。联创软件学院Page-13第二章谁来做软件界面与交互设计联创软件学院Page-16谁来做软件界面与交互设计 很多从事界面图形设计的人经常会彼此发牢骚：“那个程序员刚才又在叫我美工了。”联创软件学院Page-17谁来做软件界面与交互设计 很多管理者并不了解美术设计师和UI设计师的区别。认为用户界面只是一个应用程序的外壳，漂亮和酷就等于好用，所以安排美术设计师来设计用户界面，往往产品演示看起来很吸引人，而一旦真正工作起来就不好用或者不实用了。联创软件学院Page-18谁来做软件界面与交互设计软件设计师 or 美术设计师对于软件设计师来说 即使是拔尖的程序员，即便是在时间和资源都很充足的情况下，也仍然可能开发出拙劣的用户界面。缺乏设计用户界面的经验 编程经验丰富的程序员并不一定具有很多设计用户界面的经验。进行用户界面设计也不一定需要太多编程知识。拔尖的程序员往往意志坚强 不愿意和他人协商，不轻易妥协。不同程序员开发的界面风格严重的不统一，每个人都按自己的理解去做界面开发。联创软件学院Page-19谁来做软件界面与交互设计软件设计师 or 美术设计师对于美术设计师来说 擅长设计各种元素和控件的艺术外观，形象地表达功能，为软件创建一致的艺术风格，让数据排列起来更美观，让用户感觉软件确实漂亮或很酷。 但美术设计师很少关心怎样使用户更方便地使用产品，漂亮和酷并不等于好用，很可能产品只是“看上去很美”，但其实只是个绣花枕头。联创软件学院Page-20谁来做软件界面与交互设计 UI设计师（User Interface Designer，用户界面设计师）：对软件的人机交互、操作逻辑、界面美观的进行设计。使软件的操作变得更舒适、简单、自由，体现软件的定位和特点。联创软件学院Page-21UI设计师的具体工作 擅长分析和理解用户的任务需求，使控件和信息的安排更合理，简化产品复杂度。能认识到用户在学习或使用产品的过程中，可能会在哪些地方遇到问题。 协助为拟定开发的产品定义用户模型。 参与产品的可用性测试和评估，并提出修改建议。 将完成一个普通任务所需要的鼠标动作减少一半。 将网站中弹出窗口的总数量从27个减少到15个以内。 修改菜单中的命令，将原来不一致的、令人困惑的短语改成容易理解的词。 联创软件学院Page-22UI设计师与美术设计师的区别 页面上需要放置一个按钮。美术设计师考虑的是让按钮更好看，显得时髦，或者符合界面中其它元素的美术风格。UI设计师考虑的是按钮的摆放位置、显示什么文字，或者要不要这个按钮。联创软件学院Page-23广义的UI设计岗位 交互式产品的范围已经大大拓宽，人们对界面重要性的认识也随之提高，广义的UI设计岗位包括： UI设计师：参与交互设计，不仅是界面美术设计 可用性工程师：使用可用性方法及原理进行产品优化 Web 设计师：设计网站的视觉效果，例如排版和按钮 信息规划师：规划和组织信息的架构，尤其是网站 用户体验工程师：组织用户测试、分析结果并且协助制定改进方案 联创软件学院Page-24UI设计工作的分工联创软件学院Page-25第三章UI设计中的常见问题联创软件学院Page-26人员意识上的误区用户界面是次要的工作 很多软件开发人员和产品经理都认为，用户界面与其它工作相比是次要的，觉得雇一个只是写点代码（或者干脆不写）的人来做用户界面设计和可用性测试，这简直是一种浪费。联创软件学院Page-27人员意识上的误区可用性不太重要，又很浪费钱 有些人认为用户界面的好坏对于产品销售影响不大，重视可用性在开发初期增加了开销（人员、时间、资金），但今后可以从增加的收入中收回投资，并节省后期开销（例如售后服务费用）。 一个更为可用的产品，会很快被市场和客户接纳。如果产品未考虑可用性而匆匆上市，必定减缓销售量的增长，导致用户的抱怨。联创软件学院Page-28人员意识上的误区用户界面不过就是“字体和颜色” 有些人对于“用户界面”的理解很狭隘，认为不过就是让界面更清晰、漂亮一些而已，可以等到发布之前再做，甚至干脆不做。用户界面包含深层次的问题：用户学习使用产品的时候是否感到费力产品功能是否能满足用户的目标用户完成任务的效率如何 这些问题不能在开发后期才考虑，如果不进行用户界面设计及测试，那么最终版本一定不能满足要求。联创软件学院Page-29人员意识上的误区认为用户能够适应所有的情况 有些人坚信，只要软件提供足够的功能，用户就能学会使用。但一个潜在用户会不顾用户界面的糟糕状况，只是为了产品功能而购买产品，这种逻辑是错误的。 如果竞争者的产品更加容易使用，也提供相似的功能。不管什么原因，只要用户觉得你的产品“有点讨厌”，他们就不会去购买和使用你的产品。谁受到了损失？不是用户，而是你自己。联创软件学院Page-30人员意识上的误区资源不足时可以放弃用户界面设计 有些产品经理在预算紧张、资源不足或时间进度很紧的情况下，认为只能“挑重要的事情来做”，而用户界面这种“不太重要”的事情可以放在一边。 用户界面不是产品的一种特性，而是超越了产品的所有特性，可以决定每一个特性的好坏，进而决定了整个产品的好坏。 一个无有效用户界面的产品就像一个没有窗户和门的仓库：货物就在里面，但没有人能拿到。联创软件学院Page-31常见的UI设计缺陷 界面视觉表达不清 没有明显的视觉顺序和用户焦点。例如页面的内容之间没有明确分类、用户不清楚什么地方可以点击、到处都是闪动的信息等，用户很难把注意力集中到关键信息上。用户想得到的信息才是屏幕中最应明确显示的部分！联创软件学院Page-32常见的UI设计缺陷 操作步骤非常繁琐哪怕是最常见的基本任务也需要执行很多步骤。 即使产品功能再强大，开发人员夜以继日地开发代码，如果用户做一个操作需要超过20分钟的时间，其间经过一系列繁琐、缓慢地步骤，而到头来却发现往往不能如愿，这个软件不会受到欢迎。联创软件学院Page-33常见的UI设计缺陷提示信息十分混乱 例如：没有明确告诉用户所要执行的操作到底是什么意思，是否能达到自己的目标。请稍候再试什么样 的操作？联创软件学院Page-34常见的UI设计缺陷 使用难以理解的词汇 例如：使用了很多用户不太能理解的词汇，或者容易引起误解的词汇。难以理解的词汇联创软件学院Page-35常见的UI设计缺陷 强迫用户接受糟糕的界面 系统提供的一些元素让用户难以接受。例如：难听的按钮点击声音，或强制播放的背景音乐。 精美绝伦、眼花缭乱的Flash演示片头，从美术角度来看很完美，但用户要花上数分钟的下载时间，也许他们在下载完之前就不耐烦地把页面给关掉了，连一个画面都没显示出来。联创软件学院Page-36常见的UI设计缺陷当然这也有点夸张联创软件学院Page-37第四章UI设计准则与规范联创软件学院Page-38软件界面与交互设计的关键 设计的关键：如何优化用户与产品之间的交互，从而使产品满足用户的期望，设计依据涉及到：考虑人们擅长什么、不擅长什么。考虑什么可能对用户的当前做法有所帮助。考虑如何提供高质量的用户体验。听取人们想要些什么，并让他们参与设计。在设计过程中，让用户来尝试和验证。联创软件学院Page-39UI设计流程第一步：用户需求分析 了解谁是目标用户、他们需要哪些支持，才可能设计出能支持这些用户的产品。 首先找到真正的用户，然后从他们那里找到需求。 用户需求是所有设计、开发工作的基础。简而言之，在这个阶段我们需要知道：用户想要什么？我们要做什么？联创软件学院Page-40练习：分析软件用户的类型和特征？要求：试分析软件用户分为哪几种类型，不同类型的用户对软件界面与交互有哪些不同的需求。联创软件学院Page-41用户分类 偶然型用户：既没有计算机应用领域的专业知识，也缺少计算机系统基本知识的用户。 生疏型用户：他们更常使用计算机系统，因而对计算机的性能及操作使用，已经有一定程度的理解和经验。但他们往往对新使用的计算机系统缺乏了解，不太熟悉，因此对新系统而言，他们仍旧是生疏用户。 熟练型用户：这类用户一般是专业技术人员，他们对需要计算机完成的工作任务有清楚地了解，对计算机系统也有相当多的知识和经验，并且能熟练地操作、使用。 专家型用户：对需要计算机完成的工作任务和计算机系统都很精通的，通常是计算机专业用户，称为专家型用户。UI设计流程第一步：用户需求分析用户界面需求举例：在客户资料录入界面中，应明确标示哪些信息是必填信息，哪些信息是选填信息。 在客户资料录入界面中，输入框如果是选择项方式录入，必须显示信息的中文意义，不能用0、1、2或a、b、c等数字或英文代码代替。 在客户资料录入界面中，所有中文均为宋体，12号字，英文和数字均为Arial，12号字。联创软件学院Page-42UI设计流程第二步：概念设计与物理设计形成多个设计方案，进行评审，确定最优方案。概念设计：用一种用户能够理解的方式去描述产品应该做些什么、如何运作、外观如何；物理设计：考虑的是产品的细节，包括要使用的色彩、声音和图像，还有菜单设计和图标设计。联创软件学院Page-43UI设计流程第三步：制作软件界面原型 软件界面原型并不是能够运行的最终软件版本，可以采用很多工具来实现“交互”设计。比如使用AxureRP Pro工具软件来设计WEB软件界面原型，可在设计的早期阶段发现问题。联创软件学院Page-44案例：使用AxureRP工具绘制的软件界面原型联创软件学院Page-45UI设计流程第四步：用户测试和评估 制作某个设计方案的软件界面原型，请用户进行评估，从而得到反馈，比如进行哪些界面修改，或哪些需求仍未满足等。再次明确需求，提出修改设计的方案。 这个相互联系并且重复进行的特征被称为“迭代”，是交互设计过程的关键特征之一。 不论设计人员多么优秀，也不论用户对新产品多么有想象力，都必须使用反馈来修正构思，而且需要反复若干次。联创软件学院Page-46UI设计遵循的原则可行性 用户能否通过产品达到意图，还有达到意图的程度有多少。 例1：用户提出的界面需求，哪些需求得到了实现，哪些需求未被实现。 例2：用户通过系统操作，是否可以得到预期的输出结果。联创软件学院Page-47UI设计遵循的原则有效性 用户在执行任务时，产品支持用户的方式是否有效，从而避免繁琐的操作。 例如：在查询框中输入关键字后，按“回车”键就触发搜索动作。如果还要把手从键盘挪到鼠标上，再点击“查询”按钮，很明显就不够灵活有效。 目标：用最少的操作步骤完成操作任务，获得最高的使用效率。联创软件学院Page-48UI设计遵循的原则安全性 保护用户以避免发生错误，以及令人不快的情形。不管是新手还是老手，他们都有可能会犯错误。 例1：降低用户按错键或按钮的风险，从而预防用户犯严重的错误（例如不要把“退出”或“删除”命令与“保存”命令安排在一起）； 例2：为用户提供出错后的复原方法，从而让他们更有信心，敢于尝试新操作； 例3：采用其他安全机制，包括取消选项和确认对话框，让用户有机会再次考虑自己的意图。 例4：用户有权自主中断某进程，而不是当系统出错或误操作后，只能看着错误继续发展而无可奈何。联创软件学院Page-49UI设计遵循的原则易学性 对于任何产品，用户都希望能立即开始操作，而且不费多大力气就能学会使用。 所有界面元素提供必要的提示，图标按钮的含义直观明了，辅之以文字说明，防止用户误解。当鼠标移动到图标按钮时，该图标旁出现功能提示。 界面结构能够清晰地反映工作流程，以便用户按部就班地操作。 为帮助用户学习使用产品，或者解决实际问题，应该提供易于检索和学习的帮助信息。联创软件学院Page-50UI设计遵循的原则易记性 用户在学会使用某个产品后，是不是能迅速回想起使用方法。不应该每次都需要重新学习如何执行任务，借助一些简单提示就能回想起操作方法。 例1：使用简洁明了的图形或文字提示用户某项操作的功能、目的以及可能发生的结果；或者把同类型的命令或选项归置在同一个区域内。 例2：使用用户的语言，使用他们熟悉的那些词汇、惯用语和概念，而不是高深莫测的技术用语。联创软件学院Page-51UI设计遵循的原则一致性 在设计界面时使用相似的操作，并且为相似的任务使用相似的元素。 例1：一般点击鼠标左键选取界面对象。如果有个界面，某些对象用左键选取，另一些对象却用鼠标右键选取，这种不一致性导致用户很难记住，当然也更容易出错。 例2：如果用户无法确定不同词汇/情景/动作，是否具有相同含义，比方说软件中的确定按钮都是“确定”两个字，但突然冒出个“OK”或者“好的”，用户就会很莫名其妙。例3：所有需要用户确认操作的对话框都至少包含“确认”和“放弃”两个按钮。联创软件学院Page-52UI设计遵循的原则信息最小化 避免使用无关或极少使用的信息，最简单的方法：把每个认为可能不必要的元素逐一去掉，如果没有它系统仍能很好的工作，那么就撤销它。 如果把过多的信息塞进有限的屏幕空间中去，用户便很难找到自己感兴趣的东西！联创软件学院Page-53案例：信息繁杂的软件界面联创软件学院Page-54UI设计规范常见的界面配色方案联创软件学院Page-55案例：界面配色方案-SP服务门户联创软件学院Page-56案例：界面配色方案-动感地带联创软件学院Page-57UI设计规范系统响应时间时间长度： 系统响应时间过长，用户会感到不安和沮丧；响应时间过短，会造成用户加快操作节奏，从而导致错误系统易变性。时间的易变性： 指相对于平均响应时间的偏差，即使响应时间较长，低的响应时间易变性，有助于用户建立稳定的操作节奏。联创软件学院Page-58UI设计规范系统响应时间系统响应时间长度遵循的界面设计规则： 0-10 秒：鼠标显示成为沙漏 10-15秒：由微帮助显示处理进度（状态栏提示或控件上提示文本） 15秒：显示处理窗口或显示进度条 一个长时间的处理完成时，应给予完成提示信息联创软件学院Page-59UI设计规范屏幕信息显示屏幕信息显示遵循的界面设计规则： 只显示与当前用户语境环境有关的信息。 不要用数据将用户包围，使用便于用户迅速吸取信息的方式表现信息。 使用一致的标记：标准缩写和可预测的颜色显示，信息含义非常明确，用户不必参考其它信息源。 在页面上分隔不同类型的信息。联创软件学院Page-60UI设计规范数据输入数据输入遵循的界面设计规则： 尽量减少用户输入动作的数量； 应对键盘和鼠标输入的灵活性提供支持； 对输入数据进行正确性校验； 让用户控制交互流，可跳过不必要的动作，改变动作的顺序，在不退出系统的情况下从错误状态中恢复。 消除冗余输入，提供缺省值，绝不要让用户计算和填写可自动获取或计算出来的数据。联创软件学院Page-61UI设计规范预防错误 在系统设计中可以合理限制用户的操作，预防错误现象的发生。 例如：把某些按钮或菜单选项设置为灰色，无法点击，把用户活动限制在允许范围内，无法进行不正 确操作，错误就不会发生。联创软件学院Page-62UI设计规范出错信息和警告 用户操作出现问题时系统应给出出错信息和警告，遵循的界面设计规则： 信息以用户可以理解的术语描述； 信息应提供如何从错误中恢复的建设性意见； 信息应指出错误可能导致那些不良后果，以便用户检查是否出现了这些情况或帮助用户进行改正； 信息应伴随视觉的提示，如特殊图像颜色或信息闪烁；信息不能带有判断色彩，即任何情况下不能指责用户。 屏幕上冷冰冰地出现一行文字：“由于类型2错误，本程序意外终止”。联创软件学院Page-63UI设计规范常见提示信息常见的提示信息遵循的界面设计规则：当操作会带来严重后果时，默认按钮为“否“；当操作会带来一定后果时，默认按钮为“否“；当需征求操作者意愿时，默认按钮为“是“ 。 软件人员经常编写出“劣质”的消息框，措词生硬、幼稚、蹩脚，甚至有文字、语法错误；消息文本、图形标志和命令按钮在语义上不一致。联创软件学院Page-64第五章UI设计评估联创软件学院Page-65UI设计评估 当你辛辛苦苦做完UI设计后，有时候可能心里没底。这时验证设计质量，能够事先发现和解决一些问题，从而避免在正式的测试和评估中漏洞百出，招人笑话。 软件行业很少发生这样的场景：用户热切地握着开发人员的手，连声称赞“你们开发的软件真是好用、真是漂亮啊”。我们看到的大多是相反的场景：用户满腹牢骚，开发人员垂头丧气。联创软件学院Page-66UI设计评估评审时经常发现的缺陷1、同一页面包含重复功能的链接或按钮2、将复选框用作单选按钮3、无初始值的多选一设置4、在非开/关设置中使用复选框5、用文本框显示只读数据6、单选按钮之间间隔太大7、属性标记对齐方式不一致8、当前无效的控件不充分置灰9、显示对用户无意义的错误提示10、不同的类型页面窗口显示相同的标题11、窗口的标题和调用的命令不一致联创软件学院Page-67UI设计评估评审时经常发现的缺陷12、要求用户输入随机数13、相似的功能却有不一致的用户操作界面14、取消按钮无法实现真正取消操作15、返回按钮不能达到预期的目的16、搜索选项过多，过度复杂17、需要向下滚动才能看到当前页的重要信息18、图片按钮对鼠标按下操作没有视觉变化19、无意义的虚假进度条20、执行长时间的任务时，鼠标指针不显示成忙状态21、不考虑用户可能的人为的错误输入22、盲目错误的使用页面模块化设计联创软件学院Page-68软件界面一联创软件学院Page-70软件界面二联创软件学院Page-71软件界面三联创软件学院Page-72软件界面四联创软件学院Page-73软件界面五联创软件学院Page-74Thanks联创软件学院Page-75