网页设计教程,按钮的风格标准


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

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

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

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

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

如图(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行业网站,本报告认为这个设计是失败的。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

-end-