看了这篇文章，觉得写得不错，写出了一些核心关键点 值得学习

1. 什么是体验？
现在搞产品或者设计的人，张嘴闭嘴都在谈用户体验。而那句“哥玩的不是游戏，玩的是寂寞”其实更准确的说玩的就是体验。那何为用户体验？下面我们就来追根 溯源来看看体验是什么发展跟来的。
1.1. 经济供给物的四个阶段
从经济角度来讲，我们的供给物分：产品、商品、服务、体验，四个阶段。而每个一阶段都是递进关系，是根据我们社会的物质丰富，技术发展和文化的进步一起同 步升级。

产品：是从自然界中开发出来的可互换的材料。
商品：是公司标准化销售的有形产品。
服务：是为特定顾客所演示的无形活动。
体验：是使每个人以个性化的方式参与其中的事件。

当每一个阶段市场环境饱和以后，那么就必然要升级到另一个阶段，也就是进化。而我们现在所面临的阶段就是“体验”。

1.2. 体验经济
农产品是可加工的，商品是有实体的，服务是无形的，而体验是难忘的。

体验事实上是一个人达到情绪、体力、智力甚至是精神的某一特定水平时，他意识中所产生的美好感觉。结果是没有哪两个人能够 得到完全相同的体验经历，因为任何一种体验其实都是某个人本身心智状态与那些筹划事件之间互动额作用的结果。

虽然体验舞台提供者的工作就在表演的瞬间消失了，但这种体验的价值会在欣赏者的记忆中留下深刻印象。大多数父母带着他们的孩子到迪斯尼世界，不是为 了这一件事本身，而是为了使得家庭成员共同分享这个令人难忘的经历，这种经历成为其家庭日常交流的一个组成部分。尽管这种经历不能触摸得到，但人们仍然珍 视它，因为它的价值就在他们心中，并且经久不衰。

为了增加顾客的体验而设计他们的商品–实质上就是将商品体验化。

为什么Iphone一部手机可以卖到5000块，而且还供不应求。为什么Sony Vaio电脑同样的配置下竟然比其他对手价格贵一倍？但是丝毫没有影响其销量。这就是体验经济的力量。

2. 武器一：生动传神的视频
我们经常会为了怎样把一款新产品，如何在网页上展示的更好而绞尽脑汁，用漂亮的图片？大幅的文字描述？Flash交互式介绍？

在2007年有一款全新的，非常吸引人又非常复杂的产品上市了。那就是Iphone，在apple网站除了一张很大很漂亮的图片做介绍以外，还采用 了一段10几分钟的视频。这段视频只有纯白色的背景+一个解说员+iphone。虽然元素如此简单，但是经过精心安排的片段不仅把iphone的主要功能 讲述非常清晰，而且有一种身临其境的参与感。这种感觉就好比你对面有一个人拿着iphone给你做现场演示一样。当年iphone大获成功，同时这种视频 演示方式+youtube的兴起。一夜之间在互联网上纷纷被效仿。

2.1. 视频胜过千言万语
我们经常会说，一图胜千言。而到了如今的互联网，到不如说一视频胜千言。我们都知道一般的用户在网上都是浏览，而不是阅读。这样无论是图还是文字，都很难 吸引用户长时间的停留在一个地方，即使这个地方做得再好。用户也就多扫几眼而已。所以很多公司为了吸引用户更长的时间停留，就采用了flash交互式展示 的方式。这样用户可以有参与感，会停留的时间更多一些。但是因为用flash交互展示的方式设计比较复杂，一旦设计不好的话。很容易造成用户使用的困扰。 反而会对产品的产生负面的影响。而随着互联网技术的不断发展，用户的网速越来越快。用视频的方式来展示新展品，如今变成则更好的方式。

2.1.1. 视频是图像的集合
我们说一图胜千言，那么视频是图像的集合，那么视频都是万语了。也就是说视频可以在更短的时间内让用户理解所表达更多的内容。

2.1.2. 视频更容易吸引
网页上大部分是静态的内容，无论是图片还是文字。那么视频是动态的，也就是说视频的反差性可以更加吸引用户的目光进行关注。

2.1.3. 视频+声音让用户有身临其境
视频其实包括两个部分，一个是动态图像还有一个就是声音。视频的这种方式实际上是和我们一般生活中的交互方式是一样的，譬如你看一个人的行动，或者和一个 人谈话。也都是动态的图像+声音而已。所以视频可以更好的模拟真实的环境，这样容易让用户身临其境产生共鸣。

2.2. Screencast+YOUKU
其实我们说了这么说多，那么视频到底好做吗？在我们的印象中，视频可能是拿摄像机拍摄还有演员道具什么的。而对于互联网产品来讲，其实可以用几乎不花一分 钱的方式来制作视频，那就是Screencast。也就是用软件来录制产品能的操作流程还有讲解员的声音。然后把录制的视频文件上传到youku等其它免 费的视频网站上，把生成的地址挂在自己的网站上一切就ok了。但是如果要想做出特别出色的Screencast也是需要专业的人员或者不断的学习才可以 的。

3. 武器二：讲话将重点
我们经常会看到这样的场景，就是一个页面为了介绍新产品，密密麻麻写了一大堆，文字诗情画意，图片眼花缭乱。但是看完以后仍然不明白这个产品的特点是什 么。或者有些用户比较着急，干脆就会直接忽略，要么离开、要么立即使用。上学的时候我们上语文课经常要做的功课就是，对课文分段，分析段落大意，总结中心 思想。同样做互联网产品也是如此，我们不是在页面上去写文章，用户一般都很着急，他们没有心思去看你的长篇大论，所以最好就是把你文章的”段落大意”和” 中心思想”直接告诉用户。请不要说些没用的，直接讲重点。

4. 武器三：最重要的不是首页
无论是设计人员还是老板，总有一个概念网站首页是最重要的。而其实对于电子商务网站来说，首页固然重要。但是排在第一位的并不是首页，而是产品页面。

4.1. 是欣赏，还是买东西？
一个首页设计好坏虽然可以影响到企业的形象，但是用户往往的目的不是来欣赏你主页的设计好坏。而是想通过网站找到他要买的东西或者产品的信息。我们往往把 站点的中心放在首页上，把首页的设计的如何漂亮精致。而在产品页上就设计的很随意，不仅有很多布局不合理，甚至产品信息不全，还有错别字。所以我们经常发 现，有很多企业花大价钱，很多的精力把首页弄的精美和漂亮。但是销量和流量并没有上升多少。

如果你是经常在淘宝购物的人，可能就会有下面的经历。那你要买一件东西的时候，往往价格低廉并不是最关键的因素，最关键的因素就是这个店铺是否值得 信任。除了淘宝本身的信用度以外。给人信任感的一个重要因素就是产品页面设计是否精美，产品信息是否介绍详细。大家可以去看看，在淘宝上如果皇冠或者 3~4颗砖石级别以上的。肯定他的产品信息页面是设计非常精美，信息想尽。内容的措辞和排版都非常讲究。

用户不是来欣赏首页的，而是来找信息或者买东西的。所以当我们设计电子商务站点的时候一定要把产品页设计好

4.2.一个首页和N个产品页
网站只有一个首页，即使你再怎么做seo，也只会被搜索引擎收录一个页面而已。而产品页是随着产品的增加而增加的，所以你的产品页面设计好，就会更多的被 搜索引擎收录，并且是靠前的位置。同时因为产品页面内容想尽，设计精美。用户就会很容易产品相关性浏览。譬如我要找的本来是一件上衣，但是我看到相关搭配 里面会有鞋或裤子。那么就很有可能去浏览鞋和裤子进而最终捆绑购买。

5. 武器四：提供即时联系方式
曾经有一位台湾的研究人员做了一系列可用性测试，是针对台湾赛我网的。发现当用户遇到问题的时候，如果不是比较棘手那么就看看帮助自己多试验几次。如果是 比较棘手的情况，那么第一时间就是找到站方的联系方式，但是发现竟然只有emai没有电话。郁闷不已。因为她觉得email太慢或者可能时辰大概，现在最 需要的就是一个电话。（台湾赛我已经于2008年12月退出台湾）

对于电子商务网站来说，当用户访问的时候，绝对不是因为“寂寞”。要么不是找信息，买买东西，要么就是遇到了问题。而对于用户来说，当遇到问题的时 候，一定要可以快速的解决。

5.1. 为什么Email不行？
其实我们经常认为，国外的习惯都是Email，国内都是用IM。进而产生一个引申的想法：Email速度慢一些，IM是及时性的。这是真实的吗？其实前者 和后者根本没有必然的关系。在国外虽然都是用Email，但是实际上大家都一样再用Email即使联系。也就是说在国外，当你有一个问题要反应，你发出一 封Email。过不了几分钟马上就会有回复。甚至会更快。譬如在日本，白领们聊天工具就是用的Outlook。

所以实际上在中国用户已经对Email产生了一种非即使的想法，所以大多数用户都回有emai但是可能很久才会看一次。而大多数企业虽然都提供企业 服务邮箱，但是可能根本就没有专人去管理，至少我遇到几次，email石沉大海的情况。

所以在中国用Email为客户服务的管理方式，无论是企业还是用户，其实都没有那种即时的习惯。所以是根本行不通的

