域名預(yù)訂/競(jìng)價(jià)，好“米”不錯(cuò)過

B2B行業(yè)網(wǎng)站策劃提供給網(wǎng)站設(shè)計(jì)師的策劃文檔里，一般都表明了每個(gè)部份的內(nèi)容和功能所采用的頁面結(jié)構(gòu)，但是并不代表設(shè)計(jì)師就能理解策劃者在頁面結(jié)構(gòu)方面的考慮，以及由于有的策劃者對(duì)網(wǎng)絡(luò)了解不太深入，或者說有一些疏忽，從而在頁面結(jié)構(gòu)上考慮的不周全，這個(gè)時(shí)候設(shè)計(jì)師和網(wǎng)站管理者就要對(duì)策劃文檔進(jìn)行糾正，所以無論是網(wǎng)站管理者、產(chǎn)品經(jīng)理、設(shè)計(jì)師、頁面制作人員，都要對(duì)B2B行業(yè)網(wǎng)站的頁面結(jié)構(gòu)進(jìn)行簡(jiǎn)要的了解，我們可以不知道怎么去做，但是一定要知道，這樣做是不是對(duì)的。下面就B2B行業(yè)網(wǎng)站常用的幾種頁面結(jié)構(gòu)，以及如何綜合使用頁面結(jié)構(gòu)進(jìn)行簡(jiǎn)要的講解。

1 B2B行業(yè)門戶網(wǎng)站常用的幾種頁面結(jié)構(gòu)

B2B行業(yè)門戶網(wǎng)站不是企業(yè)網(wǎng)站，也不是全Flash的品牌型網(wǎng)站，具有商業(yè)性、嚴(yán)肅性的特點(diǎn)，一般布局都是中規(guī)中矩的，并不是無規(guī)律排列的排版結(jié)構(gòu)。本研究報(bào)告認(rèn)為有如下幾種常用的排版結(jié)構(gòu)：

A 左右結(jié)構(gòu)

左右結(jié)構(gòu)是頁面結(jié)構(gòu)中最常用的，根據(jù)實(shí)際情況，又分為左右欄一樣寬、左邊寬、右邊寬幾種結(jié)構(gòu)，具體的尺寸根據(jù)要展示的內(nèi)容來決定，正所謂內(nèi)容決定形式嘛。但是并不是說沒有一定的規(guī)律，一般常用的是左邊寬，因?yàn)閺挠脩艉退阉饕鎯?yōu)化來講，要把重要的內(nèi)容放在左邊，方便用戶和搜索引擎蜘蛛優(yōu)先找到，尤其是內(nèi)容最終頁，絕大部分的網(wǎng)站都是采用左邊寬，右邊窄的欄目結(jié)構(gòu)。當(dāng)然有時(shí)根據(jù)實(shí)際情況，比如放左邊的重要內(nèi)容占的空間只能是很窄的，那就只能左邊窄，右邊寬。左右一樣寬的結(jié)構(gòu)，一般很少采用，因?yàn)闆]有層次感，太呆板。

圖(4) 中國服裝網(wǎng)首頁行業(yè)快訊左右結(jié)構(gòu)顯示(截圖：2011-11-5)

B 左中右結(jié)構(gòu)

左中右結(jié)構(gòu)也是頁面設(shè)計(jì)中最常用的，根據(jù)實(shí)際情況，又分為左邊和右邊窄，中間寬;左邊和中間一樣寬，右邊窄;左邊窄，中間和右邊一樣寬，這3種情況使用的比較多。在按1024的頁面分辨率來設(shè)計(jì)網(wǎng)頁時(shí)，左中右結(jié)構(gòu)是用的最多的，因?yàn)榇蟛糠值膬?nèi)容，并不需要象左右結(jié)構(gòu)一樣，占用那么寬的距離，尤其是導(dǎo)航頁面，每個(gè)位置都很重要。

圖(5)空調(diào)制冷大市場(chǎng)首頁第一屏左中右結(jié)構(gòu)顯示(截圖：2011-10-5)

C 通欄結(jié)構(gòu)

通欄結(jié)構(gòu)也是最常用的頁面結(jié)構(gòu)，多使用在頁面的頂部和底部，以及導(dǎo)航欄、內(nèi)容需要而采用的B2B行業(yè)網(wǎng)站頁面結(jié)構(gòu)中。比如：在網(wǎng)站頂部的導(dǎo)航欄，即使導(dǎo)航欄的內(nèi)容比較少，我們也是采用通欄的，常常是網(wǎng)站Logo和導(dǎo)航欄成一個(gè)整體，以通欄的形式展現(xiàn)，這個(gè)就是前面講的習(xí)慣用法。其意義大概是希望讓訪問者將導(dǎo)航欄的內(nèi)容看成一個(gè)整體，在視覺上形成一個(gè)區(qū)分。底部通欄也是一個(gè)道理，在視覺上形成一個(gè)整體，保證整站的統(tǒng)一性和完整性。還有一些網(wǎng)站的廣告，希望更突出，吸引用戶的關(guān)注，采用了通欄結(jié)構(gòu)。以及某些內(nèi)容，需要采用通欄來展示，比如圖片展示，滾動(dòng)展示的內(nèi)容，通欄里的內(nèi)容都是一個(gè)整體。

