上期回顾：交互设计模式(三)-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(分页,标记页数)

最近在使用Apple.com/Ebay.com/Amazon.com/shopping.yahoo.com的时候,发现一些用户使用细节的小问题.针对这些问题,我体验了前面四个网站的处理方式,觉得还是有可以借鉴的东西.

针对suggestion的情感化设计细节处理

EBAY.COM：

当用户觉得不想使用suggestion,或认为suggestion会给他带来干扰的时候,用户可以选择关闭suggestion.( suggestion有的时候可能会切断用户的心流,对用户的心智模型造成影响)

当用户想重新使用suggestion的时候,仍然可以通过搜索框内右边的按钮还原suggestion功能.此时,当鼠标移到还原按钮上面时候,为避免用户不理解按钮的意义会有一个TIP来显示按钮的作用.

YAHOO SHOPPING：

在YAHOO SHOPPING橘黄色框内,我也发现了suggestion可自由关闭的功能.

小结:表面上看,貌似这些功能是锦上添花,但是从用户情感化设计上考虑,这些功能也能为用户建立更多的信心,去大胆尝试并频繁使用搜索的新功能.

搜索框内容的一键清空细节处理

APPLE.COM：

苹果公司不愧是一家很关注用户体验设计的公司,在他们官网搜索功能的细节处理上,真是可见一斑!

当用户在搜索框输入关键词的同时,会在搜索框的下方出现产品分类的suggestion ,并且在搜索框内部右边(图中橘黄色框内) 出现清空搜索关键词的按钮.
当用户输入关键词出错或对原有已经输入的关键词进行删除, 重新搜索的时候,都要用(backspace键).但如果增加了” 一键清空”功能.只要用鼠标轻轻一点.就解决了反复使用键盘backspace键的烦琐操作.对用户来说这个小小的细节设计,给用户带来了很大的方便.

图中绿色框的内容让我觉得,苹果公司的设计师们独特的设计.用户会发现搜索框附近没有确定的按钮(为了视觉的美观性与平衡性) , 但用户可以使用回车键,或点击绿色框的文字链一样可以达到搜索按钮的作用,这种设计既满足了视觉的平衡,又满足了功能的需要.真是Perfect!

LIKE.COM

like.com是一家推崇”shop visually”的时尚电子商务网站，在产品搜索方面他们确实是独具匠新。

个性化搜索一直是用户的基础需求，like.com帮用户实现了四大需求：

DETAIL SEARCH

COLOR  MATCH

SHAPE MATCH

PATTERN  MATCH

Balloons(气球状提示)

问题摘要

气球状提示（Balloon）是一个小型的弹出窗口，用于通知用户出现非关键性问题或控件处于某种特殊情况。

实例

图1

• 注：气球状提示由图标、标题、正文文本组成，且所有这些部分都是可选的。
• 注：当用户试图提交操作的时候，任何未处理的问题都必须由其所有者用户界面来处理。
• 注：气球状提示通常与文本框或其他使用文本框来改变值的控件一起使用，如组合框、列表视图、树形视图等等。
• 注：保持控件之间的一致性。当发现不一致性出现时，气球状提示不再适用。
• 注：如果其他类型的控件已经进行了很好的约束，就不再需要气球状提示来给出额外的反馈。

何时使用

• 注：该信息描述的是一个问题或者特殊情况。
• 注：当正在输入时或所有者控件失去焦点时，该问题或特殊情况能被立即检测到。
• 注：这些问题并非很关键。
• 注：对于那些特殊情况，本身是合法的，但很可能并不是用户期望的。
• 注：该问题或特殊情况能用准确的语言进行描述。
• 注：这些信息描述的并非是鼠标当前指向的控件。
• 注：这些信息与用户当前的活动相关。在默认情况下，气球会在 10 秒后消失。
• 注：这些信息具有单一、确定的来源。

输入发生之前使用：

1、例如大写锁定键(Caps Lock)开启状态，密码框的气球状提示(参见图1)。所有者控件处于某种影响输入的状态，该状态可能不是用户所期望的，但用户也许没有意识到其输入所受的影响。当出现特殊情况时（如超过最大输入字符数或大写锁定被启用等），在第一时间使用气球状提示进行警告可以防止用户产生挫败感。它在给出反馈信息的同时，不改变输入焦点，不强迫用户进行操作。这一点非常重要，因为这些特殊情况有可能是故意为之的。这些气球状提示对于密码框尤为重要，因为用户在密码框中输入时只能得到很少的反馈。此类气球状提示带有警告图标。

