在本报告前面的11个小节里,我已经把B2B行业网站的页面设计分成一个一个的元素,从框架、用色、导航栏、标题栏、内容、广告设计、按钮、搜索框等各个方面做了系统的讲解.这个小节,我将从整体的角度对B2B行业门户网站首页设计做一些讲述,讲解把不同的设计元素应用到首页时的注意事项.由于通用的设计方法在上面的11个小节里已经讲过了,在此就不再赘述了,各位读者如果想知道每个元素更细节的设计方法,需要看本报告前面11个小节.
; s5 }4 @1 V4 B3 T& f0 y7 h* c! N* m- G2 f+ |& A( a
1 首页整体风格要符合用户习惯8 b0 }+ |5 n. U( g# b' t5 c, b4 t0 @
8 V4 k- j$ t; h: ]$ h: Y0 U B2B行业网站首页整体风格很重要,用户的访问,很大一部分是从这些页面开始的,即使用户从搜索引擎搜索内页到网站,如果用户对这个网站感兴趣,想收藏和进一步了解这个网站,大部分访问者都会访问网站的首页.设计师要让用户的第一感觉就觉得这个网站与他经常访问的优秀网站差不多,当然也要有自己的特点,但是不能差异太大,要遵守用户习惯,这个在前面章节进行过详细的介绍.
, H. r# J9 p4 s9 t" F
2 `. O4 V0 }" s* O, Y 设计师要去参考各个行业最好的B2B行业门户网站,挑选20家左右.不必要从设计风格上追求多大的标新立异,越是新的东西,风险越大,也许一部分人很认可,另外一部分人可能就不认可,如果我们水平不够好,求稳还是最好的.作为首页,更多表现设计水平的工作还是放在对内容的排版布局上比较好,毕竟用户来网站还是想找到更多有价值的内容. B" u+ j4 I4 p" p Z4 D+ ?* }
9 A* C3 e% J: P' X
2 首页用色分析及举例说明
# v, @# `" _/ L7 ]+ I9 [, n/ k% l: C6 o- G
B2B行业门户网站首页不适合用一种颜色做渐变,再配合黑色的文字.虽然不花哨,但是也显得太单调了,这样的用色方法可以作为企业商铺、个人空间、专题页面设计时的用色方案.首页用色一般都是选择一种颜色作为主色,再选择1种对比色,结合万能搭配色:灰色和黑色来设计更好.比如阿里巴巴首页就只用了3种颜色:主色调橙色、蓝色,和万能搭配色:黑色.
! w% i1 l1 V5 K5 ^+ n H+ t) `/ p# A: R, ?! s5 U' b
图(78)为阿里巴巴首页截图(截图日期:2011-10-5),从图片上可以看出,阿里巴巴使用了蓝色、橙色、黑色三种颜色.一般来讲,无论我们使用什么颜色来做网页,黑色是必须要用到的,以及和黑色同色系的灰色来搭配,基本成了所有商业门户网站首页设计的标准.2 `, a, q+ q/ Q1 R# K" {
7 ], k+ u9 k& @% D# ~5 R4 M
3 首页标题栏设计及排版& ~4 V5 n8 m) k
4 i8 W# b9 y1 X* A B2B行业网站首页标题栏一般不要用太多种,一般做3-5种不同类型的标题栏即可,太多了就会显得太乱,根据实际情况,可以做一些细节上的改变.而且标题栏背景图片不能太突出,可以突出标题栏上的文字,用户只要看文字就知道这个模块里体现的是那个方面的内容,是否是自己需要的,这样的设计方法是现在商业门户网站设计时最常用的.
" f! j4 q& i0 i- f
: j, |6 H3 u$ G) z 一般是从上到下统一标题栏的,比如首页为左中右框架,那么左边的标题栏都是一样的,如果中间变换结构,标题栏的样式可以发生变化.正如我在《B2B行业门户网站设计开发实战研究报告》第三章第7节讲过的,同类型的内容也可以统一标题栏,这样让用户看起来更加和谐统一.也可以不统一,但是注意不能太乱,不能太花哨.& `6 ~6 {( V- |9 Y
. g9 x' |; x, [# c4 G! g 4 首页整体框架结构及页面宽度设计
# X2 o. b* r, l$ d4 A9 @- w3 n7 S+ e' X! c* s
B2B行业网站首页常用通栏、左右、左中右3种框架结构,使用左右或左中右框架的时候,上下宽度一般要保持一致,看起来才不会显的太乱,左右标题栏要对齐,由于多种原因使设计对不齐的时候,要和网站策划者沟通,加点或减少点内容,使标题栏左右对齐.首页的框架看起来尽量和谐、统一、规范,使整个网站看起来更严肃、高端一些." V2 C1 U$ b3 z% l& {" ^8 n
& [% n3 z( Y( c: f+ H- y9 P# P
框架的宽度目前还是以990PX左右为主,800PX的宽度已经完全不考虑了,目前电脑宽屏越来越多.从2008年以后新出来的电脑,屏幕绝大部分都比1000PX要宽,所以以后可能会采取更宽的页面,不过目前绝大部分的主流门户还是使用990PX左右的宽度.程序也可以判断用户的屏幕,如果用户使用的是宽屏,可以左右加2个对联广告.
# v/ i- f, j( X/ E1 \2 j+ V0 z5 Q0 f! V+ \2 f& c
5 首页各种广告排版及设计
9 W$ B, r. l& A; @# }
- e# s0 U4 v( {. E) _ B2B行业网站首页是广告最多的一个页面,就象杂志一样,大家都想做前彩页和封面.所以首页广告的排版就显的尤其重要,广告排版不好,显得杂乱无章.这个部分的内容,我在《B2B行业门户网站策划实战研究报告》第七章第7节:"网站厂商广告策划要点也做了详细说明".如果广告放的太少,用户体验虽然很好,但是销售人员又没有广告位卖,影响网站的收益.所以网站既需要有许多广告位,又要保证用户的体验,设计师就要遵守一些广告排版设计的标准.3 @2 U$ h! v7 V- ^! ?- D
) g r. N. Z$ ^# T! r* k A 广告的高度不要太高:一般首页的广告,绝大部分的广告高度尽量在60PX及以下,本人认为50PX是最好的,为未来考虑.当广告比较少的时候,可以用更长的广告来吸引眼球,如果开始的时候高度太高了,广告就放不了太多,会影响销售额.少数几个广告的高度可以更高一些,但是不要超过75PX为最佳.一级栏目的大广告可以更高一些,因为广告更少,更不值钱,但是不要超过90PX为最好.
2 a& |+ ^8 e4 y+ q, @6 z' l7 F& f' i% r# {* {% N
B 尽量少采用Flash设计:由于一些B2B行业网站首页广告比较多,如果都采用Flash来设计,会使首页打开非常慢,因为Flash很占资源.对于一些宽度比较长的广告,可以使用Flash来设计,但是首页广告中Flash广告尽量在10个左右,更多的小广告,使用GIF动画来设计更好,也可以放一个图片.
3 {1 a5 w4 S5 j3 r0 W# A
$ g5 C8 P. r; l( S* T$ D' z+ b* H C 广告排版要整齐统一:由于首页广告可能比较多,所以要考虑好用户体验,最好是把内容和广告分开排,比如一排广告,一排内容.或者一排内容,两排广告.这样用户不至于在广告里找内容,看起来也更加和谐统一,用户想看广告的时候,自己再去找.而且广告与内容间隔开来放,还会让广告更有效果.8 _6 J5 ]. }" F) {2 g1 E+ H
1 h2 Q/ T) |8 m 图(79)为中国建材网首页广告,从图上可以看出,广告放在上下两个内容中间,放的两排,高度60PX,长度235PX,一排正好可以放4个,广告既能放的比较多,也还能有效果,用户在看上下两个部分的内容时,都可能看到客户的广告,为客户广告带来更好的效果.& V( G' X2 C- v( v R1 i3 N. d
i$ \& h( F7 b
B2B行业网站的首页设计就讲这么多,标题栏、导航条、搜索框、按钮、内容链接等具体元素的设计方法在前面都讲的很清楚了,是可以通用的,在此不再赘述.大家一定要明白,设计好B2B行业网站首页非常重要,一级栏目及整个网站的大部分设计都要参考首页,与首页保持统一.设计师在真正的设计过程中至少要参考20个以上相似行业做的最好的网站,绝对不能闭门造车. |
