研究了SNS研究了那么久，今天才悟出一点小小的奥秘。UGC（用户原创内容）转发机制，看起来就是一个小小的功能，很简单——不就是一个转载或者分享功能吗？其实不然。我个人感觉，正因为这个机制，我甚至大胆地把SNS分成两个时代（从SNS信息传播角度来看。个人看法，不代表权威）：目前的Twitter、新浪微博都是SNS2.0；而人人网、开心网很可惜仍是SNS1.0，我们淘江湖也属于SNS1.0。Facebook是一个例外，因为其有多年的基于真实关系网络的用户群体积累；第二是因为其手机端SNS优势；第三是因为其开放平台优势；第四也在不断吸取Twitter成功模式的优势之处；第五由于开放，事实上目前很大一部分Facebook用户一直用Twitter来更新其Facebook主页。所以其地位很难撼动。

Twitter作为SNS后起之秀，我们不能仅把它看做阉割版的SNS（因为Twitter没太多功能，唯独只有微博功能），一个小小的UGC转发和消息即时提醒的功能改变了它的命运。人人网学艺不精，仅学了一个UGC转发的皮毛，精髓的东西没学到位，如下图：

一、人人网也设计了UGC转发，不过只作信息的一级传播：即消息仅在一级用户关系间传递。

1.选择转发用户关系转发的消息，只能穿透一层用户关系：

2.转发后的效果（仅一级用户关系）：

3.被转发者，没有任何消息提醒！

二、Twitter和新浪微博设计的转发功能一致（暂以新浪微博为例解说）：可消息穿透至N级用户关系

1. 选择转发用户关系转发的消息，信息可穿透至无限级用户关系：

2. 被转发者，都会受到消息提醒！

也许我们会搞不懂，为什么有一个评论的设计及一个@提及的设计呢？

其实这就是Twitter和新浪微博设计巧妙之处，它们鼓励用户转发信息，随便也做下评论，即转发并评论功能。

三、举实例说明

如果看不懂，那举一个例子来看：

例如新浪微博A用户有10000个粉丝，他转发并评论一条被转发20次的消息，那他的消息传播路径则是：

A→1→2→3→4→5→6→7→8→9→10→11→12→13→14→15→16→17→18→19→20

这20个人都会收到A的评论及转发消息，同时A的10000粉丝也可通过A的Feeds信息看到这条信息。而这20人收到A的评论及转发，都有非常大的可能性，再次对该信息做转发及评论。而A的10000名粉丝也可能会对A的这条信息做转发和评论。这种方式彻底把SNS的人际关系网络信息传播力挖掘出来。所以在新浪微博上，一条信息一天内可轻易传播至数以千万级的用户（新浪微博很多名人的粉丝数超过百万，以100万来算，如果转发2000次，这些转发者如果平均粉丝数10万，则信息可传送至100万+2000*10万=20010万用户）。其SNS信息爆炸的力量，是相当恐怖的！！

例如人人网A用户有10000个粉丝，他转发并评论一条被转发20次的消息，那他的消息传播路径则是：

A→20

只有两层用户关系，所以人人网的转发设计，并没有挖掘到SNS真正的信息传播力！！

而这里的秘密，仅仅是一个“@”符号及被“@”则的消息告之设计！！

四、淘江湖目前的设计

我们目前也有设计“分享给朋友”功能，但是信息传递，同人人网一样，仍然是一级用户关系，所以这块应该要做一些改造：

五、总结

相信很多玩过新浪微博的同事会有感受：为什么新浪微博那么爽呢：信息交互得爽、信息穿透得爽。原因在于哪里呢？

原因其实就在于一个小小的转发消息设计及对应的消息穿透提醒，这会N倍加速Feeds及相关UGC信息的产生。这就是为什么在新浪上发一条信息，一会就会有N多给回复、N多个转发，很多人都得了微博强迫症，有事没事，要上去看下有没人回复和转发。

这个设计的好处：

1. 更多的UGC内容产生；
2. 更好交互体验，让用户获得成就感和满足感；
3. 更多用户关系链的组建，转发机制，非常利于关键链建立；

您可能还关注的？

• 分享：网站体验七武器
• 产品，请放下你高傲的身躯吧!
• 网页栅格系统研究（3）：粒度问题
• 用户体验的时间尺度
• 行动召唤按钮在网页中的实例与实践

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

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

您可能还关注的？

• 用户体验的时间尺度
• 行动召唤按钮在网页中的实例与实践
• 亚马逊购物用户体验分析
• 没有UGC转发，我们的SNS还存在1.0时代！
• 产品，请放下你高傲的身躯吧!

