This entry was posted on 星期六, 四月 3th, 2010 at 01:32 and is filed under 交互设计. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.

This entry was posted on 星期六, 四月 3th, 2010 at 01:32 and is filed under 交互设计. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.

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

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

来自用户的抱怨

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

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

用户浏览历史

Taobao.com

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

Amazon.com

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

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

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

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

Undo,Redo与返回，前进

IE浏览器

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

其他空间记忆表现形式

搜索框历史输入记录

面包屑

筛选历史记录

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

总结：

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

上期回顾:亚马逊购物用户体验分析 (二)

方便的导航元素

任何网上商店的成功，至关重要的一点，就是用户可以简单轻松地使用导航条。基本店铺分类，用户页面，购物车页面，采购页面等，像这样的任何购物体验点都可以轻松方便地被访问。

在这方面亚马逊做了很好的工作，例如下方截图所示编号的部分。

对“商店所有分类”按钮悬停（＃1）触发一个下拉菜单，显示了所有主要产品类别，让消费者轻松访问其他产品。导航元素的位置，恰恰是用户期望它被放在屏幕左上角LOGO下面的位置。

在LOGO的旁边（＃2）有少数几个同样重要的链接，如登出的，个性化的推荐和用户的亚马逊个人页面。这一部分并不是非常突出，但出现的地方却是在顶部或上面与LOGO视觉平行的位置。

下一个元素（＃3）部分有“购物车”和“愿望清单”。购物车功能的位置几乎没有什么变化,总是位于电子商务网站布局的右上角。

每当用户浏览产品页面时，邀请他们加入自己的产品购物车或希望清单（＃4）。恰好这个位置是在亚马逊产品及产品细节的右边，用户可以很自然地找到此功能。

最后，亚马逊邀请用户在亚马逊市场查看同一产品的”二手和新品”版本（＃5）。在其集市上销售的产品显然在短期内不能增加亚马逊的收入，但它可能获得长期的回报，因为仅知道此选项，可让许多购物者选择亚马逊作为其主要目标，甚至二手商品也是如此。

亚马逊这样做是因为它很清楚的认识到：把用户的利益放在首位这对长远大有裨益。

您还会注意到的这样的一个元素是其他五个中最为突出的一个，它具有艳丽的色彩，梯度和微妙的三维效果。

这当然不是巧合：亚马逊希望在重要的地方引起用户的注意。

任何网站的成功关键点是导航元素的位置。就这一点而言，亚马逊竖立了很好的榜样，做到像用户期望的那样：确保在任何时间需要时，最重要的内容均可找到。

购物者应始终感觉舒适

对于电子商务网站这很重要，亚马逊在这一点做的很好。

要增加用户进行购买的可能性，你必须在购物体验的每一个阶段， 确保他们是舒适的。亚马逊通过赋予客户在任何时候完全的控制，达到用户舒适的目的这样做很好。

易于筛选和用户评价比较

上面的截图比较两种对立的客户评级和评论（所示两边“VS”图形）。用户还可以按等级过滤客户评论。为什么这样做会使他们感到舒服？因为用户将要花费自己辛苦赚得的美元，并应该让用户感到更舒适，能够方便地访问正面和负面评论 。

通过获得有好有坏透彻的客户评论，使他们更加安心购买，并帮助他们做出明智的决定。

用户不是迫于压力才购买商品的，而是认为是否购买产品的决策权是否完全掌握在自己手中。

额外的购物车选项

如上所述，在购物车页面包括一些选项，可以让用户感到舒适。首先，如果对于一次特定购买行为用户改变了主意，他们有权选择从购物车里删除它们。

但删除(Delete)宁愿是最后一个行为，所以他们选择用先保存下来以后处理(Saving it for later)替代了去执行删除(Delete)。你可以称之为“软删除”：它会从购物车的产品中移出，但会保存在用户购物车页面上的物品清单里。在任何时候用户都可以很容易的再添加回购物车中。

在运送(航运)页面更改或删除产品

在随后的购买步骤中，用户可以继续控制。看一看下一张图片。

当选择运送选项时候，用户将看到该页面，这可能意味着他们已经承诺或接近承诺，购买该产品了。

当选择的送货方式时，提供用户一个相当突出的按钮去“更改数量或删除”。鉴于以上的运送方式，用户很可能需要这些选项，因此，现在该按钮可以让用户得到帮助并使他放心使用。

提醒用户“继续”并不意味着“最终决定”

在用户往购物车添加了产品，并选择了送货方式后，他们回顾了下他们的概要订单，并点击“继续”按钮继续他们的购物。该按钮不是让他们确认订单，也不是他们实际购买的最后一个页面。

为了确保用户知道这不是“最后”一步，放在下方的“继续”按钮是一个有益的提醒，提醒他们把最终的订单放在最后汇总页面确认。

电子商务开发人员可以通过学习亚马逊移情用户体验的例子，理解用户各项关注和忧虑，包括一个用户每个阶段可能的购物体验。

开发人员应该加强购物体验，使用户感到舒适和可控。

结论

在本文中我们没有办法可以涵盖所有亚马逊购物体验的优点。

但是，我们已经讨论的几项应该足以帮助您了解，在亚马逊，工程师如何塑造了几项在线体验的强大功能。

亚马逊购物体验的经验教训

• 一个电子商务的网站的焦点， 应是产品搜索和在线购买。
• 只要有可能，应该为每个用户提供个性化内容。
• 给予“为什么我们购物”的提醒创建销售奖励。
• 让用户尽可能多的接触到产品。
• 不要让用户感到有些产品/服务正在强迫他们购买。
• 在适当的时候可轻松地访问重要部分。
• 在任何时候让顾客感到舒服和可控。

亚马逊购物体验并不完美。它有它的缺陷，但这是另一篇文章的主题。但好的远远大于糟糕的。

当然，技术和预算的限制，使一些电子商务的发展，变得遥不可及。但是，以下这些最佳实践的基本原则，在您项目的预算和规范内，您将能够实现可用性增强的各项功能。

实行这些原则将确保您的网上商店提供贴心的体验给买家和卖家。

查看原文感谢BY Louis Lazaris

]]> http://alite.aliued.cn/archives/1060/feed 9 http://alite.aliued.cn/archives/1050 http://alite.aliued.cn/archives/1050#comments Fri, 23 Oct 2009 02:59:11 +0000 Alite Yu http://alite.aliued.cn/?p=1050 [版权声明]:版权归作者Alite所有，转载时请以超链接形式标明文章原始出处和作者信息及本声明:http://www.alitedesign.com/