5.2. QQ>论坛>电话
要为客户服务提供联系方式，最好是即时的。所以很多公司都会有留有电话。但是我不认为电话的方式是首选，首先电话要产生一定费用。其次也是最重要的就是一 些问题上，IM更容易沟通。

• 聊天记录可以保存
• 更多时间去组织问题的描述语言
• 得到信息反馈更加快速

另外即时的反馈论坛也不错，论坛可以包含上面所描述的所有有点，同时版主可以把经常遇到的问题整理形成QA这样便于用户查找。但是论坛需要用户重新 注册用户，这一点加高了用户使用的门槛。

6. 武器五：准确的链接
链接是网页组成的最重要元素之一。简单，实用。但是我们却经常忽略掉链接的重要性。

6.1. 链接不像链接
我们在浏览网站的时候经常会遇到一个问题，当我们要找一个下载链接的时候，找了满屏幕也找不到哪个可以点。

这种情况最容易出现的就是，一大段文字中夹杂一些文字链接。而当我们把这些链接处理的和文字内容样式比较接近的时候，用户就很难找出那里可以点击。

所以当处理链接和文字混排的时候，一定要把链接标记的和其它文本有明显的区别，而最保险的方式就是下划线+对比颜色。

6.2. 不是链接像链接
和上面的情况相反，就是看上去可以点的东西，但是点了没反应。这点也是很让人郁闷的。而比较常见的就是为了修饰普通文本加上了下划线。下划线在网页上有一 个不成文的规定就是它是链接的样式。而用户已经养成了这种习惯，所以一定不要在普通文本用下划线做修饰。

另外一种情况下就是把图片做得太像按钮，但是实际上并不是按钮。这样也会让用户误点击。

6.3. 死链接
网站最大的忌讳之一就是点一个链接以后，弹出来一个无法访问。当你的网站连续出现这样的情况，那么用户一定会认为你这个网站一定是坏掉了。

6.3.1. 尽量避免死链接
我们的网站确认并最终上线之前，一定要检查一下是否有死链接。如果页面比较少的话，其实你自己就心中有数那些链接暂时没有页面，那么就先暂时却掉就好了。 如果页面量比较大，就可以用专用的软件（譬如：Dreamwaver站点管理）来检查

6.3.2. 漂亮的404
虽然我们详细的检查了，但是对于如今的动态网页，数据量相当大。尤其是对于一些BtoC的电子商务网站，拥有成千上网的产品页面，不可避免产生临时性的错 误。那么就做一个漂亮的404页面，这样当用户虽然找不到页面。也起码让用户愉快一些，另外在页面上一定要给出返回首页和反应情况两个永能。首先用户可以 从这个页面找一个门逃出去。另外一些热心的用户会把这个错误反应给你，那么让用户帮助监督网站何乐而不为呢？

7. 武器六：内容一致
如果你的公司比较大的话，可能会出现几个部门维护同一个网站的情况。那么就很容易产生对同一个事物的不同描述，同时出现在一个站点上。譬如对一件产品有英 文名字和中文名字，那么在产品库中和系统数据同步用的都是标准的英文名字。但是在首页新产品的新闻中是有编辑完成的，为了让用户更容易理解，就可能采用中 文名字。这样就会发生用户中文名字根本在产品库中查询不到产品。

对于站点设计师来说，如果一个站点是又两个以上的设计师设计，那么就会产生对页面上同一个功能有不同的描述的情况。譬如“显示历史记录”，“详细情 况”，日期是格式等

有些情况下是小问题，但是如果是找不到产品，或者因为时间格式的问题用户与略掉了一些重要的时间。那么问题可就大了。

所以对于站点一定要制定一些文字描述标准，如果是对要求比较严格的话，还需要有专门的人员来负责校验。

8. 武器七：保持更新
俗话说的好“树挪死，人挪活”。一个网站其实也是有生命的。企业经常会为了形象，出重金来设计网站。但是一但设计网站完工。就觉得万事大吉了。其实网站完 工才是正式开始而已。

我们经常会遇到这种情况，网站设计的漂亮无比，但是一看网站新闻。2006年xxxxx？？我们第一疑问是什么，是不是这个公司倒闭了？

当我们看到一款新产品铺天盖地的宣传，但是我们来到了这个公司的官网，竟然找不到这款产品的详细介绍信息。

一个企业如果有了自己的商务网站，那么这个网站实际上就是和企业链接在一起的。用户无法去企业参观访问。用户只能通过企业的站点来了解企业。所以一 定要保持网站的更新，让网站和企业一样有鲜活的生命力。

转自：http://blog.d8in.com/posts/699.html

渐进式行距

• 正文：字体大小14px，行距24px，段后距24px
• h1：字体大小24px，行距24px，段前距24px，段后距24px
• h2：字体大小：18px，行距24px，段前距12px，段后距12px
• 边注正文：字体大小12px，行距24px，段后距24px
• 边注边框：边框粗1px，内补白11px——别忘了还要把它上移12px

我们修改边注的行距和段后距都为18px。那么情况就会像这样：

(demo-9.html)

不知道各位看官发现了没有，为什么第一行基线没对齐呢？这是因为流布局会将文字块按照行高做顶端对齐。如下图：

所以，在这里，为了使首行基线对齐，我们还要将边注下降一定的像素。可恨的是，需要下降的像素是多少——这个很复杂的问题，至少经过不才好几次的尝试都没有看出个规律来，而只得出以下三个结论：

• 设正文行高是h px，边注行高是h’ px，需要下降的值为d px，那么，这个值将介于 1/2(h-h’) < d < (h-h’) . ①
• 如果该行引入了西文字符(半角数字或者字母)，该行的基线有时会比没有西文字符偏移一个像素。
• 不同的字体渲染引擎可能行为不一致。

这 个结论并不能有成型的公式来确定需要下降的具体像素值。那么，我们就根据结论①一个一个像素试验吧(3 < d < 6)，反正不会太多。在本例中经试验可得，下降4px是能够让首行对齐的。对齐后，各位可以看到正文每隔4行，边注每隔5行，他们的基线会对齐一次。

(demo-10.html)

很有趣，是吧？

垂直栅格与渐进式行距应用举例

这 套理论看起来略显枯燥。所以，我还是得举个应用的例子，不然理论对于现在来说没有任何意义。前几天，我遇到了一个问题是这样的：有一个系统，它能够用像 iGoogle那样的模块迅速搭建一个页面用于淘宝的各个子页面。但是，用模块搭建却常常遇到开天窗的问题，就像下面这样：

好， 现在，我们开始开刀。首先，我们用6px的红色网格线，画好标尺。为什么用6px呢？我们在前面的例子中，正文行距是24px，边注行距是18px，那么 他们的最大公约数就是6px. 也就是说，如果我们画好以6px为单位的横线族，那么，每3条横线就是一个18px单位，每4条横线就是一个24px单位。

画上线后，工作简单啦！利用18px和24px这两种行距，将文字的基线都挪到红色网格线上。

回顾一下优化前的样子：

全部使用了18px或者24px的行距。其中，将右边模块的资讯条数由8条缩减为5条。甚至，我们可以继续发现，应用了垂直韵律之后，垂直的行数可以做自由得调整，而两个模块的高度可以保持高度一致。例如我们缩减了行数：

应用了垂直韵律之后，既美观又灵活，何乐不为呢？哇咔咔～

最后

当然，垂直韵律和渐进式行距还有很多应用的方法。总之，作为设计师，特别是网页设计师/交互设计师，我们不应当单纯地凭借感觉，应当专注到像素级别，严谨设计。

“严谨”一词，永远受用。送给我和大家。

文章转自：taobaoUED

顾客们是来买东西的，不是来填表单的。所以需要确保用户在付款过程中完成了注册，而不是付款前就去注册，也不是让用户把商品放到购物车里之前去注册。注册表单的需要用户花功夫去填，注册过程中还可能有问题，所以这会成为用户顺利完成购物的障碍。

Taget这个网站就是当用户真正要把钱付了的时候，才让他去注册的。

在购物流程中，把注册这个麻烦往后面移，能使最后购买商品的用户大大增加。用户既然一开始就花了很多时间选购他们想买的东西，那如果在付款的时候因为注册麻烦而离开，前面选购商品花的时间久白费了。但如果用户还没开始选商品酒让他去注册，这时，他们还没花时间成本，就更容易选择离开。

2 如果这个商品有货，明确地告诉用户

对商品有的库存数量需要明确地告诉用户。如果商品没货了，要早些让用户知道，避免用户购买时往后操作了好几步才发现原来商品没货了。不仅要在商品介绍页面显示库存数量，在用户搜索商品的结果页面也要显示出来。

Overclockers 在商品列表中，就列出了详细的库存数量信息。

另外，如果某个商品现在缺货，但最近就会进货了，可以提供给用户一个预定的功能，这样不急着买这个商品的用户，过几天来就可以买到了，他也不用担心过一阵子来买时，商品又售空了。

3. 让用户很方便地修改订单

每个人都可能出错，用户有可能在购物车里放错了商品，或者要付款的时候改变主意了。这时，要让用户在付款的过程中能修改他们购买的商品，如果不能修改他们可能就离开了，而能修改的话，就赢得了许多潜在用户。

IconDock 就让用户通过输入框中的数字，很方便地修改购买的数量。