圖(6) 中國服裝網(wǎng)圖庫欄目T臺(tái)通欄顯示(截圖：2011-2-6)

2 B2B行業(yè)門戶網(wǎng)站如何綜合應(yīng)用各種頁面結(jié)構(gòu)

在日常的頁面設(shè)計(jì)中，我們都是要綜合運(yùn)用各種頁面結(jié)構(gòu)，把各種標(biāo)題欄根據(jù)不同的實(shí)際情況來排版布局，完成頁面的設(shè)計(jì)。究竟在何時(shí)何處需要采用那種頁面結(jié)構(gòu)，絕大部分的時(shí)候，我們都是要根據(jù)頁面的內(nèi)容和功能，綜合采用左右、左中右、通欄結(jié)構(gòu)中至少2種結(jié)構(gòu)的。

A 頂部導(dǎo)航欄下方第一屏重要位置不適宜使用通欄結(jié)構(gòu)

網(wǎng)站策劃者一般都非常重視首頁、一級(jí)欄目首頁的第一屏位置規(guī)劃布局，由于用戶的眼球都是從上到下，從左到右往下看的，頁面第一屏離最左邊和頂部45度角的位置以下，是最重要的位置。這些位置由于很重要，用戶很容易看到這些內(nèi)容，希望能多展示一些內(nèi)容，常采用左中右結(jié)構(gòu)，或左右結(jié)構(gòu)，不推薦使用通欄這種占有太多空間的結(jié)構(gòu)，要在左上方將最重要的內(nèi)容和功能推薦給用戶閱讀和使用。

B 網(wǎng)站首頁或二級(jí)欄目首頁等導(dǎo)航頁，各種結(jié)構(gòu)要和諧統(tǒng)一

我不贊同使用的框架太多，且要保證上下、左右和諧統(tǒng)一，雖然既有通欄，又有左中右，還有左右結(jié)構(gòu)，但是不必要采用太多不一樣的結(jié)構(gòu)，比如：既有左右結(jié)構(gòu)，又有左中右結(jié)構(gòu)，可以在上下幾個(gè)結(jié)構(gòu)之間保持左邊寬度統(tǒng)一，或右邊寬度統(tǒng)一，上下統(tǒng)一的不僅是寬度，標(biāo)題欄的外形也可以是一樣的，看起來不至于太亂。只要是寬度統(tǒng)一的標(biāo)題欄，都可以設(shè)計(jì)成一樣的，一個(gè)頁面，本報(bào)告認(rèn)為外觀效果不一樣的標(biāo)題欄，不超過4個(gè)，3個(gè)最合適，弱化標(biāo)題欄對(duì)用戶視覺上的沖擊，讓它變的更安靜一些。所以我常常對(duì)設(shè)計(jì)師講，B2B行業(yè)網(wǎng)站的美工其實(shí)比做企業(yè)網(wǎng)站要簡(jiǎn)單，重要的是你要理解其需要表達(dá)什么。

C 頁面的標(biāo)題欄更多要設(shè)計(jì)為方形圓角或直角，但是必須要規(guī)則的

這個(gè)在《B2B行業(yè)門戶網(wǎng)站設(shè)計(jì)開發(fā)實(shí)戰(zhàn)研究報(bào)告》前面“設(shè)計(jì)基礎(chǔ)”部分已經(jīng)講過了，再簡(jiǎn)要講解下。作為企業(yè)網(wǎng)站、時(shí)尚類型網(wǎng)站，或者為了表達(dá)時(shí)尚、活潑的主題，網(wǎng)站標(biāo)題欄的設(shè)計(jì)可以比較活潑一些，多采用圓形或不規(guī)則的排版方式，但是作為B2B行業(yè)網(wǎng)站，就不能這樣去設(shè)計(jì)。無論是左右、上下的區(qū)域，每個(gè)部分都應(yīng)該是規(guī)則的，使用的圖片、背景都是嚴(yán)謹(jǐn)?shù)?。不能把圖片斜放、用很大的橢圓形、用很大的圖標(biāo)、用卡通的圖標(biāo)等來設(shè)計(jì)網(wǎng)站的結(jié)構(gòu)，與平面設(shè)計(jì)、企業(yè)網(wǎng)站的設(shè)計(jì)有很大的差別。

本小節(jié)雖然是寫給B2B行業(yè)網(wǎng)站的設(shè)計(jì)師看的，但是我認(rèn)為一些對(duì)網(wǎng)絡(luò)不怎么了解的策劃者，尤其是從事傳統(tǒng)行業(yè)的，也需要學(xué)習(xí)這個(gè)內(nèi)容，而且也能看的懂。設(shè)計(jì)師一般對(duì)我講的這些內(nèi)容，反而都很熟悉了，都懂，但是我們需要的是網(wǎng)站策劃者和網(wǎng)頁設(shè)計(jì)師都能透徹理解網(wǎng)站頁面結(jié)構(gòu)與網(wǎng)站頁面設(shè)計(jì)的關(guān)系，才能更好的溝通，做出符合用戶需求的網(wǎng)站頁面。

本文原創(chuàng)作者：李學(xué)江，歡迎交流指導(dǎo)咨詢，交流QQ：1580658565。

申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！