本文我將從整體的角度對(duì)B2B行業(yè)門戶網(wǎng)站首頁設(shè)計(jì)做一些講述，講解把不同的設(shè)計(jì)元素應(yīng)用到首頁時(shí)的注意事項(xiàng)。由于通用的設(shè)計(jì)方法在前面已經(jīng)講過了，在此就不再贅述了。

1 首頁整體風(fēng)格要符合用戶習(xí)慣

B2B行業(yè)網(wǎng)站首頁整體風(fēng)格很重要，用戶的訪問，很大一部分是從這些頁面開始的，即使用戶從搜索引擎搜索內(nèi)頁到網(wǎng)站，如果用戶對(duì)這個(gè)網(wǎng)站感興趣，想收藏和進(jìn)一步了解這個(gè)網(wǎng)站，大部分訪問者都會(huì)訪問網(wǎng)站的首頁。設(shè)計(jì)師要讓用戶的第一感覺就覺得這個(gè)網(wǎng)站與他經(jīng)常訪問的優(yōu)秀網(wǎng)站差不多，當(dāng)然也要有自己的特點(diǎn)，但是不能差異太大，要遵守用戶習(xí)慣，這個(gè)在前面章節(jié)進(jìn)行過詳細(xì)的介紹。

設(shè)計(jì)師要去參考各個(gè)行業(yè)最好的B2B行業(yè)門戶網(wǎng)站，挑選20家左右。不必要從設(shè)計(jì)風(fēng)格上追求多大的標(biāo)新立異，越是新的東西，風(fēng)險(xiǎn)越大，也許一部分人很認(rèn)可，另外一部分人可能就不認(rèn)可，如果我們水平不夠好，求穩(wěn)還是最好的。作為首頁，更多表現(xiàn)設(shè)計(jì)水平的工作還是放在對(duì)內(nèi)容的排版布局上比較好，畢竟用戶來網(wǎng)站還是想找到更多有價(jià)值的內(nèi)容。

2 首頁用色分析及舉例說明

B2B行業(yè)門戶網(wǎng)站首頁不適合用一種顏色做漸變，再配合黑色的文字。雖然不花哨，但是也顯得太單調(diào)了，這樣的用色方法可以作為企業(yè)商鋪、個(gè)人空間、專題頁面設(shè)計(jì)時(shí)的用色方案。首頁用色一般都是選擇一種顏色作為主色，再選擇1種對(duì)比色，結(jié)合萬能搭配色：灰色和黑色來設(shè)計(jì)更好。比如阿里巴巴首頁就只用了3種顏色：主色調(diào)橙色、藍(lán)色，和萬能搭配色：黑色。

圖（78） 阿里巴巴首頁截圖（截圖日期：2011-10-5）

圖（78）為阿里巴巴首頁截圖（截圖日期：2011-10-5），從圖片上可以看出，阿里巴巴使用了藍(lán)色、橙色、黑色三種顏色。一般來講，無論我們使用什么顏色來做網(wǎng)頁，黑色是必須要用到的，以及和黑色同色系的灰色來搭配，基本成了所有商業(yè)門戶網(wǎng)站首頁設(shè)計(jì)的標(biāo)準(zhǔn)。

3 首頁標(biāo)題欄設(shè)計(jì)及排版

B2B行業(yè)網(wǎng)站首頁標(biāo)題欄一般不要用太多種，一般做3-5種不同類型的標(biāo)題欄即可，太多了就會(huì)顯得太亂，根據(jù)實(shí)際情況，可以做一些細(xì)節(jié)上的改變。而且標(biāo)題欄背景圖片不能太突出，可以突出標(biāo)題欄上的文字，用戶只要看文字就知道這個(gè)模塊里體現(xiàn)的是那個(gè)方面的內(nèi)容，是否是自己需要的，這樣的設(shè)計(jì)方法是現(xiàn)在商業(yè)門戶網(wǎng)站設(shè)計(jì)時(shí)最常用的。

一般是從上到下統(tǒng)一標(biāo)題欄的，比如首頁為左中右框架，那么左邊的標(biāo)題欄都是一樣的，如果中間變換結(jié)構(gòu)，標(biāo)題欄的樣式可以發(fā)生變化。正如我在前面講過的，同類型的內(nèi)容也可以統(tǒng)一標(biāo)題欄，這樣讓用戶看起來更加和諧統(tǒng)一。也可以不統(tǒng)一，但是注意不能太亂，不能太花哨。

4 首頁整體框架結(jié)構(gòu)及頁面寬度設(shè)計(jì)