如果用户想把商品从购物车中删掉，不要让他们在输入框中输“0”这个数字来删掉。还是提供“删除”这个链接比较好，通过点“删除”，可以让他们把商品从购物车中删掉，这样修改既快又简单。

4. 在用户操作过程中，提供给他们实时的帮助

因为付款过程需要用户输入信息，而用户很可能在这个过程中碰到问题，这些问题不一定能靠有限的几个界面来解决。这种情况下，提供给用户专业的，一对一得帮助，要比给他们一个宽泛的帮助（比如“常见问题”的页面）好很多，类似“常见问题”的页面不一定能解决用户碰到的问题。

在“戴尔”的购物网站上，用户就可以通过咨询电话和在线客服获得帮助。如果用户在付款过程中碰到了问题，她可以立刻咨询客服获得帮助，问题几分钟内就轻松解决了。

在用户付款过程中，提供在线客服或电话咨询的帮助是个非常好的主意。不过不是所有公司都能负担得起那么多客服成本的，大中型公司可以考虑这个方法，特别是那些网上付款流程比较复杂的公司。

5. 使“返回”按钮充分起到作用

“返回”按钮是网页浏览器中最常用的按钮之一，所以许多用户可能在付款过程中也会经常用到。一些网站不提供返回上一页的功能，当用户点“返回”时，页面会自动重新指向某个页面或是报错，这样会对用户的体验造成负面影响。

Ticketmaster 中，点“返回”按钮出现这样的报错，就会让用户有受挫感。

当用户点“返回”按钮时，不仅不能老让他们碰到出错提示，而且如果前一页是表单的话，要保存他们之前填的数据并再次显示给他们看。这样用户只需要在原来填的内容上做修改，而无需重新填写整个表单。的确，有些情况下，用户点“返回”已经为时已晚，比如他点了“确定支付”的按钮。不过别的一些页面都能支持“返回”按钮的话，既节省了用户时间又减少了他们的挫败感。

6.在购物篮中提供商品的照片，说明，链接

    用户经常会把商品放进购物篮后，付款前再核对一下购买的商品，看看他们是否确定要买这些。商品如果只有标题，他们就无法再快速地浏览核对一遍。所以，最好加上图片，商品说明—比如大小，颜色，精装书还是平装书，等等。

亚马逊网站，说明了商品的颜色和详细情况，比如精装书/平装书，还提供链接返回查看原商品详细信息。不过他没有提供商品的缩略图。

Oxfam 提供了每件商品的缩略图，让用户能快速浏览。另外，如果用户想确认这个商品是否确实是自己想买的，还可以通过链接返回原商品介绍页面。

7. 提供操作流程的指引

付款通常是一个包括多步操作的流程。这意味着用户完成支付前会经过好几个页面。所以最好加一个操作流程指引，告诉用户他们现在的位置，即他们目前走到付款流程的哪一步，哪个页面上了，以及离完成过程还有哪几步。

苹果网站在所有付款页面上，都放了一个简洁的流程指引。

让用户知道自己在流程中的哪个位置，会给他们一种控制感，从可用性角度来说，这是很有必要的。当然，让用户知道后面还有哪几步操作，就可以完成了也会减少他们的疑惑。这样他们在完成付款前，根据自己的情况和想法，来调整或取消订单的自由度更大。

8.付款界面保持简洁

付款过程和网站上浏览型的网页不同。在付款过程中，用户并没有在购物。这意味着所有的浏览型操作在这里都是多余的，这只会分散用户的注意力，影响他正在完成的任务。设计时，要把那些不需要的元素去掉—比如，商品目录链接，热销商品推荐等，使界面保持简洁。

戴尔网站的付款页面，就没有商品的目录链接，而是让用户把所有注意力放在付款流程上。

有时用户会返回，再买一些商品，再来付款，所以需要提供一个“返回继续购物”的链接。另外，要确保所有指向“下一步”的按钮都大一些，避免用户找不到。

9.不要让用户离开付款流程

用户在付款过程中不要被打断很重要，比如，把用户引到一个和付款不相关的页面。把用户带离开付款流程会有以下两个问题：1）他们会搞不清自己究竟在哪里，甚至有可能付款的页面找不到了 2）他们可能会因为被打断而没有成功完成整个付款流程。

Laskys 网站的付款页面上，当鼠标悬停在某些元素上，会有帮助信息弹出告诉用户相关的功能说明。

不能打断用户付款流程，那么我们要找到一个方法显示不要的信息。如果需要提供一些帮助信息，而这些信息又不适合在当前页面上显示，可以考虑通过浮动窗口或弹出窗口显示。

10. 告知用户商品配送时间

线上购物比起实体店购物，有个较大的弊端：用户需要等待几天才能收到购买的商品。所以当用户购买成功后，需要告诉他们大致需要等待的时间。

苹果网站会根据不同用户的订单显示相应的送货时间。

告知用户商品配送时间有以下几个原因：首先，用户要确保快递公司送货上门时，家中有人收快递。其次，这样用户会对货什么时候到有个心理预期，而不用老担心买的东西怎么还没送到。送货时间显示得越早越好，最好在商品介绍的页面上就显示。这样的话，想购买该商品的用户，就能根据商品送到时间是否能满足需求，来决定他们是否购买。

11.告诉用户之后会发生什么

当用户完成了商品购买，并点击了最后一步操作的按钮后，接着会出现什么？以“感谢您购买本商品”为结束语。这对用户来说，是一种礼貌的表示，而用户也一定很乐意接受这些体贴的话。

亚马逊网站，在用户付款完成时，就会显示：感谢您购买了此商品，并且告诉用户接下去可以做些什么。

另外，还要告诉用户接着还会发生什么——比如，当商品发货时，他们会收到一封邮件通知。这会消除用户对订单是否真正成功购买的不确定，他们安心。

12 发一封确认邮件

 用户可能完成了商品订购并付款了，但其实还没结束。网站需要发一封确认邮件，告知用户购买商品的详细信息和送货到达的时间。这个信息还是很有帮助的，因为这让用户再次确定他们没买错商品，比较安心。

亚马逊网站会在用户付款后，发送关于购买的商品详细信息的邮件，并告诉用户如果买错，如何在商品发货前修改。

如果用户买错了商品，在商品发货前，需要提供给他们重新登陆并返回修改订单的机会。简单的出错，比如选择错了尺寸，颜色，经常会发生，所以网站需要让用户感觉在线上购物既简单又可靠。

标点符号的作用

　　标点符号大致来说有三种作用：表停顿；表语气；表词语的性质。

　　1、表停顿，用来表明句子的结构。

　　2、表语气。通常交谈的语气有三种：陈述预期，告诉别人一件事情；疑问预期，向别人提出一个问题；祈使预期，要别人做一件事情。这几种语气在交谈中用语调来表示，在书面上用标点符号表示。

　　3、表词语的性质。某些词语加上某种标点，词语的性质就会发生变化。如“高兴”指的是一个形容词；而《高兴》就表示一部电影或书籍或文章的名字。

中英文标点符号的差异

　　1、汉语中某些英文中所没有的标点符号。

　　a) 顿号（、），英文中分割居中的并列成分多用都好。
　　b) 书名号（《》），英文中没有书名号，书名、报刊名用斜体或下划线表示。在英文中文章、诗歌、乐曲、电影、绘画等名称和一些专有名词也常用斜体表示。
　　c) 间隔号（·），英文中需要间隔时多用逗号。

　　2、英文中某些汉语中所没有的标点符号

　　a) 撇号（’）
　　b) 连字号（-）
　　c) 斜线（/）

用户界面文本中标点符号的使用

　　在用户界面文本中何时使用标点符合主要遵循以下依据

　　而针对具体的标点符号，也有一些规范。

　　句号

　　1、控件标签或主要标题说明后不使用；
　　2、辅助说明、辅助解释或其他包含完整句子的静态文本后使用。

　　如下图：

　　这里的区分主要是看文本内容的性质，是主要文本还是辅助性的文本，这两种文本的区别在后面的是否使用英文标点符号中也会用到。

　　问号

　　可以在所有的问句后使用，问号应用于所有类型的文本，如下图：

　　感叹号

　　带有强烈的感情色彩，应尽量避免使用，只有在一些特殊情况下可以使用，如任务完成等。

　　冒号

　　1、在外部控件标签的末尾使用；
　　2、用冒号来引导一组并列项。

　　如下图：

　　省略号

　　表示不完整或未完成，在以下情况中使用省略号，

　　1、表示该命令需要额外的信息。不是所有显示其他窗口的操作都加省略号，只是那些需要额外的信息来完成的操作的情况需要。

菜单项不需要额外的信息来完成。

菜单项是一个命令或者隐含着命令，需要额外的信息来完成。

　　2、表示文本被截断。

　　3、表示任务正在进行中。

中文界面里使用英文标点的情况

　　与普通的书面表达不同，在界面设计中会出现混杂了英文标点符号的现象，这不是设计师的疏忽而是英文标点将有助于提高无障碍访问特性，所以在一些重要信息中应该使用英文标点，如标签尾部的冒号和在命令、数据、标签中表示不完整的省略号，主要标题后面的问号。

　　粗略的总结了一些常用标点的用法和用户界面文本中的特例，其中难免有疏漏之处，欢迎大家指出疏漏之处予以斧正。

