文：阿蜜果

日期：2011-10-19

转载请注明出处

你常上的网站是哪些呢？

我使用的博客网站有blogjava（技术博客）、QQ空间（能与朋友分享的博客文章）、新浪博客，购物网站有当当网（买书）、淘宝网（给朋友买礼物）、京东网（买电器），门户网站是新浪、腾讯网，常用的搜索引擎是百度和Google……我之所以成为这些网站的相对忠实用户，我想与这些网站良好的用户体验以及为它们为提升用户体验的不断努力有关。

在20世纪90年代HTML诞生时，HTML的第一个官方版本是由IETF（互联网工程任务组）推出的HTML2.0，当时，网页还比较简单，以展示文字信息为主，但随着HTML的发展，网页内容越来越丰富，也越来越错综复杂，在功能相似的基础上，提升用户体验是提升竞争优势和投资回报率的关键手段。

最近翻看两年前买的却没有翻看的一本由（美）Jesse James Garrett编写的《用户体验的要素》，这本作者努力精简的薄薄的书（仅167页，不是大开本的，而且图表很多，因为是翻译过来的，一页纸上只有2/3的地方有内容）很快的吸引了我，书中的很多观点都激起了我的共鸣。

1、 什么是用户体验

用户体验并不是指一件产品本身是如何工作的，而是“产品如何与外界发生联系并发挥作用”的，也就是人们如何“接触”和“使用”它。

2、 用户体验的重要性

不同厂商的榨汁机、电水壶、电磁炉、咖啡机等都会给人不同的用户体验。例如我家里有一个榨汁机，功能好像还挺多，但用起来复杂得很，简单的功能不能让大家一目了然，要逼着人去看功能说明书，某次我回去，看到它还是崭新的，问父母用过为什么还那么新呢，父母答：“因为比较难用，所以都不愿意用，于是才那么新！”

例如，现在的电水壶、电饭煲基本都是一键式，将水往电水壶里面一放一按钮，就开始工作了，当水烧开时会自动关闭，不用手动干预。

再例如，从前的洗衣机基本都是半自动的，洗涤完后要手动的漂洗、脱水，很是繁琐，而现在去商场看，这种半自动的洗衣机已经被淘汰得差不多了，基本都是全自动洗衣机，衣服一放进去，出来时已经是脱好水的衣服了，只要拿去晾晒就OK了。

如此种种，不一而举。在提升用户体验的路上，厂商都一步步往前迈进，他们都意识到了用户体验的重要性，试想如果需要用户在一次次尝试、失败、反复看说明书后才明白你的产品如何使用，当他还要买其它的产品时，他很可能会选择别的厂商用户体验更好的商品。在产品功能相当的情况下，于细微处见竞争力。

而网站，因为它是“自助式”的产品，一般的网站都没有可以实现阅读的说明书，没有操作培训和讨论会，用户只能依靠自己的智慧和经验，来面对这个网站，用户被困在某个地方，必须靠自己找到出路。让用户在体验网站、使用网站的过程中越少的面对这样的困境、迷惑，才能让用户更愿意在你的网站驻足，更愿意下一次来光临你的网站。

用作者的话说：“用户体验对你很重要，其中一个最大的理由是：它对你的用户很重要。如果没有给他们一个积极的体验，他们不会使用你的网站。如果没有用户，你能得到的只是一台藏在某个角落里，布满了灰尘的网络服务器，无聊地等待着去完成永远不会到来的请求。”

3、 用户体验的要素

作者将设计用户体验的工作分解成各个组成要素，以帮助我们更好地了解整个问题。

3.1 战略层

该层不仅仅包括了经营者想从网站得到什么，还包括了用户想要得到什么。就网上书店的例子而言，一些战略目标是显而易见的：用户想要买书，我们想要卖出书。另一些目标可能并不是那么容易说清楚的。

战略层关注的目标是来自企业外部的用户需求，以及与之对应的网站的期望目标。这些网站目标可以是网页目的（例如今年100万的销售收入）或其它类型的目标（让读者了解快女参赛选手的基本情况）等。

以当当网为例，它前期的战略层需求应该是：为用户提供一个方便网上购书的平台（当当网在购书方面做得成功之后，也开始从事百货、电子产品的工作）。

3.2 范围层

网站的特性和功能构成了网站的范围层，决定某些功能是否成为该网站的功能之一，就是范围层需要解决的问题。

在信息空间方面，范围是以内容需求的形式出现：对各种内容元素的要求的详细描述。

例如，当当网要分类展示各种图书的列表（包括书的封面、作者、出版日期、出版社、图书介绍等），如下图所示：   

以及按销量图书排行、最新上架图书等信息。这些都属于范围层需要确定的内容。

3.3 结构层

该层用于设计用户如何到达某个页面，并且在他们做完事情之后能去哪个地方。

在软件方面，结构层关注交互设计，即系统如何响应用户的请求。在信息空间方面，结构层则是信息架构在信息空间中内容元素的分布。

以当当网为例，从点击购买书开始，进入提交订单成功需要三个步骤，第一步是确认购物车内容，显示购买的商品：   

    第二步是“确认订单信息”，如下图所示：
   

    在上图的页面中，展示了用户当前设置的“收货人信息”、“送货方式”、“付款方式”、“商品清单”、“是否需要发票”和“是否使用礼品卡/礼券”，这些信息都可以在该页面进行修改，而这些信息，有一些同样的购物网站可能会通过多个步骤的页面展示，但多个步骤如果操作不是很方便，会让网站在这一步步中提高了购买放弃率，笔者觉得当当的订单提交界面还是比较方便的，这也是这么多年来一直是它网站忠实用户的一部分原因。

3.4 框架层

     框架层用于优化设计布局，以达到这些元素的最大的效果和效率。例如使你需要的时候，能记得标识并找到购物车的按钮。

     不管是软件界面还是信息空间，我们必须要完成信息设计：一种促进理解的信息表达方式。在软件产品那边，框架层还包括了界面设计，或者也可以说安排好能让用户与系统的功能产生互动的界面元素。对于信息空间方面来说，这种界面就是导航设计：屏幕上的一些元素的组合。

     例如在下图的框架结构中，上搜索，左分类、右内容的框架是购物网站常用的结构，卓越、京东等网站基本都采用这种方式，展示“搜索”和“购买”按钮的都位于右边，更方便势力所及和鼠标操作的方便，这些都是框架层需要定义的内容：    

3.5 表现层

     在表现层，我们看到的是一系列的网页，由图片和文字组成，有一些图片是可以点击的，从来执行某种功能，例如进入到购物车。一些图片只是图片，用于展示书的封面、网站logo等。

    不管是软件产品还是信息空间，在表现层的关注点都是一样的：视觉设计，或者说最终产品的外观。这层不但包括网页内容的位置安排，还包括网站的总体色调等内容，例如当当网以橙色为主色调，京东商城以红色为主色调，blogjava和CSDN以蓝色为主色调等。