改版背景

创建专业的电子商务垂直搜索，以及把原有的信息聚合平台转型为在线采购批发交易平台。根据行业特点及交易需要，对原有的零批(小额批发)搜索进行改版，改造为适合行业搜索交易频道，便是这次改版的设计目标。我们搜索产品线的产品经理与用户体验设计师们进行了长达半年的准备工作。 项目组成员将对现有的功能需求，信息架构，视觉色彩，用户体验等，做多视角、多纬度的分析。力求在1688.com上线后，推出另一个电子商务垂直搜索用户体验盛宴。

功能需求取舍

在项目中，我们从市场运营那里采集了大量需求，那怎么把这些需求归类整理，挑选出我们目标用户迫切需要的功能点呢？总体来说：以娱乐的心态取舍功能需求，只给最需要的不给最强悍的。

来自运营的需求，来自用户的需求，往往多种多样，可以用千奇百怪来形容，那么如何配合产品规划师、产品经理找到用户最迫切的需求呢？

头脑风暴可以让产品设计团队成员产生很多创意。当收集到大量需求时，其中可能有主要需求与次要需求，客观判断哪些是首先要完成的，哪些是可以放到2期来做的，并制定标准需求优先级与对应时间节点，这样可以保证项目按期完成。

最让人头疼的往往是取舍功能需求，我们应该以什么标准，什么心态来应对呢？最好通过创建一个纸上原型或观察用户的操作，来制定取舍标准，并确保标准里涵盖以下基础点：

• 用户档案-描述用户的具体特点。特别注意用户在使用网站时的任何问题，如物理限制。（抛弃与用户的特点不匹配的需求）
• 文本环境分析-研究用户的日常任务、工作流程模式、工作环境和概念框架。这有助于你理解为什么用户对正在测试的网站做出如此反应。（抛弃与用户操作环境不匹配的需求）
• 可用性目标设定-需要制订质量具体化的目标，它能体现从用户档案中搜集到的需求。测试在某个阶段用户能否完成任务，如果用户受到限制，那就应该重新设定用户的目标。（抛弃与用户目标不匹配的需求）
• 平台功能和约束-必须确定界面或产品的功能和限制，以界定可用性需求的范畴。这一信息会受用户可用性需求的影响。（抛弃与平台技术能力不匹配的需求）
• 通用设计指南-必须使用公认的设计准则来设计你的界面。参照网页设计指南制作出来的网页才能在网页浏览器上表现正常。（抛弃与用户体验设计指南不匹配的需求）

产品（交互）体验设计师在做互动设计之前，除了要对需求把关外还要消除项目关系人之间的分歧，满足用户的期望、工程师的期望、销售与市场人员的期望、经理的期望。最后寻找一个各方都能够接受的平衡点，具体阐述请参看：交互设计师怎样和产品团队合作。

交互设计优化

从设计图到原型的诞生，是一个复杂而又有趣的过程。首先我们怎么完成复杂的设计图呢？前期的市场调研与需求分析为我们提供了第一手好资料，接下来我们要把这些资料逐条分析并提炼需求要点。在头脑风暴讨论中，交互设计师要与产品设计师、需求分析师等一起参加设计图创建的讨论。在讨论中确定商业需求范围、产品需求逻辑、产品规范等，最后总结出一份过程文档。它可能是BRD或FRD，它将是纸上原型的设计指导书。

当交互设计师拿到这个过程文档后，就可以创建设计图中的逻辑架构图和任务操作流程图了。在创建逻辑架构图时，可以选择Camp Tools或Illustrator制作，当然也有人选择Mind Manage制作。不管选用哪一种制作工具只要能把逻辑架构表达清晰即可，这里就不再赘述每种工具的使用方法和优缺点了。同时，交互设计师要始终以信息架构的原则来创建逻辑架构图，确保逻辑信息的完整性、表达信息的一致性、架构信息的简洁性等。在创建任务操作流程图时，通常选择Visio制作。在用Visio制作过程中，重在表达功能点之间的交互，我们可以用Visio中提供的流程图形与流程符号，来表达设计中的关键功能与关键节点。