　　从0.1秒至10年或以上，用户界面设计有许多不同的时段，各有其独特的可用性问题。

　　在用户体验方面有其自己版本的“10的次方（powers of 10）”（Charles Eames 1968年的经典纪录片）。对我们来说，事物并不是按照10的倍数变大或变小，大多数的用户界面具有大致相同的物理尺寸，它们是由人体所决定的。例如，黑莓键盘约为1 / 5的电脑键盘大小,而不是1 / 10的大小。而且，除了墙壁大小的显示器，没有什么会比10倍PC显示器更大。

　　但在第四维—时间上，用户体验的时间尺度却超越多个10的倍数.

　
0.1秒

　　时间对人的知觉及心理的影响，许多效果发生在这一时间尺度上。

　　由Gitte Lindgaard博士领导的研究小组发现，人们可以在网页出现后仅需50毫秒就可以产生第一感觉，即1/20秒（50毫秒只是0.1秒的一半，但它已经相当接近“10的次方”的分析）。在Lindgaard的研究中，屏幕图像每隔0.05秒对测试者进行切换,他们仍然能够区分出设计的好坏。重要的是要意识到这并不是用户实际使用网页的方式,首先,网页并不会在屏幕上只显示一瞬间的时间,相反可能会显示一秒(如果幸运的话,会更长),其次,人们在决定下一步做什么之间,往往会花一段时间看一下当前页面.尽管如此，但该项研究表明，人们能够形成基本的视觉印象非常快。

　　如果你想让用户感觉他们动作的效果是立即发生的，0.1秒是一个时间界限。比如，当你单击一个弹出式菜单后，如果在0.1秒之内菜单弹出来，则用户的感觉就是立即发生的；否则如果超过0.1秒才弹出来，那么感觉就不是“即时的”，相反，给人的感觉就是电脑在做一些事情，然后才弹出菜单。因此,要建立用户立即响应的效果,界面操作必须少于0.1秒。在视线跟踪的研究中，大部分的结果都少于0.1秒。实际上，视线跟踪研究主要注重的是人们在看网页时切换网页的时间的影响。人们看东西非常直接，所以我们必面重视内容的清晰。

　
1秒

　　当计算机时间超过0.1秒，但不超过1秒响应您的输入，感觉像是电脑在输出结果。虽然用户感觉到短暂的延迟，但他们会仍然继续在当前的事情上。这意味着，在1秒的响应时间里，用户有一种交互控制的感觉，即使他们发现，这是一个双向互动（它们和计算机之间）。与此相反，0.1秒的反应时间，用户只是感觉他们自己在做事情。

　　对于Web可用性而言，这意味着新的网页必须在1秒内显示出来，用户才会觉得自己在自由地浏览，如果慢于这个时间，他们会觉得计算机对自己的浏览造成阻碍。在Web发展的初期，就不可能实现这种页面下载时间。这就是为什么很多指南建议您尽量减少需要浏览的页数：在当时，用户导航到新的一页将是不愉快的，因为打开新的页面将超过一秒钟的时间。今天，随着宽带普及，1秒以内的下载时间是非常可能的，应该成为追求的目标。现在的主要问题不在于大的图形或大的页面内容（千字节的数量）。现在，响应变慢的原因更多的是由于过多的动态元素及复杂的设计。（另外，重要的是要记住，有些人仍在使用拨号方式，特别是在农村地区或发展中国家。移动设备也有较慢的连接，所以你网站的移动版本通常对这些需要特别的考虑。）

　
10秒

　　1秒后，用户就必须要等待电脑的回应,等待的时间越长，急躁的情绪也越大，大约10秒钟后，用户的情绪将达到极限，内心将开始产生疑惑，超过10秒，用户往往会离开网站，而不是试图继续恢复他们一开始想要做的事情。10秒也是这样的一个时间，在这个时间点，用户将会认为该网页是不好的，并且决定离开。如果平均页面访问时间为30秒，对于有经验的用户，他们会将更短的时间分配给每个网页。人们在互联网上浏览时，要么满足他们的需求，否则他们就可能离开。

　
1分钟

　　用户应能在1分钟内完成简单的任务。比较差的网站可能需要超过一分钟的时间来完成简单的任务，比如从储蓄帐户转移资金到支票帐户–将被用户取消。大多数主页上的视频广告不应该超过1-2分钟，因为人们不喜欢被动地看比这更长的东西。

　
10分钟

　　10分钟，将是访问网站的一个较长的时间。在一个案例中，例如，我们研究一个用户在B2B网站上的购买行为，一共访问了25个网页，最长的网页访问时间为 7分钟。

　
1小时

　　大多数可用性研究持续1至2小时，因为难以让用户进行更长时间的测试，除非我们在对小孩进行测试-对他们来说是一个小时已经是最大的-我们通常会限制我们的测试时间在90分钟以内。人在测试一两个小时之后会感觉疲惫。大部分的网上任务都会在一个小时内完成。在一项研究中，一半的的电子商务的购买行为发生在用户进入网站的28分钟内。当然，另一半则分布在间隔较长的时间段内。

　
1天

　　一天是客户交易请求的最大响应时间， 虽然您应该在1分钟内发送电子邮件和交易确认信息，以便让用户了解他们的行为系统已经作出了合适的响应,如用户订单或用户地址的变更。这里的差别是，如果用户在1分钟内未得到响应，他们会以为该项服务需要人工干预，而不会认为计算机坏了，当然，更快捷的响应会更好。许多用户经常每天检查某些内容的更新， 所以，如果需要，你可以每天向用户发送一个email新闻 （但要注意：你也应该发布一个取消订阅的功能）。

　
原文：http://www.useit.com/alertbox/timeframes.html

转载自：ＣＤＣ新家

你是否曾经想过设计一个漂亮的网页，但是却不知道怎样入手？说实话，几年前我也是这样。当我浏览网页的时候我看到这么多好看的网页，我就希望自己有技术创作这样的设计作品。

今天我可以这么做了，而且我将教你怎么做这样的设计！从根本上，对于这种设计你需要一点photoshop的操作技能和观察细节的能力。通过以下的教程，我将会指出其中极细微的细节之处，而这些细节讲使你的网页设计漂亮起来。打开photoshop,我们开始啦！

正文

先看效果图

第一步：下载960网格模板

我一直以来做的设计几乎全部是基于960网格模板的. 因此在我们开始创作之前，先下载这个模板. 你能在960.gs上找到这些模板. 下载之后解压zip里面关于PSD的模板. 你会发现有两种规格: 一个是12栏式的而另一个是16栏式的. 他们的区别就像名字所说的，一个是按12栏分布一个按16栏. 更详细的介绍一下吧, 如果你的设计里面分3个区块你就选择12栏式的,那是因为12能被3整除; 同理假如你的设计分四个区块, 你可以选12栏式或者16栏式，那时因为12和16都可以被4整除. 你会发现这个技巧将用于下面教程.

第二步：构造你想象的结构

在我们打开PSD网格模板创作前, 我们首先需要先构造一下想象中的结构. 从上面的这张图，你可以看出来：因为在一个排版中又有排版，所以这是一个有点复杂的结构.

第三步

构造了结构之后我们继续. 打开16栏式的PSD模板文件. 打开 “图像 >画布大小” . 把画布的宽度设置为 1200px 高度设置为 1700px .把背景色设置为 #ffffff 既白色.

第四步

用长方形工具在顶部画一个宽100%高大概80px的长方形. 用颜色： #dddddd 填充它.

第五步

在长方形那层上面创建一个新层. 按住CRTL键鼠标点击长方形层. 长方形就被选中了，然后把目标移至刚建的新层上. 选择半径 600px 的软笔刷（如图）, 把其颜色设置为白色, 然后就像图片所示那样在选框上边缘点几下. 通过这个技巧你画出了一个微妙的照亮效果. 你现在可以把这两层联合起来了.

第六步

建一个新层，再用长方形工具如图所示在上端画一个深灰色的小长方形.

第七步

在距离上端长方形500px处开始画一个宽 100% 高 575px 的长方形. 设置其由 #d2d2d0到 #ffffff 的渐变色, 角度为-90,缩放为100%

第八步

现在我们如第五步那样添加照亮效果. 这个技巧我们将很频繁地使用;因此下次用到的时候我只提示是第五步的效果 .

在当前层之上简历一个新层. Ctrl+鼠标点击这个大的长方形. 选择 600px的软笔刷, 设置颜色为白色，如图所示对选区的边缘点击多下.

第九步

创建一个新层画一个400px高的长方形. 这是用作我们网页页头的. 给它设置一个线性渐变，由颜色 #2787b7 to #258fcd.

以下展示颜色的微妙变化：

第十步

在页首长方形块底端画一条1px的灰蓝色的线, 混合属性中添加阴影效果. 阴影参数: 正底叠加, 透明度: 65%, 方向: -90, 距离: 1px ， 宽度: 6px. 之后再建一个新层，在灰蓝色线下面画一条1px的白线.通过这种方式，我们就可以创建一个轮廓鲜明的边缘. 可以说在你的设计中，你可以把这个技巧用于其他色块.

第十一步

创建一个新层,在画布顶端用“长方形”工具化一个50px高的长方形,就如图所示，这个长方形是用作导航的.

为其添加阴影效果.参数如图所示.

第十二步