2、输入提示:只接受数字输入的文本框，最好在输入前给予提示当焦点移动到文本框内时，出现气球状提示(如图2)。

图2

这里用于报告非关键性用户输入错误的气球状提示。使用气球状提示显示错误信息不会改变输入焦点，即使当所有者控件拥有输入焦点时，它仍然非常醒目。 为了解决问题，用户可能需要进行更改或重新输入。但如果所有者控件忽略错误的输入，用户也许可以完全不用修改。由于 问题并非关键，因此不需要使用错误图标。

输入发生之后使用：

1、当用户试图超出最大输入长度时弹出气球状提示。在下面图3示例中，气球状提示指示用户正试图超出最大输入长度。

图3

2、当用户输入无效字符时弹出气球状提示。当然，最好是没有这样的限制，因为这会削弱密码的安全性。为了防止信息泄露，该气球状提示应当只提及那些已写入文档的关于有效密码字符的信息。在下面图4示例中，气球状提示指示密码只能包含数字。

图4

3、对于关键的、短的文本框，当用户试图超出最大输入长度时，应当考虑为新用户显示气球状提示。在下面图5示例中，气球状提示指示用户试图超出最大输入长度。

图5

注：不要将气球状提示用作显示控件的附加信息，而应当考虑换用静态文本（Static Text）、信息提示（Infotip）、渐进展开控件（Progressive Disclosure）或提示文本（Prompt）。

解决办法

交互方式:当用户单击气球状提示时，直接关闭提示，不要显示其他任何 UI 或效果。与通知不同，气球状提示没有关闭按钮。如图6它就不是气球状提示。

图6

但是在阿里旺旺的登陆界面就应用了很纯正的气球状提示，如图7。

图7

前面讲到的大部分是表单上对控件Balloons(气球状提示)的应用，现在举两个在淘宝掌柜信誉与其他网站评论上的应用，如图8。

图8

这里触发条件是鼠标hover时，触发Balloons(气球状提示)。显示评论者的相关信息。这里的应用是信息提示，但却是应用了气球状提示的形式。在Amazon的商品评论里也有类似的提示，不过它不是气球状提示，在那里它承载了更多的交互和文字链。如图9。

图9

静下心来找，发现电子商务网站利用控件Balloons(气球状提示)的形式的也很多，例如EBAY首页的两块区域都有体现，如图10，11。

图10

图11

这种形象的提示大量的被应用在网页界面元素中，也体现了它的灵活与实用。作为帮助和辅助提示。控件Balloons(气球状提示)确实给我们很多不错的用户体验。

辅助功能：

仅显示与用户当前活动相关的气球状提示。
使提示文本尽可能简要。这对于视力不好的用户来说更容易阅读，且使得因屏幕阅读程序的阅读而产生的打断减到最小。
当问题或情况再次发生时重新显示气球状提示。

文本文案：

• 标题使用清晰、平实、简要、确切的语言作为标题文本，简要概括输入问题或特殊情况。
• 标题使用不带句末标点的文本片断或完整句子。
• 标题使用句子大写风格。(英文版)
• 标题使用不超过 48 个字符（英文）以适应本地化的需要。
• 正文文本的第一句话应当以与用户明确相关的方式陈述问题或情况。
• 正文第二句话应陈述用户如何做才能解决问题或恢复状态。
• 正文解释如何解决问题或恢复状态，即使这种解释显而易见，但应省略问题描述与其解决方案之间的重复。
• 正文使用包含句末标点的完整句子。
• 正文使用句子大写样式。(英文版)
• 正文使用不超过 200 个字符（英文）以适应本地化的需要。

小结：

总体来讲气球状提示，在表单中的应用是非常多的，首先它本身可以让用户参与交互也可以不参与，并没有强制性。显示时间可以控制，并且可以设置处理完错误后消失，这为它在表单提示方面的灵活性，做了很好的铺垫。由于它是浮动覆盖在页面上的，所以可以节省一定的空间。也是因为它是浮动覆盖在版面上，提示效果更明显，更容易引起用户的注意!虽然文中已经把气球状提示的每个状态与使用场景做了最详细的描述，由于实例笔者并没有找到更多特别有代表性的，使文章的解析效果并不明显，希望通过更多对Balloons(气球状提示)有思考和研究的读者给予更多的实例资源。谢谢大家的支持，笔者也将继续收集更多更好的实例与UED朋友分享!