产品要放下高调的姿态，并不是笼统说放弃高端用户，只考虑低端用户。但我们的产品大部分用户都是低端用户，只有解决了绝大多数低端用户的需求，解决 了他们的操作成本、门框、帮助他们对产品的认知、以及，这样产品才可能在很大的一个群体里能得到广泛的使用。

当然高端用户的需求，从群体特性来说是小部分，但是他们比较理性、敢于尝鲜，对于新的事物容易接受。高端用户对产品的第一时间使用、反馈、传播，这 样才能在后面第二手时间被很多的低端用户所了解。

从线下城市的产品过程中，高端用户映射了一级城市，低端用户映射了二三级城市。很多新产品在大城市投入，形成最初的市场，最后通过媒介辐射到二三级 城市。这个过程中也有很多在一级市场的诸如：上班、打工、创业的人直接的把大城市的理念带到下面，最后低级用户的市场规模转变的实体规模越来越大。

二、可是，很多人都说我们产品；“显得很高调”

在目前的IT环境中，有很多很多的产品存在：不管是应用在金融机构的进销存、财务模块，报表结算模块，还是应用在交通航空的客票定售查询系统，还是 我们应该应用的IM、杀毒软件、手机套件，还是经常应用的去这个网站、那个网站看资讯、进行搜索、社区偷菜、上支付宝、网上购物。

尽管说有专门研究用户体验的人，有所谓的专家，但我们还是和用户走的很远。我曾经问过一些做厨师的人，为什么去QQ玩偷菜，为什么不去开心网；或者 是一些办公室文职人员，为什么所有的网站都要去百度搜一下，不把域名都记住；还有打开了网站我心里面觉得其很笨的会计同学，为什么一个很明显的网页还在那 边左找右找都看不到这么明显的链接。

后来我就对我们惯性思维所认识的高端用户、低端用户的定义和区分产生了怀疑。何为高端、何为低端，我们在做产品的时候把用户傻瓜式的切分就OK了 么？按理我念过经济，懂得些汇率，金融常识，但是我要去投资理财，去银行过户办手续，身份证丢了去挂失，我还是和50岁的大妈一样，进了大堂不知道该何 然？是我们笨吗？

三、但是，我们和用户跟的离的太远了—十万八千里

不是的，因为我们不了解。话说回来对于一个从事互联网的人来说，闭着眼睛都知道，注册、登录、找、上传、管理、删除都在哪里，换了一个网站再换了一 个网站还是了解，因为大相径庭嘛。还有一点我们也会把一些所谓我们认为重要的东西，诸如：名词解释、重要操作、关键路径做TIPS说明。但是那只是我们认 为的，没有这个经验的人你保证他们会理解你的设计思路么？

所以我明白了，当时认识的一个厨师朋友，他能做一手好菜，能带一帮厨子，足以说明他OK，那为什么不去开心网偷菜而去QQ偷菜呢，他很简单的说： “因为QQ啊，很方便，我打开电脑点开，就能点好像图标-聊天，点QZONE图标—偷菜抢车位，还可以点开玩游戏、听歌、看电影”。⊙﹏⊙b汗了一下，王 道居然是方便。所以hao123为什么多年一来还是这么多人用，那就是简单、方便好使，有了hao123就可以享受冲浪。

2009年北京的站长大会我也去了一遭，说实话有点恶心，随便站在哪里就能听到一大群创业的人三三两两在那边谈自己的项目优势，说做什么做什么，然 后把自己的项目价值投资分析书口头说起来，现在的市场怎么样，预期规模怎么样，能做到多少用户、多少流量、几年、投入大概是多少、风投是多少、上市周期大 概多长、甚至很专业的说市盈率会怎么样怎么样。听的多了突然发现很多人还是有点一厢情愿！

一些作为一个常人都能明白的东西，怎么可能被虚有的放大到如此。互联网市场大多数都是泡沫，偶尔几个企业成功了，那也是暂时的成功。那永远的成功是 什么？是必然满足实体需求可以搬到互联网，并且用户因为买单而享受了真正方便、优惠、好处的事，并且有市场规模。所以不是每一个人对你说的OK，都是OK 的。

四、用户其实很容易满足的，但也请不要把用户骂成是傻子。

当一天有一位做杀毒软件产品的朋友和我交流他们的设计的官网、UI如何炫，用户体验如何好时，我一点都不care。当时是有点给她洋溢的激情烧了点 冰块。后来我就跟他说：1、产品跟产品还是有区分的，别的东西都搞的炫你不炫，是不是会遭至用户的白眼和鄙视；2、产品的核心是什么？产品有很多种，注重 信息推送、工具操作、系统级功能守护……那杀毒软件用户关心的是什么？

