按标准设计B2B行业网站按钮 促进用户互动

我曾经讲过，设计师的分析能力远远大于设计技术本身，那分析什么呢?本研究报告认为，用户行为分析是设计师最应该精通的。对于按钮，无论是真按钮，还是伪按钮(伪按钮是：仅表示这个链接与数据提交相关，或者就是为了突出链接，用按钮表示，叫“伪按钮”)，之所以要以按钮的形式表示，最大的目的还是希望让用户知道点这个按钮时可以提交数据，是可以和站群网站交互的，或者点了以后就可以出现与网站或用户交互的页面出现，那么评价设计成败的标准就变成了：有需求的用户是不是注意到、愿意去点这个按钮，而不是这个按钮本身多么漂亮。用户会想，我为什么要点这个按钮，这个按钮很重要吗?因为中国人做事，都是受利益驱动，任何时候，设计师都要关注用户的利益。

本小节将从按钮的颜色、按钮的大小、按钮的形状、按钮上及旁边的文字、放置的位置5个方面来说明我们设计、使用按钮的一般标准。

1 使用高对比度、醒目的颜色来突出按钮的重要性

按钮使用高对比度的颜色和醒目的颜色，都是为了突出按钮的重要性，两者很多时候是同时使用的。在大部分的时候，我们使用按钮，都是要突出其重要性，只有少数时候可以不突出其重要性，比如作为次要的按钮，故意而为之，如图(13)所示。

 

图(13) 中国制造网搜索按钮采用对比度高的醒目黄色按钮(截图：2011-2-9)

如图(13)右边所示，有两个按钮，右边一个按钮的颜色和背景颜色基本相同，左边的按钮背景颜色为黄色，与四周的颜色完全不一样，字体颜色也不一样，并且字体是加粗的。这就表明左边的按钮很重要，而且还比同为按钮的右边按钮更重要，点击后实际也是如此。

2 使用比较大的按钮来突出按钮的重要性

在一个网页中，一个元素相对于其周围元素的大小表明其重要性：元素越大，它就越重要，无论是文字还是按钮，都是同样的道理，因为他更醒目，而这个重要性，是需要根据页面想表达的重点来确定的。

 

图(14) 阿里巴巴中国站“服装栏目”搜索按钮很大(截图：2011-2-9)

如图(14)为阿里巴巴中国站“服装栏目”搜索按钮，从图可以看出，搜索按钮非常大，与一般的门户网站的搜索框都要大。是因为阿里巴巴做了10多年了，有海量的信息，且属于综合B2B网站，任何一个用户来到网站后，仅靠直接浏览或分类浏览，找到自己需要的信息需要时间，而且比较困难。所以搜索变的非常重要，作为网站运营方，也希望采购商通过搜索来获得信息，才能体现出网站应有的价值。所以大家可以看到阿里巴巴的搜索按钮比一般的B2B行业门户网站的搜索按钮更大，如果是刚开通的B2B细分行业网站，过分的突出搜索，就不对了，因为没有多少信息可以搜索，反而把网站的弱点暴露了。设计也是和网站所处的实际情况相关的。

 

图(15) 阿里巴巴中国站“产品页面”签订保障合同按钮(截图：2011-2-9)

从图(15)的按钮可以看出，这些优秀网站的产品经理都明白，在一个页面里要鼓动采购商采取行动，签订合同，立即询价，希望让供应商更多的获得采购商的信息，增加询盘，更多的达成采购。这些按钮都非常大、非常显眼，甚至从美观的角度说，都过了，太大了，但是从实用的角度说，就是要这样才能让这个按钮的价值最大化，所以《B2B行业门户网站设计开发实战研究报告》认为：设计师要从“打造一个产品”的高度来对待网页每个元素的设计，而不能仅从美观的角度出发，很多时候美观要为“实用”牺牲。

3 按钮的形状要规则、突出、严肃，不能卡通、娱乐化、太突出或太不突出

前面的章节讲过：“页面的框架更多的是方形的、规则的”，同样道理，网页按钮也应该是方形的、规则的，可以有一点圆角，但是圆角不能太大，太大就显得不够严肃、不够商业化。正如我在《B2B行业门户网站策划实战研究报告》里讲，B2B行业网站毕竟是面对20岁以上的已经工作的职业人士，工作应该是严肃的，不能娱乐化。

下面6个按钮是收集各个B2B综合网站和行业网站的登录注册按钮，从这里可以看出，B2B行业网站的按钮大部分都是长方形，并适当有一个小小的圆角。当两个按钮放一起的时候，我们要分辨出是主要行动还是次要行动，最后一个按钮是截取自阿里巴巴的，就做的比较好，用颜色区分了主要行动和次要行动。

 

图(16)各个B2B综合网站和行业网站的登录注册按钮

