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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

标签： B2B行业网站设计 B2B行业网站按钮 用户体验 

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。