上期回顾:亚马逊购物用户体验分析 (一)

“查找内部”功能

书是在亚马逊最常被购买的产品之一，所以毋庸置疑亚马逊的开发小组已经建立了一个关于“查找内部”内容的功能。

“查找内部”的功能可以让购物者观看到书籍的某些部分：通常的封面，目录，第一页，索引和封底。

这可能会非常有用，因为消费者能够一目了然，通过一个内容表或目录就知道一本书是否适合他们。

如出现在屏幕上面的图像和一些进一步的行动，“查找内部”的功能（这可找到不计其数的书籍）从任何网页（例如从拥有书籍封面缩略图的页面或从个别书籍的产品页面）访问。

当鼠标Hover在书籍缩略图上时，产品页面将打开关于该书的可选章节菜单浮动框。

“内搜索”功能

对于“查找内部”功能的预览菜单上有一个小盒子标有“书内搜索”，它可以让用户搜索整本书，而不仅仅是部分章节预览。

当用户从“查找内部”的菜单选择一项时，一个灯箱弹出，让用户预览的产品几乎是和你持有手中的书一样好。

如上所述，“内搜索”的功能也包括在灯箱，并提供了更多的功能。下面的图片展示了当用户执行搜索时展现状态的例子。

“内搜索”的功能，可以从书中的任何页面返回结果，但如果页面不能被预览就会通知用户不可用。

现在的搜索引擎很智能，甚至能直观地判别单词的单复数，这是搜索的最佳实践。虽然我发现这个功能好像是一个婴儿车，当对一本书研究的时候,它仍然是一个很好的选择。

电子商务开发人员完成这样一个在其网站的功能,今天可能没有预算或技术资源，但您可以确保在概念阶段的产品尽可能的给予曝光。

可定制的历史和推荐

早些时候，我们讨论了如何使“推荐产品”在亚马逊网站的某些部分出现。其中一些章节，以及浏览所有产品的查看历史记录都可以修改。 看一看下面的图片。

在“今天为您推荐”的下面,针对购物者亚马逊个人网页上列出的产品清单可以进行编辑。

点击“修改这一建议”链接，将显示一个窗口，正好说明为什么推荐这个产品，并提供购物者去选择改变它的机会。

通常一个被推荐的产品是以记录事先购买行为并跟踪购物习惯为基础的。这里购物者是可以告诉亚马逊不要推荐以那些因素为基础的产品。

另一个可定制的功能是购物者已经浏览的所有产品历史记录。这个选项总是不容易被找到，但它会出现在该用户的个人页面的顶部。下面是一个用户的浏览历史的例子。

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

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

在同一页的右侧栏，用户会看到一个列表是他们最近浏览的搜索条件和类别：

点击“X”的每个项目旁边，在搜索条件和类别历史中,用户可以删除自己的任何项目。 这是一个客户端功能，因此结果是瞬间的：当他们删除一个产品时,用户不必等待整个页面的重新加载.

这些定制（或编辑）功能，确保购物体验不会给用户带来繁重的负担。如果他们收到的推荐，他们并不满意，用户可以修改它们，以改善今后的访问。

电子商务开发人员可以按照这个例子,允许任何动态个性化用户尽可能为其定制内容 。这可以确保用户不会感觉,好像内容正在通过广告或促销奖励强迫他们。

如果您好奇心和求知欲未消请继续阅读亚马逊购物用户体验分析 (三)

现在电子商务网站的设计,正面临着一系列的挑战,其中最主要的挑战是:我们尝试建立一种用户体验,来提高用户在线购物的可能性。

为了对抗网上激烈的竞争，消除网上多疑购物者的顾虑，设计人员可以采取一些措施来改善他们网上商城的可用性。

自1995年以来， 亚马逊已经成为在电子商务B2C领域里,公认世界领导者。它的成功并非偶然，也不仅仅是在一个正确的地方与一个正确的时间的结果。

亚马逊的成功是一个强大用户购物体验的直接结果。

在本文中，我们将讨论大量有特色的亚马逊购物体验 ，今天无论在原则上和实践上,都为许多的电子商务开发者,提供了值得仿效的模式。

双重目标明确

亚马逊购物体验开始，当然就在主页上，用户被从视觉上通知网站的双重目标：

产品搜索和在线采购

当您浏览亚马逊主页（在上面的截图），突出的是什么？永远是一片凌乱的布局，为数不多的简洁区块，有独特的元素立即捕捉用户的眼睛： 在导航搜索的左上角，和靠近顶端的搜索/购物车控制器 。

以下是相同的截图只不过通过使其他元素变灰，强调了它们两个区域:

这些元素被强调了，我们看到亚马逊的简单双重目的是实现：

• 用户可以快速查找和购买产品
  
• 卖方能够快速处理网上购物订单并获得利润

因为亚马逊等众所周知的，只有极少数访问者不知道这两点（如：产品搜索和网上购物）都是可用的。

但是，亚马逊的设计师和架构师团队已确保在网站的结构中,这两个元素是足够的突出和可用。

设计师，客户，项目经理，和参与建设电子商务网站的开发人员，从一开始的用户体验(无论是第一次用户或回头客)都会遵循明确强调产品搜索和在线购买。

内容适合当前用户

一旦建立了网站的产品搜索与网上购物等功能，用户最有可能想利用这些特性的优势马上开始搜索。

亚马逊使用Cookie来记录用户登录，而对用户的购物习惯进行跟踪并存储到服务器端。

这是一个很好的提高，因为它动态地定制用户体验:以事先进行搜索，网页浏览，愿望清单添加，评价填写为基础，并达到最终购买目的。

相关产品显示

一个定制内容的例子展现在主页上，被修改的推荐内容取决于用户（无论是在或没有注册的）如何与产品搜索功能相互作用：

基于先前行为的推荐产品

只要浏览器的cookies保持不变,这种定制相同类型的内容就会在随后的访问中一连串出现：

正如亚马逊那样，一个好的电子商务网站将跟踪客户端行为（在服务器端），以确保每个用户每次访问越来越适合他们的口味和习惯。

这增加用户将进行购买的可能性，在某些情况下，将加快采购进程。

更重要的是，它以更广泛的产品和配合他们感兴趣领域的服务公开给用户。

各种”为什么我们购物”的提示

亚马逊购物体验充斥着为何用户应该从亚马逊购买的提醒,而不是充斥着从其他来源（在线或其他方式）的提醒。

