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

来源:网络 责任编辑:栏目编辑 发表时间:2013-07-01 06:36 点击:

  对于B2B行业网站的页面设计,大家可能更多考虑页面用色、导航条、按钮、标题栏的设计,内容设计可能常常被大家忽略。但是如果内容设计的不好,可能会让你的所有设计被毁于一旦。比如如何让内容有主次之分、层次感,使内容看起来不会太乱、太多,使用户不愿意继续阅读下去,很快离开网站,不能留住用户继续访问。在本研究报告前面章节我讲过,永远要记得用户在没有明确的阅读内容前是扫描而不是阅读,在导航页面,用户很乐于扫视一句一句的内容,对于大面积没有重点的内容,没有耐心,我们必须在网页上提供既简短又有一定视觉焦点的内容。这种焦点可以吸引用户的注意力,让他们在看到喜欢内容的时候,采取进一步的行动,点击链接浏览详细信息,或看其他更多内容,让用户留下来,如果我们不区分重点,就很难让用户很快发现他想找的焦点内容,尤其是对于新用户,第一印象很重要。

  了解到用户浏览页面时的需求和行为后,在页面设计时就要满足用户的需求和习惯,有那些办法可以突出焦点内容呢?一般常用:文字加粗、文字配图片、文字变颜色、加导读、文字变大、重点突出的部分四周多一点空白、增加小图标或按钮等方法,都能突出焦点内容。下面来简要讲解。

  1 标题及重点突出内容设计一般标准

  浏览者来到网站,会试图找出他们需要的东西。再次重复,用户并不一定是来阅读的,他们是来做他们想做的事情,每个人的目的不一定相同,网站要节省他们的时间并且突出优质内容来吸引每个用户的注意力,从而让他们更加便于在几秒钟内扫描整个页面。用户只有在这几秒内扫描并发现他们想要的东西,才会继续在你的网站上停留更长的时间。所以对于B2B行业网站的首页、一级栏目首页等导航页面来讲,焦点内容就是推荐内容标题,信息分类名称,信息图片等几个方面。使焦点内容更突出的方法有很多,下面来详细讲解。

  (1) 文字加粗

  无论什么内容,只要我们将少部分的内容加粗,将大部分不加粗,那么加粗的内容肯定就会非常突出,这个是常用的制造焦点内容的方法。在一个页面上我们会见到很多加粗的文字,这些加粗的文字就会是焦点内容的一个部分,推荐的链接内容标题、主要分类名称等经常使用。这个是页面设计时创造焦点内容的主要方法。

  (2) 字号变大

  这个方法与文字加粗一样,属于设计焦点内容的常用方法,对于最重点的内容,通常都是既加粗,字号又变大。同样是推荐链接内容标题、主要分类名称等经常使用的。

  (3) 文字变颜色

  一般字号变大、字体加粗,也会与变颜色同时出现,更加突出,但是变颜色也会出现在一些次突出内容上出现,只变颜色,不加粗,不变大字体。

\

 

  图(69) 阿里巴巴产品列表页截图

  如图(69)所示,首先产品名称,是最重要的,用户将通过名称看是否是自己感兴趣的产品,所以阿里的设计师采用了最突出的做法,既变颜色,又增大字体,还加粗。公司名字是第二个需要突出的,在这里只采用了变颜色,如果又加粗的话,就会使页面看起来很累,突出的内容太多了,就没有突出了。同时标题下面为产品的导读,将产品的参数表示出来,当访问者通过扫描对某个产品感兴趣了,就可能进一步看产品的介绍,属于扫描到感兴趣内容后的第二步动作,所以在页面上,要弱化,设计师采用了灰色,以及地区、起订量等都是灰色。搜索出来的产品都很类似,价格的比较就变的很重要,所以价格采用了浏览者眼球最关注的颜色:红色。正如我在《B2B行业门户网站策划实战研究报告》里讲的,要研究电子商务网站的设计,阿里巴巴是最重要的研究对象。

  (4) 文字配图片

  为了突出某个内容,我们常常配个图片,吸引用户的眼球,当然有时是这个内容本身就包含图片,但是更多的时候我们会配个图标、按钮、小图片,为了突出这个内容,与周围的内容区别开来。

  (5) 四周留空白

  为了突出某个内容,我们常采用把这个内容的四周留白,这也是突出这个内容的方法,这种方法常常与加粗、字体变大、变颜色等一起使用。

  (6) 为内容加导读

  加导读的方法,除了让用户增加对突出内容有更多的了解,吸引用户点击,还从视觉上让用户觉得这个内容相比其他信息占的空间更多,习惯上认为这个信息更加重要,突出这个部分的内容。

  

\

 

  图(70) 食品商务网资讯栏目的推荐资讯

  图(70)为食品商务网资讯栏目的推荐资讯,相比其他资讯,用户更愿意阅读这个内容。

<

    相关新闻>>

      发表评论
      请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
      用户名: 验证码:点击我更换图片
      最新评论 更多>>

      推荐热点

      • WordPress添加百度喜欢按钮小技巧
      • Wordpress 博客如何实现自定义Gravatar头像
      • 网站设计分析:建立良好的视觉层级
      • 网站设计分析:“中国式设计”的三个方向
      • 案例分析:奥巴马筹款网站的制作过程
      • 创建不平衡的平衡:在网页设计中使用不对称设计
      • 7大主流B2C首页导航栏设计对比分析
      • Wordpress页面模板制作方法及使用
      • css控制文字前的小图标
      网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
      Copyright © 2008-2015 计算机技术学习交流网. 版权所有

      豫ICP备11007008号-1