开始话导航啦.使用“圆角工具” ，设置半径为5px,画一个圆角长方形，用颜色 #f6a836 填充它, 之后给他添加以下效果:

1. 内阴影- 颜色: #ffffff, 混合模式:正底叠加, 透明度: 60%, 角度: 120*, 距离: 7px, 大小: 6px.
2. 内发光 – 混合模式: 正常, 颜色: #ffffff, 大小: 4px. 其他参数默认设置.
3. 描边 – 大小: 1px, 位置: 内部, 颜色: #ce7e01.

Ctrl+鼠标点击层产生如图选区. 选择： 选择-> 修改 > 收缩 然后在弹出框中输入1px，确定.

在上面再建一层, 把混合模式设置成叠加 ,然后好像第五步那样加照亮效果,不过这次用的是小笔刷 . 然后就是增加导航文字了.我用 Arial 字体作为导航的连接字体, 所有效果设置为 “无”.

第十三步

现在我们开始创建搜索框, 圆角长方形，半径5px,在如第四步所示的网格的右边、顶端灰色背景网格纹中间创建一个用于搜索的色块. 为它增加以下样式:

内阴影：颜色: #000000,混合模式: 正片叠加, 透明度: 9%, 角度: 90*,距离: 0px, 大小: 6px

描边： 大小: 1px, 位置:内部, 颜色: #dfdfdf.

给它添加“search”的文本和一个亮底暗色的“GO”按钮.如下图所示：

到目前为止已经创建了很多层了，为了条例清楚，我们建立一个叫“search”的层文件夹. 把所有于搜索相关的层一并拖到这个层文件夹里面去. 迟点，我们都会这样处理，可以让我们的创作更合理.

第十四步

新建一个新层，然后就像画”搜索框”一样在这层上面画一个”Sign Up”按钮（字长刚好为背景长的一半）. 把这个组合放在搜索框下方条纹竖直方向中间.

再一次如第五步那样创建亮光效果.

使用更小的软笔刷.这次的笔触大小为45px.

第十五步

加了logo和网站描述之后，我们的网页就如上所示.

第十六步

现在我们回到层结构那里提早做一些工作.创建一个空的层文件夹并命名为”top_bar” .移动所有的图层到这个文件夹里面（包括logo,条纹,搜索框,注册按钮，导航和背景）.

创建另外一个空层文件夹并命名为”header”.这里用于放置头部图层 .如上图所示

第十七步

头部看起来有的平淡，因此我们可以再任意位置加相同的亮光效果. 选中蓝色的头部区域.在它上面创建一个新层并设置其混合样式为 叠加.

选一个大点的600px软笔刷,颜色为#ffffff白色。然后再导航下方点击几次。假如想更有层次感，你还可以把颜色调为黑色，然后在头部区底部重复同样操作。

第十八步

在这一步我介绍一下我是怎么实现头部图片的反光效果的。选择两张图片，我用了我自己另外做的两个网页模板图片，缩放其中一个然后把他放在比较大的那个的下方。复制这两层，用自由变换工具按住shift键等比例缩放一下，用长方形工具在上层的图片下端外部画一个选区，到选择->修改->羽化，填入30px或者大点羽化一下选框。（这里原教程说得不大清楚，我实现的方法是这样的：羽化之后选择反选，然后选取画笔工具，选白色，再在图片的左边角和右下角点击数下，然后用长方形选框和delete键修整边缘）

为了让两个图片更加突出，可以新建一层，设置该层模式为叠加，重复第五步的效果添加的操作。

在添加了一些按钮和漂亮的条纹之后，头部区域就是像上面那样子的。不要方剂把图层都放在’header’层文件夹里面。

第十九步

最终效果图里面你会看到在内容区域里面有很漂亮的切换页。为了创建这种切换页我们需要实现额外的一些操作，这是很有必要的。首先用圆角长方形工具创建一个高70px圆角半径为10px的图形（注意要画路径图），现在我们不要底部圆角的部分而为它郑家一个更好的角效果。用直接选取工具单击这个图形的路径，单击垂直点然后按住shift键往下拉直到如图所示状态.现在看起来不错了，但是还是比较简陋。然后…(把圆角变直角！？？？我汗，那还不如直接画个直角的长方形？)

如图创建了一个比较好的角（我汗）

第二十步

选择直线工具，设置大小为1px

第二十一步

按住shift键画灰色的分割线。

第二十二步

为每个切换标题添加小图标。我用了来自WebAppers.com的图标。通常一个切换标题激活了其他的就处于非激活状态了。为了清楚表达这一点，我们需要想个办法完成它。我降低其他图标的饱和度并且降低标题字眼和描述文字的透明度一保证激活的标题处于高亮状态。

第二十三部

为了使激活的按钮更加明显，我们将给它添加一个时尚的背景。为了达到这样的效果我们把整个对象选中然后裁切选区（按住alt画选区即可把不要的选区去掉）最终使选中的范围只有第一个按钮。

如上图所示即为所要达到的选区。

用一个更小的软笔刷，画出一个白色背景。

第二十四步

增加一个阴影：在切换菜单的后面如上图所示画一个深灰色的长方形。

点击图层区底部的小图标给该层增加一个蒙版。

把前景色设置为黑色，选一个大的软笔刷，在蒙版层上面点击（如图所示，蒙板上面出了白色之外的颜色都会遮挡图层）使部分黑色去掉。结果，我们创建了一个比较好看的阴影效果。

最后我们加点细节。在切换菜单下方画一个1px的灰线。然后如上一步一样用蒙版的方式使左右两端渐变。现在我们就得到一条比较时尚好看的线了。

现在切换菜单就像这样。

第二十五步

现在开始设计第一个切换按钮的内容。我们需要一个精准设计的图像（有好看的标题和一些文字内容）。首先我们得创建这个精准的图片。这里我认为我们最好打破这个图片尖锐的棱角设计，从而创造一个多彩的效果。因此我现在画一个白色有1像素灰色边框的长方形，再给它加上细微的阴影效果。

复制这一层并用变形工具稍微旋转。重复这个操作几次

把你选好的图片导进来，放在白色长方形上面。不用担心图片会溢出，我们会修整它。选中最上层的长方形，按选择->修改->收缩 ，输入5px,确认，然后在图层管理区下方点击添加图层蒙版，这样图片就只显示选区范围。

这就是你现在图层的状态。

第二十六步

不要忘记整理图层，这里新建图层夹把图层归类。

增加一个漂亮的标题、一些文本和列表，我们的设计工作又完成一部分。现在继续下一步吧。

再组织一下图层。

第二十七步: 感谢信

我认为这一个部分要比较大的，因此我把范围限定在主区域上的一个大的盒子里面。首先创建一个大的淡灰色的大概高220像素的长方形。设置其有1像素的灰色边。

然后再画一个上下左右都比它小10像素的另一个长方形。同样设置其1像素的淡灰色边框。

最后写上文本就可以了。

第二十八步

终于要做页脚啦。画一个400像素高的、深黑色的长方形。

第二十九步

如第五步一样给它加亮光效果。

第三十步

下来，如图所示，在区域上方画一个10像素高的长方形，并且通过在顶端和底部各多加两条线增强细节处理。

第三十一步

创建低端部分用于放置重复的导航。你可以拷贝顶端放置导航的长方形，移动并变形使其40像素高。把它放到你画布的最低端。你要注意你可能要扩张你的画布使所有东西都有适合的位置。制约扩张画布的操作你可以这样：图像->画布大小 设置即可。

第三十二步

再次强化细节。给页脚的导航区顶端加一条白色边，这样有比较好的边框效果。

第三十三步

给页脚增加内容，你可以依据网格合理安置它们。

第三十四步

然后就是把页脚相关的图层整合起来。

最终设计

做到这里，我们的设计就完成了。（这里做的设计作者改了一下之后放在ThemeForest.net上卖了）

最后总结

我希望你喜欢本教程并且从中或多或少学到点知识。现在是你创作的时候了。记住，只要你注重于细节，你就会创造出漂亮的网页设计，尽管你photoshop只会那么两三个工具。现在你有设计的冲动没？

转载自：蓝色理想

有效的行动召唤按钮的最佳实践

设计行动召唤按钮到网站界面需要一些远见和计划；它必须是你的原型和信息结构流程的一部分以使他们能够正常工作。在本节中，我们将讨论行动召唤按钮的设计技术。

用大小吸引用户注意

在网页中，一个元素相对于其周围元素的大小表明其重要性：元素越大，它就越重要。判断网站的某种行为有多么至关重要，行动召唤按钮的型号也应相应的调整。

行动召唤按钮与周边元素

Lifetree Creative展示大小的主意以表明他们的行动召唤按钮的重要性。将按钮的大小与公司的logo对比。为了吸引用户的注意，这个行动召唤按钮在宽度方面比logo大了大约20%。尽管logo在页面中放的比较高，你的眼睛还是被吸引到了行动召唤按钮，因为它相对于周边元素比较大。

行动召唤按钮与不太重要的行动召唤的大小

一个网页可能有多个行动召唤。为了区分一个行动召唤与其它行动的相关重要性，你可以改变他们的大小。这里在 paramore|redd 网站有一个使用这个理念的实例，那个页面的让用户注册以获取邮件通知的行动召唤按钮明显的比继续阅读性东召唤按钮大一些，表明在该网页中，与继续阅读日志相比他们更希望你采取订阅