于是我接着阐述我的观点：1、免费不免费，中国哪都是免费的，你免费么？ 2、到底好不好用？这个好用体现在：能不能在我用电脑的时候发现病毒、拦截、并且可以搞定病毒？现在很多杀毒要么因为病毒库、病毒标本少发现不了，要么发 现了杀不了还是硬生生的电脑被摧毁，还有很愚蠢的居然误杀，把系统文件搞丢了。所以我跟他说，用户很容易满足的，你只要告诉用户说：“用我们家的杀毒软 件、免费的、绝对安全的”那就完事了。

我也是用户这非我领域的产品可以把自己当成一个100% 200%的用户来陈述我的观点，我自己资源覆盖领域就不一样了，就已经做不到公平、理性、客观了，是不是很多产品经理一样，面对很多用户反馈的问题列表， 在骂用户蠢呢？用户其实不是傻子，只是你站在产品层面，你只是觉得用户的这个问题反馈的不够多，还不到你拿起手术刀的程度，要么对你目前的产出不是很大， 不过这一点建议产品的产出，看看到底用户最care的是什么？

五、产品啊，请放下你高傲的身躯吧！如何放下？

1、满足用户常有的抱怨，让用户提问题，肯定是分散的，你也不可能用你的需求收集来实现产品的创新，但是很重要的一点，可以多听听用户的抱怨是什 么。既然用户在很大程度上只会抱怨的群体，那就多听听抱怨吧。不过有一点这种解决抱怨是一种发生问题解决问题的事后行为，其实我们还可以稍微把事情再往前 推进推进。

2、满足用户迫切的愿望，很多人就像我们去银行办事、去其他机构办事，不是经常在这种场景去发生业务、发生行为，从对知识的无知、到流程的无知，开 始要想办成这件事，如果像招商银行一样的服务，有人耐心的接客、解释、办事，过程和感受还是很快乐的。但是网站产品和IM产品又不是对企业级的售卖产品， 我还得包给你培训保证教会您会使用为止，所以这部分用户的体现一定要非常的重视，当然用户肯定会因为不爽而有所想法，这时候的迫切的愿望就很能体现用户的 心声—超级要重视！

3、符合客观规律或实体映射。这一点是我认为的要点，现在网络上模拟的还是很多现实的实体环境，切忌不要太机器语言话，当然中间肯定是机器语言进行 翻译的，但最后的视觉、交互输出必须得把生动具体的现实场景还原。说的不好听一点，我现在还不是支付宝用户，因为支付宝不怎么会用，至于怎么不会用，我只 能说，：“我感觉不怎么会用，于是我就懒到了现在，到现在都怎么会用。“很多人说，钱你支付宝给我吧，我说还是现金吧，现金方便。

还有一些基本的规律大家都知道的：唯一品牌、品牌很重要的，人的对同一类事物的记忆有限，因为人们在这个社会化环境中不会信息太多了，所以不会客气 的去记忆什么；简单、方便、实用、常用、有用、好用——这一点还是停留在定量概念的层面，你要是问我，百度哪好用了，我也只能告诉你，“因为其它的产品更 不好用“。

4、不要把以用户导向为幌子，自我意淫，或为了自我满足、团队自我满足，搞一些很时髦的名词啥：云计算啊、框计算、TAG云、最好一些名词用于商业 层面的，就不要用来忽悠用户了，直接的描述自己能实现的强大功能反而更好。还有很多朋友容易犯一个毛病就是：喜欢做大产品、系统级牛逼产品，会有自我成就 感，那是如此强悍的一套逻辑啊！呵呵，自己YY一下就好了，如果你的产品被很多人用了，很多人都说你好，那才算是好。不是么？

转载于：http://www.kuliqiang.com/?p=1960

您可能还关注的？

• 没有UGC转发，我们的SNS还存在1.0时代！
• 分享：网站体验七武器
• 网页栅格系统研究（3）：粒度问题
• 用户体验的时间尺度
• 行动召唤按钮在网页中的实例与实践

研究（2）中讨论了栅格系统的基础知识。这一篇将集中探讨栅格系统的粒度问题。（注：如非特别指明，栅格系统均指24列960栅格系统）

淘宝的首页（截图）目前尚未严格遵守栅格系统，如果重构的话，宽度方向可以考虑采用下面的栅格布局（只考虑页面主体部分，忽略高度的比例）：

（图1）

纷乱的高度世界

我们来看下图1左上角。左上角部分目前的宽度为256px, 重构的话可以将宽度缩小到230px以符合栅格（不可避免的要调整内容，比如人气宝贝中将只能放下3张图片）。来仔细看下高度方向：

（图2）
高度方向的布局是：90 : 117 : 100, 第一个间隔是8, 总高度为325. 很明显，高度方向没有任何栅格化的迹象。实际上，

即便是严格遵守栅格系统的Yahoo!首页，高度方向上也没有严格栅格化。

