B2B行業(yè)網站策劃提供給網站設計師的策劃文檔里,一般都表明了每個部份的內容和功能所采用的頁面結構,但是并不代表設計師就能理解策劃者在頁面結構方面的考慮,以及由于有的策劃者對網絡了解不太深入,或者說有一些疏忽,從而在頁面結構上考慮的不周全,這個時候設計師和網站管理者就要對策劃文檔進行糾正,所以無論是網站管理者、產品經理、設計師、頁面制作人員,都要對B2B行業(yè)網站的頁面結構進行簡要的了解,我們可以不知道怎么去做,但是一定要知道,這樣做是不是對的。下面就B2B行業(yè)網站常用的幾種頁面結構,以及如何綜合使用頁面結構進行簡要的講解。
1 B2B行業(yè)門戶網站常用的幾種頁面結構
B2B行業(yè)門戶網站不是企業(yè)網站,也不是全Flash的品牌型網站,具有商業(yè)性、嚴肅性的特點,一般布局都是中規(guī)中矩的,并不是無規(guī)律排列的排版結構。本研究報告認為有如下幾種常用的排版結構:
A 左右結構
左右結構是頁面結構中最常用的,根據(jù)實際情況,又分為左右欄一樣寬、左邊寬、右邊寬幾種結構,具體的尺寸根據(jù)要展示的內容來決定,正所謂內容決定形式嘛。但是并不是說沒有一定的規(guī)律,一般常用的是左邊寬,因為從用戶和搜索引擎優(yōu)化來講,要把重要的內容放在左邊,方便用戶和搜索引擎蜘蛛優(yōu)先找到,尤其是內容最終頁,絕大部分的網站都是采用左邊寬,右邊窄的欄目結構。當然有時根據(jù)實際情況,比如放左邊的重要內容占的空間只能是很窄的,那就只能左邊窄,右邊寬。左右一樣寬的結構,一般很少采用,因為沒有層次感,太呆板。
圖(4) 中國服裝網首頁行業(yè)快訊左右結構顯示(截圖:2011-11-5)
B 左中右結構
左中右結構也是頁面設計中最常用的,根據(jù)實際情況,又分為左邊和右邊窄,中間寬;左邊和中間一樣寬,右邊窄;左邊窄,中間和右邊一樣寬,這3種情況使用的比較多。在按1024的頁面分辨率來設計網頁時,左中右結構是用的最多的,因為大部分的內容,并不需要象左右結構一樣,占用那么寬的距離,尤其是導航頁面,每個位置都很重要。
圖(5)空調制冷大市場首頁第一屏左中右結構顯示(截圖:2011-10-5)
C 通欄結構
通欄結構也是最常用的頁面結構,多使用在頁面的頂部和底部,以及導航欄、內容需要而采用的B2B行業(yè)網站頁面結構中。比如:在網站頂部的導航欄,即使導航欄的內容比較少,我們也是采用通欄的,常常是網站Logo和導航欄成一個整體,以通欄的形式展現(xiàn),這個就是前面講的習慣用法。其意義大概是希望讓訪問者將導航欄的內容看成一個整體,在視覺上形成一個區(qū)分。底部通欄也是一個道理,在視覺上形成一個整體,保證整站的統(tǒng)一性和完整性。還有一些網站的廣告,希望更突出,吸引用戶的關注,采用了通欄結構。以及某些內容,需要采用通欄來展示,比如圖片展示,滾動展示的內容,通欄里的內容都是一個整體。
圖(6) 中國服裝網圖庫欄目T臺通欄顯示(截圖:2011-2-6)
2 B2B行業(yè)門戶網站如何綜合應用各種頁面結構
在日常的頁面設計中,我們都是要綜合運用各種頁面結構,把各種標題欄根據(jù)不同的實際情況來排版布局,完成頁面的設計。究竟在何時何處需要采用那種頁面結構,絕大部分的時候,我們都是要根據(jù)頁面的內容和功能,綜合采用左右、左中右、通欄結構中至少2種結構的。
A 頂部導航欄下方第一屏重要位置不適宜使用通欄結構
網站策劃者一般都非常重視首頁、一級欄目首頁的第一屏位置規(guī)劃布局,由于用戶的眼球都是從上到下,從左到右往下看的,頁面第一屏離最左邊和頂部45度角的位置以下,是最重要的位置。這些位置由于很重要,用戶很容易看到這些內容,希望能多展示一些內容,常采用左中右結構,或左右結構,不推薦使用通欄這種占有太多空間的結構,要在左上方將最重要的內容和功能推薦給用戶閱讀和使用。
B 網站首頁或二級欄目首頁等導航頁,各種結構要和諧統(tǒng)一
我不贊同使用的框架太多,且要保證上下、左右和諧統(tǒng)一,雖然既有通欄,又有左中右,還有左右結構,但是不必要采用太多不一樣的結構,比如:既有左右結構,又有左中右結構,可以在上下幾個結構之間保持左邊寬度統(tǒng)一,或右邊寬度統(tǒng)一,上下統(tǒng)一的不僅是寬度,標題欄的外形也可以是一樣的,看起來不至于太亂。只要是寬度統(tǒng)一的標題欄,都可以設計成一樣的,一個頁面,本報告認為外觀效果不一樣的標題欄,不超過4個,3個最合適,弱化標題欄對用戶視覺上的沖擊,讓它變的更安靜一些。所以我常常對設計師講,B2B行業(yè)網站的美工其實比做企業(yè)網站要簡單,重要的是你要理解其需要表達什么。
C 頁面的標題欄更多要設計為方形圓角或直角,但是必須要規(guī)則的
這個在《B2B行業(yè)門戶網站設計開發(fā)實戰(zhàn)研究報告》前面“設計基礎”部分已經講過了,再簡要講解下。作為企業(yè)網站、時尚類型網站,或者為了表達時尚、活潑的主題,網站標題欄的設計可以比較活潑一些,多采用圓形或不規(guī)則的排版方式,但是作為B2B行業(yè)網站,就不能這樣去設計。無論是左右、上下的區(qū)域,每個部分都應該是規(guī)則的,使用的圖片、背景都是嚴謹?shù)?。不能把圖片斜放、用很大的橢圓形、用很大的圖標、用卡通的圖標等來設計網站的結構,與平面設計、企業(yè)網站的設計有很大的差別。
本小節(jié)雖然是寫給B2B行業(yè)網站的設計師看的,但是我認為一些對網絡不怎么了解的策劃者,尤其是從事傳統(tǒng)行業(yè)的,也需要學習這個內容,而且也能看的懂。設計師一般對我講的這些內容,反而都很熟悉了,都懂,但是我們需要的是網站策劃者和網頁設計師都能透徹理解網站頁面結構與網站頁面設計的關系,才能更好的溝通,做出符合用戶需求的網站頁面。
本文原創(chuàng)作者:李學江,歡迎交流指導咨詢,交流QQ:1580658565。
申請創(chuàng)業(yè)報道,分享創(chuàng)業(yè)好點子。點擊此處,共同探討創(chuàng)業(yè)新機遇!