使用突出的位置吸引用户注意

页面中的行动召唤按钮的位置是吸引访问者的注意的关键。放置在突出的位置，比如页面的章节的头部可以带来较高的页面转换因为用户将很可能注意到行动召唤按钮并采取行动。

放置在明显的区域、

将一个行动召唤按钮放置在一个明显的区域是一个让它在页面布局中突出的一个方法。你可以在 dailymile 看到这个概念，行动召唤按钮看起来在一个比其它元素比如图形条高的层面上(在顶部)。

放到页面的头部

为了阐述这个概念，看一下位于 Your Web Job 页面最右上角的”Post a Job!”行动召唤按钮。通过将行动召唤按钮放到一个非常醒目的区域，这样好像用户会注意到它或者稍后记住它，在他们看过网站的内容之后。比如一个职位发布者想要在他们发布职位之前浏览一下网站，”Post a Job!”按钮将随时为他们准备好，无论哪个页面引导他们跳转，他们会更可能记得他们可以很容易的执行这个行动的地方，因为它的位置足够显眼。

放在布局的中间

将一个行动召唤按钮定位到页面布局的中间——而不是两侧(或明显比较小或者不重要)的位置——可以是一个很有效的吸引注意和诱导一个行动的方法。在例子PicsEngine 中，尽管这个行动召唤按钮没有使用与其背景色和页面中周边元素高对比的色彩，它依然能够因为其居中的位置而很容易引起注意。

使用空白来从其他页面元素中区分行动召唤按钮

行动召唤按钮周围的空白（或者无效空间）的使用是一个让它在有很多元素的区域中突出的很有效的方法。

用于区分行动召唤按钮的空白

IconDock 展示如何有效的利用空白。即便使用一个很小而且简单设计的行动召唤按钮，它依然很突出，因为在它和邻近元素之间的空间。

改变空白的数量以表明逻辑关系

行动召唤按钮与其周边的元素之间的空白越多，他们的联系越少。因此，如果你有其它元素能够有助于说服用户采取行动，减少那些元素之间的空白和间隔。

例如，Donor Tools 在他们的”Sign Up”行动召唤按钮上面有些文字，它们告诉用户注册的好处。在它的右边是一个浏览器截图只是用于美化的，而且对激励用户点击”Sign Up”行动召唤按钮不是必须的。通过减少文字和行动召唤按钮之间的空白，你将这两个元素可视的组织到了一起。浏览器截图和一个图片保证用户的实现不会从行动召唤按钮上面转移走。

使用高对比度的颜色

决定在行动召唤按钮上使用哪个颜色很重要。在你的行动召唤按钮上使用一个相对于周边元素和背景色对比度高的色彩，因为这是让用户注意到你的行动召唤按钮的关键。

与周边元素形成对比的颜色

Notepod 例证在一个行动召唤按钮和它周边元素的色彩反差是如何能够有效的吸引用户的注意的。周围元素都是黑色的，而这个行动召唤按钮却是浅蓝色。

背景/前景色彩反差

Valley Creek Church 设置它的浅黄色”Learn More”召唤按钮到一个灰度图片上面。就算使用一个简单的行动召唤按钮设计在一个复杂元素的上面(此处是一个图片)，它依然因为色彩选择而醒目。

提供次要的替代行动

一个页面可以有多个行动召唤按钮。有时候有必要提供一个次要行动以便于说服用户稍后访问你希望的主要的行动召唤。比如，在用户注册一些网络服务之前，一些用户需要了解更多的信息才去执行注册的行为；次要行为可以请求他们体验一次产品之旅或者访问展示产品的更多信息的页面。

在主要行动旁边显示次要行动

OfficeVP 显示两个挨着的行动召唤按钮——居中并放在页面头部。通过区分颜色，用户可以看到他们有两条不同的路：他们可以直接注册(主要行动)，或者如果他们在注册前希望了解更多，他们可以选择第二个行为，体验一下先。

Transmissions 也展示了在期望的重要行动旁边放一个次要行动按钮的概念。这样的话，主要行动就是让用户购买该应用。如果他们想在购买前试用一下，那么第二期望的行动就是先下载该应用。注意主要行动通过做的比次要行动按钮更醒目来被标识出来，相对于背景色比次要行动按钮有更鲜明的对比色。这样，你就很有效的从左到右移动目光。。

另外，注意两个行动召唤按钮之间相对于该区域其它元素的缩少的空白的使用，有效的将按钮组织到了一起。

在主要行动召唤按钮下面显示次要行动按钮

另外，你可能想将次要按钮放到主要行动下面。如果你需要更好的区分你的行动召唤按钮的话，这可能就是有必要的了。Virb 展示了这个方案，”Join Now” 行动召唤按钮被放在次要行动“体验产品之旅”的上面。注意，次要行动按钮因为它的默认状态被用比较弱的色彩远远的从主要行动隔开了。

传递一种紧迫感

通过使用大胆的、肯定的和命令的词语表达这个行动可以改变用户的看法，用这种方法说服他们不应再等待才去采取行动，以及等待可能会造成某些惩罚或者错失良机。

tap tap tap 通过给一个行动召唤按钮添加紧迫性来证明了这个主意。”Buy Now”行动召唤按钮上面有“价格信息(Intro price)”的文字，巧妙的暗示用户行动拖延越久，将来在这个介绍的价格过期的时候可能要支付的更多的风险就越高。

通常，创造紧迫感可以有效的暗示用户去采取行动。使用单词比如”now”、”immediately”和”right now”可以传递这种紧迫感。看一看 Organizing for America (BarackObama.com) 呼吁网站访问者”DONATE NOW”的例子。如果只是简单的说”Donate”，紧迫感就会消失，用户也可能会更少的去采取行动。

告诉用户采取行动是很容易的

通常，用户迟疑采取行动是源于考虑一个姓对可能会比较困难、昂贵或者费时。通过照顾这些担心，你的行动召唤按钮能带来更多的转换(点击)。

你如，在 Basecamp 上，行动召唤按钮明确显示用户注册将会花费的时间以及注册是不花钱的(free)。 这种做法消除了用户将要在线采取行动是的两个主要顾虑：费用(这也会要求他们采取格外的操作比如拿出他们的信用卡) 和时间限制。

在 Tea Round App 的例子中，他们告诉用户注册他们的邮件服务将不会受到垃圾邮件，这是无论何时将你的Email提供给第三方服务时担心的一个事情。

告诉用户期待什么

大部分网站用户犹豫于相信在网页上呈现的表面价值。根据经验，他们的信任已经被烧光了——声称免费服务的链接，却不得不输入他们的信用卡号码才能得到他们想要的服务。为了增加点击转换率和重建信任，预期用户的怀疑并告诉他们通过采取你为他们准备的行动将会得到什么。当设计一个行动召唤按钮，考虑到用户可能会有的所有潜在的问题，然后确定你可以及时的回答他们。

Mozilla Firefox 告诉用户通过点击他们的行动召唤按钮的详细的预期。这个行动召唤按钮告诉你你将会得到Firefox 3.5，它是免费的，以及(对那些更多的特性)它的确切的版本是3.5.3 forWindows 操作系统，语言是English，然后你可以预期一个7.7MB 的下载。

Onehub 预料到用户是否(在采取行动上)需要先支付或者他们是否能够用一下产品作一下测试的问题，告诉用户如果他们采取注册的行为，他们将获得30天的免费试用。

行动召唤按钮设计展示

现在我们已经讲了一些设计行动召唤按钮的最佳实践，让我们看一些网页上的行动召唤按钮的典型实现。我们将配合这些设计和上面的技术和最佳实践，并浏览他们如何帮助实现这些良好的设计。

Campaign Monitor

这套行动召唤按钮显示两个潜在的用户行为：”Try it for free”和”View features”。对于已经了解Campaign Monitor 和想要现在尝试的用户来说，他们可以执行首要期望的行动，而其它的想要在作出时间承诺之前浏览一下可以选择查看该网络应用的更多特性的次要行动。

Fileshare HQ

这个行动召唤按钮告诉用户预期的事情(”开始在片刻间分享文件(start sharing files in minutes)”).

Livestream.com

这组行动召唤按钮使用垂直排列分组以表示展示给用户的这些行动的期待的重要性顺序。主要期望的行动是获取一次评估，接着是了解服务的详情，最后是对比不同方案之间的差别。

Traffik CMS

这个行动召唤按钮被放在一个非常醒目的位置，在页面的最顶部，并用型号和色彩从周边相关元素中高亮了出来。

Hambo Design

这个行动召唤按钮告诉用户预期的事情：通过获得报价，没有附加的东西。它预料到了”如果我要花费时间进行这个流程的话一份报价将花费我多少?”的问题。(该网站已经被改版——译者，神飞。)

The Resumator

你可以在这个行动召唤按钮上看到很多最佳实践。首先，它使用了空白、大小和颜色来清晰的将自己和页面其它元素区分开来。然后，为了创造逻辑的分组以说服用户采取行动，它在按钮上面的推荐文字上使用较少的空白，然后将次要行动”Take a tour first”放到它的下面。

Wufoo

Wufoo提供了两个行动，用户可以看到一个水平排列的样式，主要期待行动是左边的那个。这些按钮很大而且很难错过，尽管看网站的全局设计的时候它们并不是很显眼。

