交互设计精髓3.pptx

1、交互设计精髓3-阅读笔记By gale.wang,本书作者Alan Cooper是软件交互设计的先知和传播者，客户咨询公司Cooper Interaction Design的创始人和总裁。他设计了第一个可视化开发工具Visual Basic，他的公司帮助IBM、3M、Ericsson、Sun、Visa.等客户开发了许多具有市场竞争力的产品。 联系作者：, , ,有些程序员认为解决问题的方案是一种他们还学不会的编程技巧。这就是一个问题。它聚焦于单独的技术本身，而单独的技术只能把我们带入混乱。仅仅聚焦于技术并不能使我们摆脱困境。 使用交互设计和目标导向的途径将对产品结构决策产生巨大的好处，以及对公

2、司的决策位置产生巨大的有益影响。事实证明目标导向的途径具有巨大的决策好处和价值。 最重要的事情是，要使质量和效益最大化，并使顾客高兴，你，产品开发先生要做的事情是在过程的早期引入目标导向的交互设计。 交互设计师需要具备凭空想象复杂行为的能力，交互设计应当在任何代码编写之前做。交互设计师必须能够在代码被写出来之前，想象它是做什么的。 我们设计项目的第一部分是针对问题域详细研究项目。,本书译者及相关评论,刘松涛 毕业于北京理工大学电子工程系，获电子工程学士学位；英国伯明翰大学，获用户中心系统专业硕士学位。现任英国无限交互设计公司(Infinite Interactive)的设计顾问，著名的交互设计

3、双语杂志uiGarden的编辑，中国用户体验设计的主要推动者之一，有译作AboutFace 3：交互设计精髓。在英国无限交互设计公司，主要从事用户体验和信息无障碍方面的设计、研究和咨询工作，特别专注于东西方文化对用户体验的影响，其客户包括BBC、路透社、沃达丰(Vodafone)等。 uiGarden UI花园 豆瓣书评 ,谁应该看本书,适合很多人 交互设计的学生、业者，任何关注用户和数字产品交互的人 程序员，数字产品设计中的其他方面的设计师，从事可用性工作的人 项目经理 希望它可以让你以一种新的方式思考数字产品的设计,以一种新的方式思考数字产品设计,交互设计是“了解用户想要什么”的工具 讨论

4、的重点：数字产品、环境、系统、服务的交互设计 为什么是“交互设计” 数字产品的UX（用户体验-User Experience U）设计包括三个方面：形式、内容、行为 UX不足以概括用于数字产品开发、系统及服务的不同设计与可用性学科 UX回避了交互设计的核心问题核心问题 如何设计具有复杂行为的交互系统？ 设计要平等的与工程、市场、业务管理进行协调工作,本书是什么和不是什么？,目标 交互设计的原则、模式、过程是良好产品交互和界面的关键。 结合这最实用有效的交互设计工具：原则、模式、过程。 讨论交互设计的4个主要步骤 研究产品所处的领域 了解用户及其需求 定义设计方案的框架 填充设计细节,我的最大收

5、获,产品成功的关键是目标，而不是特性 在设计产品的如何行为之前，要先定义产品做什么（目标需求决定） 不要混淆“功能”和“需求” UI设计的三个层次：为本能，为行为，为反思设计。 将用户想像成非常聪明但非常忙的人 为不断提高的，永久的中间用户设计 流和透明 流：一种深层次的，近乎完全的融入状态 透明：让人们和他们的目标面对面，而意识不到软件的接入。用户感觉不到交互机制的存在。 设计和谐的交互 消除附加工作 设计好的行为 设计一个体贴的软件不比做一个粗陋的软件难多少 把软件设计成一个举止得体的人,目录,第一篇 理解目标导向设计 第二篇 设计行为与形态 第三篇 设计交互细节 附录：设计原则小结,第一

6、篇 理解目标导向设计,1目标导向设计 2实现模型和心理模型 3新手、专家和中间用户 4理解用户：定性研究 5为用户建模：人物角色和目标 6设计的基础：场景剧本和需求 7从需求到设计：框架和细化,1目标导向的设计过程,产品成功的关键是目标，而不是特性,目标导向是-回答在定义和设计数字产品过程中-出现的最重要的问题的强有力工具。 Who are my users? What are my users trying to accomplish? How do my users think about what theyre trying to accomplish? What kind of exp

7、eriences do my users find appealing and rewarding? How should my product behave? What form should my product take? How will users interact with my product? How can my products functions be most effectively organized? How will my product introduce itself to first-time users? How can my product put an

