上期回顾：交互设计模式(三)-Tagging(标签)

当人们进入一个全新环境时,他们需要对空间建立认知模型,要有个空间记忆的感觉。同样，当新用户来到全新、陌生的网站时，用户也希望有个类似站点地图的东西。但如果想让用户更加自如的使用网站，让用户毫无顾及的去尝试，不怕迷路，我们必须为用户建立起空间记忆模式。它犹如沙漠中迷途者手中的指南针与行驶在荒原上汽车装的GPS一样，那么在网站上空间记忆模式的应用有哪些表现呢？

来自用户的抱怨

“我敢发誓，这个按钮一分钟以前还在这里。它哪里去了？”：

当人们使用东西或文档时，他们经常通过回忆它们在哪里来再次找到它们，而不是它们的名字。很多网站把它们的表单按钮——确定、取消等——放在预定的位置上，部分原因是由于它们的空间记忆依赖性。在复杂的应用系统中，下面这些元素也可以由记忆它们的相对位置找到：工具条上的工具、层级结构中的对象等。因此，你应该小心使用像响应式展开（Responsive Disclosure）这样的模式。把某个东西添加到界面上通常不会引起麻烦，但是把控件重新排列会打乱空间记忆，从而难以找到。这得看具体情况，如果你不确定的话可以做一些用户测试。空间记忆和习惯之间的关系很密切。和习惯一样，空间记忆也是一个在应用中及在应用间保持一致性会带来好处的理由。人们会期望在类似的地方找到类似的功能表现。顺便说一句，网站导航菜单列表的顶部和底部都是很特别的区域，从认知的角度说，与处于菜单中间的项目相比，顶部和底部的项目会获得用户更多的注意力，记忆也更持久。如果他们发生改变，对用户的重新建立空间记忆势必会造成影响，请慎之。

用户浏览历史

Taobao.com：

在淘宝list页面的右边栏，淘宝设置了用户最近浏览过的detail产品的历史记录。这种设计方式让用户可以轻松地追溯曾经浏览过的产品，并比较它们。

Amazon.com：

产品的显示顺序是从你最近一次(上一次)访问过的产品开始 ,而且每个项目都有一个“删除此产品”选项，类似于在购物车页面查找商品。

当一个产品被删除，页面重新加载并更新清单。如果它是用AJAX做，此功能将更为高效，但它仍然是一个实用性的提高。

在亚马逊用户浏览历史记录页的右侧栏，用户会看到一个列表是他们最近浏览的搜索条件和类别：点击“X”的每个项目旁边，在搜索条件和类别历史中,用户可以删除自己的任何项目。这是一个客户端功能，因此结果是瞬间的：当他们删除一个产品时,用户不必等待整个页面的重新加载.这些定制（或编辑）功能，确保购物体验不会给用户带来繁重的负担。如果他们收到的推荐，他们并不满意，用户可以修改它们，以改善今后的访问。

通过以上的案例，我们知道淘宝与亚马逊都尽量考虑了用户的最原始需求：对浏览历史的跟踪和追溯，并且他们都给予了创新，淘宝把它与对比产品联系在一起，亚马逊把它和可定制的历史推荐系统联系在一起。用户可以轻松找到曾经关注过的产品，也不容易迷失在复杂的网站中。并且，让用户建立空间记忆模式的同时赋予更多的可用性价值。

Undo,Redo与返回，前进

IE浏览器：

无论是软件中的撤消与重做，还是IE浏览器中的返回与前进按钮。全都是为用户能够快速返回到熟悉环境而设计。这样的空间记忆模式是如此贴心，使用网站的用户再也不用担心会迷路，即使这个网站的面包屑多么糟糕！可惜的是返回、前进是线性的循序操作，对于１到３步的返回、前进还是很方便的。但是对于４步以上就会很麻烦了。所以面包屑方式在某些时候可以跳跃方式的返回某个状态，这也许是其中为什么好多大型网站没有完全抛弃面包屑的一个小原因吧？当然还有其他原因这里不再赘述！

