Interaction design pattern

简介:

 

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:按照页面的不同类型(比如:首页和帮助页面),应用领域的不同(购物网站和社区网站)给出了设计建议。

目录
相关文章
|
6月前
|
算法 C++
运用C++ 策略模式的艺术(The Art of Applying Strategy Pattern)
运用C++ 策略模式的艺术(The Art of Applying Strategy Pattern)
43 0
|
机器学习/深度学习 编解码 测试技术
UPerNet:Unified Perceptual Parsing for Scene Understanding论文解读
人类在多个层面上识别视觉世界:我们毫不费力地对场景进行分类并检测内部物体,同时还识别物体的纹理和表面及其不同的组成部分。
223 0
|
设计模式 分布式计算 Kubernetes
译|Design patterns for container-based distributed systems(上)
译|Design patterns for container-based distributed systems
87 0
|
设计模式 缓存 监控
译|Design patterns for container-based distributed systems(下)
译|Design patterns for container-based distributed systems(下)
70 0
|
移动开发 算法 Linux
艾伟:C# Design Patterns (2) - Strategy
Strategy Pattern (策略模式) 所谓 Strategy Pattern 的精神,就是将策略 (算法) 封装为一个对象,易于相互替换,如同 USB 设备一样可即插即用;而不是将策略、具体的算法和行为,硬编码在某个类或客户程序中,导至事后的修改和扩展不易。
1016 0
|
移动开发 算法 Linux
艾伟_转载:C# Design Patterns (2) - Strategy
Strategy Pattern (策略模式) 所谓 Strategy Pattern 的精神,就是将策略 (算法) 封装为一个对象,易于相互替换,如同 USB 设备一样可即插即用;而不是将策略、具体的算法和行为,硬编码在某个类或客户程序中,导至事后的修改和扩展不易。
918 0