Mobile Web Design

这个行动召唤按钮被放在一个醒目的位置；它有较大的型号和一个独特的颜色——尊重了周边的元素。为了“Purchas the book”上提供附加的上下文，这个行动召唤按钮下面防止了一些文字注释的价格和可用的格式(传统图书或者PDF)。

NCover

这些行动召唤按钮很整齐。主要行动在蓝色的次要行动的上面。用户被吸引到这个按钮是因为大小，而且对次要期望行动使用蓝色调可以减弱它对相对于主要期望的行动。注意空白的使用以创建三个相关元素的逻辑分组有助于实现销售：文字告诉用户Ncover是干什么的，注册行动召唤按钮，以及体验行动召唤按钮。相比之下，注意此组和右边的元素之间的空白变化。

Xero

本组行动召唤按钮展示听过一个次要行动的用法。在主要期待行动的右边，有一个文字链接请求用户“了解更多(find out more)”，对于不想立马注册的用户来说，这个设计增加了用户会在注册之前“了解更多”的可能性。

Tao Effect – Espionage

这是一组行动召唤按钮，为用户提供三个选择：Download、Buy Now或者Upgrade。这样的话，主要期待行动就是下载这个应用，紧跟着两个同样的行动“Buy Now”和“upgrade”。区别是在行动召唤按钮上使用不同哦你高的颜色，主要行动比两个次要行动的颜色更醒目。

The Invoice Machine

这里你可以看到两个使用蓝色边框高亮的行动召唤按钮，因为它们使用了同样的风格，我们可以假定它们有相同的重要性。或许该公司确定用户在看到他们提供的东西之前不太可能选择注册的行为，也或者他们确信产品之旅将更有效的帮他们将访问者转换为会员。

Ekklesia 360

这套行动召唤按钮展示使用图标来指示向前的感觉(用指向右边的箭头表示)。他们使用了一个相对于黑蓝色背景的高对比的色彩以使行动召唤按钮从页面设计中突出出来。

Checkout

通过使用一个相对于全局设计的非常突出的颜色到他们的行动召唤按钮，尽管在它上面的图片明显比按钮的型号还要大，它依然能够吸引用户的注意。

spinen

使用直接而清晰的语言告诉用户当他们采取行动后预期的事情：这样的话，点击这个行动召唤按钮将让他们找到产品的更多信息。

Codebase

这个行动召唤按钮告诉用户，通过执行这个行动他们能得到什么：免费15天的试用。它通过使用高对比色彩、在左边的一个图标以及大量的空白来吸引用户的注意。

GoodBarry

在这个行动召唤按钮中，你可以看到空白、型号以及聪明的色彩选择是如何有效的让一个行动召唤按钮变得非常醒目。强调这个行动是免费的”FREE”能够暗示用户他们的预期。

Wake Interactive

这里，这个行动召唤按钮相对于其周边元素的色彩令它突出出来，尽管它的周围的空白比较小。

OH! Media

这个行动召唤按钮真的从页面中脱颖而出了——因为它的位置、周围的空白以及——最重要的——颜色的选择。看一下这个页面，目光被直接吸引到这个行动召唤按钮上了。

Pixelcrayons

看看空白能够如何很棒的提升行动召唤按钮吸引注意的效果。

Ballpark

这个行动召唤按钮的型号有效的吸引了用户的注意。它的清晰而直接的语言明确地告诉用户执行行动之后的预期结果。

One Theme Per Month

这个行动召唤按钮组将主要希望行动放到替代行动的中间。通过为主要期望行动添加一个非常醒目的颜色，以及一个较大的空间，它试图将它的重要性放到次要行动的上面。

Scrapblog

你可以看到使用相对于周边元素的鲜明的色彩、足够的空间、以及型号的一些用户注意的效果。简单的语言传递一种很容易的感觉，生存你可以通过点击立马“开始(start)”。

13 Creative

这个行动召唤按钮显示如何通过使用一个非传统的设计，你依然可以在周围元素比较大的情况下吸引用户的注意。

Kalculator

这个行动召唤按钮明确的高速用户：通过点击这个行动召唤按钮，他们可以只付$3.99。使用单词”only”提示这是个相当不错的交易，这显然有利于销售。

Web Design Beach

下面是一组使用两种不同颜色的行动召唤按钮。更醒目的那个，”get a quote” 暗示它就是主要期待行动。

The Highland Fling

该行动召唤按钮设法通过大量的空白、显眼的位置和使用一个图标以使自己显眼以吸引注意力。通过使用单词”now”，它传递了一种紧迫感和立马行动的需求。

Commercial IQ

这个行动召唤按钮的型号和项目位置吸引了用户的注意。放大镜图标给行动添加了语境。添加“Free for search”文字消除了用户关于行动的费用的顾虑。

dashboard

这里，你可以看到使用高对比色彩的以使行动召唤按钮脱颖而出的做法，尽管是在明显较大的页面元素中间。

行动召唤按钮的附加资源

如果你想了解更多的关于行动召唤按钮的信息，这里是一些其它网站上的相关资源和文章：

如何在Photoshop中制作一个光滑而简洁的按钮

这个教程是在Six Revision，由我(Jacob Gube)编写，将一步步向你展示如何制作大号的和能引起注意的行动召唤按钮。

网页设计中的灵感按钮

如果你需要一些优秀按钮设计的灵感，看一下这个Pattern Tap的收集吧。

有效的行动召唤按钮的10种技术

Paul Boag讨论一些关于制作良好的行动召唤按钮的技术

良好的行动召唤按钮

UX Booth关于“好的行动召唤按钮的组成”方面有一篇好文章

Firefox展示一个强大的行动召唤按钮是如何提升入口页面的性能的

阅读一下一个好的行动召唤按钮如何提高转换。你将发现一个Firefox、Opera和IE使用的行动召唤按钮之间的对比。

网站设计趋势：行动召唤按钮(中文翻译)

Lee Munroe将一系列的行动召唤按钮放到一起，并附加了一个在当前设计趋势方面的讨论。

转载自：蓝色理想

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

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

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

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

双重目标明确

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

产品搜索和在线采购

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

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

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

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

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

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

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

内容适合当前用户

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

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

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

相关产品显示

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

基于先前行为的推荐产品

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

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

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

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

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

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

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

与市场零售价对比

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

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

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

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

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

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

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

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

逼真的图书预览

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

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

“查找内部”功能

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

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

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

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

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

“内搜索”功能

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

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

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

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

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

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

可定制的历史和推荐

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

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

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

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

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

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

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

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

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

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

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

方便的导航元素

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

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

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

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

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

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

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

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

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

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

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

购物者应始终感觉舒适

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

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

易于筛选和用户评价比较

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

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

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

额外的购物车选项

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

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

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

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

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

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

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

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

为了确保用户知道这不是“最后”一步，放在下方的“继续”按钮是一个有益的提醒，提醒他们把最终的订单放在最后汇总页面确认。
电子商务开发人员可以通过学习亚马逊移情用户体验的例子，理解用户各项关注和忧虑，包括一个用户每个阶段可能的购物体验。

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

结论

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

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

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

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

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

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

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

文章转自 http://alite.aliued.cn

Tag，直译标签，是一种由用户自定义的、用于描述信息 [1]的关键词。Tagging是用户为信息赋予Tag的行为。Delicious，Flikr等Web2.0网站的发展促进了它的流行，使之成为社会化书签、相册服务、博客等网站的常见功能。但Tagging对用户来说是一种脑力负担不轻的行为：要将信息分类尚属不易，勿论描述信息。对一条信息而言，应该Tag类目还是属性？范畴应该更宽还是更窄？Tag越多越好、还是控制在一定数量内？尤其困难的是，由于并非事前规划，无法很好预计被Tag内容的发展，入门、维护并不轻松。但从目前网络发展形势而言——个人自生成内容（博文、图片、视频等）迅速增加，各类信息海量涌来——Tag可谓信息管理的强大利器。此文以文献整理回顾的方式，分别论述：1. Tagging的利与弊；2.Tagging系统及其UI设计

1. Tagging的利与弊

1-1. Tag与Tagging

Tag作为元数据(metadata)：元数据是所谓描述数据/信息的数据，Tag则是一种用户自创的元数据，特点是无层次结构、自定义。

Tagging构成分众分类法(folksonomy)：分众分类法，指大众自发利用Tag对信息进行描述、分类，构成与信息架构中传统分类法(taxonomy)相对的信息组织。二者的区别见下表1：

表1：taxonomy VS. Folksonomy

1-2. Tagging的利

结合表1的对比，可归纳出Tagging的以下好处：

使信息组织更经济、高效、灵活。

如《未来是湿的》作者所言，“只有所有人能把所有信息都分类”。当信息越多，传统分类法的劣势越明显——开发、维护成本只升不降；基于Tagging、运用群众力量的分众分类法则相反。尤其当前的趋势是个人自生成信息越来越多，系统的分类、描述能力和效率可说远不如内容创造者本身。

对信息的索引、描述更丰富。

（1）Tag固然不如传统分类法中的控制词表(thesaurus)那么严谨标准，但由于信息可被无穷多人赋予无穷多Tag，故茫茫网海中只要有一个人跟你想到的描述一样，搜索就更有机会有所获。而要恰好用上专家词表内的专业化语词，难度可能更高。对于图像、视频、音频此类系统标注成本极高、效率极低的信息而言，Tagging的价值会更明显。

