(樂(lè)購(gòu)網(wǎng)專欄 作者：李學(xué)江)在本報(bào)告前面的11個(gè)小節(jié)里，我已經(jīng)把B2B行業(yè)網(wǎng)站的頁(yè)面設(shè)計(jì)分成一個(gè)一個(gè)的元素，從框架、用色、導(dǎo)航欄、標(biāo)題欄、內(nèi)容、廣告設(shè)計(jì)、按鈕、搜索框等各個(gè)方面做了系統(tǒng)的講解。這個(gè)小節(jié)，我將從整體的角度對(duì)B2B行業(yè)門(mén)戶網(wǎng)站首頁(yè)設(shè)計(jì)做一些講述，講解把不同的設(shè)計(jì)元素應(yīng)用到首頁(yè)時(shí)的注意事項(xiàng)。由于通用的設(shè)計(jì)方法在上面的11個(gè)小節(jié)里已經(jīng)講過(guò)了，在此就不再贅述了，各位讀者如果想知道每個(gè)元素更細(xì)節(jié)的設(shè)計(jì)方法，需要看本報(bào)告前面11個(gè)小節(jié)。
1 首頁(yè)整體風(fēng)格要符合用戶習(xí)慣
B2B行業(yè)網(wǎng)站首頁(yè)整體風(fēng)格很重要，用戶的訪問(wèn)，很大一部分是從這些頁(yè)面開(kāi)始的，即使用戶從搜索引擎搜索內(nèi)頁(yè)到網(wǎng)站，如果用戶對(duì)這個(gè)網(wǎng)站感興趣，想收藏和進(jìn)一步了解這個(gè)網(wǎng)站，大部分訪問(wèn)者都會(huì)訪問(wèn)網(wǎng)站的首頁(yè)。設(shè)計(jì)師要讓用戶的第一感覺(jué)就覺(jué)得這個(gè)網(wǎng)站與他經(jīng)常訪問(wèn)的優(yōu)秀網(wǎng)站差不多，當(dāng)然也要有自己的特點(diǎn)，但是不能差異太大，要遵守用戶習(xí)慣，這個(gè)在前面章節(jié)進(jìn)行過(guò)詳細(xì)的介紹。
設(shè)計(jì)師要去參考各個(gè)行業(yè)最好的B2B行業(yè)門(mén)戶網(wǎng)站，挑選20家左右。不必要從設(shè)計(jì)風(fēng)格上追求多大的標(biāo)新立異，越是新的東西，風(fēng)險(xiǎn)越大，也許一部分人很認(rèn)可，另外一部分人可能就不認(rèn)可，如果我們水平不夠好，求穩(wěn)還是最好的。作為首頁(yè)，更多表現(xiàn)設(shè)計(jì)水平的工作還是放在對(duì)內(nèi)容的排版布局上比較好，畢竟用戶來(lái)網(wǎng)站還是想找到更多有價(jià)值的內(nèi)容。
2 首頁(yè)用色分析及舉例說(shuō)明
B2B行業(yè)門(mén)戶網(wǎng)站首頁(yè)不適合用一種顏色做漸變，再配合黑色的文字。雖然不花哨，但是也顯得太單調(diào)了，這樣的用色方法可以作為企業(yè)商鋪、個(gè)人空間、專題頁(yè)面設(shè)計(jì)時(shí)的用色方案。首頁(yè)用色一般都是選擇一種顏色作為主色，再選擇1種對(duì)比色，結(jié)合萬(wàn)能搭配色：灰色和黑色來(lái)設(shè)計(jì)更好。比如阿里巴巴首頁(yè)就只用了3種顏色：主色調(diào)橙色、藍(lán)色，和萬(wàn)能搭配色：黑色。
圖(78) 阿里巴巴首頁(yè)截圖(截圖日期：2011-10-5)
圖(78)為阿里巴巴首頁(yè)截圖(截圖日期：2011-10-5)，從圖片上可以看出，阿里巴巴使用了藍(lán)色、橙色、黑色三種顏色。一般來(lái)講，無(wú)論我們使用什么顏色來(lái)做網(wǎng)頁(yè)，黑色是必須要用到的，以及和黑色同色系的灰色來(lái)搭配，基本成了所有商業(yè)門(mén)戶網(wǎng)站首頁(yè)設(shè)計(jì)的標(biāo)準(zhǔn)。
3 首頁(yè)標(biāo)題欄設(shè)計(jì)及排版
B2B行業(yè)網(wǎng)站首頁(yè)標(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è)門(mén)戶網(wǎng)站設(shè)計(jì)時(shí)最常用的。
一般是從上到下統(tǒng)一標(biāo)題欄的，比如首頁(yè)為左中右框架，那么左邊的標(biāo)題欄都是一樣的，如果中間變換結(jié)構(gòu)，標(biāo)題欄的樣式可以發(fā)生變化。正如我在《B2B行業(yè)門(mén)戶網(wǎng)站設(shè)計(jì)開(kāi)發(fā)實(shí)戰(zhàn)研究報(bào)告》第三章第7節(jié)講過(guò)的，同類型的內(nèi)容也可以統(tǒng)一標(biāo)題欄，這樣讓用戶看起來(lái)更加和諧統(tǒng)一。也可以不統(tǒng)一，但是注意不能太亂，不能太花哨。
4 首頁(yè)整體框架結(jié)構(gòu)及頁(yè)面寬度設(shè)計(jì)
B2B行業(yè)網(wǎng)站首頁(yè)常用通欄、左右、左中右3種框架結(jié)構(gòu)，使用左右或左中右框架的時(shí)候，上下寬度一般要保持一致，看起來(lái)才不會(huì)顯的太亂，左右標(biāo)題欄要對(duì)齊，由于多種原因使設(shè)計(jì)對(duì)不齊的時(shí)候，要和網(wǎng)站策劃者溝通，加點(diǎn)或減少點(diǎn)內(nèi)容，使標(biāo)題欄左右對(duì)齊。首頁(yè)的框架看起來(lái)盡量和諧、統(tǒng)一、規(guī)范，使整個(gè)網(wǎng)站看起來(lái)更嚴(yán)肅、高端一些。
框架的寬度目前還是以990PX左右為主，800PX的寬度已經(jīng)完全不考慮了，目前電腦寬屏越來(lái)越多。從2008年以后新出來(lái)的電腦，屏幕絕大部分都比1000PX要寬，所以以后可能會(huì)采取更寬的頁(yè)面，不過(guò)目前絕大部分的主流門(mén)戶還是使用990PX左右的寬度。程序也可以判斷用戶的屏幕，如果用戶使用的是寬屏，可以左右加2個(gè)對(duì)聯(lián)廣告。
5 首頁(yè)各種廣告排版及設(shè)計(jì)
B2B行業(yè)網(wǎng)站首頁(yè)是廣告最多的一個(gè)頁(yè)面，就象雜志一樣，大家都想做前彩頁(yè)和封面。所以首頁(yè)廣告的排版就顯的尤其重要，廣告排版不好，顯得雜亂無(wú)章。這個(gè)部分的內(nèi)容，我在《B2B行業(yè)門(mén)戶網(wǎng)站策劃實(shí)戰(zhàn)研究報(bào)告》第七章第7節(jié)：“網(wǎng)站廠商廣告策劃要點(diǎn)也做了詳細(xì)說(shuō)明”。如果廣告放的太少，用戶體驗(yàn)雖然很好，但是銷售人員又沒(méi)有廣告位賣(mài)，影響網(wǎng)站的收益。所以網(wǎng)站既需要有許多廣告位，又要保證用戶的體驗(yàn)，設(shè)計(jì)師就要遵守一些廣告排版設(shè)計(jì)的標(biāo)準(zhǔn)。
A 廣告的高度不要太高：一般首頁(yè)的廣告，絕大部分的廣告高度盡量在60PX及以下，本人認(rèn)為50PX是最好的，為未來(lái)考慮。當(dāng)廣告比較少的時(shí)候，可以用更長(zhǎng)的廣告來(lái)吸引眼球，如果開(kāi)始的時(shí)候高度太高了，廣告就放不了太多，會(huì)影響銷售額。少數(shù)幾個(gè)廣告的高度可以更高一些，但是不要超過(guò)75PX為最佳。一級(jí)欄目的大廣告可以更高一些，因?yàn)閺V告更少，更不值錢(qián)，但是不要超過(guò)90PX為最好。
B 盡量少采用Flash設(shè)計(jì)：由于一些B2B行業(yè)網(wǎng)站首頁(yè)廣告比較多，如果都采用Flash來(lái)設(shè)計(jì)，會(huì)使首頁(yè)打開(kāi)非常慢，因?yàn)镕lash很占資源。對(duì)于一些寬度比較長(zhǎng)的廣告，可以使用Flash來(lái)設(shè)計(jì)，但是首頁(yè)廣告中Flash廣告盡量在10個(gè)左右，更多的小廣告，使用GIF動(dòng)畫(huà)來(lái)設(shè)計(jì)更好，也可以放一個(gè)圖片。
C 廣告排版要整齊統(tǒng)一：由于首頁(yè)廣告可能比較多，所以要考慮好用戶體驗(yàn)，最好是把內(nèi)容和廣告分開(kāi)排，比如一排廣告，一排內(nèi)容。或者一排內(nèi)容，兩排廣告。這樣用戶不至于在廣告里找內(nèi)容，看起來(lái)也更加和諧統(tǒng)一，用戶想看廣告的時(shí)候，自己再去找。而且廣告與內(nèi)容間隔開(kāi)來(lái)放，還會(huì)讓廣告更有效果。
圖(79) 中國(guó)建材網(wǎng)首頁(yè)廣告排版
圖(79)為中國(guó)建材網(wǎng)首頁(yè)廣告，從圖上可以看出，廣告放在上下兩個(gè)內(nèi)容中間，放的兩排，高度60PX，長(zhǎng)度235PX，一排正好可以放4個(gè)，廣告既能放的比較多，也還能有效果，用戶在看上下兩個(gè)部分的內(nèi)容時(shí)，都可能看到客戶的廣告，為客戶廣告帶來(lái)更好的效果。
推薦閱讀
專訪趙涌在線羅文：電商寒冬對(duì)非標(biāo)產(chǎn)品無(wú)影響
導(dǎo)語(yǔ)： 2012 是否是世界末日 ? 小編不知道 ! 這個(gè)你需要去問(wèn)上帝 !!! 但小編知道， 2012 是眾多電商們的 “ 末日 ” 。耀點(diǎn) 100 、名品打折、品聚 …… 一個(gè)個(gè)接連倒閉。 如果說(shuō)， 2011 年下半年，電商在參演 “ 冰川>>>詳細(xì)閱讀
本文標(biāo)題：做好B2B行業(yè)網(wǎng)站首頁(yè)設(shè)計(jì)，建立良好第一印象
地址：http://www.sdlzkt.com/a/b2b/20120903/83006.html
網(wǎng)友點(diǎn)評(píng)
精彩導(dǎo)讀
科技快報(bào)
品牌展示