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


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

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

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

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


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

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


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

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

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


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

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

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

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


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

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

  本文原创作者:李学江,欢迎交流指导咨询。

时间: 2024-09-16 19:36:11

按标准设计B2B行业网站按钮 促进用户互动的相关文章

做好社区低成本推广B2B行业网站

中介交易 SEO诊断 淘宝客 云主机 技术大厅 本文节选自<B2B行业门户网站推广实战秘籍>第 3 章 4节,许多B2B行业门户网站对行业资讯.论坛.知道.博客.空间等社区等非常不重视,这对于网站的原创文章.用户的粘性.品牌知名度及影响力打造.搜索引擎对网站的评级都会有很大影响.尤其是新开通不久的B2B细分行业网站,如果搜索引擎推广没有做好,就会造成流量非常低,影响力不够,自然没有人肯掏钱给你.当然这个观点对许多大行业的B2B网站,可能并不能带来太好的效果,因为大行业的B2B网站,技术.行业知

如何做好B2B行业网站页面内容设计留住用户

对于B2B行业网站的页面设计,大家可能更多考虑页面用色.导航条.按钮.标题栏的设计,内容设计可能常常被大家忽略.但是如果内容设计的不好,可能会让你的所有设计被毁于一旦.比如如何让内容有主次之分.层次感,使内容看起来不会太乱.太多,使用户不愿意继续阅读下去,很快离开网站,不能留住用户继续访问. 在本研究报告前面章节我讲过,永远要记得用户在没有明确的阅读内容前是扫描而不是阅读,在导航页面,用户很乐于扫视一句一句的内容,对于大面积没有重点的内容,没有耐心,我们必须在网页上提供既简短又有一定视觉焦点的内

B2B行业网站的用户体验优化

中国电子商务研究中心对B2B行业的发展研究发现:由于B2B行业发展水平.市场竞争结构和激烈程度不同,加上行业产品和产业链不同,各行业的中小企业B2B电子商务的发展水平存在参差不齐. 作为依托互联网为主要营销模式的B2B网站,站点的访问性能也同样存在着行业差距.根据基调网络8月发布的B2B行业网站性能参考数据显示:该行业的首屏时间参考指数为4.6秒,在被评测的58家网站中,达到该标准的网站不到70%. 同时,抽样8家交易型B2B网站进行监测,对比结果显示:首屏时间数据最好的网站是2.3秒,而相对较

如何设计好B2B行业网站导航栏提高易用性

导航栏是指位于页面页眉区域的一排水平导航文字或图片按钮,或者是位于页面左边或右边的一排导航文字或图片按钮.它起着链接B2B行业网站各个栏目的作用,或者链接一级栏目下面许多二级栏目的作用,让访问者能方便.快速的找到自己所需要的内容和功能. B2B行业网站的导航栏与其他网站的导航栏基本一样,不过还是有一些区别.判断一个B2B行业网站的导航栏是否符合要求,可以多参考一些大网站,比如新浪.腾讯.知名的B2B行业网站等,他们在设计的时候大部分还是遵守了网站建设的标准,下面讲解一些基本标准,以供我们在判断设

六招教您提高B2B行业网站客户转化率

中介交易 SEO诊断 淘宝客 云主机 技术大厅 每一个B2B行业网站的运营者都希望每天有很多目标客户通过电话.QQ.在线留言等方式来咨 询收费服务,每个月主动咨询后成交的客户占总成交的客户数量越多,说明网站可能运营 的越成功,这应该是一个综合的考核指标.在日常的QQ咨询服务中,有很多人问我:"李学江,为什么我的B2B行业网站每天有上万IP,但是每天通过电话.QQ.在线留言等方式来 咨询收费服务的人却却寥寥无几呢?甚至有时一周一个咨询也没有".还有人告诉我说,销售人员打电话向注册用户推荐

8招教您做好B2B行业网站页面设计

中介交易 SEO诊断 淘宝客 云主机 技术大厅 B2B行业网站由于具有B2B网站的特性和门户网站的特性,决定了页面设计与其他网站一些不同点.在写作"B2B行业门户网站页面设计"章节之前,在此从理论上讲下页面设计及制作的基本要点,供大家参考,讲的不对的,希望大家批评指正. 1 页面用色.框架及整体风格应该是严谨的,充满商业氛围的 由于B2B行业网站的内容是严谨的.高端的,涉及行业的发展动态.各种技术交流.企业的营销管理知识等信息,注定了内容是严谨的.高端的;由于其涉的是企业与企业之间的交

写好栏目策划书是B2B行业网站成功的关键

中介交易 SEO诊断 淘宝客 云主机 技术大厅 网站是由栏目组成的,每个栏目的划分是一个网站用户需求再细分的过程,做好每个栏目的策划,网站总的策划就成功了80%,所以一定要在栏目策划上下功夫.在策划工作中做的最多也是基于某个栏目的策划,一个栏目的二级栏目.三级栏目.内容页.列表页.导航页之间要成为一个完整的体系,我们要修改一个页面,更多的是要从这个页面所属的栏目去考虑,包括栏目的运营推广,也是自成体系的.很多人在做网站策划的时候,很关注整站商业模式的建立,对栏目策划的细节关注不够.作为一个成功的

B2B行业网站“文字样式设计”一般标准

当我们打开各种B2B行业网站,看到最多的就是各种文字,以各种方式表达出来,显示在访问者眼前,文字是门户类型网站最多的内容,同时文字与图片.视频是网站最重要的三种表达方式之一. B2B行业网站,更多的服务于企业的交易需求.了解行业知识的学习需求及交流需求,本文作者李学江认为,这些需求更多还是要通过文字来表达和传递,不同的字号.颜色.粗细.行距,代表了产品策划者.网站设计者所期望向网站访问者传递的信息.下面来简要讲解下在B2B行业网站设计制作时具有的标准. 1 B2B行业网站导航栏文字字体.字号.粗

B2B行业网站“标题栏设计”的一般标准

在B2B行业网站的框架设计制作过程中,标题栏设计制作是工作量最大的,页面框架中最多的.网站Logo和导航条的设计,基本每个页面都是和首页一样的,相比之下工作量会小很多.无论是网站首页.二级栏目页,还是导航页.内容最终页,优秀的标题栏总能让读者方便快捷的找到想阅读的内容,又不会对页面内容产生干扰作用. 1 B2B行业网站标题栏设计的一般标准 B2B行业网站与一般的商业门户网站在标题栏设计上大部分是相同的,但是由于B2B行业网站更多的访问者和使用者是在办公室学习和工作的,需要更严肃的氛围,他们需要的