（2）用于描述某信息的所有Tag往往是公开共享的，其分布往往呈图1所示长尾状收敛（Shirky, C. 2005）。各Tag及其频率，既可反映大众对于该信息本质广泛一致的定义，又不至于让小众意见(minority opinion)完全被淹没。

图1：两条deli.cio.us书签的Tag频率分布

更人性化的信息检索。

上述两利，最终优化的是搜索：由于对一组系统信息（如个人的博文、Flikr的所有相片、Youtube的所有video）的接入点更多了，用户在信息海洋中找到与之需求匹配的信息的机会也更高。即利用大众的智慧，使搜索在机器化的基础上，更语义化、人性化、社会化。

以上三点是Tagging社会性优势。Golder et al（2006）提出Tag大致在描述信息的7方面：它关于什么（主题、分类、属性等），它是什么（标题、类型等），谁拥有它（作者、协作者），修饰Tag的Tag，它的品质（有趣、雷人等），自我参考（我买过的、我的书等），任务管理（待读、找工作等）。该分类并非绝对，但从后三种可看出Tag在标引信息时的一大特点在于自我性。这带来的好处有：

辅助个人信息管理。对个人信息管理而言，Tag可以发挥更大的作用。因其高度自定义性，使信息可被个性化地描述，使个人使用情景(context)成为信息描述的一部分。“很喜欢”、“我想要”、“妈妈生日”这类Tag，是系统较难为用户索引的。

身份识别。如从某博客的标签云/列表，能看出博主的兴趣、甚至职业等个人信息。

图2：某博客的Tag云

Marlow et al （2006）与Ames & Naaman（2007）曾探讨用户Tagging的动机（表2），表现出社会性与自我性的结合。

表2：Tagging的动机

这又带来另一种优势：社会化网络的构建。Tag聚物（信息），亦聚人。一方面，它昭示一个人的兴趣爱好，从而帮助个体寻找同好。另一方面，它能聚合兴趣团体。例如Flikr上一个语法错误、表意模糊的Tag，sometaithurts（so meta it hurts，如此“元级别”，如此痛），却聚集了来自各色用户的各色相片。给照片Tag上sometaithurts的个体，由Tag聚集在一起，彼此间因此有了进一步社交化的机会，并将为这个Tag聚集更多的物。

1-3. Tagging的弊

Tagging最为人所诟病的特性有：缺乏一致性、歧义、语法错误。这是由于与专家相比：

• 大众是“懒惰”的：Tagging可能停留在粗浅的表层，而不做深入思考或精准描述。尤其当Tag与系统固有分类维度重合的时候，就会失去价值。例如为豆瓣上的电影打上“电影”这个Tag的意义是零。
• 大众是“虚伪”的：有人会为了让自己出现在搜索结果更前面等目的而乱Tag；
• 大众很“笨”：
  拼写问题。除了拼错字词，英文里词组的分隔、大小写、单复数等就会造成大量混乱的Tag；
  没记性。表现为个人在同一系统中使用不一致的Tag（如字面相异，意义相同等）来标注同一或相似内容。

这导致大量污染性的垃圾Tag，即所谓搜索结果中的噪音出现，从而降低检索效率。但这并非Tagging的致命伤，通过设计的引导是可以改善这些问题的。第三部分将展开讨论。

2.Tagging系统，及其UI交互设计

2-1. Tagging系统

网站在添加Tagging功能前，需要考虑若干维度，才能让Tag对网站的信息管理、检索发挥真正的作用，否则只是潮而不实的装饰。

Marlow et al （2006）提出一个Tagging系统模型，包括资源、Tag、用户三部分，它们的关系如图3。

图3：Tagging系统包括资源（信息）、Tag、用户三部分

笔者认为该系统忽略了另一部分：传统的系统分类。并不应该丢弃或将专家的智慧斥之于外，就如亚马逊既有商品的树状分类，以有用户提供的Tag。

与模型一并提出的是该系统应考虑的7个维度（表3）。

表3：Tagging系统的维度及设计启示

笔者以为，还需补充的一个维度是，Tagging清理。 对于系统而言，是任由Tag无限泛滥不做任何事情？还是结合传统的机器索引、专家人工干预，适当过滤、聚合，以实现收敛？Gruber (2006)提出通过Tag内在的规范名（Canonical Name）对字面各异、实质相同的Tag进行清理。如通过算法将User Experience, UX, user_experience在系统内部统一为规范名User Experience。无论用户输入的是哪个形式的Tag，系统都将返回所有的结果。

Tagging支持维度还需要虑的一个问题是：系统是否该教育、引导用户打某些维度的Tag？上文提及，当Tag与系统固有分类维度重合的时候，就会失去价值、没有发挥其作用。

不考虑这两点的话，随着Tag几何级数增长时，噪音也会越来越多。对于系统、对于面对这么多“原始”Tag的用户，都很糟糕。

2-2. Tagging系统的UI设计

UI作为Tagging系统与用户的交互层，肩负适当引导用户Tagging行为的重任，是决定Tag质量的关键。

添加Tag：

要引导用户创造更优质的Tag，输入时刻的辅助至为重要。

（1）提供参考。

如罗列个人常用Tag，他人常用高频Tag，可有效减少拼写相异语义重复的Tag，提高Tag之间关联性，并可减轻用户思考负担。

在Delicious上收藏URL时，每输入一个Tag都有Tag池中同首字母的罗列。下方列有个人常用Tag，且优先放置与该资源可能相关的Tag。并有他人常用Tag的罗列。

图4：在delicious上收藏一条URL

（2）批量添加。对于所Tag资源是用户自发贡献时（典型如相片），批量添加Tag的功能能提高效率以及减少二义性。

图5：在Flikr上传时

编辑Tag：

目前常见的编辑操作包括：

（1）删除。

（2）重命名。除了基础的重命名，此功能可延伸为Tag的合并与分拆。合并指，若改为与现有另一Tag重名的Tag，自动将二者下的信息合并。分拆指，将当前Tag进行概念细化成新的若干概念。

图6：在Delicious重命名一个Tag

（3）Tag Tag.较为高级的操作，包括用一个Tag 囊括若干Tag（Tag bundle），对Tag增加描述等。

浏览Tag

目前Tag的展现方式主要有列表与云图两种。列表无重点，云图则降低了较小字号Tag被发现的效率。但无论采取哪种视图，由于标签的增长性较强，数量的增 加相应提高寻找成本。从算法的角度，可考虑Montero et al(2006)所提出的语义聚类：根据不同Tags同现的频率将其聚合、相邻放置。从交互的角度，应提供一种或以上排序（按字母、热度）。

图7：Delicious的Tag云页面

总结：

Tag以及Tagging的社会性、自我性，能帮助实现个人化、社会化、情景化搜索，但前提是：

有更成熟的Tagging系统构建。底层技术上，目前对于垃圾Tag的收敛、清理，做得不够，也尚未良好地结合传统分类与大众分类。UI上，尚未实现有效引导用户去Tag系统已有维度之外、更具附加值的维度。如在豆瓣上打“友情”这个Tag是有价值的，但打“电影”就无甚价值了。）

对大部分人来讲，Tagging的门槛——无论是操作上还是脑力负荷上——仍然较高。如果结合SNS著名设计师Joshua Porter的使用周期论以及产品接纳三阶段来看， 一个Tagger的发展可用下图来表示：

图8：Tagger的进阶

目前大部分人仍处于第一阶段之外，但也许随着Tag的好处被更好地表现，Tagging的易用程度增加，更多的人会进入这个周期。当系统完善了，人更能轻松发挥力量去补足系统了，语义网的实现就将更有可能。

参考文献

• Ames, M., and Naaman, M. (2007). Why We Tag: Motivations for Annotation in Mobile and Online Media. Proceedings of the SIGCHI conference on Human factors in computing systems
• Golder, S., and Huberman, B. (2006). Usage patterns of collaborative Tagging systems. Journal of Information Science, 32(2), 198-208.
• Gruber, T. (2005). Ontology of folksonomy: A mash-up of apples and oranges. 1st On-Line Conference on Metadata and Semantics Research (MTSR ‘05).
• Marlow, C., Naaman, M., Boyd, D., and Davis, M. (2006). HT06, Tagging Paper, Taxonomy, Flickr, Academic Article, ToRead. Proceedings of Hypertext 2006, New York: ACM Press,2006
• Mathes, A. (2004). Folksonomies — Cooperative classification and communication through shared metadata,” Computer–Mediated Communication, LIS5900CMC (Doctoral seminar),
• Montero, Y. & Solana, V. (2006). Improving Tag-clouds as visual information retrieval interfaces. In Proceedings of the International Conference on Multidisciplinary Information Sciences & Technologies.
• Porter, J. Designing for the Social Web: The Usage Lifecycle.
• Shirky, C. Ontology is Overrated: Categories, Links, and Tags.
• Wichowski, A. Survival of the fittest Tag: Folksonomies, findability, and the evolution of information organization
• Wikipedia, http://en.wikipedia.org/wiki/Tag_(metadata); http://en.wikipedia.org/wiki/folksonomy

[1]本文中信息是指图像、视频、音频等资源，非仅指文字信息。