这究竟是为何？

一切皆有可能

我们缩小关注点：

（图3）
上图中，图像的大小是70 x 70, 刚好是24列960栅格系统两列的宽度。对于右边的文字，采取了如下样式：

font-size: 12px;
line-height: 150%; /* 12 x 150% = 18px */

中文字体是宋体，line-height的计算值是18px. 注意图3中文字部分可视区域的高度为65, 上下各有4px和1px的间隙。为什么会产生这么奇怪的间隙呢？我们来看下图：

（图4）
从上图中我们可以得知，12px的宋体中文字，实际高度只有11px. line-height减去11多出来的高度，则“均匀”分布在上下间隙中（如果多出来的高度为偶数，则上下均分；为奇数时，上面比下面多1px）。这样，对于70px的高度来说，要布局4行文字时，假设行高多出来的上半部分为x, 下半部分为y, 在最理想的情况下，应该满足以下公式：

11 * 4 + 4 * x + 3 * y = 70
x = y 或 x = y + 1

不难推出，x最理想的整数解为4. 从而line-height为 4 + 11 + 3 = 18. 因此：

对于24列960栅格系统来说，如果要在高度方向上实现栅格，font-size为12px时，line-height的最佳取值是18px(150%).

追求完美点话，还可以将文字部分margin-top: -1px, 使得65上下的间隙为3和2.

至此，我们可以初步判断：

高度方向上是有可能严格栅格化的。一切皆有可能！

然而，现实总那么残酷

（图5）
上图中的标题高度为22, 这在24列960栅格系统中是无法对齐的。而且总高度为100, 在24列960栅格系统中也不存在（110才可以）。或许高度方向上我们可以细化行宽为20, 但依旧没法解决上面两个问题（22是明显不能解决的，而对于100px的高度，也无法通过细化行宽来解决。可选高度永远是10的奇数倍，如果进一步细化，小于10后，会变得非常繁琐，没什么实际应用价值）

宽度世界里会好些吗

（图6）
上面是Yahoo!首页上的两个小模块，我都不想去标注模块里面的布局宽度了（因为一点都不符合24列960栅格系统）。宽度世界里，和高度世界一样充满希望但现实却残酷无比。

银弹是不存在的

栅格系统是美好的。但如果我们一味地追求将所有设计都栅格化（必须承认我曾有这个幻想），则立刻会陷入地狱一般的黑暗中。这篇文章中的艰难尝试（我分析了20多个小模块），让我突然醒悟到一个粒度问题：任何设计都有适用范围，超出最佳适用范围，强行使用只会带来无尽的烦恼。对于栅格系统（这里指所有栅格系统，包括多种栅格系统混合使用的情景）来说，我觉得以下场景非常适合：

1. 页面的总体宽度布局，比如两栏、三栏等布局
2. 一些固定区块的尺寸，比如广告图片的尺寸
3. 区块之间的间距，可以参考栅格系统的槽宽（Gutter）
4. 一些可以栅格化的小区域，比如图3中的例子，暗合栅格往往能简化布局上的考虑

除了上面这些应用场景，强行使用栅格系统，往往会束手束脚，适得其反。这篇文章的目的，就是尝试用最啰嗦最费神貌似很科学实际很无聊的分析来指出栅格系统应用时的粒度问题。在粒度问题上达成一致后，下一篇中我们将讨论栅格系统的技术实现，最后一篇则讨论栅格系统的压轴好戏：模块化开发。

您可能还关注的？

• 垂直栅格与渐进式行距(下)
• 垂直栅格与渐进式行距(上)
• 网页栅格系统研究（2）：蛋糕的切法
• 网页栅格系统研究（4）：技术实现
• 网页栅格系统研究（1）：960的秘密

　　从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

转载自：ＣＤＣ新家

您可能还关注的？

• 行动召唤按钮在网页中的实例与实践
• 小标点，大作用
• 亚马逊购物用户体验分析
• 分享：网站体验七武器
• 关于网上购物付款流程设计的12个建议(译)

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

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

用大小吸引用户注意

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

行动召唤按钮与周边元素

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将一系列的行动召唤按钮放到一起，并附加了一个在当前设计趋势方面的讨论。

转载自：蓝色理想

您可能还关注的？

• 用户体验的时间尺度
• 垂直栅格与渐进式行距(下)
• 垂直栅格与渐进式行距(上)
• 网页栅格系统研究（3）：粒度问题
• 网页栅格系统研究（1）：960的秘密

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

自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

您可能还关注的？

• 用户体验的时间尺度
• 行动召唤按钮在网页中的实例与实践
• 分享：网站体验七武器
• 关于网上购物付款流程设计的12个建议(译)
• 小标点，大作用