B2B行业网站“页面结构”分析及应用

本文节选自《B2B行业门户网站设计开发实战研究报告》第三章　第2.2节

　　B2B行业网站策划提供给网站设计师的策划文档里，一般都表明了每个部份的内容和功能所采用的页面结构，但是并不代表设计师就能理解策划者在页面结构方面的考虑，以及由于有的策划者对网络了解不太深入，或者说有一些疏忽，从而在页面结构上考虑的不周全，这个时候设计师和网站管理者就要对策划文档进行纠正，所以无论是网站管理者、产品经理、设计师、页面制作人员，都要对B2B行业网站的页面结构进行简要的了解，我们可以不知道怎么去做，但是一定要知道，这样做是不是对的。下面就B2B行业网站常用的几种页面结构，以及如何综合使用页面结构进行简要的讲解。

　　左右结构是页面结构中最常用的，根据实际情况，又分为左右栏一样宽、左边宽、右边宽几种结构，具体的尺寸根据要展示的内容来决定，正所谓内容决定形式嘛。但是并不是说没有一定的规律，一般常用的是左边宽，因为从用户和搜索引擎优化来讲，要把重要的内容放在左边，方便用户和搜索引擎蜘蛛优先找到，尤其是内容最终页，绝大部分的网站都是采用左边宽，右边窄的栏目结构。当然有时根据实际情况，比如放左边的重要内容占的空间只能是很窄的，那就只能左边窄，右边宽。左右一样宽的结构，一般很少采用，因为没有层次感，太呆板。 

 

图（4） 中国服装网首页（www.efu.com.cn）行业快讯左右结构显示（截图：2011-11-5）

 

B  左中右结构

 

　　左中右结构也是页面设计中最常用的，根据实际情况，又分为左边和右边窄，中间宽；左边和中间一样宽，右边窄；左边窄，中间和右边一样宽，这3种情况使用的比较多。在按1024的页面分辨率来设计网页时，左中右结构是用的最多的，因为大部分的内容，并不需要象左右结构一样，占用那么宽的距离，尤其是导航页面，每个位置都很重要。

图（5）空调制冷大市场（www.hvacr.cn）首页第一屏左中右结构显示（截图：2011-10-5）

 

C  通栏结构

 

　　通栏结构也是最常用的页面结构，多使用在页面的顶部和底部，以及导航栏、内容需要而采用的B2B行业网站页面结构中。比如：在网站顶部的导航栏，即使导航栏的内容比较少，我们也是采用通栏的，常常是网站Logo和导航栏成一个整体，以通栏的形式展现，这个就是前面讲的习惯用法。其意义大概是希望让访问者将导航栏的内容看成一个整体，在视觉上形成一个区分。底部通栏也是一个道理，在视觉上形成一个整体，保证整站的统一性和完整性。还有一些网站的广告，希望更突出，吸引用户的关注，采用了通栏结构。以及某些内容，需要采用通栏来展示，比如图片展示，滚动展示的内容，通栏里的内容都是一个整体。

 

图（6） 中国服装网（www.efu.com.cn/fashion/photo/）图库栏目T台通栏显示（截图：2011-2-6）

 

2   B2B行业门户网站如何综合应用各种页面结构

 

　　在日常的页面设计中，我们都是要综合运用各种页面结构，把各种标题栏根据不同的实际情况来排版布局，完成页面的设计。究竟在何时何处需要采用那种页面结构，绝大部分的时候，我们都是要根据页面的内容和功能，综合采用左右、左中右、通栏结构中至少2种结构的。

 

A  顶部导航栏下方第一屏重要位置不适宜使用通栏结构

    

　　网站策划者一般都非常重视首页、一级栏目首页的第一屏位置规划布局，由于用户的眼球都是从上到下，从左到右往下看的，页面第一屏离最左边和顶部45度角的位置以下，是最重要的位置。这些位置由于很重要，用户很容易看到这些内容，希望能多展示一些内容，常采用左中右结构，或左右结构，不推荐使用通栏这种占有太多空间的结构，要在左上方将最重要的内容和功能推荐给用户阅读和使用。

 

B  网站首页或二级栏目首页等导航页，各种结构要和谐统一

  

　　我不赞同使用的框架太多，且要保证上下、左右和谐统一，虽然既有通栏，又有左中右，还有左右结构，但是不必要采用太多不一样的结构，比如：既有左右结构，又有左中右结构，可以在上下几个结构之间保持左边宽度统一，或右边宽度统一，上下统一的不仅是宽度，标题栏的外形也可以是一样的，看起来不至于太乱。只要是宽度统一的标题栏，都可以设计成一样的，一个页面，本报告认为外观效果不一样的标题栏，不超过4个，3个最合适，弱化标题栏对用户视觉上的冲击，让它变的更安静一些。所以我常常对设计师讲，B2B行业网站的美工其实比做企业网站要简单，重要的是你要理解其需要表达什么。

 

C  页面的标题栏更多要设计为方形圆角或直角，但是必须要规则的

 

　　这个在《B2B行业门户网站设计开发实战研究报告》前面“设计基础”部分已经讲过了，再简要讲解下。作为企业网站、时尚类型网站，或者为了表达时尚、活泼的主题，网站标题栏的设计可以比较活泼一些，多采用圆形或不规则的排版方式，但是作为B2B行业网站，就不能这样去设计。无论是左右、上下的区域，每个部分都应该是规则的，使用的图片、背景都是严谨的。不能把图片斜放、用很大的椭圆形、用很大的图标、用卡通的图标等来设计网站的结构，与平面设计、企业网站的设计有很大的差别。

 

　　本小节虽然是写给B2B行业网站的设计师看的，但是我认为一些对网络不怎么了解的策划者，尤其是从事传统行业的，也需要学习这个内容，而且也能看的懂。设计师一般对我讲的这些内容，反而都很熟悉了，都懂，但是我们需要的是网站策划者和网页设计师都能透彻理解网站页面结构与网站页面设计的关系，才能更好的沟通，做出符合用户需求的网站页面。

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!