在经过纸上原型设计之后，交互设计师要与产品规划师、可用性工程师迅速沟通，优化纸上原型。交互设计师会根据纸上原型确定的功能点与信息框架，通过Axure制作出低保真的交互设计原型DEMO。在制作Axure交互设计原型DEMO时候，应该注意的以下几点原则：

1. 用Axure页面导航结构去构建信息架构。
2. 页面的命名要有统一的规范标准。例如：一级页面，二级页面，过程页面（状态页、结果页）等都要有统一的标准。
3. 避免纠结复杂的交互控件实现。要记得Axure是快速原型实现工具，并且网上已经有很多成型的Axure交互设计模板可以直接调用。
4. 少一点色彩与布局，多一点标注与说明。把色彩与布局的问题留给视觉思考吧，多些减少沟通成本并可消除歧义的注释吧。
5. Axure交付物也要注意可读性、可及性。把你的交互产出物移交给视觉和前端的时候，记得让他们能很容易看懂你想传达的东西。
6. 交互设计原型不是必须生成HTML文件并能动态交互。不一定要能动态展示，但必须要能完整清楚传达出你的交互过程。

最后，请交互设计师们把自己当成真正的产品设计师，你们对产品与项目的责任不低于项目（产品）经理。

视觉色彩优化

IBM一直被人们称蓝色巨人（Big Blue)：信任、可靠。可口可乐是红色：活力、热情。颜色不仅仅作为这些公司的标识，还把它们加以理想化了。

不可否认，色彩改变了我们对于所见事物的反应“颜色”。不同的配色方案，给人以不同的感受，或顽皮、或深沉；或冷淡、或热情；或别致、或邋遢；或充满活力、或安静；或阴郁、或活泼；或端庄、或幼稚；或朴实、或浪漫；或专业、或业余；或炽热、或阴森。色彩选择，决定了人们在第一眼看到网站时的感觉。因此，色彩是Web设计者手中最普遍，也是最强大的工具。我们说“设计=解决问题”，而视觉设计，就是“用视觉语言去解决逻辑问题”。

在2002年，一个研究小组得到了一些有趣的发现。斯坦福Web可信性项目开始了解是什么因素让人们对网站产生信任或者不信任，而很多因素在他们的发现中都很明显：公司声誉、客户服务、出资人，还有广告，这些都会让用户决定该网站是否值得信任。但是最重要的因素——在他们列表中排在第一位的——却是网站的视觉风格和美感。

交互设计领域著名的大师，Donald Norman，总结说：“积极的情感增强了创造性和广度优先的思考，而负面的情感集中在认知上，增强深度优先处理并把干扰降到最少；积极的情感让人们更能容忍一些困难，在寻找解决方案的时候变得更灵活而有创造性。”当人们开始喜欢某些界面的时候，它们事实上会变得更可用。

电子商务垂直搜索LIST页面的视觉优化，风格上我们通常会支持品牌。目标上传达出一种强烈的品牌信息，如“阿里巴巴的橙色系列，“1688的Logo”。但是品牌识别不止是图标和广告词。它遍布在阿里巴巴项目产品设计、阿里巴巴的网站，以及阿里巴巴的材料中——事实上，品牌对配色方案的选择、字体、图形、词汇表，体现在各个方向。

视觉设计师制作了内容相同而风格不同的上百个界面，然后产品规划与设计团队成员集体投票，选择一个最合适的风格定位。在设计与选择的过程中，如果我们很了解目标用户，那么他们的内在反应和情感反应是可以预见的，并且可以预见的程度还相当惊人。答案就在于实际情况下很多因素的结合：

