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 示例

     

    本文将介绍其中几个比较优秀的，比较遗憾的是国内还没有专注此类内容的网站。

  1. 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'.

    除此之外，模板中还包括分页控件的原理分析和易用性建议。

     

  2. Designing Interfaces

    地址： <http://designinginterfaces.com/>

    这个网站按照Web设计的意图进行分类：要组织页面可用的设计，要展现复杂的数据可用的设计等等；具体到每一个具体的设计，这个网站同样使用一致的模板进行描述。

    特别值得一提的是，这个网站已经出了一本书：《Designing Interfaces: Patterns for Effective Interaction Design 》

     

  3. Welie Pattern library

    地址： <http://welie.com/patterns/index.php>

    这个网站的分类是按照User needs; Application Needs;分类，每一个分类里面囊括了绝大多数的页面设计，可以说是一个交互设计大全。这个Pattern Library还有一个特色的专题是Context of design：按照页面的不同类型（比如：首页和帮助页面），应用领域的不同（购物网站和社区网站）给出了设计建议。