有几个例子所示，并在下面讨论。

与市场零售价对比

上面显示每个产品都有不仅亚马逊优惠价格提供，而且还有MRSP（制造商建议零售价，或“定价”）。

这个简单的功能是由于文案的撞击即时的被用户理解了。几乎每一个在亚马逊的产品都可以看到这样的情况。

对用户（而不是在这么多字）来说，“这就是为什么你应该从我们这里购买此产品”。 这是一个简单但强大的销售诱因，毫无疑问它提高了亚马逊的收入。

用户早先被通知“免费送货”

另一个“为什么我们购物”很好的例子，就是在上面提醒显示的图片。当用户增加了一些产品到他们的购物车时，独特的黄色的大横幅在屏幕上方出现，并告诉用户：他们现在有资格取得免费送货服务。

帮助横幅还包括所有的他们可能应用的限制规定的链接。

从逻辑上讲，“免费送货通知”，应是在“航运选项一步”，但这一过程发生在该用户已经显示出了他们对购物篮中商品的购买承诺之后了。

因此，一旦用户的购物车得到免费送货资格，就显示这种黄色横幅。同时他们将通过购买的可能性就会增加 。同样，实际上黄色横幅也说明了：“这是另一个从我们这里购物的很好理由”。

逼真的图书预览

其中购物者可能会放弃在网上购买机会的一个原因是，他们无法评估产品质量。

但是，一个近距离预览的产品，这也是实际地比较手中持有的产品。将有助于消除一些，虽然不是全部疑虑。

如果您兴趣未消请继续阅读亚马逊购物用户体验分析 (二)

[版权声明]:版权归作者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 电子商务客户社区的建立基础在于他们频繁的使用产品上的标签。

同类模式图片展示

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

下面是国外有趣的交互设计BLOG集锦:

希望以上资料能够帮助大家更便捷,更多地获取最新最好的研究材料.在后续的研究中我会把在交互设计BLOG中有趣的发现,以BLOG文章的形式与各位交互设计爱好者分享.

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朋友分享!
{未完待续}

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

模式库

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

模式归属类别

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

Pagination(分页,标记页数)

问题摘要

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

实例

何时使用

解决办法

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

项目分页

搜索分页

分页控制

基本原理

项目分页

搜索分页

同类模式图片展示

这两副图片哪张更能勾起你买东西的欲望呢?相信大多数买家更喜欢看大图,实物图,产品细节图等.如果我们的卖家更能倾听下我们买家的心声.他们的产品会不会更受关注些呢?

阿里巴巴不会做这样一个平台,包括物流在内的一些由于电子商务所发展起来的新兴行业,也许物流并不能完全表现出这种情况.阿里巴巴的卖家需要这样一个平台:可以提供拍摄产品图片装饰服务-模特与实物原创,图片质量高,立意新颖.在更多的消费品行业中这种需求尤其明显,我们的卖家太需要把自己的产品好好装饰一下了.在很多的用户可用性测试中,更多的用户喜欢点产品图片质量高的.他们认为那样的产品更符合他们的期望值.

设想一下,如果更多的卖家把照片的质量都超越第一张图片的水平,还怕我们的买家不去关注卖家产品么?消费的驱动力除了外因更多的是卖家内因主导,找个时间把公司的产品图片好好装饰下吧.让我们的买家更多的了解你的产品,留住他短暂珍贵的记忆.

曾经萌生发起这样的一个项目,但是这也许是阿里巴巴并不擅长的领域.期望第三方市场早日成熟,尽快打通这大市场的氛围.让更多的人有机会可以在电子商务的舞台上尽显光辉.

《UI Designer》是由UIRSS.com创办，UIRSS.com、ChinaUI.com、UItimes.com三家UI设计媒体联合主办的UI行业权威电子杂志。这一期伴随视觉同盟（联合主办）和iconfans（联合发行）的加盟，声势更加浩大。

《UI Designer》第二期的正式发行，要感谢各位UI界同行的关怀，要感谢各位设计师、作者的支持，更要感谢所有热爱和喜欢这本杂志的读者朋友们的信赖。因此，从下一期起（预计2010年4月发行），《UI Designer》杂志将会定期发行（发行周期暂定为每半年一次）。

注：下文加粗体是我写的文章.


《UI Designer》第二期主要内容：

独家揭密：OPhone UI诞生背后的故事
走进企业，走近UI
中国移动UI Team
百度用户体验部
群硕软件用户体验部
设计秀场（GUI作品秀）
专家专栏
你准备好了吗，可用性测试，主持人系列
谁为用户买单，电子商务中的交互设计
手持移动设备交互与界面设计精要
手机MP3播放器界面设计（GUI教程）
一个写实风格的ico是如何诞生的（GUI教程）
UX界
中国VS国外（作者：刘超，中国移动研究院UI Team负责人）
戒盲目、戒浮躁（作者：张海龙，百度用户体验部高级经理）
设计的价值（作者：朱印，前微软设计主管）
UI业的持续健康发展（作者：邹翔，SKYUI创始人）

支持机构：

蓝色理想
UPA中国
newwebpick
Arting365
DRC设计资源协作网
动漫交易网
圆点视线
中国插画网
设计·中国
点击动漫网
视觉天下
CGfinal
中国动画网
花果山
水晶石
视觉联盟
创意酷
火神网
设计中国
漫域学园
下载地址：

下载地址1（推荐）：
http://www.china-channel.com/ui/UI_Designer_2009.zip（由35互联赞助提供）
下载地址2：
http://temp.chinaui.com/UI_Designer_v2.rar（由chinaui提供）
下载地址3：
http://www.onvision.com.cn/ui/UI_Designer_2009.zip（由视觉同盟提供）
下载地址4：
http://www.uirss.com/downloads/UI_Designer_v2.rar（由UIRSS.com提供）
下载地址5：
http://www.iconfans.com/ifdownload/UI_Designer_2009.zip（由IconFans提供）

合作、开辟专栏、团队专访请联系 Hiboo{at}UIRSS.com

号外：UIRSS.com新版网站八月即将登场，敬请关注！

交互设计师通常会遇见这样情景:经过一番冥思苦想与挣扎,终于把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设计实战中的应用.
今晚话题就墨迹到此吧,过阵子继续唠叨交互设计模式(二)-XX解析.

{未完待续}