其他空间记忆表现形式

搜索框历史输入记录：

面包屑：

筛选历史记录：

以上只是在空间记忆模式中，表现形式的冰山一角而已。更多的空间记忆表现，只要我们平常愿意去观察我们身边的设计，也许会发现更多有意思的空间记忆。

总结

当网站重构、首页改版需要交互设计师出Demo的时候，记得考虑下用户的空间记忆与操作习惯。在创新的同时，要兼顾老用户的操作习惯与思维方式，用户的操作环境经常处于一种“有序的混乱”状态，看起来乱糟糟的，但是用户可以很快找到他要的东西。

[版权声明]:版权归作者Alite所有，转载时请以超链接形式标明文章原始出处和作者信息及本声明:http://www.alitedesign.com/

Tagging(标签)

问题摘要

用户往往想通过流行或最详尽的主题来浏览内容。

实例

何时使用

解决办法

标签云是标签的列表，其中每个标签的字体大小是大或更大取决于它的重量级(也就是热度)。在标签云的重量可以用三种不同方式表现:

1.大小反映了该标签已应用于单个项目的次数。

这种标签云可以帮助确定该项目的分布是如何被分类的。

2.大小代表了该标签已被应用的数量。

作为每个受欢迎的标签展示。

3.大小代表了以某种分类方式下，内容项目的数量。

标签是被用来作为内容项目进行分类的方法。

对于如何排序标签有几种专家意见，实例的方式排序标签是:

• 按字母顺序排列
• 随机
• 按重量
• 在语意上类似的标签组(相似的标签彼此相邻)

标签云帮助可视化语意环境，以及如何使某些类别比其他的拥有更大的重要性。它还有助于在给定的网站上找到内容是它想给公众的一种印象。以及展示哪些类别的内容是网站聚焦的。

综述

收集和共享数字对象

在过去的几年里，我们看到了一类关于收集，组织，分享，和标记数字对象的设计网站,并且它们已经开始泛滥了.这些对象可能是照片，演示文档，视频或其它任何可以代表数字的东西。Flickr（http://flickr.com），是第一个实施受欢迎标签的照片共享网站。让用户共享标签和演示文档。LibraryThing的用户可以在网上给图书加上TAG标签,同时YouTube的用户可以为上传的视频加上TAG标签。在Flickr上的照片标签,可以说是用户附加到照片上简短的文字作品。Flickr的用户通常会在照片上搜索特定标签或与特定标签属于特定用户的照片。Flickr的API可以检索用户和照片，您可以用它来构建特定的网址照片或照片组标记。

提升电子商务的体验