接着上个话题“谁为用户买单”聊下去。有一种页面大家都很熟悉，就是当用户使用搜索引擎搜索关键词后，如果数据库没有找到匹配的结果，所提供的反馈提示页面——专业上我们称其为“无结果页面”。
下面举几个常见的无结果页面的例子让大家更了解下这样的交互设计，我们怎样更好地给用户提示。

GOOGLE的无结果页面

BAIDU的无结果页面

首先拿两家专业搜索引擎网站为例,在可用性与用户体验方面,它们都是做的不错的.信息类的搜索引擎,搜索出的结果用户最关心:是否是准确的,是否是很多,是否是快速的.谷歌有条宗旨就是让用户快速找到需要的信息,并快速离开网站.所以他们把无结果页面也做的那么干脆——不好意思没您找的信息,要么快速离开,要么调整关键词,要么使用谷歌推荐关键词.百度的无结果提示貌似前几行和谷歌差不多,只有最后两行:提供搜索帮助链接,希望通过系统帮助的形式为用户解决问题,实在还是不能解决怎么办?请用户自己创造它吧——百度贴吧.

joyo Amazon

Amazon.com

eBay.com

以上是国外知名的电子商务网站,先说说卓越Amazon,当它用户搜索不到产品信息时,它提供用户一个反馈建议的入口,让用户尽情的宣泄自己的不满,打出了一张同情牌.能不能根本解决问题只有用户自己知道……再说说Amazon,它就聪明多了,先把无结果页面分成两种情况:1.能尽量匹配上的就尽量匹配,提供一个推荐的搜索相近词和相近词的搜索结果,还有一个反馈搜索建议的入口;2.实在没有匹配上的了,告诉用户没有结果,推荐一些其他畅销商品-比如畅销书籍.最后说下eBay,它的方式就更五花八门了,首先它会有礼貌的提醒用户没有搜索到结果,用户可以选择从结果中查询,或者点击高级搜索去扩大搜索范围.最后实在找不到了,没关系,用户可以把自己的需求添加到商城里让更多的卖家看到买家的需求.可谓贴心之极.

谈了那么多网站的无结果页面设计,说到底它们还是有一些通用模式的,我还是想原引一个HP的例子来具体说明无结果页面的布局.

HP.COM

• 提示用户结果
  不管搜索信息还是产品,总要有个明确的答复吧.给用户明显的提示:用户说:”到底有没有?这个可以有!”网站回答:”这个真没有!”
• 建议改善搜索关键词并尽量提供相关搜索信息
  这里可以通过书写几条解决方式或链接帮助信息,提示用户一些常犯的错误及解决方案(例如百度).如果有80%的匹配度希望也是可以提供搜索结果的,毕竟那是系统纠错的过程.
• 提供用户新入口扩大搜索
  这个搜索入口一定要是扩大搜索范围的那种,先前的搜索范围没有找到相应的匹配,为用户提供更大范围的搜索,期望通过技术手段挽留住用户.(例如ebay)
• 提供用户创造需求的机会
  所有的办法用户都尝试了,可是用户还是没有找到他需要的信息.怎么办放弃操作?给用户个救生圈吧,让他自己创建一个信息需求,让卖家看到买家的需求,这是用户真实的需求.
• 提供畅销商品或热门信息供用户选择
  网站的确没用户寻找的信息,没关系网站可以推荐给用户一些畅销商品供用户选择.也许用户被网站的真诚打动选择了你推荐他的畅销商品或热门信息.

嘀咕嘀咕：

每次写文章往往开头是最难的，总想给UED读者不同的sense。就像我们设计产品总是想迎合我们的用户，最后觉得好似跟在用户后面狂奔的傻子。我们希望通过教育我们的用户来尝试一些新鲜的玩应，用户是否买单就很难说了。从一个极端走向另一个极端，显然是不科学的。用户的需求一定要听，但要有鉴别的听。好的设计用户总愿意为它买单，差的设计用户会让我们为他买单。

类目选择：

这里我先从电子商务网站中比较重要的类目选择谈起，什么样的设计用户才会愿意掏出钱包支付设计账单?

eBay.com

EBAY的LIST搜索结果页面类目选择如图所示。

从EBAY的设计的样式看，国外用户更喜欢把类目选择放在最左边的位置，并且在LIST页面类目选择还是可以折叠的。根据最新YAHOO报告显示：可能用户点击左侧的比上面的要少，但是他们觉得这样促使了更多对Results和翻页的点击，并且没有对广告产生影响。也不需要用户在看结果前需要滚动……
针对以上的特点我设计了搜索结果后LIST页面一个隐性广告的方式，在为用户提供导航功能的同时，还为用户有针对性的提供一些推荐热卖商品信息。如图所示。

