《从设计模式到交互设计》由会员分享，可在线阅读，更多相关《从设计模式到交互设计（75页珍藏版）》请在金锄头文库上搜索。
1、从 设计模式 到 交互设计PatternInteraction From Design ToDesignAuthor: 小哀AmyLiSlides Collection: 交互模式13年6月1日星期六简单的自我介绍下.13年6月1日星期六电子科技大学计算机科学专业英国约克大学人机交互专业李婧百度移动用户体验部（MUX） 高级交互设计师Amyli.me小哀AmyLiInteraction Design产品百度搜索 iOS百度语音 助手小黄鸡 模式百度语音助手百度锁屏手机百度13年6月1日星期六初次译作：引人入胜 出版13年6月1日星期六2013-MUX百度移动用户体验部火热招聘！如果你有两把刷子
2、，就 赶紧投简历至 ，让我们一起给世界点颜色看看！13年6月1日星期六什么是设计模式PatternDesign13年6月1日星期六PatternDesign13年6月1日星期六are ways to describe best practices, explain good designs, and capture experience so that other people can reuse these solutions.设计模式是用来记录最佳交互设计实线的方式，可以展示优秀的设计，记录设计中的经验，使更多的人复用这些方案来解决问题。 Christopher AlexanderPatt
3、ernDesign13年6月1日星期六？如何找到并记录这些设计模式呢？13年6月1日星期六模式名称（pattern name）一个助记名，它用一两个词来描述模式的问题、解决方案和效果。命名一个新的模式增加了我们的设计词汇。设计模式允许我们在较高的抽象层次上进行设计。基于一个模式词汇表，我们自己以及同事之间就可以讨论模式并在编写文档时使用它们。模式名可以帮助我们思考，便于我们与其他人交流设计思想及设计结果。找到恰当的模式名也是我们设计模式编目工作的难点之一。问题(problem)描述了应该在何时使用模式。它解释了设计问题和问题存在的前因后果，它可能描述了特定的设计问题，如怎样用对象表示算法等。也
4、可能描述了导致不灵活设计的类或对象结构。有时候，问题部分会包括使用模式必须满足的一系列先决条件。解决方案(solution)描述了设计的组成成分，它们之间的相互关系及各自的职责和协作方式。因为模式就像一个模板，可应用于多种不同场合，所以解决方案并不描述一个特定而具体的设计或实现，而是提供设计问题的抽象描述和怎样用一个具有一般意义的元素组合（类或对象组合）来解决这个问题。效果(consequences)描述了模式应用的效果及使用模式应权衡的问题。尽管我们描述设计决策时，并不总提到模式效果，但它们对于评价设计选择和理解使用模式的代价及好处具有重要意义。软件效果大多关注对时间和空间的衡量，它们也表述
5、了语言和实现问题。因为复用是面向对象设计的要素之一，所以模式效果包括它对系统的灵活性、扩充性或可移植性的影响，显式地列出这些效果对理解和评价这些模式很有帮助。12-11-29Progress Bar Pattern - Design Pattern Library - YDN1/ this on DeliciousProgress BarBeta Last modified December 9, 2009A progress bar (or progress meter) can help set expectations for length of process and for what
6、 to generally expect throughout the process, and can also let users know where they are in the flow.Also known as Progress Indicator, Multi-step Progress Bar (or Indicator), Wizard Steps, Progress Train, and Steps Left.What Problem Does This Solve?The user needs to know where they are in a multi-scr
7、een process (such as purchase or set-up).When to Use This PatternUse a progress bar in a wizard or other predefined multistep process that the user may only ever have to complete one time, or at most on rare occasions. Do not use for routine tasks for which a heavy step-by- step handholding will eve
8、ntually wear out its welcome.Whats the Solution?Show a progress bar (or progress meter), which is a persistent navigation bar displaying a sequence of steps and highlighting the current step and optionally the degree or percentage of completion so far.The progress bar should begin as soon as the use
9、r has decided to start the process.The final step in the progress bar should reflect the last screen where action is required (e.g., Complete Registration, Submit Order). Dont include a passive Confirmation or Receipt Page in the progress bar.Break down steps in a meaningful way. There doesnt need t
10、o be a 1:1 step-to-screen correlation as long as its clear the steps refer to actions rather than individual screens. For example: “Sign In“ may involve a sign- in page and registration.Use short names for steps and use parallel construction. Action-oriented verbs are good, but use only if each step
11、 can be fairly described this way.Ensure the progress bar is accurate and reliable in all use cases. No user should skip steps or encounter steps that arent reflected in the progress bar. Be sure to include sign-in as needed. Create different progress bars for different use cases as necessary.Ensure
12、 the visual design cant be mistaken for clickable navigation.Why Use This Pattern?A progress bar can set expectations for the length of process, give a preview of the overall process, and keep users informed about how far theyve progressed in the prescribed flow.DisambiguationThe term progress bar c
13、an be applied to an animated bar showing a dynamically updated view of system progress (as in the case of the Progress Bar widget in YUI 2.This pattern deals with an articulated, multi-step bar or indicator showing stepwise user-controlled progress.Developer SolutionsDeveloper SolutionsAPIs & ToolsA
14、PIs & ToolsCommunityCommunityDocumentationDocumentationForumForumDiscuss Navigation PatternsPattern Information RELATED PATTERNS BreadcrumbsAS USED ON YAHOO! Yahoo! Password Helper Yahoo! GroupsCODE EXAMPLES Progress BarSIMILAR PATTERNS IN OTHER LIBRARIES Progress Bar (Design of Sites) Completeness
15、Meter (UI-P) Steps Left (UI-P) Locator Element: Step by Step Train (Oracle)BLOG Blog ArticleLAYOUTNAVIGATIONSELECTIONRICH INTERACTIONSOCIAL13年6月1日星期六模式名称（pattern name）一个助记名，它用一两个词来描述模式的问题、解决方案和效果。命名一个新的模式增加了我们的设计词汇。设计模式允许我们在较高的抽象层次上进行设计。基于一个模式词汇表，我们自己以及同事之间就可以讨论模式并在编写文档时使用它们。模式名可以帮助我们思考，便于我们与其他人交流设计
16、思想及设计结果。找到恰当的模式名也是我们设计模式编目工作的难点之一。问题(problem)描述了应该在何时使用模式。它解释了设计问题和问题存在的前因后果，它可能描述了特定的设计问题，如怎样用对象表示算法等。也可能描述了导致不灵活设计的类或对象结构。有时候，问题部分会包括使用模式必须满足的一系列先决条件。解决方案(solution)描述了设计的组成成分，它们之间的相互关系及各自的职责和协作方式。因为模式就像一个模板，可应用于多种不同场合，所以解决方案并不描述一个特定而具体的设计或实现，而是提供设计问题的抽象描述和怎样用一个具有一般意义的元素组合（类或对象组合）来解决这个问题。效果(consequences)描述了模式应用的效果及使用模式应权衡的问题。尽管我们