• 颜色-让色彩更具有可读性，少一点颜色，多一点价值。
• 排版-根据字体的选择，文字颜色的选择，再看内在的、情感上的因素来布局。
• 规模-避免空间过度拥挤。
• 角度和形状-尖锐的角度、线交叉点或多个线条汇聚的地方，使用这些焦点把用户的眼光引导到你希望的地方去。
• 重复出现的视觉主题-角落处理模式可以给用户带来视觉旋律。
• 文本-选择形散，神不散的字体与文本颜色。
• 图片-节制性的使用装饰性图片，在功能性GUI里谨慎使用，因为会分散用户注意力。
• 文化因素-如果要表达明显的文化含义，考虑下将要面对的受重。

针对电子商务搜索LIST页面用户体验设计，视觉优化不是万能的，但是没有视觉优化阶段是万万不能的。

前端代码优化

文件越大，用来下载和显示页面的时间就越长。请记住：文件总体积，指的是构成Web页面的所有文件，包括：HTML、外部CSS、外部JavaScript、图像、声音以及视频在内的文件的大小。在这些文件中，HTML、CSS、以及JavaScript文件只是文本文件，因此，常常相当紧凑。而图像、声音，以及视频文件通常都很大，存在下载问题。

公共网站的页面大小，从每页小于20K到每页大于100K（包括页面的所有图形文件）。究竟应该有多大，即使是所谓的专家在这个问题上，也普遍存在着分歧。如果你的网站需要专业品质的图形，那么就不可能遵守“20K定律”。但是，如果目标受众的Internet连接速度慢，或者目标受众的耐性有限，你就不得不放弃那令人难以抗拒的漂亮图像，转而遵守关于“20K定律”的限制。怎么样为有限的文件体积做事先的规划呢？

• 把大部分的CSS和JavaScript文件放入外部文件。只在网站第一次引用这些文件时，才进行下载。之后，网站上任何页面都可以重复使用这些文件，而无需再次下载。
• 重复使用不同页面的图形、音频和视频。因为这些文件也是在第一次时，才进行下载。
• 不要使用不必要的图形、动画或声音。无论是出于实用性的考虑，还是为了增强网站的吸引力，每个文件都应该有清楚的存在于网站上的理由。一个用于导航，大尺寸、具有吸引力的图像映射，同时具备了实用和美观两种用途，就像待售产品的照片一样。另一方面，应该去掉那些只起到填充空白作用的图形。
• 在可能的情况下，使用小尺寸图像，而不是大尺寸图像。因为在其他因素相同的条件下，与大尺寸图像相比，小尺寸图像的下载速度更快。例如：你可能使用一个平铺（重复）显示在背景上的小尺寸图像，代替单个的大尺寸背景图像。
• 尽量减少特殊导航按钮，每个按钮都具有独特的措辞和翻转效果，则需要下载100个不同的图像。相反地，50个文本链接（具有CSS提供的翻转效果），只需很小的下载代价。

做为技术出身的交互设计师，可以不断探索新的技术带来的变革(例如：html5)。无论何时，页面打开速度是给用户的第一印象，也是提升用户对网站满意度的重要因素，并且前端代码的优化将会给用户带来舒适地操作体验！

用户体验原则制定

在设计前我们要遵从一种通用性的用户体验设计原则，在设计后我们要能总结归纳出只适合此产品的用户体验规则。

设计前设计思路：