8、 understandable, appealing, and controllable face on technology? How can my product deal with problems that users encounter? How will my product help infrequent and inexperienced users understand how to accomplish their goals? How can my product provide sufficient depth and power for expert users?,2

9、实现模型和心理模型,大多数软件都是按照实现模型来设计的 用户界面应该基于用户的心理模型，而不能基于实现模型；（需求，而不是制作）,3新手、专家和中间用户,为中间用户优化（正态分布图） 将用户想像成非常聪明但非常忙的人（新手教程不能拖沓） 为不断提高的，永久的中间用户设计 没有人愿意停留在新手级别 永久的中间要好些需要什？ 工具-并且容易记忆和寻找 习惯方法 在线帮助和工具提示 高级特性会让他们放心,4理解用户：定性研究,定义研究 以一种更有用的方式帮助我们理解产品的问题域、情境和约束条件。 更快、更容易识别产品用户和潜在用户的行为模式 定性研究的类型 访谈利益关系人 访谈主题专家 访谈用户和客

10、户 用户观察、人种学现场研究 文献调研 产品/原型和竞争审查,5为用户建模：人物角色和目标,Noman在情感设计中谈到，认知的三个层次：本能，行为和反思。 因而，设计也相应的可分为三个层次： 1.为本能反应设计 设计的视觉外观和姿态。实际上是感情设计-在特定的情景下引起人们心里和感情的反应-而不只是美观设计。 2.为行为层次设计 可以完善用户行为、暗含的假设和心里模型。是交互设计和可用性设计。 直接影响其他两个层次，也会被其他两个层次所影响。 * 行为设计为基础，本能设计和反思设计元素和谐统一。 3.为反思层次设计 打造长期的用户产品关系。 从而，产生三个目标： 1.体验目标 简单，通用且个人

11、的。代表用户的感情期望。 2.最终目标 代表用户的操作动机。作为产品行为、任务、外观和感觉的基础。 3.人生目标 表达了用户的渴望，通常会超越产品设计的情景。深层次和驱动力和动机。 可以用来解释为何用户要尽力完成他们的“最终目标”。 小结： 体验目标和本能处理过程有关，即：用户感受到什么？ 最终目标和行为处理过程有关，即：用户想要做什么？ 人生目标和反思处理过程有关，及：用户想要成为什么？,6设计的基础：场景剧本和需求,在设计产品的如何行为之前，要先定义产品做什么（目标需求决定） 不要混淆“功能”和“需求” 需求定义阶段的5步骤 创建问题和前景综述 头脑风暴 不受约束且不加评判 人物角色的期望

12、 构建情境场景剧本 确定需要,7从需求到设计：框架和细化,设计框架 定义交互框架6步骤 定义外形因素、姿态和输入方法 姿态：用户投入多大注意力和产品互动，产品对用户作何反应 定义功能和数据元素 功能元素； 将产品假想为人类 决定功能组和层次 勾画出大致的交互框架 构建关键线路场景剧本 通过验证性的场景剧本来检查设计,定义视觉设计框架 开发视觉语言研究 将选好的视觉风格变成屏幕原型 定义工业设计框架 与交互设计者合作展开外形因素和输入方法方面的工作 开发粗略的原型 开发形式语言研究 细化外形和行为 尽可能考虑到所有主要的视图和对话 设计验证和可用性测试 发现问题 评估而非创造，不能替代交互设计,

13、第二篇 设计行为与形态,8综合优秀的设计：原则与模式 9平台和姿态 10协调和流 11消除附加工作 12设计好的行为 13隐喻、习惯用法及启示 14视觉界面设计,8综合优秀的设计：原则与模式,交互设计原则 关于行为、形式和内容的普适法则 作用于不同层面的设计原则 设计价值 概念原则 行为原则，界面原则 使工作负荷降至最低。 设计价值 交互设计模式,9平台和姿态,设计桌面软件 独占姿态 使用者一般都是中间用户 默认是以最大化方式运行 使用最小（保守）的视觉风格-适应用户长时间注视 创建一个视觉反馈丰富的环境-提供视觉指示和用户行为暗示 可以使用丰富的输入 每个部分可以用多种方式操作-直接操作、对

14、话框、快捷键、加速键 这时用户的使用环境通常都是稳定而舒适，可以执行一些敏感、精确的操作 暂时姿态 暂时应用必须简单、清晰并且意思准确 明亮醒目的图形有助于用户更快定位 必须可移动，且有一个标题或者明显的地方供使用者拖放 运行暂态应用时，它应处于上一次的位置和配置状态下 后台姿态 用户与后台应用的交互本质也是暂时的 暂时姿态的设计规则也同样适用 用屏幕图标表示它们的状态,为网页设计 独占属性 暂时属性,其他平台 一般性设计原则 设计手持设备,10协调和流,流 当人们全身心地投入在某个活动中时，他们会对周围的事物视而不见。这种状态称为“流”（flow） 一种深层次的，近乎完全的融入状态 透明 为