很早就听说韩国网站的设计师们很会利用空间,来创造更多的信息承载量.最近浏览了几个韩国SHOPPING网站果不其然,就拿小小的广告轮播来说,非常佩服他们的设计功底.

Naver shopping

我们可以看到广告区域总体由两部分组成:左边区域是显示的主体区域,使用过程体会到承载了9件产品的显示任务;右边区域承载了3条信息的自动轮播显示任务.如果用户比较关注细节,用户会发现当鼠标滑过左边区域时候,会有绚光出现.当然这不是最精巧的地方,当用户点播右边区域的展开按钮的时候用户将看到以下的展示.

原来的主体广告变换成垂直边栏的缩略图,新的三条主题广告像拉黑板报一样呈现出来.当然此时左边的主题广告也没忘记再加三个轮播.如果用户想切换回原来的模式,只要轻松的点击左边的垂直边栏的缩略图即可.大量的信息承载与主题切换并没有使广告位混乱,反而觉得变换的比较自然.

如果这些也不足以说明韩国网站重视对空间的利用率的话,我们在看下面的例子:

开始状态:

点击广告位上面的TAB后:

关于以上例子的具体交互操作方式可以参考链接:http://www.naver.com/

如果读者对韩国网站比较感兴趣的话可以积极参与本话题,大家一起头脑风暴!

[版权声明]:版权归作者Alite所有，转载文章请注明作者与文章出处:http://www.alitedesign.com/

最近在使用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!

[版权声明]:版权归作者Alite所有，转载文章请注明作者与文章出处:http://www.alitedesign.com/

整理嘀咕

前期介绍了三本书给交互设计爱好者,UED朋友的在上期留言中,希望我尽快推出第2部分的整理,今天我把整理的后续内容一起与大家分享.希望这两篇博文能真正帮助UED从业者和爱好者,找到自己需要的书籍.接着推荐.

Designing　Interactions

作者: Bill Moggridge
出版社: The MIT Press
出版年: 2007-10-01

简介

Digital Technology has changed the way we interact with everything from the games we play to the tools we use at work.

Designers of digital technology products no longer regard their job as designing a physical object—beautiful or utilitarian—but as designing our interactions with it. In Designing Interactions, Bill Moggridge, designer of the first laptop computer (the GRiD Compass, 1981) and a founder of the design firm IDEO, tells us stories from an industry insider’s viewpoint, tracing the evolution of ideas from inspiration to outcome.

Moggridge and his interviewees discuss why a personal computers have windows in desktops, what made Palm’s handheld organizers so successful, what turns a game into a hobby, why Google is the search engine of choice, and why 30 million people in Japan choose the i-mode service for their cell phones. And Moggridge tells the story of his own design process and explains the focus on people and prototypes that has been successful at IDEO—how the needs and desires of people can inspire innovative designs and how prototyping methods are evolving for the design of digital technology.


以上是关于此书的介绍，还没来得及翻译，有兴趣的可以去查看详细信息。http://www.designinginteractions.com/

Bill Moggridge，著名的设计公司 IDEO 的创始人之一。这本书里更是颇采访了不少重要人物，比如 Google 的两名创始人、世界上最伟大的 PC 游戏设计师之一 Will Wright，以及 Macintosh 团队重要成员之一 Bill Atkinson、Palm 的创始人 Jeff Hawkins……

在这里我给一下这本书的PDF文件的下载地址：
http://www.designinginteractions.com/downloads/DesigningInteractions_foreword.pdf
http://www.designinginteractions.com/downloads/DesigningInteractions_introduction.pdf
http://www.designinginteractions.com/downloads/DesigningInteractions_1.pdf
http://www.designinginteractions.com/downloads/DesigningInteractions_2.pdf
http://www.designinginteractions.com/downloads/DesigningInteractions_3.pdf
http://www.designinginteractions.com/downloads/DesigningInteractions_4.pdf
http://www.designinginteractions.com/downloads/DesigningInteractions_5.pdf
http://www.designinginteractions.com/downloads/DesigningInteractions_6.pdf
http://www.designinginteractions.com/downloads/DesigningInteractions_7.pdf
http://www.designinginteractions.com/downloads/DesigningInteractions_8.pdf
http://www.designinginteractions.com/downloads/DesigningInteractions_9.pdf
http://www.designinginteractions.com/downloads/DesigningInteractions_10.pdf

《Designing Interactions》目前只有英文版本。共享出来大家一起研究。并这里有一篇pemiamos做的相关读书笔记。还有些由Stanford HCI 交互设计工作室推荐阅读内容。

以下为designing interactions读书笔记精彩片段:

forword: What is Interaction Design? 前言：什么是交互设计？

这一章，是书的核心总览，很多东西都在这一章点到，在后续章节展开。bill一上来就隆重推出了Gillian Crampton Smith阿姨，也许称其“交互设计之母”也不过分。1968从剑桥大学修完哲学和艺术史毕业，从事了十年设计师的生涯。很奇怪，专业不太对口的样子，但是后面就更神，1981这个阿姨竟然写了个排版的程序，以帮助她的杂志设计工作。这个经历让她相信：designers have an important role to play in creating information technologies.设计师能在创建信息技术上扮演更重要的角色。于是smith阿姨就开始她的交互设计教学生涯。对了，那时还没有交互设计，1983年她在圣马丁搞了个叫做 a graduate program in graphic design and computers图形设计与计算机的研究生课程；1989年，在RCA创立了the Computer Related Design Department “与计算机有关的设计”，也就是现在的RCA interaction design department. 这里提下，在RCA的工作也有bill老伯的功劳，首先这个建议就是他提的，他还是这个系的external assessor外部顾问。RCA也就很幸运的成为世界上第一个设立的专门课程培养设计师学习创造交互产品与系统的院校。2001年，我们可爱的smith阿姨又跑到意大利北部阿尔陴斯山脚下的Ivrea，创立了Interaction Design Institute Ivrea艾丽维尔交互设计学院。

我想所谓向大师学习，我们通过现在的互联网，google一下这些人和地方，我想对于更深入了解交互设计的发展，技术和趋势是很有用的。有了网络可以让我们少走很多弯路。

列下RCA的交互设计主页，有多作品并且常更新的，看看他们的作业，我觉得咱们的想象力和胆识实在有点贫乏了。而且人家真的在玩闹中有所思考的。http://www.interaction.rca.ac.uk/

这是艾丽维尔交互设计学院http://www.interaction-ivrea.it/en/index.asp

笔者推荐理由