网上商店历来惯用层级式的分类方式来分离商品，但现在一些也开始试验标签的方式。标签在通过搜索和导航改进产品的“易找性”方面很有潜力。Etsy (http://www.etsy.com)，一个典型的工艺品网上商店，而它的核心导航部分竟然是用户提交的关键字组成，这使得网站导航的改变是以该网站用户正在提交商品的类目为基础的。Buzzillions.com（http://www.buzzillions.com）提供产品评论，人们的标签以“专业人士”，“优劣”和“良好”等表示。
Buzzillions.com评论比典型产品评论结构更好，它可以通过tag评论，帮助人们迅速对产品进行评估。因为他们使用标记，审查也相当灵活。例如，可以标记适合您气质的跑鞋，以一种您觉得有意义的方式。
最后，对于电子商务网站,标签是可以用来帮助社区发展的。例如Amazon.com 电子商务客户社区的建立基础在于他们频繁的使用产品上的标签。

同类模式图片展示

标签云只是些基础，更多新颖可视化上的一些扩展和尝试，比如说在标签间建立联系的分层标签;在时间轴上显示趋势等。详细请点这里。

觉得不错继续浏览下期:交互设计模式(四)-Spatial Memory(空间记忆)

[版权声明]:版权归作者Alite所有，转载时请以超链接形式标明文章原始出处和作者信息及本声明:http://www.alitedesign.com

模式库

在模式库里,我将列出所有电子商务网站需要的模式.以下将罗列出经典常用的模式案例,我也试图让这些模式看起来更有趣味性与实用性。(Yahoo模式库也有对Pattern的一种定义。)

模式归属类别

为了方便调用和维护模式库中的各种模式,首先将模式库中的模式分成三大类:用户需求,应用需求,语境下的设计.在用户需求类别中,有一种类型叫基本交互。这里我将从这个纬度把基本交互中所涉及的模式一一罗列讲解。

Pagination(分页,标记页数)

问题摘要

用户需要查看数据的一个子集,却发现所有数据是显示在一页的,这时候查看变得非常不容易。

实例

何时使用

• 当一个屏幕不能承载更多的数据时。
• 感兴趣的项目通常可以在前几页找到。
• 需要深入探索数据项,而非考虑内容显示在一个滚动区域。

解决办法

综述:打破完整数据,分成更小的项目,顺序显示这些数据和单独序列页。提供分页控制一页一页地浏览。提供链接让用户浏览网页的前一页和后一页的这种行动。此外，提供连结到最开始和结束的资料组 （第一个和最后一个)。如果数据集是可预知数量，就显示一个链接的最后一页。如果数据集是不可预知数量或显示有可能是不同规模的（例如，来自于搜索引擎的结果数据)，请不用担心要显示链接到的最后一页。

项目分页

• 拆分项目列表成为一个序列的网页。
• 提供可访问前一页和下一页网页信息的链接。
• 提供可跳转到浏览第一页和最后一个页面的链接。
• 提供用户正在浏览的什么类型的对象信息。
• 提供用户正在浏览一套物体的有关信息.使用形式:”[$ObjectName]s [DisplayedItemRange] of [TotalItems]“
• 本环节的顺序如下：第一页，上一页，下一页，最后。
• 使用的图形箭头，以增加链接的目标大小。
• 显示翻页在不可用情况的管理显示状态。

搜索分页

• 使信息转化为按相关性分类排序的一系列网页。
• 提供分页控制来提供访问分页内容。

分页控制

• 显示导航控件作为一行链接。
• 本环节的顺序如下： ‘前一页’ ，网页链接， ‘后一页’。
• 在标签’前一页’后,显示左箭头。
• 在标签’下一页’前,显示右箭头。
• 使用可用鼠标点击的箭头。
• 网页链接应设置包含最多10个网页链接。如果有少页的结果存在，只显示网页上提供的网页链接。
• 当网页在1-6页中时,该网页链接应始终从’1 ‘开始。
• 当在6 页(7页以后)的任意网页上，该网页链接起始应在当前页面减去5 。例如，当第7页，第一页将是2 （ 7-5= 2 ）和最后一页将11 （仍显示10页)。
• 第一页的结果不会有显示 ‘上一页’的标签或箭头。
• 结果的最后一页不会显示’下一页’的标签或箭头。
• 当前网页的页码链接不显示超链接。
• 最后在分页控制区上方加个结果页的标签。
  

基本原理

项目分页

• 显示箭头图形有助于区分链接，并提供更大的点击目标。
• 与搜索分页不同，在任何时候,分页控件都是可见的（即使禁用),当出现无法控制分页时,这可以防止用户分心。

搜索分页

• 显示箭头图形有助于区分联系，并提供更大的点击目标。
• 结合上下文背景,增加不可控状态显示箭头价值不大原因有:
  (1)这些显示箭头,经常显示可打开折叠层。
  (2)当第一页的结果已组合成绝大多数的综合浏览量。展示不可用“前一页”控制翻页,这些是没有什么附加价值的。