当用户在首页搜索框中输入MP3时，点击搜索按钮进入LIST搜索结果页面，将看到左边为MP3相关类目选择，右边为搜索OFFER结果页面.
上图给出了类目的几种状态（鼠标经过，鼠标移开，鼠标点击后），让用户可以轻松的选择自己需要的产品类目。同时，为用户提供关联度高的隐性提示产品信息,可以提高用户使用类目的黏度。当顾客在超市选择购买的物品时,他们会根据卖场放置产品的位置去寻找自己需要的产品.所以越简单的提示类目选择会对用户寻找产品越方便.由此,制定出一套类目选择规则的方案:

1. 白色方框代表未被选中类目;
2. 蓝色方框代表已被选中类目;
3. 白色方框内含对号代表鼠标经过未必选中类目,鼠标点击后将变成蓝色方框已选状态,其他如有被选中状态将被取消;
4. 蓝色方框内含叉号代表鼠标经过已被选中类目,鼠标点击后将变成白色方框弃选状态,页面刷新恢复到未被选中初始状.

Alibaba.com

阿里巴巴国际站的类目的选择交互方式的诞生，其实听起来蛮偶然的，首先是内因：右边的广告位卖出去了，所以左边没有地方放类目选择和其他过滤条件。然后是外因：基于搜索结果页内容的侧重来说，绝大多数用户首先想看的还是结果，其次才是过滤等操作。所以国外大多数网站都是左右布局的，但当我们的过滤条件越来越丰富时，每用一次过滤或撤销，都需要对页面进行上下滚动。这对用户造成了困扰，这也是曾经在买家调研中获得的反馈。目前还没有绝对的定论来说明是左右好还是上下好。所以，我们还是要基于现有的内容丰富程度，作多种尝试。未来的国际站的类目也有可能是左右和上下的结合。

思想启迪

从阿里巴巴国际站类目的选择交互方式不断演化的过程中，偶然中孕育着必然的萌芽。当类目运营非常专业化时，是否先去引导用户点击类目；当所搜商品没有规范类目或少时，是否直接引导用户看Results。不同时期的侧重点应该是不同的，针对现在阿里巴巴中国站的现状，我们的主要用户群为国内的中小企业老板，他们对电脑大部分是初学者，交互控件的简单方便是我们首要考虑的问题。所以我们保留了一些中庸的方式，但不代表未来我们不会改变，随着用户年龄层次的逐渐降低，更多的青年中小企业的老板会重新组合我们的用户群体，他们拥有高学历，有新的思想愿意尝试新鲜的事物。那时候的类目交互方式的定位和现在一定不同。

属性筛选：

很多电子商务网站中的属性筛选与类目选择联系的非常紧密，这里我也不想单独去谈属性筛选毕竟他们联合起来才能更好的帮助用户完成查找商品的操作。

eBay.com

eBay的属性筛选紧贴类目的下面，可见它们的关系非常的紧密。其中所有属性筛选条件都是可以叠加筛选的，交互控件也是非常常见的几种，减少实现成本，提高用户接受程度，使操作的门槛尽量放底。关于它放置的位置，也是和类目相同的考虑，前边已经说明这里不再赘述。还有一点也值得关注，把类目和属性都放在最左边的位置，可以让搜索结果OFFER尽量在第一屏显示更多条数，这是用户最关心的结果。在用户测试过程中，在购买消费品中的C类用户里更关心属性大于类目，属性筛选和快速筛选的操作频度会略高于类目选择。相比类目他们的黏度会更高。如果大家关注下，Taobao.COM的LIST页面属性筛选，原来是标签方式的，现在也变成了下拉菜单为主的控件。

Alibaba.com

阿里巴巴国际站他们选中四万个搜索词汇做类目直达，经过用户研究证明：这四万个搜索词汇用户关心属性筛选大过类目选择。所以国际站把属性筛选放在类目的上面。如图所示。

当选择属性中的内存大小，音乐格式后，当前的内存一行和音乐格式一行会消失，已选的4G与WMA会在已选行中出现。再次点击已选属性，将删除已选属性，同时页面刷新。这样的一个属性直达改进方案：属性区域数据有明显上涨,同比上涨11% ,类目上涨1.5%, 区域选择上涨1%。结论是：类目的上涨20%, 可以带动属性35%的增长。了解用户的需求，进行数据分析与大胆的尝试，会给我们带来更多的商业价值。

思想创新

