做好B2B行业网站首页设计 建立良好第一印象

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

  在本报告前面的11个小节里,我已经把B2B行业网站的页面设计分成一个一个的元素,从框架、用色、导航栏、标题栏、内容、广告设计、按钮、搜索框等各个方面做了系统的讲解。这个小节,我将从整体的角度对B2B行业门户网站首页设计做一些讲述,讲解把不同的设计元素应用到首页时的注意事项。由于通用的设计方法在上面的11个小节里已经讲过了,在此就不再赘述了,各位读者如果想知道每个元素更细节的设计方法,需要看本报告前面11个小节。

  1 首页整体风格要符合用户习惯

  B2B行业网站首页整体风格很重要,用户的访问,很大一部分是从这些页面开始的,即使用户从搜索引擎搜索内页到网站,如果用户对这个网站感兴趣,想收藏和进一步了解这个网站,大部分访问者都会访问网站的首页。设计师要让用户的第一感觉就觉得这个网站与他经常访问的优秀网站差不多,当然也要有自己的特点,但是不能差异太大,要遵守用户习惯,这个在前面章节进行过详细的介绍。

  设计师要去参考各个行业最好的B2B行业门户网站,挑选20家左右。不必要从设计风格上追求多大的标新立异,越是新的东西,风险越大,也许一部分人很认可,另外一部分人可能就不认可,如果我们水平不够好,求稳还是最好的。作为首页,更多表现设计水平的工作还是放在对内容的排版布局上比较好,毕竟用户来网站还是想找到更多有价值的内容。

  2 首页用色分析及举例说明

  B2B行业门户网站首页不适合用一种颜色做渐变,再配合黑色的文字。虽然不花哨,但是也显得太单调了,这样的用色方法可以作为企业商铺、个人空间、专题页面设计时的用色方案。首页用色一般都是选择一种颜色作为主色,再选择1种对比色,结合万能搭配色:灰色和黑色来设计更好。比如阿里巴巴首页就只用了3种颜色:主色调橙色、蓝色,和万能搭配色:黑色。

  

\

 

 阿里巴巴首页截图(截图日期:2011-10-5)

  图(78)为阿里巴巴首页截图(截图日期:2011-10-5),从图片上可以看出,阿里巴巴使用了蓝色、橙色、黑色三种颜色。一般来讲,无论我们使用什么颜色来做网页,黑色是必须要用到的,以及和黑色同色系的灰色来搭配,基本成了所有商业门户网站首页设计的标准。

  3 首页标题栏设计及排版

  B2B行业网站首页标题栏一般不要用太多种,一般做3-5种不同类型的标题栏即可,太多了就会显得太乱,根据实际情况,可以做一些细节上的改变。而且标题栏背景图片不能太突出,可以突出标题栏上的文字,用户只要看文字就知道这个模块里体现的是那个方面的内容,是否是自己需要的,这样的设计方法是现在商业门户网站设计时最常用的。

  一般是从上到下统一标题栏的,比如首页为左中右框架,那么左边的标题栏都是一样的,如果中间变换结构,标题栏的样式可以发生变化。正如我在《B2B行业门户网站设计开发实战研究报告》第三章第7节讲过的,同类型的内容也可以统一标题栏,这样让用户看起来更加和谐统一。也可以不统一,但是注意不能太乱,不能太花哨。

  4 首页整体框架结构及页面宽度设计

  B2B行业网站首页常用通栏、左右、左中右3种框架结构,使用左右或左中右框架的时候,上下宽度一般要保持一致,看起来才不会显的太乱,左右标题栏要对齐,由于多种原因使设计对不齐的时候,要和网站策划者沟通,加点或减少点内容,使标题栏左右对齐。首页的框架看起来尽量和谐、统一、规范,使整个网站看起来更严肃、高端一些。

  框架的宽度目前还是以990PX左右为主,800PX的宽度已经完全不考虑了,目前电脑宽屏越来越多。从2008年以后新出来的电脑,屏幕绝大部分都比1000PX要宽,所以以后可能会采取更宽的页面,不过目前绝大部分的主流门户还是使用990PX左右的宽度。程序也可以判断用户的屏幕,如果用户使用的是宽屏,可以左右加2个对联广告。

  5 首页各种广告排版及设计

  B2B行业网站首页是广告最多的一个页面,就象杂志一样,大家都想做前彩页和封面。所以首页广告的排版就显的尤其重要,广告排版不好,显得杂乱无章。这个部分的内容,我在《B2B行业门户网站策划实战研究报告》第七章第7节:“网站厂商广告策划要点也做了详细说明”。如果广告放的太少,用户体验虽然很好,但是销售人员又没有广告位卖,影响网站的收益。所以网站既需要有许多广告位,又要保证用户的体验,设计师就要遵守一些广告排版设计的标准。

  A 广告的高度不要太高:一般首页的广告,绝大部分的广告高度尽量在60PX及以下,本人认为50PX是最好的,为未来考虑。当广告比较少的时候,可以用更长的广告来吸引眼球,如果开始的时候高度太高了,广告就放不了太多,会影响销售额。少数几个广告的高度可以更高一些,但是不要超过75PX为最佳。一级栏目的大广告可以更高一些,因为广告更

    相关新闻>>

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

      推荐热点

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

      豫ICP备11007008号-1