• 虽然“第一页”链接很有价值,但也要与呈现在随机访问的链接功能竞争。
• “最后”链接是没有什么价值的,因为结果是按相关性排序的,这也是问题，因为结果总数（因此，最后的结果）可能不知道。 同类模式图片展示

觉得不错继续浏览下期:交互设计模式(三)-Tagging(标签)

交互设计师通常会遇见这样情景:经过一番冥思苦想与挣扎,终于把PD提交的需求快速的完成了.当然,按照流程就是提交到视觉设计师那了.但在视觉设计过程中,发现有些用户行为和操作路径,在DEMO中并没有涉及到,当然就会被视觉设计师打回返工.这样几经周折才算把问题都想清楚设计完整了.

先不提孰是孰非,如果交互设计师能够充分掌握交互设计原则与交互设计模式会不会把这种情况出现的几率降低到最少呢?答案是肯定的!设计原则可以指导设计师如何设计美好,有效的产品,以及系统与服务,并且如何正直成功地从事设计工作.设计模式可以针对某类特定的设计问题,提供可供效仿的概括性解决方案.但是我们不要把设计原则和设计模式当作尚方宝剑,时刻都要问个为什么在做判断.理论放到实战中只能做参考之用,不要盲目崇拜理论而忘记推陈出新.理论是实践中总结出来的,也有可能被实践中新的理论替代.

交互设计模式概念:
设计模式是一种提取有效的设计方案,将其应用于类似问题的方法.尝试将设计理论形式化,记录最好的实践工作,有助于实现以下目标.
*节省新项目的时间和精力.
*提高设计方案的质量.
*促进设计师与程序员的沟通.
*帮助设计师成长.

尽管在设计教育与提高工作效率方面,模式的重要性不言而喻.交互设计的模式发展尤其令人兴奋,因为这些模式代表用户体验与相关活动的优化成果.

其中有很多优秀的交互设计模式学习网站:
http://www.welie.com/patterns/index.php
http://www.slideshare.net/
http://ui-patterns.com/
http://patterntap.com/

交互设计模式的历史

交互设计的模式理念源自Christopher Alexander,他撰写过具有巨大影响力的两本著作,即(一种模式语言和永恒的建筑方式).书中首次描述了建筑的设计模式.通过一系列建筑特征的精确定义,Alexander试图提取那些带给居民幸福感的建筑设计的精华.
而交互设计模式和建筑设计模式有一个重要的区别,交互设计模式不仅仅涉及结构和元素组织,还关注响应用户活动的动态行为与变化.

交互设计模式的类型

1.定位模式:应用于概念层面,帮助界定产品对于用户的整体定位.
2.结构模式:解答如何在屏幕上安排信息和功能元素之类的问题.
3.行为模式:指在解决功能或数据元素的具体交互问题.

交互设计模式应用注意

设计模式不是菜谱或者立竿见影的解决之道,Jenifer Tidwell 在其广泛收集交互设计模式的(Designing Interfaces)一书中,曾发出这样的警告:”(模式)不是即拿即用的商品,每一次模式的运用都有所不同.”一切设计模式不应该是禁锢了设计师的思想,应该是更好的利用设计模式推陈出新.在不同环境下,设计模式的精确形式在每一个设计方案中都有或多或少的差别.一个概括的风格说明无法代替具体的设计方案.

模式语言

有一些非常完整的模式集合组成了”模式语言”.这些模式与可视化语言类似,因为它们涵盖了整个设计中用到的元素的词汇(模式语言更抽象,也更注重行为,而可视化语言讲的是形状,图标,颜色,字体等).这个集合不那么完整,它包含的技术也没有达到传统模式的要求,但它非常简洁,可以管理,并且非常有用.

说了那么多有关交互设计模式的概念,也许你已经初步了解,也许你已经感觉云里雾里呵呵,都没关系.接下来我将以举例子的方式,详细讲解每个模式在WEB设计实战中的应用.

觉得不错继续浏览下期:交互设计模式(二)-Pagination(分页,标记页数)