B2B行業(yè)網(wǎng)站首頁常用通欄、左右、左中右3種框架結(jié)構(gòu)，使用左右或左中右框架的時(shí)候，上下寬度一般要保持一致，看起來才不會(huì)顯的太亂，左右標(biāo)題欄要對(duì)齊，由于多種原因使設(shè)計(jì)對(duì)不齊的時(shí)候，要和網(wǎng)站策劃者溝通，加點(diǎn)或減少點(diǎn)內(nèi)容，使標(biāo)題欄左右對(duì)齊。首頁的框架看起來盡量和諧、統(tǒng)一、規(guī)范，使整個(gè)網(wǎng)站看起來更嚴(yán)肅、高端一些。

框架的寬度目前還是以990PX左右為主，800PX的寬度已經(jīng)完全不考慮了，目前電腦寬屏越來越多。從2008年以后新出來的電腦，屏幕絕大部分都比1000PX要寬，所以以后可能會(huì)采取更寬的頁面，不過目前絕大部分的主流門戶還是使用990PX左右的寬度。程序也可以判斷用戶的屏幕，如果用戶使用的是寬屏，可以左右加2個(gè)對(duì)聯(lián)廣告。

5 首頁各種廣告排版及設(shè)計(jì)

B2B行業(yè)網(wǎng)站首頁是廣告最多的一個(gè)頁面，就象雜志一樣，大家都想做前彩頁和封面。所以首頁廣告的排版就顯的尤其重要，廣告排版不好，顯得雜亂無章。這個(gè)部分的內(nèi)容，我在前面講的：“網(wǎng)站廠商廣告策劃要點(diǎn)也做了詳細(xì)說明”。如果廣告放的太少，用戶體驗(yàn)雖然很好，但是銷售人員又沒有廣告位賣，影響網(wǎng)站的收益。所以網(wǎng)站既需要有許多廣告位，又要保證用戶的體驗(yàn)，設(shè)計(jì)師就要遵守一些廣告排版設(shè)計(jì)的標(biāo)準(zhǔn)。

A 廣告的高度不要太高：一般首頁的廣告，絕大部分的廣告高度盡量在60PX及以下，本人認(rèn)為50PX是最好的，為未來考慮。當(dāng)廣告比較少的時(shí)候，可以用更長的廣告來吸引眼球，如果開始的時(shí)候高度太高了，廣告就放不了太多，會(huì)影響銷售額。少數(shù)幾個(gè)廣告的高度可以更高一些，但是不要超過75PX為最佳。一級(jí)欄目的大廣告可以更高一些，因?yàn)閺V告更少，更不值錢，但是不要超過90PX為最好。

B 盡量少采用Flash設(shè)計(jì)：由于一些B2B行業(yè)網(wǎng)站首頁廣告比較多，如果都采用Flash來設(shè)計(jì)，會(huì)使首頁打開非常慢，因?yàn)镕lash很占資源。對(duì)于一些寬度比較長的廣告，可以使用Flash來設(shè)計(jì)，但是首頁廣告中Flash廣告盡量在10個(gè)左右，更多的小廣告，使用GIF動(dòng)畫來設(shè)計(jì)更好，也可以放一個(gè)圖片。

C 廣告排版要整齊統(tǒng)一：由于首頁廣告可能比較多，所以要考慮好用戶體驗(yàn)，最好是把內(nèi)容和廣告分開排，比如一排廣告，一排內(nèi)容�；蛘咭慌艃�(nèi)容，兩排廣告。這樣用戶不至于在廣告里找內(nèi)容，看起來也更加和諧統(tǒng)一，用戶想看廣告的時(shí)候，自己再去找。而且廣告與內(nèi)容間隔開來放，還會(huì)讓廣告更有效果。

圖（79） 中國建材網(wǎng)首頁廣告排版

圖（79）為中國建材網(wǎng)首頁廣告，從圖上可以看出，廣告放在上下兩個(gè)內(nèi)容中間，放的兩排，高度60PX，長度235PX，一排正好可以放4個(gè)，廣告既能放的比較多，也還能有效果，用戶在看上下兩個(gè)部分的內(nèi)容時(shí)，都可能看到客戶的廣告，為客戶廣告帶來更好的效果。

B2B行業(yè)網(wǎng)站的首頁設(shè)計(jì)就講這么多，標(biāo)題欄、導(dǎo)航條、搜索框、按鈕、內(nèi)容鏈接等具體元素的設(shè)計(jì)方法在前面都講的很清楚了，是可以通用的，在此不再贅述。大家一定要明白，設(shè)計(jì)好B2B行業(yè)網(wǎng)站首頁非常重要，一級(jí)欄目及整個(gè)網(wǎng)站的大部分設(shè)計(jì)都要參考首頁，與首頁保持統(tǒng)一。設(shè)計(jì)師在真正的設(shè)計(jì)過程中至少要參考20個(gè)以上相似行業(yè)做的最好的網(wǎng)站，絕對(duì)不能閉門造車。

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

標(biāo)簽： B2B行業(yè)網(wǎng)站設(shè)計(jì) 網(wǎng)站首頁設(shè)計(jì) 用戶體驗(yàn) 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。