交互设计精髓ppt课件.pptx

《交互设计精髓ppt课件.pptx》由会员分享，可在线阅读，更多相关《交互设计精髓ppt课件.pptx（53页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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

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

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

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

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

6、、专家和中间用户 4理解用户：定性研究 5为用户建模：人物角色和目标 6设计的基础：场景剧本和需求 7从需求到设计：框架和细化1目标导向的设计过程研究 用户及领域建模 用户及使用情景定义需求 用户 业务 技术定义框架 结构 流程细化 行为 形式 内容支持 开发阶段的需求 产品成功的关键是目标产品成功的关键是目标，而不是特性 目标导向是-回答在定义和设计数字产品过程中-出现的最重要的问题的强有力工具。 Who are my users? What are my users trying to accomplish? How do my users think about what theyre

7、trying to accomplish? What kind of experiences 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

8、-time users? How can my product put an 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 sufficie

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

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

11、关系。从而，产生三个目标：从而，产生三个目标：1.体验目标 简单，通用且个人的。代表用户的感情期望。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、它们，以避免更大及更持久的错误在现实世界中，缺失的信息和没有适当填充到标准字段的额外西悉尼都是成功的重要工具承担责任大多软件采取这种态度：“这不是我的责任”。当把工作传递给某些硬件设备时，它袖手旁观，任由愚蠢的硬件完成。设计聪明的软件利用计算机的空闲周期有记忆如果我们能够赋予产品理解用户行为的能力，记忆并灵活地根据用户之前的行为显示信息和功能的能力，在用户效率和满意方面会有很大提高。 任务一致性 记住选择和默认：如果值得用户输入，就值得程序记住。 记住动作文件位置可推论的信息多会话撤销过去的数据输入程序文件的外部活动 赋予程序记忆缩小决策集合偏好阈值多少情况下，多数是对的13 隐喻、习惯用法及

24、启示 习惯用法界面 基于我们学习和使用习惯的方式 手动启示 隐喻的局限性14 视觉界面设计 设计关心的是寻找最适合的表现方式来传达一些具体的信息 设计首先是格调、风格和传达了品牌信息的框架，是信息的清晰性和可读性交互界面设计的原则运用视觉属性将元素分组，创造清晰的层次结构创建层次结构建立关系空间上组织在一起眯眼测试闭一只眼，眯一只眼查看哪些元素突出，哪些模糊在每个组织层次上提供视觉架构和流对齐和网格网格系统创建逻辑路径对称和平衡使用紧凑、一致且上下文合适的图像面向功能的图标将对象和视觉符号关联起来在视觉上区分不同的行为元素绘制图标和视觉符号图标保持简单和示意性，使用少量的颜色和阴影，保持适当大

25、小将行为视觉化风格一致，功能全面并且有目的性形式和功能品牌、客户体验和用户界面避免视觉噪声和杂乱避免过多的视觉元素视觉界面设计 保持简单 让最少的视觉和功能元素发挥最大效能 完美不是无以复加，而是无以复见 视觉界面中的文本 采用高度对比文本（对比度80%最佳），不要使用互补色 选择合适的字形和字号（sans-serif） 将文本清晰地组成段落 视觉界面中的颜色视觉信息设计原则 加强视觉对比 显示因果关系 显示多个变量 在一个现实中结合文本、图形和数据 确保内容的品质、相关性和完整性 在相邻空间上显示事物，而不按时间堆积 可量化的数据就要量化第三篇 设计交互细节15搜索和查找：改善数据检索16理

26、解撤销17重新思考“文件”和“保存”18改进数据输入19点操作、选择和直接操作20窗口行为21控件22菜单23工具栏24对话框25错误、警告和确认26为不同需求设计Design PrinciplesChapter 1 Interaction design is not guesswork.Chapter 2 User interfaces should be based on user mental models rather than implementationmodels. Goal-directed interactions reflect user mental models. Us

