《交互设计精髓ppt课件.pptx》由会员分享，可在线阅读，更多相关《交互设计精髓ppt课件.pptx（53页珍藏版）》请在三一办公上搜索。
1、交互设计精髓3-阅读笔记By gale.wang,本书作者Alan Cooper是软件交互设计的先知和传播者，客户咨询公司Cooper Interaction Design的创始人和总裁。他设计了第一个可视化开发工具Visual Basic，他的公司帮助IBM、3M、Ericsson、Sun、Visa.等客户开发了许多具有市场竞争力的产品。 联系作者：, , ,有些程序员认为解决问题的方案是一种他们还学不会的编程技巧。这就是一个问题。它聚焦于单独的技术本身，而单独的技术只能把我们带入混乱。仅仅聚焦于技术并不能使我们摆脱困境。使用交互设计和目标导向的途径将对产品结构决策产生巨大的好处，以及对公司
2、的决策位置产生巨大的有益影响。事实证明目标导向的途径具有巨大的决策好处和价值。最重要的事情是，要使质量和效益最大化，并使顾客高兴，你，产品开发先生要做的事情是在过程的早期引入目标导向的交互设计。交互设计师需要具备凭空想象复杂行为的能力，交互设计应当在任何代码编写之前做。交互设计师必须能够在代码被写出来之前，想象它是做什么的。我们设计项目的第一部分是针对问题域详细研究项目。,本书译者及相关评论,刘松涛毕业于北京理工大学电子工程系，获电子工程学士学位；英国伯明翰大学，获用户中心系统专业硕士学位。现任英国无限交互设计公司(Infinite Interactive)的设计顾问，著名的交互设计双语杂志u
3、iGarden的编辑，中国用户体验设计的主要推动者之一，有译作AboutFace 3：交互设计精髓。在英国无限交互设计公司，主要从事用户体验和信息无障碍方面的设计、研究和咨询工作，特别专注于东西方文化对用户体验的影响，其客户包括BBC、路透社、沃达丰(Vodafone)等。uiGarden UI花园http:/,谁应该看本书,适合很多人交互设计的学生、业者，任何关注用户和数字产品交互的人程序员，数字产品设计中的其他方面的设计师，从事可用性工作的人项目经理希望它可以让你以一种新的方式思考数字产品的设计,以一种新的方式思考数字产品设计,交互设计是“了解用户想要什么”的工具讨论的重点：数字产品、环境
4、、系统、服务的交互设计为什么是“交互设计”数字产品的UX（用户体验-User Experience U）设计包括三个方面：形式、内容、行为UX不足以概括用于数字产品开发、系统及服务的不同设计与可用性学科UX回避了交互设计的核心问题核心问题如何设计具有复杂行为的交互系统？设计要平等的与工程、市场、业务管理进行协调工作,本书是什么和不是什么？,目标交互设计的原则、模式、过程是良好产品交互和界面的关键。结合这最实用有效的交互设计工具：原则、模式、过程。讨论交互设计的4个主要步骤研究产品所处的领域了解用户及其需求定义设计方案的框架填充设计细节,我的最大收获,产品成功的关键是目标，而不是特性在设计产品的
5、如何行为之前，要先定义产品做什么（目标需求决定）不要混淆“功能”和“需求”UI设计的三个层次：为本能，为行为，为反思设计。将用户想像成非常聪明但非常忙的人为不断提高的，永久的中间用户设计流和透明流：一种深层次的，近乎完全的融入状态透明：让人们和他们的目标面对面，而意识不到软件的接入。用户感觉不到交互机制的存在。设计和谐的交互消除附加工作设计好的行为设计一个体贴的软件不比做一个粗陋的软件难多少把软件设计成一个举止得体的人,目录,第一篇 理解目标导向设计第二篇 设计行为与形态第三篇 设计交互细节附录：设计原则小结,第一篇 理解目标导向设计,1目标导向设计2实现模型和心理模型3新手、专家和中间用户4
6、理解用户：定性研究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 experiences do my users find appealing and reward
7、ing? 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 understandable, appealing, and controllable f
8、ace on technology? How can my product deal with problems that users encounter? How will my product help infrequent and inexperienced users understand how toaccomplish their goals? How can my product provide sufficient depth and power for expert users?,2实现模型和心理模型,大多数软件都是按照实现模型来设计的用户界面应该基于用户的心理模型，而不能基
9、于实现模型；（需求，而不是制作）,3新手、专家和中间用户,为中间用户优化（正态分布图） 将用户想像成非常聪明但非常忙的人（新手教程不能拖沓）为不断提高的，永久的中间用户设计没有人愿意停留在新手级别永久的中间要好些需要什？工具-并且容易记忆和寻找习惯方法在线帮助和工具提示高级特性会让他们放心,4理解用户：定性研究,定义研究以一种更有用的方式帮助我们理解产品的问题域、情境和约束条件。更快、更容易识别产品用户和潜在用户的行为模式定性研究的类型访谈利益关系人访谈主题专家访谈用户和客户用户观察、人种学现场研究文献调研产品/原型和竞争审查,5为用户建模：人物角色和目标,Noman在情感设计中谈到，认知的三
10、个层次：本能，行为和反思。因而，设计也相应的可分为三个层次：1.为本能反应设计设计的视觉外观和姿态。实际上是感情设计-在特定的情景下引起人们心里和感情的反应-而不只是美观设计。2.为行为层次设计可以完善用户行为、暗含的假设和心里模型。是交互设计和可用性设计。直接影响其他两个层次，也会被其他两个层次所影响。* 行为设计为基础，本能设计和反思设计元素和谐统一。3.为反思层次设计打造长期的用户产品关系。从而，产生三个目标：1.体验目标简单，通用且个人的。代表用户的感情期望。2.最终目标代表用户的操作动机。作为产品行为、任务、外观和感觉的基础。3.人生目标表达了用户的渴望，通常会超越产品设计的情景。深
11、层次和驱动力和动机。 可以用来解释为何用户要尽力完成他们的“最终目标”。小结：体验目标和本能处理过程有关，即：用户感受到什么？最终目标和行为处理过程有关，即：用户想要做什么？人生目标和反思处理过程有关，及：用户想要成为什么？,6设计的基础：场景剧本和需求,在设计产品的如何行为之前，要先定义产品做什么（目标需求决定）不要混淆“功能”和“需求”需求定义阶段的5步骤创建问题和前景综述头脑风暴不受约束且不加评判人物角色的期望构建情境场景剧本确定需要,7从需求到设计：框架和细化,设计框架定义交互框架6步骤定义外形因素、姿态和输入方法姿态：用户投入多大注意力和产品互动，产品对用户作何反应定义功能和数据元素
12、功能元素；将产品假想为人类决定功能组和层次勾画出大致的交互框架构建关键线路场景剧本通过验证性的场景剧本来检查设计,定义视觉设计框架开发视觉语言研究将选好的视觉风格变成屏幕原型定义工业设计框架与交互设计者合作展开外形因素和输入方法方面的工作开发粗略的原型开发形式语言研究细化外形和行为尽可能考虑到所有主要的视图和对话设计验证和可用性测试发现问题评估而非创造，不能替代交互设计,第二篇 设计行为与形态,8综合优秀的设计：原则与模式9平台和姿态10协调和流11消除附加工作12设计好的行为13隐喻、习惯用法及启示14视觉界面设计,8综合优秀的设计：原则与模式,交互设计原则关于行为、形式和内容的普适法则作用
13、于不同层面的设计原则设计价值概念原则行为原则，界面原则使工作负荷降至最低。设计价值交互设计模式,9平台和姿态,设计桌面软件独占姿态使用者一般都是中间用户默认是以最大化方式运行使用最小（保守）的视觉风格-适应用户长时间注视创建一个视觉反馈丰富的环境-提供视觉指示和用户行为暗示可以使用丰富的输入每个部分可以用多种方式操作-直接操作、对话框、快捷键、加速键这时用户的使用环境通常都是稳定而舒适，可以执行一些敏感、精确的操作暂时姿态暂时应用必须简单、清晰并且意思准确明亮醒目的图形有助于用户更快定位必须可移动，且有一个标题或者明显的地方供使用者拖放运行暂态应用时，它应处于上一次的位置和配置状态下后台姿态用
14、户与后台应用的交互本质也是暂时的暂时姿态的设计规则也同样适用用屏幕图标表示它们的状态,为网页设计独占属性暂时属性,其他平台一般性设计原则设计手持设备,10协调和流,流当人们全身心地投入在某个活动中时，他们会对周围的事物视而不见。这种状态称为“流”（flow）一种深层次的，近乎完全的融入状态透明为创造流的感觉，用户交互必须透明透明：让人们和他们的目标面对面，而意识不到软件的接入。用户感觉不到交互机制的存在。不论你的界面多酷，越少越好协调的界面是透明的,协调和流-设计和谐的交互,遵循用户心理模型少就是多优雅快要被看做是：新潮、简单、经济和优美的方式解决设计问题。强烈的目标产生一个极简主义的用户界面
15、的经典例子-Google让用户直接操作产品，而不是强迫用户和产品讨论理想的交互情形不是对话，更像是在使用工具工具就放在手边提供工具是对复杂性的妥协使工具的选择和操作简单，并避免破坏流工具的状态清晰展示，切换快速简便提供非模态的反馈非模态反馈：无论何时，反馈给用户的信息，不停止停止系统的正常任务流和交互。为可能设计，为可能做好准备不把罕见的不平常的可能性直接带入到用户界面中。不突出边缘情况。提供符合情境的信息提供直接的操作和图形输入,协调和流-设计和谐的交互,反映对象和程序的状态避免不必要的报告把正在辛苦工作的状态表现清楚过于详细的反馈应该以一种更加微妙的方式给出不打断进程来报告常态信息不要用对
16、话框报告常态内容避免空白的状态请求原谅，而不是请求许可为用户提供强大的工具帮助其进行尝试把命令和设置区别开来执行应该只是简单的执行为表达对程序的精确要求，需要一个设置对话框设置可能包含执行，但是执行不应该包含设置,协调和流-设计和谐的交互,提供选择，而不是提问提问！=选择，二者的差别就像是：面试和逛商场对话框是提问，工具栏是选择用户不喜欢被提问。提问暗示用户是：无知的、健忘的、不主动的、不能自理的、烦躁的、过分要求的人类对待和交互的方式和对待人类相同用户更喜欢自由选择，而不是被程序以模态的方式提问隐藏弹射座椅的操纵杆 弹射座椅：它的使用将引起重要变化，而且过程不可逆应当对经验较浅的用户隐藏优化
17、响应能力，调节延迟时间具有足够的响应能力在尽可能小的响应时间下尽可能丰富的交互设计应该清晰的表达状态和进程，包括估计的剩余时间，以及一个关键的可以取消的机制,11消除附加工作,在我们努力实现目标的同时，满足工具或者某些外部因素需要的其他工作常见的附加工作训练工具-人们很少长期需要培训工具无人需要的“纯粹”的附加工作视觉附加工作过分依赖视觉隐喻-我们盯着屏幕的时间越长，我们越埋怨程序中已熟悉的内容占用的屏幕空间使用过度风格化的图形和界面元素,消除附加工作,停止进度-不要极端愚蠢地停止进度错误、通知和确认信息在用户心中产生恐惧和不确定性是完全不必要的。让用户请求允许不要让用户请求允许在有输出的地方
18、允许输入常见加件工作陷阱不要强迫用户到另外一个窗口中完成影响本窗口的功能不要强迫用户记住他将事物放在层次文件系统中的那个位置不要强迫用户调整窗口大小或移动窗口不要强迫用户重新进入个人设置不要强迫用户在填充字段 时满足完整性不要让用户确认其行为不要让用户的行为产生错误,导航,导航是一种附加工作多屏幕、插图或页面间的导航涉及到注意力的整体转移，最容易迷失方向在窗格之间导航导航的多个窗格之间应该相互靠近标签窗格可以节省空间，但是简短的标签很难准确描述其中的内容当一个工作区存在多个支持窗格而不同时使用时，可使用标签窗格在工具和菜单之间导航额外的鼠标移动会让用户恼怒信息导航滚动通常是必要的链接是web的
19、导航范式，但是它很容易引起混乱缩放和平移一起使用，会产生导航困难,导航,改善导航减少目的地的数量页面和窗口数量减至最少控制窗口和页面的相邻窗格数量控件数量限制在用户真正满足其目标的最佳值尽量减少滚动提供导航标志提供更好的参考点-导航标志以用户参考界面上的持久对象来导航菜单、工具栏、其他持久对象 等提供总体视图可以是图形的，也可以是文本的，这取决于内容的性质提供合适的控件-功能映射调整界面以适应用户需要对界面进行组织来减少导航界面的控件和显示根据三个属性来组织使用频率混乱程度风险暴露程度避免层次关系,12设计好的行为,如果希望用户喜欢我们的软件，那么我们设计软件时，应该让它表现得像一位举止得体的
20、人。如果希望用户能效地使用我们地软件，那么就应该包软件设计得像一个帮助和支持自己工作的同事。设计一个体贴的软件不比做一个粗陋的软件难多少人来思考，机器来做软件应该像人一样体贴,设计体贴的软件,关心用户努力记住我们的工作习惯，特别是所有我们高速过它的事恭顺的不恭顺的软件监督并随意判断和限制人的行动乐于助人的以一种合适的途径提供对用户有用的信息具有常识要防止在不合适的地方提供不合适的功能预见需求利用软件的空闲时间为我们办事是尽责的一个尽责的人会从长远的角度来认识所执行任务的意义软件应该为我们的长远使用目标服务，而非仅仅处理当前问题不会因为自己的问题增加你的负担防止一些不必要的通知、确认、错误消息干
21、扰用户的使用。我们不希望软件因为它的小恐惧和小成功而不断地纠缠我们软件不仅应该对自己的事情保持安静，而且应该是聪明、自信并自主地解决自己的问题及时通知我们及时通知我们关心的事。获得这些信息时不打断我们，在需要这些信息时，它都在那里提供大量运行状态的非模态反馈,设计体贴的软件,有知觉的有知觉的软件观察用户在做什么，然后利用那些模式提供相关的信息应该观察我们的偏好并且自觉的记住它们自信的软件应该坚定其信念，毫不犹豫地执行用户请求如果怀疑用户可能发生错误（这也是常事），它应该为恢复该操作做好准备不问过多问题即使失败也不失风度当你的一个朋友严重失礼时，他会试图以后弥补，挽回可以挽回的损失当软件发现一个
22、致命问题时，它可以充分利用时间，努力弥补过失而不让用户受到损害或简单地让系统崩溃知道什么时候调整规则可规避系统的一个好处是减少错误，允许小的错误进入系统人们能在它们造成严重问题之前纠正它们，以避免更大及更持久的错误在现实世界中，缺失的信息和没有适当填充到标准字段的额外西悉尼都是成功的重要工具承担责任大多软件采取这种态度：“这不是我的责任”。当把工作传递给某些硬件设备时，它袖手旁观，任由愚蠢的硬件完成。,设计聪明的软件,利用计算机的空闲周期有记忆如果我们能够赋予产品理解用户行为的能力，记忆并灵活地根据用户之前的行为显示信息和功能的能力，在用户效率和满意方面会有很大提高。任务一致性记住选择和默认：
23、如果值得用户输入，就值得程序记住。记住动作文件位置可推论的信息多会话撤销过去的数据输入程序文件的外部活动赋予程序记忆缩小决策集合偏好阈值多少情况下，多数是对的,13 隐喻、习惯用法及启示,习惯用法界面基于我们学习和使用习惯的方式手动启示隐喻的局限性,14 视觉界面设计,设计关心的是寻找最适合的表现方式来传达一些具体的信息设计首先是格调、风格和传达了品牌信息的框架，是信息的清晰性和可读性,交互界面设计的原则,运用视觉属性将元素分组，创造清晰的层次结构创建层次结构建立关系空间上组织在一起眯眼测试闭一只眼，眯一只眼查看哪些元素突出，哪些模糊在每个组织层次上提供视觉架构和流对齐和网格网格系统创建逻辑路
24、径对称和平衡使用紧凑、一致且上下文合适的图像面向功能的图标将对象和视觉符号关联起来在视觉上区分不同的行为元素绘制图标和视觉符号图标保持简单和示意性，使用少量的颜色和阴影，保持适当大小将行为视觉化风格一致，功能全面并且有目的性形式和功能品牌、客户体验和用户界面避免视觉噪声和杂乱避免过多的视觉元素,视觉界面设计,保持简单让最少的视觉和功能元素发挥最大效能完美不是无以复加，而是无以复见视觉界面中的文本采用高度对比文本（对比度80%最佳），不要使用互补色选择合适的字形和字号（sans-serif）将文本清晰地组成段落视觉界面中的颜色,视觉信息设计原则,加强视觉对比显示因果关系显示多个变量在一个现实中结
25、合文本、图形和数据确保内容的品质、相关性和完整性在相邻空间上显示事物，而不按时间堆积可量化的数据就要量化,第三篇 设计交互细节,15搜索和查找：改善数据检索16理解撤销17重新思考“文件”和“保存”18改进数据输入19点操作、选择和直接操作20窗口行为21控件22菜单23工具栏24对话框25错误、警告和确认26为不同需求设计,Design Principles,Chapter 1Interaction design is not guesswork.Chapter 2 User interfaces should be based on user mental models rather th
26、an implementationmodels. 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 significantly better.Chapter 3 Nobody wants to remain a beg
27、inner. 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 how the product will do it. In early stages of des
28、ign, 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 Decisions about technical platform are best made in concert
29、 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 applications. Transient applications must be simple, clea
30、r, 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 cool your interface is, less of it would be better. Wel
31、l-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. Contextualize information. Provide direct manipulation
32、 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 choices; dont ask questions. Hide the ejector seat levers.
33、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 the interface for typical navigation. Users make com
34、mensurate 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.Chapter 13 Most people would rather be successful than knowl
35、edgeable. 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. Visually communicate function and behavior. Take things away
36、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 user goal. Save documents and settings automatically. Put f
37、iles 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. Support both mouse and keyboard use for navigation and select
38、ion 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 action; mouse-up means commit toaction. Visually communicat
39、e 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 scrollable drag-and-drop target must auto-scroll. Debounce all dr
40、ags. 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 context-dependent.Chapter 21 A multitude of control-laden dialog
41、 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) controls for output-only text.Chapt
42、er 22 Use menus to provide a pedagogic vector. Disable menu items when they are not 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
43、 24 Put primary interactions in the primary window. Dialogs are appropriate for functions 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 obje
44、ct names in property dialog title bars. Visually differentiate modeless dialogs from 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 dia
45、logs as error messages or confirmations. All interaction idioms have practical limits. Dont stack tabs.,Chapter 25Error 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 26Offer shortcuts from the Help menu.Offer users a gallery of ready-to-use templates.,