15、创造流的感觉，用户交互必须透明 透明：让人们和他们的目标面对面，而意识不到软件的接入。用户感觉不到交互机制的存在。 不论你的界面多酷，越少越好 协调的界面是透明的,协调和流-设计和谐的交互,遵循用户心理模型 少就是多 优雅快要被看做是：新潮、简单、经济和优美的方式解决设计问题。 强烈的目标产生一个极简主义的用户界面的经典例子-Google 让用户直接操作产品，而不是强迫用户和产品讨论 理想的交互情形不是对话，更像是在使用工具 工具就放在手边 提供工具是对复杂性的妥协 使工具的选择和操作简单，并避免破坏流 工具的状态清晰展示，切换快速简便 提供非模态的反馈 非模态反馈：无论何时，反馈给用户的信息

16、，不停止停止系统的正常任务流和交互。 为可能设计，为可能做好准备 不把罕见的不平常的可能性直接带入到用户界面中。 不突出边缘情况。 提供符合情境的信息 提供直接的操作和图形输入,协调和流-设计和谐的交互,反映对象和程序的状态 避免不必要的报告 把正在辛苦工作的状态表现清楚 过于详细的反馈应该以一种更加微妙的方式给出 不打断进程来报告常态信息 不要用对话框报告常态内容 避免空白的状态 请求原谅，而不是请求许可 为用户提供强大的工具帮助其进行尝试 把命令和设置区别开来 执行应该只是简单的执行 为表达对程序的精确要求，需要一个设置对话框 设置可能包含执行，但是执行不应该包含设置,协调和流-设计和谐的

17、交互,提供选择，而不是提问 提问！=选择，二者的差别就像是：面试和逛商场 对话框是提问，工具栏是选择 用户不喜欢被提问。提问暗示用户是：无知的、健忘的、不主动的、不能自理的、烦躁的、过分要求的 人类对待和交互的方式和对待人类相同 用户更喜欢自由选择，而不是被程序以模态的方式提问 隐藏弹射座椅的操纵杆 弹射座椅：它的使用将引起重要变化，而且过程不可逆 应当对经验较浅的用户隐藏 优化响应能力，调节延迟时间 具有足够的响应能力 在尽可能小的响应时间下尽可能丰富的交互设计 应该清晰的表达状态和进程，包括估计的剩余时间，以及一个关键的可以取消的机制,11消除附加工作,在我们努力实现目标的同时，满足工具或

18、者某些外部因素需要的其他工作 常见的附加工作 训练工具-人们很少长期需要培训工具 无人需要的“纯粹”的附加工作 视觉附加工作 过分依赖视觉隐喻-我们盯着屏幕的时间越长，我们越埋怨程序中已熟悉的内容占用的屏幕空间 使用过度风格化的图形和界面元素,消除附加工作,停止进度-不要极端愚蠢地停止进度 错误、通知和确认信息 在用户心中产生恐惧和不确定性是完全不必要的。 让用户请求允许 不要让用户请求允许 在有输出的地方允许输入 常见加件工作陷阱 不要强迫用户到另外一个窗口中完成影响本窗口的功能 不要强迫用户记住他将事物放在层次文件系统中的那个位置 不要强迫用户调整窗口大小或移动窗口 不要强迫用户重新进入个

19、人设置 不要强迫用户在填充字段 时满足完整性 不要让用户确认其行为 不要让用户的行为产生错误,导航,导航是一种附加工作 多屏幕、插图或页面间的导航 涉及到注意力的整体转移，最容易迷失方向 在窗格之间导航 导航的多个窗格之间应该相互靠近 标签窗格可以节省空间，但是简短的标签很难准确描述其中的内容 当一个工作区存在多个支持窗格而不同时使用时，可使用标签窗格 在工具和菜单之间导航 额外的鼠标移动会让用户恼怒 信息导航 滚动通常是必要的 链接是web的导航范式，但是它很容易引起混乱 缩放和平移一起使用，会产生导航困难,导航,改善导航 减少目的地的数量 页面和窗口数量减至最少 控制窗口和页面的相邻窗格数

