Interaction design is the art of facilitating interactions between humans through products and services.
-- --《Designing for Interaction》
自动完成控件适用什么场景?Drag&Drop的设计初衷是什么?分页控件又有什么学问?
对于这些耳熟能详屡见不鲜交互设计,应用到我的新系统中合适么?如何应用才是Best Practice?交互设计集计算机科学、人体工程学、心理学、认知学于一身。它可以是很曲高和寡的学术课题,然而一些Web开发的先行者也着手总结Interaction Design patterns,力图给出这些设计的使用场景、专业解决方案。
Interaction Design Pattern和其它设计模式一样,都是来自实战的经验总结.
Interaction Design Pattern作用:
-
提供交互设计的原则
-
避免重复的错误
- 加强团队内和团队外的交流
Interaction Design Pattern的模板:
设计者们可能在各种设计的分类上有所区别,但是具体到某一个设计,设计者都会使用一个模板来描述。
而这个模板也大都包含下列内容:
-
Use When 使用场景(problems / context)
-
Solution 解决方案
-
Principle 原理
-
Examples 示例
本文将介绍其中几个比较优秀的,比较遗憾的是国内还没有专注此类内容的网站。
Yahoo Design Pattern Library
地址: <http://developer.yahoo.com/ypatterns/>
Yahoo开发者网络给Web开发者留下印象最深的就是它提出了页面优化原则,《Best Practices for Speeding Up Your Web Site》源文档 <http://developer.yahoo.com/performance/rules.html> 以及那个著名的工具:Yslow;Yahoo在Web开发方面的贡献不仅在此,Design Pattern Library也是其中之一。这个Web开发的设计模式库对常见的页面功能元素进行了分类并按照同样的模板做了一一分析。你可以找到选项卡、分页控件、Tooltip、自动完成、淡入淡出、Slider等老朋友。
他们都是使用相同的模板做介绍比如:分页控件,模板中给出了它的适用场景(use when)
Use When
-
Displaying search results.
- There are more results than can comfortably fit within one screen.
给出专业的解决方案建议(Sloution),这样我们就不致于做出非常业余的应用
Solution
-
Break the information into a sequence of pages sorted by relevance.
-
Provide a pagination control for providing access to paged content
-
Present links in the following order: 'Prev', page links, 'Next'.
-
Display a left arrow after the label 'Prev'.
-
Display a right arrow before the label 'Next'.
-
Make the arrow(s) clickable.
-
The page links should contain a maximum set of 10 page links. If fewer pages of results exist, only show page links for the available pages.
- When on pages 1-6, the page links should always start at '1'.
除此之外,模板中还包括分页控件的原理分析和易用性建议。
Designing Interfaces
地址: <http://designinginterfaces.com/>
这个网站按照Web设计的意图进行分类:要组织页面可用的设计,要展现复杂的数据可用的设计等等;具体到每一个具体的设计,这个网站同样使用一致的模板进行描述。
特别值得一提的是,这个网站已经出了一本书:《Designing Interfaces: Patterns for Effective Interaction Design 》
Welie Pattern library
地址: <http://welie.com/patterns/index.php>
这个网站的分类是按照User needs; Application Needs;分类,每一个分类里面囊括了绝大多数的页面设计,可以说是一个交互设计大全。这个Pattern Library还有一个特色的专题是Context of design:按照页面的不同类型(比如:首页和帮助页面),应用领域的不同(购物网站和社区网站)给出了设计建议。
分享到:
相关推荐
本篇文章将基于“Addison.Wesley.Service.Design.Patterns.Fundamental.Design.Solutions.for.SOAP.WSDL.and.RESTful.Web.Services”这一资料深入探讨Web服务的设计模式,重点关注WebService API设计的核心概念。...
Design Pattern Library**以及**Interaction Design Pattern Library(Welie.com)**等。这些资源提供了丰富的案例研究,涵盖了导航设计、表单设计等多个方面。此外,设计师还可以参考**darkpatterns.org**等网站,...
The use of every pattern is demonstrated with simple example programs. These programs are illustrated with screen shots and UML diagrams displaying how the classes interact. Each of these programs is...
除了软件架构模式,《Pattern-Oriented Software Architecture Volume 1》还提到了另一本关于用户界面设计的书籍——《A Pattern Approach to Interaction Design》。这本书由Jan Borchers编写,探索了模式格式在...
Create efficient object interaction patterns for faster and more efficient Android development Get into efficient and fast app development and start making money from your android apps Implement ...
Chapter 1 : MVVM as Design Pattern Chapter 2 : Setting Up the POSApp Chapter 3 : MVVM as Design Philosophy Chapter 4 : Two-Way Communication Chapter 5 : Converting the Invoice Form Chapter 5 continues...
It is now recognized that any non-trivial WPF or Silverlight application needs be designed around the Model-View-ViewModel (MVVM) design pattern in order to unlock the technology's full data-binding ...
Designing Software Product Lines with UML: From Use Cases to Pattern-Based Software Architectures 第一部分 Long a standard practice in traditional manufacturing, the concept of product lines is ...
Designing Software Product Lines with UML: From Use Cases to Pattern-Based Software Architectures 第二部分 Long a standard practice in traditional manufacturing, the concept of product lines is ...
《A Pattern Approach to Interaction Design》是另一本值得关注的书籍,作者Jan Borchers在此书中探索了模式在用户界面设计中的应用。本书特色在于提供了一种全面的模式语言,专门用于互动展示的界面设计,同时也对...
#### Design Pattern Catalog The document contains several chapters, each focusing on a different integration pattern. Here’s a detailed look at some of these patterns: ##### Chapter 2: Remote ...
Roxie Roxie is a lightweight Android library for ... In Android world, this design pattern is known as MVI (Model-View-Intent) where Model describes State and Intent describes user interaction. Roxi
Additionally, considering the potential need for system maintenance, the B/S (Browser/Server) design pattern is utilized, allowing server-side updates without requiring any changes on the client-side...
The design phase focuses on creating a detailed blueprint for each module, outlining the interaction between components and defining the logic behind their operations. This phase also involves ...
The system design and detailed design of the game are explained in depth, covering aspects such as user interaction, game mechanics, and level progression. To enhance user experience, this Android ...
Throughout the development process, attention is paid to user interaction and responsiveness, ensuring smooth gameplay and intuitive controls. The sound control module allows users to toggle audio ...
3. **Defining a Model, View, and Controller (MVC):** This step involves understanding the Model-View-Controller architectural pattern and implementing it within the project. - **Model:** Represents...
本书还推荐了其他几本相关的书籍,如《Pattern-Oriented Software Architecture Volume 2: Patterns for Concurrent and Networked Objects》和《A Pattern Approach to Interaction Design》,这些书籍进一步扩展...