图(17)是在阿里巴巴(左边)和慧聪网(右边)截取的用户注册按钮，可以看到两个网站的设计师水平的不同，明显左边的阿里巴巴要显眼，比右边的好，右边太不突出，类似的设计很多网站都有，我认为都要修改。左边和右边其实都是直接用的系统按钮，都不是设计成图片的，不同的是，阿里巴巴的按钮增加了CSS样式，变的更好看、更显眼。从这个细节就可以看出，阿里巴巴的产品做的更好。

 

图(17)阿里巴巴和慧聪的注册提交按钮对比

图(18)的第1、第2个按钮，我认为第一个太圆，显的太不严肃，用在商业网站上不妥，第2个按钮太突出，放在页面上像一个补丁，按钮可以大点，但是不能往外突出太多。第三个登录按钮，太大了，纯粹为了使左右对齐而使用超大的按钮，这样会显得页面非常粗糙，这些案例都是选自B2B行业网站，本报告认为这个设计是失败的。

 

图(18)B2B行业网站设计的不符合规范的按钮

4 要通过按钮上及旁边的文字告诉用户的期待或解释疑问

我们设计按钮要从分析用户行为的角度来做设计，颜色很吸引眼球、也比较大，都是为了吸引用户更多的几率看到这个按钮，那看到以后的行为呢?用户仍然会想，我为什么要点这个按钮，点了对我有什么好处，或者说点了会不会产生什么坏处，或者可能对按钮上的字不理解，不熟悉而不想点，作为设计师，就要通过按钮上的文字来告诉用户，如果需要比较多的字或者说要加注释，就需要在按钮的上面、下面或右边，来引导用户继续采取下一步行动。当然对一些大家都很熟悉的按钮，比如：登录、提交等，就不必画蛇添足去做解释了。

如图(19)的第一个按钮上的文字为“免费注册”，是为了打消大家以为注册会收费，而不点击，从营销的角度来说，是打免费牌，吸引更多人提交自己的公司信息、联系方式，网站才有用户、内容，网站销售人员才能有更多潜在客户，这点我在《B2B行业门户网站推广实战秘籍》里做了详细阐述。第三个按钮上的“立即登录”是为了吸引是会员的赶快登录，因为只有登录后，用户才可能进行更多的操作，比如：发布信息、查看询价、更深入了解网站等，一个网站每天有多少个会员登录，与每天有多少会员注册一样，是作为运营的一个重要考核指标的。第三个按钮右边的文字，是为了解决用户可能遇到的问题，比如当我想点登录按钮的时候，我想起来了，密码忘记了，在按钮旁边就要出现密码找回的链接。同时可能还不是会员，这个时候就要提醒用户，你还可以免费注册。

 

图(19)按钮表达的意思及提示

图(20)有6个按钮，都是在告诉用户，会员可以做什么，如果你不是会员，别在犹豫了，赶快行动吧!就好比电视购物节目告诉您，购买这个产品有什么好处、很多优惠，现在立即拿起电话拨打某某号码一样。在这些鼓动的文字上，尽量少加或不加链接，省去用户点击链接来思考。

 

图(20)按钮告诉我们可以做什么

除了可以在按钮上加文字，还可以在按钮上加个图标，往往可以让按钮看起来更精致，而且小图标往往可以起到以形表意的效果。如图(21)第一排的4个按钮都加了小图标，和文字一起，让用户几乎不用思考，就知道按钮代表的含义，点击按钮后可以做什么。

按钮上的文字要简短、精炼，不要加很多不必要的文字在按钮上，会增加用户思考的时间，比如图(21)的第5个按钮，“点击进入”4个字完全是多余的。通常情况下：一个按钮，结合页面上的其他交互和信息组织，要能恰到好处的组合成一个完整的句子“我点击会发生什么”，而“点击进入”4个字是在我和鼠标之间的事，而不必要在网页上出现。最后一个按钮是大家常见的播放器的按钮，因为大家都很熟悉了，电视的遥控上也是这个按钮，所以用文字也是多余的了，直接用形状表示，简单明了。当然可以在鼠标放上去显示文字提示，用户体验更好，从这个角度上来说，也可能说是地方太小而不能用文字来表达。

 

图(21) 按钮上加了小图标，一目了然

5 按钮出现的位置、周围是否空白，与这个按钮的重要性相关

按钮放在那个位置，也是很有讲究的，放的位置不同，其重要性也是不一样的。同时周围留有空白，也表明这个网站按钮是很重要的。

如图(22)的2个按钮，上下左右都有许多空白，比如第1个、第2个按钮，离下面和上面都有很高距离，这个就是设计师故意而为之，因为如果按钮离上下的距离太近，就不够突出了。就会被淹没在文字中，适当的在周围留白，就是好的突出方式之一。

 

图(22) 按钮周围的空白比较大

这个小节讲到这里，就讲完了，虽然一个小按钮，但是也大有学问，需要管理层、产品经理、设计师在设计网站时认真去揣摩，只有注重产品细节，才能使用户有好的体验，才能打造出成功的产品。

本文原创作者：李学江，交流QQ：1580658565。