《Designing Interactions》由Bill Moggridge（IDEO）撰写的一本新书，讲的是设计交互（Interactions，有时候用“交互”这个词也不是很恰当全面），“数字技术改变我们和其他东西之间的交流（交互）方式，从玩的游戏到工作的工具。数字技术产品的设计师不再认为他们只是设计一个物体（漂亮的或者商业化的），而是设计与之相关的交互”。Bill Moggridge向你讲述业内的观点，追踪从创意激发到完成的演变过程。Bill Moggridge采访了专业领域的行家，包括《模拟人生》的Will Wright，Google的Larry Page和Sergey Brin等等。随书的DVD包括了这些视频,总体来说是本理论与真实案例结合不错的书籍.
Designing Interactions值得提一下的是:它的书籍结构与它特有的图文并茂的形式,使读者不会因为书籍的厚度而觉得厌倦.同时Don Norman 也对这本书赋予极高的评价.相信这本书可以让喜欢交互设计的朋友,对原来的IXD知识结构有一个更高的认识.

其他边缘书籍

这里推荐的边缘书籍指的是书籍主要受重并不是交互设计师,但是这些书籍可以提高交互设计师与UED其他成员的协同工作效率.交互设计师一直做为PD与UED的项目与需求的接口人.如果可以更好的了解视觉,前端,开发与PD,对协同工作的开展是非常有帮助的.

走近视觉

Web视觉设计又名: Visual Design for the Modern Web

译者: 叶永彬
作者: Penny McIntire

简介　　
本书系统全面地介绍Web页面外观设计的相关知识。本书分为八章：导论、站点分析、导航、页面布局、色彩、图形、排版和表单。全面讲解网站界面所涉及的内容，叙述生动，由浅入深，提供了大量的示例代码以具体地说明如何运用所讨论的设计概念。.
笔者推荐理由
关于为什么笔者推荐它是交互设计师走近视觉的最好的图书,请阅读随感:交互设计两三事.在那里笔者运用了大量篇幅,来阐述交互设计与视觉协作的一些观点.

走进前端CSS

CSS禅意花园又名: The Zen of CSS Design: Visual Enlightenment for the Web

译者: 陈黎夫 / 山崺颋
作者: Dave Shea / Molly E. Holzschlag
副标题: Web视觉艺术设计的王者之书

简介
　　本书作者是世界著名的网站设计师，书中的范例来自网站设计领域最著名的网站——CSS Zen Garden（CSS禅意花园）。全书分为两个主要部分。第1章为第一部分，讨论网站“CSS禅意花同”及其最基本的主题，包含正确的标记结构和灵活性规划等。第二部分包括6章，占据了本书的大部分篇幅。
　　 每章剖析“CSS禅意花园”收录的6件设计作品，这些作品围绕一个主要的设计概念展开，如文字的使用等。通过探索36件设计作品面临的挑战和解决的问题，读者将洞悉主要的Web设计原则以及它们运用的CSS布局技巧，理解CSS设计的精髓，恰当地处理图形和字体来创建界面优美、性能优良且具有强大生命力的网站。
　　 本书原版书自出版以来持续畅销，受到众多网站设计师的推崇。本书适合网站设计人员和网站设计爱好者阅读，更是专业网站设计师必读的经典著作。

作者简介
Dave Shea是一位图像设计师，“CSS禅意花园”网站的创始人和耕耘者，该网站获得了很多奖项，其中包括SouthWest Interactive会议授予的“Best of Show”。Dave Shea曾在全球的行业大会上发表演讲，其作品被世界各地的书籍和杂志采用。他还是Web Standards Project（WaSP）的成员，这是一个由Web开发人员和设计师组成的小组，致力于推广基于跨平台和非专用技术的Web设计。Dave是Web设计机构Bright Creative的拥有者兼主管，还为其在线出版物mezzoblue.com编写所有Web内容几乎均为Dave所作.

笔者推荐理由
当交互设计在设计DEMO的时候,如果能更好的把握好CSS技术,做为设计师就可以迈向完美,走向巅峰.
在这个花园中,读者将体验到:
1.36件效果惊人的设计艺术作品
2.来自顶级Web设计师和开发人员的CSS秘诀
3.高超的文字使用技巧,使作品生气勃勃
4.绝妙的CSS技巧,轻松的适应未来的变化
5.高效使用图形以提高网页的下载速度

结束语

以上提供的书籍推荐,都是笔者亲身体验得到的一些体会,希望以上内容可以帮助更多喜欢交互设计,并热爱着这门学科的读者们.祝大家在这条设计之路越走越精彩.

整理前言:
什么书籍能帮助交互设计师更好学习交互设计,提升实战能力呢?曾经也读过很多关于交互设计与用户体验的国外书籍,但想针对实战的书籍确实比较少.交互设计是设计学科的一个分支,设计的最高境界为禅意最高境界,通俗点说就是设计的精髓有时候真是只可意会不可言传.”对设计的感觉是经过多年经验积累出来.”-腾讯视觉晋兄如是说.即使这样,我想前人走过的路,总结的经验,总会给后人予以启示吧.因此我以一种科学的态度,去探索交互设计中的奥秘,总结每次经历过的经典案例,享受读书的乐趣.最后发现其实交互设计还是有很多规律可寻的,下面是我整理的交互设计的专业推荐书籍,希望能帮助更多的设计师认识交互设计,理解交互设计,最后很好的掌握它.

Web导航设计又名: Designing Web Navigation

作者: James Kalbach
译者: 李曦琳

简介 · · · · · · 　　
业务目标的实现，依赖于用户能够找到并使用您提供的服务。本书为您讲述创建有效导航系统的基本设计原则、开发技巧和实用建议，并附有大量的真实案例。本书研究深入，援引广泛，是极佳的参考资料和教学指南，适用于初级和中级网页设计师、产品经理和其他非设计职位，以及寻求全新视角的Web开发老手。