20、量 控件数量限制在用户真正满足其目标的最佳值 尽量减少滚动 提供导航标志 提供更好的参考点-导航标志 以用户参考界面上的持久对象来导航 菜单、工具栏、其他持久对象 等 提供总体视图 可以是图形的，也可以是文本的，这取决于内容的性质 提供合适的控件-功能映射 调整界面以适应用户需要 对界面进行组织来减少导航 界面的控件和显示根据三个属性来组织 使用频率 混乱程度 风险暴露程度 避免层次关系,12设计好的行为,如果希望用户喜欢我们的软件，那么我们设计软件时，应该让它表现得像一位举止得体的人。 如果希望用户能效地使用我们地软件，那么就应该包软件设计得像一个帮助和支持自己工作的同事。 设计一个体贴的软

21、件不比做一个粗陋的软件难多少 人来思考，机器来做 软件应该像人一样体贴,设计体贴的软件,关心用户 努力记住我们的工作习惯，特别是所有我们高速过它的事 恭顺的 不恭顺的软件监督并随意判断和限制人的行动 乐于助人的 以一种合适的途径提供对用户有用的信息 具有常识 要防止在不合适的地方提供不合适的功能 预见需求 利用软件的空闲时间为我们办事 是尽责的 一个尽责的人会从长远的角度来认识所执行任务的意义 软件应该为我们的长远使用目标服务，而非仅仅处理当前问题 不会因为自己的问题增加你的负担 防止一些不必要的通知、确认、错误消息干扰用户的使用。 我们不希望软件因为它的小恐惧和小成功而不断地纠缠我们 软件不

22、仅应该对自己的事情保持安静，而且应该是聪明、自信并自主地解决自己的问题 及时通知我们 及时通知我们关心的事。获得这些信息时不打断我们，在需要这些信息时，它都在那里 提供大量运行状态的非模态反馈,设计体贴的软件,有知觉的 有知觉的软件观察用户在做什么，然后利用那些模式提供相关的信息 应该观察我们的偏好并且自觉的记住它们 自信的 软件应该坚定其信念，毫不犹豫地执行用户请求 如果怀疑用户可能发生错误（这也是常事），它应该为恢复该操作做好准备 不问过多问题 即使失败也不失风度 当你的一个朋友严重失礼时，他会试图以后弥补，挽回可以挽回的损失 当软件发现一个致命问题时，它可以充分利用时间，努力弥补过失而不

23、让用户受到损害或简单地让系统崩溃 知道什么时候调整规则 可规避系统的一个好处是减少错误，允许小的错误进入系统 人们能在它们造成严重问题之前纠正它们，以避免更大及更持久的错误 在现实世界中，缺失的信息和没有适当填充到标准字段的额外西悉尼都是成功的重要工具 承担责任 大多软件采取这种态度：“这不是我的责任”。当把工作传递给某些硬件设备时，它袖手旁观，任由愚蠢的硬件完成。,设计聪明的软件,利用计算机的空闲周期 有记忆 如果我们能够赋予产品理解用户行为的能力，记忆并灵活地根据用户之前的行为显示信息和功能的能力，在用户效率和满意方面会有很大提高。 任务一致性 记住选择和默认：如果值得用户输入，就值得程序

24、记住。 记住动作 文件位置 可推论的信息 多会话撤销 过去的数据输入 程序文件的外部活动 赋予程序记忆 缩小决策集合 偏好阈值 多少情况下，多数是对的,13 隐喻、习惯用法及启示,习惯用法界面 基于我们学习和使用习惯的方式 手动启示 隐喻的局限性,14 视觉界面设计,设计关心的是寻找最适合的表现方式来传达一些具体的信息 设计首先是格调、风格和传达了品牌信息的框架，是信息的清晰性和可读性,交互界面设计的原则,运用视觉属性将元素分组，创造清晰的层次结构 创建层次结构 建立关系 空间上组织在一起 眯眼测试 闭一只眼，眯一只眼查看哪些元素突出，哪些模糊 在每个组织层次上提供视觉架构和流 对齐和网格 网

25、格系统 创建逻辑路径 对称和平衡 使用紧凑、一致且上下文合适的图像 面向功能的图标 将对象和视觉符号关联起来 在视觉上区分不同的行为元素 绘制图标和视觉符号 图标保持简单和示意性，使用少量的颜色和阴影，保持适当大小 将行为视觉化 风格一致，功能全面并且有目的性 形式和功能 品牌、客户体验和用户界面 避免视觉噪声和杂乱 避免过多的视觉元素,视觉界面设计,保持简单 让最少的视觉和功能元素发挥最大效能 完美不是无以复加，而是无以复见 视觉界面中的文本 采用高度对比文本（对比度80%最佳），不要使用互补色 选择合适的字形和字号（sans-serif） 将文本清晰地组成段落 视觉界面中的颜色,视觉信息设