1. 以用户为中心的设计：设计必须是满足用户需求的、可行的，其次才是可产生商业价值的。
2. 操作入口明确：任何一个产品都要有明确、合理的入口。
3. 不歧视特殊人群：色盲、肢体残疾人士可以完成基本操作。
4. 任务可被完成：任务在无外界影响下可以被完成。
5. 问题可被解决：用户在任务中出现的问题，在无外界影响下可以被解决。
6. 简洁自然，清晰易懂：用简洁、自然、用户可理解的形式表达信息。
7. 突出重点，一目了然：用户的第一关注，将是设计中要表达的重点信息。
8. 导航明晰、有效：导航明确清晰、有效，分类彼此独立、完全穷尽。
9. 避免迷路：任何位置都能明确“我在那里？这里有什么？从这里能去哪里？”。
10. 深广度平衡：单个页面上可见菜单项的数目与层级结构中级别的数目平衡。
11. 习惯延续，必要延伸：用户的操作习惯必须延续，在用户可接受的范围之内适当延伸与引导。
12. 符合用户心智模型：用户对功能的预期与实际操作的结果保持一致。
13. 操作一致性：相同类型的命令或操作产生同样的效果。
14. 及时、有效、友好：第一时间针对用户的操作作出有效、友好的反应。
15. 避免出错：针对用户可能出现的错误，通过系统来避免错误的发生。
16. 一次点击：尽可能减少完成任务所需要的操作次数。
17. 别让我思考：用户的第一反应所产生的操作正确、有效。
18. 最小记忆负担：避免用户需要记忆5条以上的数据。
19. 最简化：帮助信息精简，准确描述，段落不超过3段，句子不超过30字。
20. 适时帮助：当用户需要帮助的时候才提供帮助。
21. 二倍、一个：方案设计数量增加两倍或减少到单位数量时，仍可适用该设计方案。
22. 以简化繁：尽量使用简单、原生的交互方式解决复杂的用户交互行为。
23. 符合栅格：页面布局符合栅格系统标准。
24. 符合标准设计模式：交互控件符合DPL设计模式标准。

设计后体验原则：

1. 启发式交互：让创新的界面具有教学功能。
2. 速度第一：页面打开速度的重要意义已经超过了某些页面的普通功能。
3. 即时有效：控件的反馈应该是即时的，而不是让用户去无限等待。
4. 少即是多：操作起来足够的简单快速，页面功能也很强大。
5. 个性化操作：满足交易型用户的口味，也可以同时满足浏览型用户的操作习惯。
6. 可发现性：让一切应该在那时间看到的元素，一目了然吧。
7. 简洁性：应用程序足够的干净，什么时候该出现，什么时候该消失，不给用户带来困扰。
8. 差异化：这里的差异化指的是让用户能很容易辩识相同纬度的元素之间的差异，例如相关搜索的展示方式。

其实，在设计前，我们会参考大量的通用性设计原则；在设计后，我们才会发现：对于项目有针对意义的原则也就很少的几条。这个时候需要靠设计师自己的逻辑归纳能力，把最重要最迫切的用户体验设计原则抽象出来。

快速迭代与可用性测试

在项目执行过程中，难免会有一些突发事件或需求变更，这时候我们需要一个严格的项目质量管理控制体系，来保证项目的质量的同时还要保证项目的进度。我们要通过快速迭代的方式来把之前的疏漏或错误进行修复，不要怕犯错误，应该勇于快速修正错误。一般快速迭代的开发机制是配合可用性测试（简约版启发式评估）同步进行的。

针对现有启发式评估流程上复杂，实现成本比较高的特点，进行的改进与精简，立足于机动性强，实现简单方便，灵活性更高的特点。我创新了一种简约版启发式评估的方法，适用于重要度和紧急度都高的项目。

根据who-how-what策略来快速开展简约版启发式评估，其中who-how-what为贯穿整个过程的主线,并且评估过程也分who-how-what三个部分，三个部分概括为6个字：准备-评估-报告。

具体可用性测试操作方法请参考：如何快速开展简约版启发式评估

定性与定量结合的数据分析

1.       搜索行为数变化

零批搜索行为数环比上涨33.3%，零批搜索lpv环比上涨36.1%，搜索粘度环比上涨35%

2.       CTR变化

由于BD流量不稳定，对于CTR干扰较大，因此CTR分析中，以站内和SEO的数据为基准进行分析。

• 顶部搜索导航区

