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

按标准设计B2B行业网站按钮促进用户互动我曾经讲过，设计师的分析能力远远大于设计技术本身，那分析什么呢?本研究报告认为，用户行为分析是设计师最应该精通的。对于按钮，无论是真按钮，还是伪按钮(伪按钮是：仅表示这个链接与数据提交相关，或者就是为了突出链接，用按钮表示，叫“伪按钮”)，之所以要以按钮的形式表示，最大的目的还是希望让用户知道点这个按钮时可以提交数据，是可以和网站交互的，或者点了以后就可以出现与网站或用户交互的页面出现，那么评价设计成败的标准就变成了：有需求的用户是不是注意到、愿意去点这个按钮，而不是这个按钮本身多么漂亮。用户会想，我为什么要点这个按钮，这个按钮很重要吗?因为中国人做事，都是受利益驱动，任何时候，设计师都要关注用户的利益。本小节将从按钮的颜色、按钮的大小、按钮的形状、按钮上及旁边的文字、放置的位置5个方面来说明我们设计、使用按钮的一般标准。1使用高对比度、醒目的颜色来突出按钮的重要性按钮使用高对比度的颜色和醒目的颜色，都是为了突出按钮的重要性，两者很多时候是同时使用的。在大部分的时候，我们使用按钮，都是要突出其重要性，只有少数时候可以不突出其重要性，比如作为次要的按钮，故意而为之，如图(13)所示。图(13)中国制造网搜索按钮采用对比度高的醒目黄色按钮(截图：2011-2-9)如图(13)右边所示，有两个按钮，右边一个按钮的颜色和背景颜色基本相同，左边的按钮背景颜色为黄色，与四周的颜色完全不一样，字体颜色也不一样，并且字体是加粗的。这就表明左边的按钮很重要，而且还比同为按钮的右边按钮更重要，点击后实际也是如此。2使用比较大的按钮来突出按钮的重要性在一个网页中，一个元素相对于其周围元素的大小表明其重要性：元素越大，它就越重要，无论是文字还是按钮，都是同样的道理，因为他更醒目，而这个重要性，是需要根据页面想表达的重点来确定的。图(14)阿里巴巴中国站“服装栏目”搜索按钮很大(截图：2011-2-9)如图(14)为阿里巴巴中国站“服装栏目”搜索按钮，从图可以看出，搜索按钮非常大，与一般的门户网站的搜索框都要大。是因为阿里巴巴做了10多年了，有海量的信息，且属于综合B2B网站，JJ斗地主官网下载youxi.gdwj.gov.cn任何一个用户来到网站后，仅靠直接浏览或分类浏览，找到自己需要的信息需要时间，而且比较困难。所以搜索变的非常重要，作为网站运营方，也希望采购商通过搜索来获得信息，才能体现出网站应有的价值。所以大家可以看到阿里巴巴的搜索按钮比一般的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)按钮周围的空白比较大这个小节讲到这里，就讲完了，虽然一个小按钮，但是也大有学问，需要管理层、产品经理、设计师在设计网站时认真去揣摩，只有注重产品细节，才能使用户有好的体验，才能打造出成功的产品。