27、ers dont understand Boolean logic. Dont replicate Mechanical-Age artifacts in user interfaces without Information-Age enhancements. Significant change must be significantly better.Chapter 3 Nobody wants to remain a beginner. Optimize for intermediates. Imagine users as very intelligent but very busy

28、.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 how the product will do it. In early stages of design, pretend the interface is magic.Chapter 7 Never show a design approach that you

29、re 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 Decisions about technical platform are best made in concert with interaction design efforts. Optimize sovereign applications for full-screen u

30、se. Sovereign interfaces should feature a conservative visual style. Sovereign applications should exploit rich input. Maximize document views within sovereign applications. Transient applications must be simple, clear, and to the point. Transient applications should be limited to a single window an

31、d 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 cool your interface is, less of it would be better. Well-orchestrated user interfaces are transparent. Follow users mental models. Less is

32、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. Contextualize information. Provide direct manipulation and graphical input. Reflect object and application status. Avoid unnecessary repor

33、ting. Dont use dialogs to report normalcy. Avoid blank slates. Ask for forgiveness, not permission. Differentiate between command and configuration. Provide choices; dont ask questions. Hide the ejector seat levers. Optimize for responsiveness; accommodate latency. Chapter 11 Eliminate excise wherev

34、er 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 the interface for typical navigation. Users make commensurate effort if the rewards justify it. Chapter 12 The computer does the work an

35、d the person does the thinking. Software should behave like a considerate human being. If its worth the user entering, its worth the application remembering. Chapter 13 Most people would rather be successful than knowledgeable. All idioms must be learned; good idioms need to be learned only once. Ne

36、ver bend your interface to fit a metaphor. Chapter 14 A visual interface is based on visual patterns. Visually distinguish elements that behave differently. Visually communicate function and behavior. Take things away until the design breaks, then put that last thing back in. Visually show what; tex

37、tually tell which. Obey standards unless there is a truly superior alternative. Consistency doesnt imply rigidity. Chapter 17 Managing disks and files is not a user goal. Save documents and settings automatically. Put files where users can find them. Disks are a hack, not a design feature. Chapter 1

38、8 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. Support both mouse and keyboard use for navigation and selection tasks. Use cursor hinting to show the meanings of meta-keys. Single-click sel

39、ects 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 action; mouse-up means commit toaction. Visually communicate pliancy. Use cursor hinting to indicate pliancy. The selection state should be

40、visually evident and unambiguous. Drop candidates must visually indicate their receptivity. The drag cursor must visually identify the source object. Any scrollable drag-and-drop target must auto-scroll. Debounce all drags. Any program that demands precise alignment must offer a vernier.Chapter 20 A

41、 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 context-dependent.Chapter 21 A multitude of control-laden dialog boxes doth not a good user interface make. Use links for navigation, and buttons

42、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) controls for output-only text.Chapter 22 Use menus to provide a pedagogic vector. Disable menu items when they are no

43、t applicable. Use consistent visual symbols on parallel command vectors.Chapter 23 Toolbars provide experienced users fast access to frequently used functions. Use ToolTips with all toolbar and iconic controls. Chapter 24 Put primary interactions in the primary window. Dialogs are appropriate for fu

44、nctions that are out of the main interaction flow. Dialogs are appropriate for organizing controls and information about a single domain object or application function. Use verbs in function dialog title bars. Use object names in property dialog title bars. Visually differentiate modeless dialogs fr

45、om modal dialogs. Use consistent terminating commands for modeless dialog boxes. Dont dynamically change the labels of terminating buttons. Inform the user when the application is unresponsive. Never use transitory dialogs as error messages or confirmations. All interaction idioms have practical lim

46、its. Dont stack tabs. Chapter 25 Error message boxes stop the proceedings with idiocy and should be avoided. Make errors impossible. Users get humiliated when software tells them they failed. Do, dont ask. Make all actions reversible. Provide modeless feedback to help users avoid mistakes. Chapter 26 Offer shortcuts from the Help menu. Offer users a gallery of ready-to-use templates.