作者简介 · · · · · ·
James Kalbach现就职于领先的法律与新闻资讯提供商LexisNexis，任人因工程师，为其基于Web的搜索应用开发界面。他曾任Razorfish德国公司信息架构总监。他拥有Rutgers University的图书情报学学位和音乐理论及作曲硕士学位。
他是Boxes and Arrows（关于用户体验的著名在线期刊，http://www.boxesandarrows.com）的助理编辑。他还是Information Architecture Institute的顾问委员会委员和European Information Architecture会议(http://www.euroia.org)的筹委会委员。
工作之余，音乐是他的主要消遣。他与妻子Nathalie和小猫Niles住在德国汉堡，是一支当地小型爵士乐队的贝司手。他还是一个精酿啤酒迷，经常会以pivo的网名在著名的在线啤酒社区Ratebeer.com(http://www.ratebeer.com)上发表评分和文章。
笔者推荐理由:
这是本在众多同类WEB导航设计中介绍最全面和详细的书籍,在那里面我了解很多经典的案例,以及很多最新最权威的模式理论.最近对分面浏览十分着迷,研究了很长时间,查询很多资料都没找到它的源头.最后在WEB导航设计中找到了它,原来它是伯克利分校研究员研究出的,其中也给出了很多案例和原型.总体来说,如果你正为WEB导航设计而烦恼,就赶紧翻开它找寻答案吧.


Designing Interfaces中文版又名: Designing Interfaces / 操作介面設計模式

译者: 蒋芳
作者: Jenifer Tidwell
副标题: 界面设计精髓

简介 · · · · · ·
　　“非常优秀！这绝对是UI设计模式领域最好的书，也是近年来交互设计领域最好的新书之一。本书清楚、简洁、引人入胜，既包括基础知识，又讲述了复杂的概念，既适合初学者，又适合专家和研究人员。本书超越了很多琐碎的‘模式语言’——它们提到的是显而易见的各种细小折衷——而本书讲述了交互设计领域许多真正的两难选择。本书不只是收集了一组模式——事实上，这是一本关于现代视觉和交互设计的完整教程。任何设计师都值得一看。”
　　——Larry Constantine， IDSA，获奖设计师及《Software for User》的作者之一
　　“本书采纳了界面设计领域的智慧和经验，为所有人提供了值得学习的内容。它已经成了我的设计工具集里不可缺少的一部分。现在，当我设计的时候有四个必备元素：我的手写板、Photoshop、Flash以及这本书。它帮助我组织头脑风暴，并为我的工作提供批… (展开全部) 　　“非常优秀！这绝对是UI设计模式领域最好的书，也是近年来交互设计领域最好的新书之一。本书清楚、简洁、引人入胜，既包括基础知识，又讲述了复杂的概念，既适合初学者，又适合专家和研究人员。本书超越了很多琐碎的‘模式语言’——它们提到的是显而易见的各种细小折衷——而本书讲述了交互设计领域许多真正的两难选择。本书不只是收集了一组模式——事实上，这是一本关于现代视觉和交互设计的完整教程。任何设计师都值得一看。”
　　——Larry Constantine， IDSA，获奖设计师及《Software for User》的作者之一
　　“本书采纳了界面设计领域的智慧和经验，为所有人提供了值得学习的内容。它已经成了我的设计工具集里不可缺少的一部分。现在，当我设计的时候有四个必备元素：我的手写板、Photoshop、Flash以及这本书。它帮助我组织头脑风暴，并为我的工作提供批评意见。我愿意向任何与创建界面有关的人士推荐这本书。”
　　——Paul Hoover，微软移动PC部门的产品设计师
　　每一天，越来越多的人们依赖交互式的软件——系统、Web应用、手机，以及其他数字设备。当这些软件设计良好的时候，人们将更开心、更安全、更有效率。好的界面设计增进了用户忠诚度，减少了客户服务支出，可以帮助产品从竞争对手中脱颖而出。
　　你想设计出有吸引力、容易使用的界面，但又对自己的能力还不太确定吗？这本书将是你的好帮手。本书从很多各不一样的资源吸取了设计智慧：多年的pre- Web应用设计、最好的交互式网站，以及移动设备（例如手机和iPod）。书中有很多你可以重用的设计想法。你不用再从头开始了。
　　这些设计想法表现为一组模式——对于常规设计问题的解决方案，并可以根据具体情况进行裁剪。每个模式包含切实可行的设计建议，供你即刻投入使用。每个模式还提供了各种全彩的例子。另外，每一章还讲述了交互设计和视觉设计中的各个关键概念。本书的主题包括：
　　应用的信息架构
　　-表单
　　-导航
　　-图形编辑器
　　-页面布局
　　-颜色，排版，外观和感觉
　　-地图，图表和表格
　　本书提供了许多有价值的资源，供交互设计师、软件开发人员、图形设计师，以及任何与创建带用户界面软件相关的人士阅读。当你在寻求解决方案的时候，学习某种特别技术的时候，或者在你只想得到一点有创意的帮助的时候，别忘了打开本书。
　　JeniferTTidwell是MathWorks公司的一名交互设计师和软件工程师。MathWorks公司位于马萨诸塞州，波士顿附近，是一家技术计算软件提供商。从1997年以来，Jenifer一直在研究用户界面模式，而早在1991年，她就已经开始设计和建造复杂的软件系统和Web界面了。　　

作者简介 · · · · · · 　　
Jenifer Tidwell是技术计算软件厂商MathWorks公司的一名交互设计师和软件工程师。她擅长设计和开发数据分析及可视化工具，最近正在为MATLAB 的数据工具进行新的设计。全世界有很多研究人员、学生和工程师使用MATLAB来开发汽车、飞机、蛋白质和宇宙理论等。她在网站设计方面也很有名，很早的时候就是一名RIA（Rich Internet Application）技术的倡导者，并在2000年初协助设计和开发了Curl。
　　Jenifer在麻省理工学院接受技术教育，并在马萨诸塞州艺术学院学习设计，但她一直没有停止学习。她从1997年开始研究用户界面模式。 Jenifer热爱摄影和写作，并热衷于在新英格兰地区进行户外活动――骑车、划船、滑雪、攀岩。她的个人网站地址是http: //jtidwell.net。

笔者推荐理由:
如何一步步做出决策,界定并设计一件美好而有用的产品.可是,凭什么进行决策呢?什么才是成功的解决方案?我们曾经说过,设计质量的指标之一就是看当前解决方案能否同时满足用户需求,商业目标和技术局限.优秀的设计有没有可以识别的特征来达成这一标准?相似的问题能否归纳出通用的解决方案?是否存在”优秀设计”所必须具备的普遍适用的特征?
上述问题的答案都可以在Designing Interfaces中找到.书中对设计模式做了很好的分类,并提供了很多相关的案例.如果您还对设计模式概念模糊不清的话,就马上翻开它的第一章吧.

About Face 3 交互设计精髓
作者: Alan Cooper
副标题: The Essentials of Interaction Design (交互设计精髓)

简介 · · · · · · 　　
本书是一本数字产品和系统的交互设计指南，全面系统地讲述了交互设计过程、原理和方法，涉及的产品和系统有个人电脑上的个人和商务软件、Web应用、手持设备、信息亭、数字医疗系统、数字工业系统等。运用本书的交互设计过程和方法，有助于了解使用者和产品之间的交互行为，进而更好地设计出更具吸引力和更具市场竞争力的产品。
全书分成3篇：第1篇描述了“目标导向设计”，详细讨论了用户和设计的过程及思想；第2篇讲的是交互设计的原则，可以帮助您在较高层次上去把握设计；第3篇则介绍具体的细节方面的界面设计原则。
本书结构清晰、深入浅出，是一本难得的大师经典之作。本书的读者对象包括数字产品和系统的交互设计师、用户界面设计师、项目经理、可用性工程师等，以及目前正在学习交互设计和用户界面设计专业的本科和研究生等。

笔者推荐理由:
相信大家都记得About face 2.0-后工业世界交互设计的鼻祖书籍,读者会在About face 3.0这一版中发现一些重要的变化.总体上来说,内容更新更全面,理念更前更时尚.具体变化如下:
1.书中的结构做了调整,采取了更容易让人看懂的参考书式的表达方式.书中分成三个部分:第一部分是关于用户和设计的过程以及更高层次的思想;第二部分是关于高层次的交互设计原则;第三部分是低层次,细节方面的界面设计原则.
2.目标导向设计的描述比第二版要更详细,也更准确地反映了现在Cooper公司内部的实践情况,包括研究技术,人物角色的创建,如何使用人物角色和场景剧本来合成交互设计方案.
3.书中从头到尾,试图更加清晰的阐述视觉界面设计的概念,方法和问题,并讨论了除了桌面以外的几种平台的问题.
4.书中的一些术语和例子也被更新了,以反映现在业界的状况,整篇文章的文字也被重新编辑了,让意思更明白,让读者更容易看懂.
我得到About face 3.0就和以前得到About face 2.0一样兴奋.它就像是一本交互设计的百科全书,每一个章节都让我受益匪浅.
(未完待续)
交互设计专业推荐书籍整理(二)

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







往往交互设计师最头痛的就是和需求方与PD去争取权利，交互设计师一直在做的事情就是平衡每个方面的责任和权利。当PD找交互设计师要添加不合理需求的时候，交互设计师要学会说：“NO”。成功的互联网产品=优秀的用户体验+分析准确的商业动机，而交互设计师就是这个法则的“加号”，它的作用就是连接各相关方的纽带并且平衡各相关方的利益.

我看”必应”

最近两天总是能看到关于bing的新报道涌现,先是老大发的一篇Bing谷歌雅虎三家搜索性能大比拼的文章.对BING有了个初步的了解,然后是腾讯的西贝同学关注微软Bing的文章.慢慢地我也对微软的”live二代”有了浓厚的兴趣.一开始感觉它的名字很怪,官方给的解释好象是”有求必应”的意思.不过也有些不同的意见,今天同事之间调侃:”名字多难听啊?谁没事找”病”啊?虽然是句玩笑话,也并非空穴来风,大部分评论都直指名字难听.不管外界评论好坏,我想用一种全新的视角,客观的看待微软的新搜索引擎.


背景
微软新搜索Bing上线前，微软已经开始了网上品牌推广攻略。微软专门建设的两个宣传网站已经投入使用。这两个网站分别是“决策引擎”

以及“发现Bing”.

“发现Bing”网站主要介绍新搜索的功能特色，设计理念等。微软甚至提供了专门的桌面客户端工具，以帮助了解Bing的最新技术和动态。该网站还有若干个视频，主要是微软的开发人员和品牌专家介绍一些幕后故事，比如为何要选择新设立一个“Bing品牌”等。
在另外一个“决策引擎”网站中，微软试图通过视频等方式传递“决策引擎”的搜索设计理念。微软称，传统的搜索引擎返回海量的搜索结果，需要用户花费大量时间去排除无用信息以及细化搜索。而微软希望通过对这些信息进行分门别类的“组织工作”，为用户决策提供最直接的帮助。
在旅行、本地、购物和医疗信息三个门类的搜索中，微软提高了搜索结果的有效性。Bing首先返回的是经过分类和组织的信息，更接近用户的搜索需求。
中国B2B研究中心作为生意宝下属负责该搜索榜的B2B研究机构在试用体验后发现，在很多方面，Bing确实胜过了雅虎搜索。在搜索展示中，它采用了微软之前收购的Powerset语义搜索的相关技术，在搜索结果页会给出许多相关的搜索建议来优化搜索过程。另外，当鼠标经过某个搜索结果时，Bing会弹出一段文本提示，不需要逐个点击搜索结果就能知道，这是否自己需要的内容，节约了大量的时间。
新功能
1、Bing的搜索结果：与原来不同的是，Bing的搜索结果页面有三栏，而非两栏。中间一栏与原来的搜索结果没什么不同，右边的一栏是广告。
左边的一栏是新增的，它将包含搜索相关和一个搜索历史。左边栏上的一个有意思的功能是分类搜索，它与你的搜索相关。例如搜索一首歌，分类栏里会出现歌词和演唱会门票，而搜索苹果的“iPhone”时，分类搜索栏将显示相关的应用程序，可以直接导航至下载。
2、显示广告:凭借Bing这个搜索引擎，微软很可能重振显示广告的业务。因为Kumo将可以提供更精准的搜索。
3、内容预览：这是Bing的另一项新功能，有了内容预览这个功能，用户就可以不用点击链接直接看到页面，火狐的一个插件也提供类似功能，而Bing会将其进行集成。
交互与体验
首先打开BING的主界面,带背景图的搜索框,背景图片是随机的,有点花哨区别于GOOGLE的简单.给我印象最深的首先是搜索图片的体验:图片预览与滚轮式图片浏览机制.
图片预览:当用户的鼠标移到图片上会看到放大图,伴随有相关文字信息提示.
滚轮式图片浏览机制:用户可以一直上下滚动浏览图片,因为BING没有翻页机制.
最后是视频搜索:用户把鼠标放在视频上会自动播放预览.这个体验到是瞒有意思的.不过更有趣的是BING搜索到的结果,让用户特别意外,比如输入用户体验设计师查询视频竟然出现”AV”.
除了以上几点我发现还有一个问题当我输入关键词的时候,下拉框推荐的是我曾经输入过的词汇,并不像百度与GOOGLE那样推荐词汇.
其实,BING的问题还很多,从6月2日正式发布,只是短暂的停留了10几个小时就已经被屏蔽了.有人说是微软整和产品,有人说是被”和谐”了.不管怎么样我希望BING可以把交互与用户体验做的更好,最重要的是结果准确更加贴近用户.在中国这样的大市场里,不去研究用户与当时的国情是很难和GOOGLE与百度抗衡的.

通过修改一些配置选项,并用第三方插件扩展其功能,可以使WordPress更易被发现.要开始的话,请登录WordPress管理员控制面板.
定义更新服务

WordPress第一个要修改的就是扩展发布新内容时ping更新服务商的数量.如Technorati和Google博客搜索等服务,跟踪网络上发布的所有博客内容.WordPress发出一个简短的消息(称为ping)到这些服务上,使他们能够更新到最新的内容.当博客ping各大更新服务商上时,用户马上就可以搜索聚合器,搜索引擎和目录来找到你的站点.


在WordPress博客上建立全面的更新服务商列表:
在管理员控制面版中,转到选项,选择Writing.在页面底部,你会看到标有”Update Services”的大文本框.WordPress网站在文档中提供了很好的更新服务商列表,其中包括 Technorati,FeedBurner,Google和Yahoo!见http://codex.wordpress.org/update_services.
复制整个网址列表,将其添加到更新服务商中,来宣告你在博客上发布了新的内容.在这些网站上保持博客帖子的更新,的确有助于提高网站流量.

重新映射永久链接的网址

网址的结构会影响搜索引擎抓取的效果和页面的关键字密度.WordPress提供了一些很好的选项,以在博客上自动生成非常搜索引擎友好的网址.

利用分类,按主题归档

WordPress允许你按照分类或时间顺序来显示.按主题顺序归档比较可取,因为它将关键字添加到网页上,更符合用户的搜索行为.使用 WordPress主题将默认显示分类列表,当你发帖之后,你可以将它指定到一系列的分类中.大部分WordPress主题将默认显示分类列表,当你发帖之后就会自动更新.

总结帖子,更好的引导流量

在首页为每个帖子创建摘要,可以帮助用户在一个地方看到更多的内容,并分流博客的流量.使用内置WordPress的the_excerpt()模板标签,来创建首页的摘要.
在创建新帖的时候,你可以自己写摘要.在管理员控制面板写帖子的”Write(写)”区,你会在主贴区下面发现有个标为”Optional Excerpt(可选的摘录)”的区域.你可以在这用自己的话总结帖子,它将会显示在首页上.用户打开链接后就将看到全文.
如果你选择不单独写摘录,WordPress会自动截取帖子前55个字作为摘录.

显示最热门帖

Alex King的热门度排名插件(http:alexking.org/projects/wordpress/readme?project=popularity-contest)跟踪你的帖子,归档,分类,还有帖子中返回链接和评论的数量,来决定哪些帖子是最热门的.了解哪些帖子是用户阅读最多的,可以帮你确定将来写什么.继续更具体地写该话题的热门帖.
WordPress的缓冲功能,它会和热门度排名冲突.由于缓充的WordPress页面将不会激活插件的跟踪系统,两者不能一起使用.

显示最新帖子

简单地分开显示最新帖子区,能帮助重复访客很容易找到上次访问之后有什么新内容.我们会看到Dave Shea的博客首页(http://mezzoblue.com)如何在网页顶部显示最近6个帖子,在中间显示最新帖的摘录.
简洁的主页结构,将帮助访客大概了解你的内容,以便能够快速地浏览最相关的主题.你也可以使用相同的代码来获取最近的帖子,并将它们显示在搜索结果页面或定制的404页面底部,以帮助用户找到他们正在寻找的,或者其他好处.

用FeedBurner推广和跟踪RSS订阅

使用FeedBurner插件,安装插件之后,转到管理员控制面板,点击选项,然后选择FeedBurner FeedSmith.按照指示来创建FeedBurner feed.FeedSmith可以同时处理主要RSS feed和所有帖子和评论的feed.

鼓励互相交流内容

你了解到了社交书签和新闻系统如Delicious,Magnolia和Digg让用户转告别人,真的能帮你吸引流量.你可以用Peter Harkins创建的称作Sociable的WordPress插件,来鼓励用户将你的网站放入书签或挖一下(见http://push.cx /sociable).
Sociable将在每一个帖子下面添加一连串的链接到最热门的社交网站上.
为了了解博客帖子提交到digg或添加书签到Delicious的数量,你可以安装John Lawrence免费的称作Socialist的插件.一旦Socialist安装之后,将在管理员控制面板上创建新的选项卡.从Socialist表中,你可以看到有多少人已经收藏书签或者dig了你的站点.

显示相关帖子

在个人博客页面显示相关帖子,是个很好的方法来增加用户在网站上的滞留时间,并防止旧帖子从档案中消失.虽然有很多好的插件会自动完成任务,但Rob Marsh创建了一个特别好的称作Similar Posts(见http://rmarsh.com/plugins/similar-posts/)的插件.

自动生成XML站点地图

各大搜索引擎包括雅虎,Google和MSN最近已合作开发一个标准XML站点地图格式(http://sitemaps.org), 允许网站管理员交流其结构,使搜索引擎能高效并完整地索引.该网站地图XML可手工或由工具创建,工具可扫描你的网站并为你创建.然后你在服务器的Web 根目录下将该文件保存为sitemap.xml,并让搜索引擎知道在哪里可以找到它.我们将进一步研究这个课题和如何将sitemap.xml文件提交给搜索引擎.

其他便捷的WordPress SEO插件

WordPress有很多SEO插件,每个都尝试一遍的话让人望而却步.大部分SEO插件主要控制标题标签或meta标签,有时两个一起控制.

标记帖子

标签是个用来充当描述博客帖子或网站其他内容的meta数据的关键字.越多与内容相关的描述信息,用户和应用程序就越容易找到它.虽然标签经常连接到其他服务上,如Technorati,可以发现相同标签的相关信息,但是WordPress标签链接到博客内部的相关帖子上.

缓存优化内容传递

如果你的网站得到Dugg,突然成千上万的人访问你的博客,那么隐藏WordPress页面可以帮助确保网站不会崩溃.Ricardo Galli创建了成熟的缓存插件,称作WP-Cache(http://mnm.uib.es/gallir/wp-cache-2/),来处理全部配置.