26、计原则,加强视觉对比 显示因果关系 显示多个变量 在一个现实中结合文本、图形和数据 确保内容的品质、相关性和完整性 在相邻空间上显示事物，而不按时间堆积 可量化的数据就要量化,第三篇 设计交互细节,15搜索和查找：改善数据检索 16理解撤销 17重新思考“文件”和“保存” 18改进数据输入 19点操作、选择和直接操作 20窗口行为 21控件 22菜单 23工具栏 24对话框 25错误、警告和确认 26为不同需求设计,Design Principles,Chapter 1 Interaction design is not guesswork. Chapter 2 User interfaces

27、 should be based on user mental models rather than implementation models. Goal-directed interactions reflect user mental models. Users dont understand Boolean logic. Dont replicate Mechanical-Age artifacts in user interfaces without Information-Age enhancements. Significant change must be significan

28、tly better. Chapter 3 Nobody wants to remain a beginner. Optimize for intermediates. Imagine users as very intelligent but very busy. Chapter 5 Dont make the user feel stupid. Focus the design for each interface on a single primary persona.,Chapter 6 Define what the product will do before you design

29、 how the product will do it. In early stages of design, pretend the interface is magic. Chapter 7 Never show a design approach that youre not happy with; stakeholders just might like it. There is only one user experience form and behavior must be designed in concert with each other. Chapter 9 Decisi

30、ons about technical platform are best made in concert with interaction design efforts. Optimize sovereign applications for full-screen use. Sovereign interfaces should feature a conservative visual style. Sovereign applications should exploit rich input. Maximize document views within sovereign appl

31、ications. Transient applications must be simple, clear, and to the point. Transient applications should be limited to a single window and view. A transient application should launch to its previous position and configuration. Kiosks should be optimized for first-time use.,Chapter 10 No matter how co

32、ol your interface is, less of it would be better. Well-orchestrated user interfaces are transparent. Follow users mental models. Less is more. Enable users to direct, dont force them to discuss. Keep tools close at hand. Provide modeless feedback. Design for the probable; provide for the possible. C

33、ontextualize information. Provide direct manipulation and graphical input. Reflect object and application status. Avoid unnecessary reporting. Dont use dialogs to report normalcy. Avoid blank slates. Ask for forgiveness, not permission. Differentiate between command and configuration. Provide choice

34、s; dont ask questions. Hide the ejector seat levers. Optimize for responsiveness; accommodate latency.,Chapter 11 Eliminate excise wherever possible. Dont weld on training wheels. Dont stop the proceedings with idiocy. Dont make users ask for permission. Allow input wherever you have output. Inflect

35、 the interface for typical navigation. Users make commensurate effort if the rewards justify it. Chapter 12 The computer does the work and the person does the thinking. Software should behave like a considerate human being. If its worth the user entering, its worth the application remembering. Chapt

36、er 13 Most people would rather be successful than knowledgeable. All idioms must be learned; good idioms need to be learned only once. Never bend your interface to fit a metaphor.,Chapter 14 A visual interface is based on visual patterns. Visually distinguish elements that behave differently. Visual

37、ly communicate function and behavior. Take things away until the design breaks, then put that last thing back in. Visually show what; textually tell which. Obey standards unless there is a truly superior alternative. Consistency doesnt imply rigidity. Chapter 17 Managing disks and files is not a use

38、r goal. Save documents and settings automatically. Put files where users can find them. Disks are a hack, not a design feature. Chapter 18 An error may not be your fault, but its your responsibility. Audit, dont edit.,Chapter 19 Rich visual feedback is the key to successful direct manipulation. Supp

39、ort both mouse and keyboard use for navigation and selection tasks. Use cursor hinting to show the meanings of meta-keys. Single-click selects data or an object or changes the control state. Mouse-down over an object or data should select the object or data. Mouse-down over controls means propose ac

40、tion; mouse-up means commit to action. Visually communicate pliancy. Use cursor hinting to indicate pliancy. The selection state should be visually evident and unambiguous. Drop candidates must visually indicate their receptivity. The drag cursor must visually identify the source object. Any scrolla

41、ble drag-and-drop target must auto-scroll. Debounce all drags. Any program that demands precise alignment must offer a vernier.,Chapter 20 A dialog box is another room; have a good reason to go there. Provide functions in the window where they are used. The utility of any interaction idiom is contex

42、t-dependent. Chapter 21 A multitude of control-laden dialog boxes doth not a good user interface make. Use links for navigation, and buttons or butcons for action. Distinguish important text items in lists with graphic icons. Never scroll text horizontally. Use bounded controls for bounded input. Use noneditable (display) con