在思考中文站的类目与属性筛选的现状与网站目标时，我经常会问自己：目标用户是谁？用户需要一个什么样的搜索结果页，用户需要一个什么样的类目与属性筛选？

属性直达

根据用户研究给出的研究报告表明，测试用户中有2/3的用户关注属性大过类目，由此秉承大胆设想，小心求证的思想，我做了以下方案——属性直达。什么叫属性直达呢？按照某种算法，当搜索词与其中的类目名称或ID一致的时候就默认选中相匹配的类目。举个例子：用户想查找MP3这个搜索词，我们原来是先让他进行选择类目然后再进入属性筛选。现在只要用户输入MP3关键词后，系统将自动匹配到相关的类目下（同时也给用户可以选择其他类目的入口），用户再想精准定位商品，只要去选择属性就可以了。其实，类目与属性筛选深入其本质，它们都可以称为导航。其中导航有一条可用性原则就是尽量减少流程中的操作步骤。那怎么样才能帮助用户方便轻松的搜索到需要的结果呢？属性直达就是帮助用户解决问题的关键，把用户最关心的，最常用的操作首先推荐给用户。如线框图所示。

非属性直达

考虑到技术因素，有可能我们推荐的类目与属性未必是用户需要的。因此我们有必要针对以上的情况设置非属性直达的方式。用户依然是先选择类目，然后再选择属性。这样的一个方式是中国站普遍使用的一个方式。如图所示。

总结:

无论是属性直达还是非属性直达，目的只有一个尽快的帮助用户找到需要的商品。如果搜索结果做到足够的友好，用户不再需要用类目和属性筛选进行快速筛选，第一页前10条的搜索结果已经满足了用户需要，进入了DETAIL页面。未来也可能逐渐弱化类目与属性筛选，甚至可以把它去掉。思维发散的想想看，如果用户可以通过，思想传达，或口述传达，不需要用手去点。想一想，张张嘴，电脑就帮用户找到全球最佳结果的话，用户（买家）才懒得注意网站设计了多少精美的类目和属性筛选。

交互设计师需要怎样和产品团队合作呢？除了要定义行为和与之有关的其他设计学科的交互之外，我们发现，还必须要定义好交互设计在一个企业中的位置。我们相信，要建立好一个严格的产品开发过程，设计必须要平等地与工程、市场，以及业务管理进行协同工作。这种协同工作需要明确每个方面的责任和权利，企业从设计中获得的收益将会有极大的提升。下面我们介绍的这种责任的划分，平衡了每个方面的权利。可以极大地提高设计的成功率，并保证企业在产品开发的整个周期中给予应有的支持，以及其他更多的好处，我们建议的这种责任和权利的平衡关系如下。

•设计团队负责用户对产品的满意度，当前多数企业没有人承担这个责任。为实现这个责任，设计师必须有权利决定产品应具有怎样的外观、感觉和行为。他们也需要获得相关信息，必须通过观察和交谈了解潜在用户的需要，与工程师交流技术的优势和局限性，与销售人员交流市场供求，还要与管理人员通过交流及组织会议认可的产品种类。


•工程团队负责产品的实现和制造。为了让设计方案带来现实的好处，工程团队必须要对产品的构建负责。说得具体些，也就是要对实现设计者定义的形式和行为负责，同时要遵守预算按期完成。因此工程师需要一份产品形式和行为的清晰描述，以指导他们创建系统、分配时间，以及成本预算，这个描述必须来源于设计团队。工程团队还必须参与技术约束和机会的讨论，以及参与所提设计方案可行性的讨论。


•市场营销团队负责说服顾客购买产品，所以他们必须有权利与顾客进行全面的交流，还要负责参与产品的定义和设计。为了做到这些，该团队的成员也要能够获得相关信息，包括设计师研究的结果，以及他们自己的研究结果（注意：顾客并不等同于使用者）。


•管理团队负责产品的利润率，因此他们有权决定其他各组的工作。为了做决定，管理人员必须从其他各组那里获得清晰而确切的信息，包括设计研究和产品定义、市场营销研究和销售计划，以及工程团队对创建产品的时间和成本的估计等。
往往交互设计师最头痛的就是和需求方与PD去争取权利，交互设计师一直在做的事情就是平衡每个方面的责任和权利。当PD找交互设计师要添加不合理需求的时候，交互设计师要学会说：“NO”。成功的互联网产品=优秀的用户体验+分析准确的商业动机，而交互设计师就是这个法则的“加号”，它的作用就是连接各相关方的纽带并且平衡各相关方的利益.