由于增加商品分类的导航入口、smart suggestion的应用、最近搜索记录三块的主要应用。CTR由改版前a%提升到改版后的b%，提升了207%

• 类目区域

类目区改造为SN3.0版本，作为单独的项目，和搜索改版同时发布， CTR由改版前c%提升到改版后的d%，提升了139%。

• 快速筛选区

类目区域smart navigation效果显著，CTR由改版前e%提升到改版后的f%，提升了22%

• 主数据区域

主数据区点击增长较明显的为标题、旺旺洽谈、图片，其中单日均值标题点击增长3.8W，图片点击增长1.9W、旺旺洽谈点击增长1W。CTR由改版前g%提升到改版后的h%，提升了8.9%。

可用性测试会产生大量的需要你检查的数据。测试完成后，你可能会得到下面一些数据：

• 测试中的问题列表。
• 测试中关于时间、错误和其他性能测试数据，还包括调查问卷中的主观评分。
• 日志、笔记和调查问卷中测试者的评论。
• 测试团队的笔记记录。
• 测试参与者的背景资料数据。
• 测试过程的录像，可以从测试房间的多个角度获得。

当将所有获得的数据都输入Excel完成后，就可以分析这些数据来发现一些趋势和问题。但是，问题也来了，正如马克.吐温所说，总存在着“谎言，可憎的谎言和数据”的问题，特别是对于一些推论性的数据而言，很容易造成数据误读。

一个有用的处理数据的技术是对其进行三角形化。这种方法可以清楚地看出整个数据中每组数据是如何影响其他各组数据的。三角形的每个顶点对应一种不同类型的数据：

