动作,按钮,没你想的那么简单

1、注重细节设计：动作按钮，没你想的那么简单时间：2014-05-15 13:32 来源：财付通设计中心作者：redwang行动按钳的那么简里没你想Call to Action Buttons O动作按钮？不就是一个按钮加两文字么 ？这有什么好说的如果你还这么认为，那就大错特错了。 一个小小按钮，看似简单，里面却有大大的学问。F面是我总结的一点见解，希望抛砖引玉，给大家一点启示。按钮分为两个部分：按钮文字按钮形状先说说按钮文字的设计:1用文字创造出一种紧迫感这主要适用在购物，使用一种紧迫感的词语更可能让用户采取行动。在按钮上加“现 在”立即“ “马上”等文字，能大大提升按钮的转化率。这些文字能给用

2、户暗示和感知, 如果继续等待，很有可能错过这次大好的机会。不信？ 可以试一试。【虹】 MIESWIFI橡朋电耳.全球首歎証上 即电.国3弘遇樂芯.WlFt4 3G 4 +边上喝边克瘪切魇黄谊么曙太1 139.00SiGLIA 124mrn F4>DGII Mp HSM 侄理口【厂券年底制H它的出現又一次剧迅（0 ：| 5:99.004®rffl.¥55S9.OO暂无评论瞬58牛评ifc）很多购物都使用了这一招抛个小小问题给大家讨论一下：如果整个页面都是立即购买立即抢购 立即秒杀，那还真的会有作用吗前冷走QQ吕,河港22金片訥*审曲附r拆片-；!= 吊e巴巴 呵亍(h?

3、«& - (iijftii)口血片*対ffrlJJ立创代播?例如这个页面，此时立即两个字真的会对用户起到作用吗但不要滥用。只有在最核心个人观点：“立即”“马上”“限时”等词语是非常好, 的业务中用到，才能对转化率真正起到作用。如果满屏满屏都是立即立即，那让用户立即去哪呢2用动词开始一个按钮文字行动按钮一般要以一个动词开始，否则他就不是一个召唤行为的按钮。David Hamill行动按钮使用动词，会让用户产生马上去行动的心里暗示，同时动词也带有指向性性， 告诉下一步用户该做什么。这个理论看似简单，真正使用时却会经常出错。正面案例:A+400点实倉认SE安全育保障购物更放心60中

4、値伯用卡够睫MEW 绑走固享积分兑换机益"500点肮空机票航线丰富价格低廉十50点招行信用卡快推 首次开通多重祝益十1500点愛在一起，会员桐伴h-50-申请味单分期 招行账单归期垃稅咕+ 50点更多成长任等财付通会员，在任务介绍中，加了一个GO故为按钮的文案。使得加了 GO勺按钮比其他任务的点击量大很多，是其他任务点击量的三倍以上。不难看出一个小小文字的巨大魔力了 吧。反面案例:Er乌鲁木齐+西安v200 (M：斤 3兀T 0 汁这是我在做财付通旅行时，特价机票的一个介绍模块。按钮的文字写的是详情，详情不是动词，是一个名词。对用户来说详情没有任何的动作指向性，所以这无疑是一个失败的

5、例子。那么，改成什么会更加贴切一点呢？这是国外的一个买产品，它的按钮也不是千篇一律的BUY而是使用了四个不同的动词。"let ' go” get me started ”1 ' m all in ” bring it on ”。1 ExmA aanonlfi 知皿11Bl12Zbc"Ote a nKFilii¥ 2 boo li ad eA oekb50Or Mt晋*轉由aJt；r 戸静卅命 Esiy *DH3dh Aai 加*Ftihax&mi kt獰 nh iiiiFm'I irar Gf kiep vcu q肘ly ta Mi

6、df24 books all al onceS22鱼的AgHl dtliiNf|qi 'i-uu Ihafi's u kKRING IT OMIETIGOH'ir*g 20% I M-r trilwli Hi 1 boa 費drruauiK上面是对按钮文字的见解，接下来说说按钮的形状1使用适当的指示图形。一个按钮上的箭头启示，直观地告诉用户，单击该按钮将执行相应的操作， 带他们到另 一个页面以从事一项任务。很多按钮文字上无法描述的语言， 使用指示图形后，就非常直观 了。看起来有些不好理解，看个案例，你就明白了。这是我在做财付通机票时，订机票的一个详情页。叽斤F片'

7、;?!見4libC胪怙5河V J40 .4fr京舒刊iv*谊“甜皿元嚼mrtiiiffi：泊兀<><j.飞 norjjl 业Y 別0： rr.-i *¥ :卡”39斟忖轉占世特i财付通机票，选择航班后，会出现各个供货商的机票信息。但选择按钮上没有任何图形 指示，用户不知道点击完选择按钮后出现的选择框完全没有预期。预订按钮上也没有图形指示，不知道点完选择后，是跳到新页面还是如何。淘宝在选择和预订按钮加了一个向下和向右的箭头，指向性就明确多了。09:00孔宁口邸10： 55j韧西豆申忸上知轩 删讪|?1吩13:05jjnt*tUMU tf J ijSHS诚过汕辜总仃（不

8、舍初ft*1188*出專宜竹F9札$廿谊船* 1236*J.?札蚩舟删90<1943虬* ftMil +2按钮的大小与留白根据费茨定律，点击区域越大，点击目标所需的时间越短，用户的鼠标能轻松触达。所 以，如果按钮非常重要，我们可以加大他们大小。但按钮不是越大越好，一个小按钮，把它放大10%它的可用性会显著提升，但如果你将一个本来就很大的按钮再增加10%它和可用性之间就不成正比了。如果想突出按钮，可以将按钮周围留白多一点。MOP u-:勺去厂5畔I 匕士it未載百14斥締2漏畧:61766641607卫5!绘垒曲住检.臭环d卓理51. LVACTftttl1 什丽寸«Vr9 * 这个页面加入购物车按钮，周围包围了无数其他元素，所得加入购物车的按钮变得非常 不明显。这是一个反例，将按钮放得太小太挤，会直接导致用户购买的转换率下降。总结：现在大家恍然大悟吧， 行动按钮虽小，但在页面中起到了巨大的作用。这是用户在浏览完你的页面，最后采不采取行动最致命