• 问题列表。
• 日志和调查问卷中的数值(定量）数据。
• 测试者的评论和测试团队的观察。

根据可用性目标和测试前确定的数值标准来对数据进行检验，从而确定哪些问题位于三角形内部。

排除数据误读的方式，还有很多这里谈到的只是众多方式的冰山一角。对于电子商务搜索LIST页面用户体验优化，未来我们也不将止于此，好了接下来听听大家怎么说吧？

细致的Microsoft

减少概念……增强信心

• 你是不是引入了新的概念？为什么？真的必要吗？
• 你能去掉这些不需要的概念吗？
• 其中的区别有意义吗？
• 用户体验会延续同样的概念吗？

小的好或坏也很重要

• 哪些重要的“小事”是经常会碰到的？
• 哪些小问题是你在着手解决的？
• 少做一些更好。
• 不要把小事从你的体验中去除。
• 为深思熟虑的细节制订计划。
• 修正小的错误。

看起来和用起来都很棒

• 你的用户体验哪里最棒？它看起来有那么好吗？
• 用户第一眼看到的东西能够让人觉得它用户体验很棒吗？
• 用户体验符合期望吗？
• 用户很清楚能做什么吗？
• 是不是只提供了必要的步骤？

要解决的是让人分心的事，而不是可发现性

• 减少令人分心的事情。
• 不要让功能自己之间进行竞争。
• 致力于新的功能。
• 下列方法不能解决糟糕的可发现问题：
  • 在开始菜单上添加图标。
  • 在桌面上放置图标。
  • 在通知区域放置图标。
  • 使用通知。
  • 提供首次运行体验。
  • 提供功能教程。

旋钮和问题前的 UX

• 调低问题的音量。
• 只问一次。
• 不要要求配置来获取数据。
• 这个问题是不是已经问过了？
• 寻找合并统一的机会。

个性化，而非定制化

• 这个功能是否能让用户自己来表述元素？
• 你是否能够区分个性化和定制化？
• 个性化是需要成为新的功能，还是可以利用现有的功能和信息（如用户的位置、背景图片或排列方式）？

体验的生命周期

• 考虑下列各个阶段下的用户体验：
  • 安装与生成
  • 首次使用与定制
  • 常规使用
  • 管理与维护
  • 卸载或升级
• 以一个已经使用了 12 个月的用户身份来审视整个体验。它是否具有：
  • 合理的内容
  • 合理的“音量”

为移动人士建造

• 所有的 UX 原则对于 12 英寸和 20 英寸的屏幕都是等价适用的。
• 允许用户被打断。
• 考虑启动和中断（快速恢复，不要妨碍其他用户体验）。
• 考虑获取或失去连接。
• 性能永远是用户体验的杀手。

ps:微软的细致可以渗透到产品中的每一个环节，或组成人机界面的每一个像素，实在令人钦佩。

轻巧的Apple

注重设计过程 

• 在设计过程中引入用户交互的5个目标：
  • 了解您的目标客户
  • 分析用户的工作流
  • 构造原型系统
  • 观察用户测试
  •  制定观察用户准则 
• 做出设计决定 
  • 避免功能泛滥
  • 80% 方案
• 优秀软件的标准
  • 高性能
  • 易于使用
  • 吸引人的界面
  • 可靠
  • 灵活
  • 互操作性
  • 移动性

人机接口设计准则

• 人机接口设计准则：
  •  隐喻（尽量使用隐喻来描述程序的概念和功能，这样可以利用一些已有的概念和知识。）
  • 反映用户的心智模型（用户的心智模型应该在产品的用户接口的设计中体现出来，主要体现在应用程序窗口的布局，工具栏上图标和控件的选择和组织，以及面板的功能等。）
  • 隐式和显式操作（显示的操作清楚的表明了对一个对象操作的结果。隐式的操作通过一些可视化的线索或者上下文来表达结果。）
  • 直接操作 （直接操作是隐式操作的一种，它会让用户觉得可以直接控制计算机显示的对象。）
  • 用户控制一切（允许用户而不是计算机来启动和控制操作。）
  • 反馈和交互（反馈和交互意味着通过合适的反馈以及和程序之间的交互从而让用户时刻知道现在发生了什么，而不仅仅是当事情出错时显示一个警告。）
  • 一致性（在用户接口上的统一可以让用户使用从其他应用程序学到的知识和技巧。）
  •  所见即所得（用户应该可以找到程序的所有功能。）
  • 容错性（提供充分的容错性以鼓励用户使用程序的各种功能─也就是说，大部分的操作都是很容易恢复的。）
  • 感知的稳定性（为了给用户一个稳定的感知，对于对象以及实施在这些对象上的操作，Aqua接口提供了一个清晰的限制集合；为了不破坏用户对稳定性的体验，程序应该保留用户更改过的配置，例如窗口的大小和位置等；提供程序运行的状态和反馈让用户知道程序正在进行的任务，同样能提高感知的稳定性。）
  • 整体美学（整体美学意味着信息经过良好的组织并且和视图设计一致。）
  • 避免“模式”（尽可能的让用户在任何时候都能做他们想做的事情。避免使用模式对话框来将用户锁定在某个操作中，以至于在当前操作完成前用户不能做别的事情。）
  • 管理程序的复杂性（开发一个易于使用的程序的最好办法就是设计得尽可能的简单。）
• 设计的优先级
• 满足最低限度的要求
• 发布用户期望的功能
• 让您的程序与众不同

ps:苹果的轻巧不仅体现在它的工业设计上，更多的是它的操作系统和软件的用户体验层面。 

简洁的Google

Jon Wiley- Google User Experience Designer 在一次专业分享中,提到了Google 的用户体验设计原则:

• 1. 有用（Useful）：以用户为焦点，关注他们的生活、工作和梦想。
• 2. 快速（Fast）：争取节省每一个毫秒。
• 3. 简单（Simple）：简洁就是力量。
• 4. 魅力（Engaging）：能够唤起新手的好奇心，能够吸引资深用户。
• 5. 革新（Innovative）：勇于创新。
• 6. 通用（Universal）：全世界适用的设计。
• 7. 盈利（Profitable）：为现行的和将来的商业模式做好安排。
• 8. 优美（Beautiful）：外观具有视觉愉悦性，但是不会令用户分心。
• 9. 可信（Trustworthy）：值得用户信赖。
• 10. 人性（Personable）：加入人性化因素。

ps:谷歌的简洁永远是它的产品特色，从谷歌网站的每个界面到浏览器chrome的用户体验与交互，都尽力把复杂问题设计得让用户感觉到最简单。

整理嘀咕

前期介绍了三本书给交互设计爱好者,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一样兴奋.它就像是一本交互设计的百科全书,每一个章节都让我受益匪浅.

针对将要上线的网站或活动频道业面,“即将推出”是一个很好的方式与游客建立互动,有点饥饿营销的意思。

精心设计的“即将推出”网页是通过睿智的玩笑来获取潜在买家的注意,使他们期待着网站的推出。

这些网页通过精心雕饰的插画,用几乎无限的创意来吸引潜在用户的眼球,来达到宣传和暗示发布时间的目的。

下面你会发现一些伟大的“即将推出”网页集锦,当设计师们需要的时候可以引用下面的灵感设计。

Earth Hour

Dialed Tone

Foundation Six

Creative Daddy

Just A Love

Watcher

Knot Theory

Accentuate

Freshter

Rumble Labs

deveSigner

Gigdom

Tweet Snack

Johnny Walker Plumbing

The Republic

Space Rabbit

Moses Mehraban

Luke’s Beard

Uooo.TV

FavMovie

Deaxon

EnStore

Better Blogger

Jobrary

ROFLWAFFLE

After Some Words

MediaLoot

The Helvetia

myNiteLife

SquidChef

Groupfire

Fast Society

Irava Stefan

Sweet

Photoshop Shortcuts

Feedore

ChkChkBoom

Hello Rent

Brandfunda

Hello Human Icons

Creative Grub

Shabith Ishan

Anipals

Riddim

Five Second Projects

Designatr

Boagworld

FontDeck

Minute Glass

Pepsay

Flowdock

Dashnine

Tickets

Sciplex

Silverback

After Life Notes

Good Morning!

Chocolate Pool

Inhouse Grind

Hosteeo

Gregory Desplaces

Click Formant

Nouincolor

iNewsman

Creative Joomla! Design

Mogulista

Birdboxx

Hyperlingo

Deefuse

Clock Me In

Shift

上期回顾：交互设计模式(三)-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 电子商务客户社区的建立基础在于他们频繁的使用产品上的标签。

同类模式图片展示

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

[版权声明]:版权归作者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)当第一页的结果已组合成绝大多数的综合浏览量。展示不可用“前一页”控制翻页,这些是没有什么附加价值的。
• 虽然“第一页”链接很有价值,但也要与呈现在随机访问的链接功能竞争。
• “最后”链接是没有什么价值的,因为结果是按相关性排序的,这也是问题，因为结果总数（因此，最后的结果）可能不知道。 同类模式图片展示

交互设计师通常会遇见这样情景:经过一番冥思苦想与挣扎,终于把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设计实战中的应用.

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

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

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

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

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

双重目标明确 

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

产品搜索和在线采购 

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

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

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

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

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

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

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

内容适合当前用户 

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

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

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

相关产品显示 

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

基于先前行为的推荐产品 

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

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

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

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

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

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

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

与市场零售价对比 

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

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

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

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

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

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

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

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

逼真的图书预览 

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

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

“查找内部”功能 

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

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

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

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

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

“内搜索”功能 

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

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

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

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

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

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

可定制的历史和推荐 

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

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

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

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

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

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

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

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

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

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

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

方便的导航元素 

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

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

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

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

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

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

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

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

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

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

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

购物者应始终感觉舒适 

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

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

易于筛选和用户评价比较

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

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

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

额外的购物车选项

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

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

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

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

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

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

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

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

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

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

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

结论

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

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

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

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

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

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

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