B2B行業(yè)網(wǎng)站由于具有B2B網(wǎng)站的特性和門戶網(wǎng)站的特性，決議了頁面設(shè)計(jì)與其他網(wǎng)站一些不同點(diǎn)。在寫作“B2B行業(yè)門戶網(wǎng)站頁面設(shè)計(jì)”章節(jié)之前，在此從理論上講下頁面設(shè)計(jì)及制造的基本要點(diǎn)。
1 頁面用色、框架及整體作風(fēng)應(yīng)該是嚴(yán)謹(jǐn)?shù)?，充溢商業(yè)氛圍的
由于B2B行業(yè)網(wǎng)站的內(nèi)容是嚴(yán)謹(jǐn)?shù)摹⒏叨说?，觸及行業(yè)的展開動(dòng)態(tài)、各種技術(shù)交流、企業(yè)的營銷管理學(xué)問等信息，必定了內(nèi)容是嚴(yán)謹(jǐn)?shù)?、高端的；由于其涉的是企業(yè)與企業(yè)之間的買賣促進(jìn)、信息交流與交友，所以在商業(yè)欄目更多的要表現(xiàn)出濃厚的商業(yè)氛圍，一切頁面設(shè)計(jì)都是為商人而思索的。
A頁面的用色要更嚴(yán)謹(jǐn)、忌諱非商業(yè)顏色
藍(lán)色、紅色、黃色是B2B行業(yè)網(wǎng)站的常用主色，其中常常是幾種顏色搭配運(yùn)用，當(dāng)然在運(yùn)用過程中，常常是用這幾種顏色之外的顏色來搭配，或者這幾種顏色的突變色。
由此衍生的顏色包括：深藍(lán)色、暗紅色、鮮紅色、橙色、橙黃色、灰色等等，在此不逐一羅列，顏色的搭配由設(shè)計(jì)師自己來肯定，我們最后來審核。
忌諱運(yùn)用如下幾種顏色為主顏色：
綠色：綠色更多的意味大自然、純真、自然等含義，不契合B2B行業(yè)網(wǎng)站的嚴(yán)謹(jǐn)、商業(yè)兩個(gè)特性，可作為橙色、紅色等的搭配顏色，但是建議不能作為主顏色。
粉紅色：這種顏色更多表達(dá)的是女性化、溫馨的氛圍，就算是以女性產(chǎn)品為特征的行業(yè)，也不能運(yùn)用，作為搭配顏色也盡量少用，畢竟與用戶需求相差太遠(yuǎn)。
黑色：黑色、灰色是頁面絕大部分文字可以采用的顏色，但是不能作為B2B行業(yè)網(wǎng)站的主顏色。
B頁面的標(biāo)題欄和導(dǎo)航欄更多要方形的、規(guī)則的
作為企業(yè)網(wǎng)站、時(shí)興類型的網(wǎng)站，或者為了表達(dá)時(shí)興、生動(dòng)的主題，網(wǎng)站的設(shè)計(jì)可以比較生動(dòng)一些，多采用圓形或不規(guī)則的排版方式，但是作為B2B行業(yè)網(wǎng)站，就不能這樣設(shè)計(jì)。
每個(gè)部分要具有明顯的區(qū)分，每個(gè)區(qū)域都是規(guī)則的，運(yùn)用的圖片、背景都是嚴(yán)謹(jǐn)?shù)?。不能把圖片斜放、用很大的橢圓形、用很大的圖標(biāo)、用卡通的圖標(biāo)、生動(dòng)的圖形等來設(shè)計(jì)網(wǎng)站的標(biāo)題欄和導(dǎo)航欄。
C整體作風(fēng)應(yīng)嚴(yán)謹(jǐn)、充溢商業(yè)氛圍
網(wǎng)站的整體作風(fēng)比用色、標(biāo)題欄設(shè)計(jì)愈加重要，某個(gè)搭配顏色比較生動(dòng)、時(shí)興一些，并不會(huì)影響整體的作風(fēng)。某個(gè)圖片不規(guī)則，或者網(wǎng)頁里的內(nèi)容圖片不規(guī)則，也不會(huì)對(duì)整體的覺得產(chǎn)生多大影響。整體的頁面作風(fēng)不能花哨，要降低框架、背景等對(duì)閱讀內(nèi)容的影響，降低頁面的噪聲，整體作風(fēng)要淡雅，讓訪問的人靜下心來思索。
2內(nèi)容和功用決議表現(xiàn)方式和界面設(shè)計(jì)
頁面設(shè)計(jì)是沒有一個(gè)固定標(biāo)準(zhǔn)的，很多時(shí)分不能用美丑來判別，也不能用能否有創(chuàng)意來判別，而應(yīng)該綜合分析這個(gè)頁面的訪問者，頁面內(nèi)容、功用。有時(shí)分一點(diǎn)創(chuàng)意都沒有，和其他很多網(wǎng)站都是類似的，才是最好的，由于就應(yīng)該是這樣的。任何設(shè)計(jì)、功用都是為訪問者、運(yùn)用者效勞的，設(shè)計(jì)者的分析才干遠(yuǎn)比創(chuàng)意來的重要。
舉例說明：
用戶注冊(cè)頁面假定頭部有很多導(dǎo)航條，左邊或右邊有許多精彩內(nèi)容引薦，設(shè)計(jì)很漂亮的圖標(biāo)，反而是不對(duì)的，這個(gè)頁面的鏈接應(yīng)該越少越好，頁面越簡(jiǎn)約越好。引導(dǎo)用戶靜下心來填寫真實(shí)、豐厚的內(nèi)容才是最關(guān)鍵的，不然用戶可能操作一半，覺得省事，還有更好的內(nèi)容吸收他，就不再填寫下去了。
任何一個(gè)頁面在設(shè)計(jì)之前，設(shè)計(jì)師都必需求靜下心來想想，這個(gè)頁面在表達(dá)什么內(nèi)容，或者說是一個(gè)什么樣的功用，根據(jù)內(nèi)容和功用再來肯定應(yīng)該具有的表現(xiàn)方式。網(wǎng)站謀劃時(shí)就要初步為設(shè)計(jì)師思索頁面的表達(dá)方式，詳情請(qǐng)參考《B2B行業(yè)門戶網(wǎng)站謀劃實(shí)戰(zhàn)研討報(bào)告》第四版第8章，對(duì)這個(gè)問題中止過系統(tǒng)化的闡述。
3要多運(yùn)用習(xí)氣用法，不要隨意運(yùn)用一種新用法
所謂習(xí)氣用法，是用戶經(jīng)常運(yùn)用的網(wǎng)站，或者非常知名的網(wǎng)站用法，常常就是用戶的習(xí)氣，由于知名網(wǎng)站的用戶最多，用戶也是最認(rèn)可的。相同的功用，或者說不會(huì)由于網(wǎng)站的不同而表達(dá)方式發(fā)作變化的功用，就可以用習(xí)氣用法。
比如當(dāng)我們來到一個(gè)新網(wǎng)站的時(shí)分，常常需求了解這個(gè)網(wǎng)站的引見、主辦方聯(lián)絡(luò)方式等信息，習(xí)氣就是在網(wǎng)站底部找這些信息，絕大部分的網(wǎng)站底部都有一排的鏈接來表達(dá)，假定你設(shè)計(jì)網(wǎng)站時(shí)，希望很創(chuàng)新，把這些鏈接不放在底部，用戶就會(huì)覺得不習(xí)氣。
對(duì)設(shè)計(jì)師來講，那怕這樣的熟習(xí)讓你覺得相似而乏味，一點(diǎn)都沒有創(chuàng)新，你還是要這樣去用。但并不是說我們不需求創(chuàng)新，相反，在謀劃、設(shè)計(jì)的工作中，需求大膽的創(chuàng)新，假定我們不打算運(yùn)用一種習(xí)氣用法，謀劃者、設(shè)計(jì)師必需確認(rèn)新用法有如下兩個(gè)特性：
?。?）同樣清楚，同樣顯而易見：只是換一個(gè)更好的表達(dá)方式，和原來本質(zhì)上沒有太大的改動(dòng)，同樣讓用戶一眼就能看明白，不是完好憑空的創(chuàng)新，要比原來的更好才干夠。
（2）帶來很大的價(jià)值，值得用戶付出努力來學(xué)習(xí)：這個(gè)功用固然是以前大家沒有見過的，但是我們確認(rèn)他能帶來質(zhì)的變化，而不是僅僅換個(gè)用戶不習(xí)氣的功用和界面。比如以前絕大多數(shù)的網(wǎng)站注冊(cè)都是一步搞定，往常假定注冊(cè)會(huì)員，有許多網(wǎng)站就分為二步或三步，為什么要這么設(shè)計(jì)呢？由于填寫的內(nèi)容太多，分紅幾步用戶更能接受。
4樹立清楚的視覺層次，讓用戶能從視覺上區(qū)分
頁面具有層次感，一看就能明白那些是重點(diǎn)，那些是次要的，每個(gè)部分表達(dá)的內(nèi)容都非常的明晰，用戶能很快的找到自己重點(diǎn)關(guān)注的部分。與此相反的就是頁面很紊亂，結(jié)構(gòu)不明晰，用戶來到頁面不知道那些是重點(diǎn)。網(wǎng)絡(luò)用戶耐性很差，30秒之內(nèi)很難發(fā)現(xiàn)自己感興味的內(nèi)容，可能就不找了，以為網(wǎng)站不是他感興味的，或者痛快以后都不來了，但是理論上網(wǎng)站有他要的內(nèi)容或想運(yùn)用的功用，只是由于頁面設(shè)計(jì)的不好，不能更快找到而已。
A越重要的部分越突出
在一個(gè)頁面上，假定沒有重點(diǎn)，用戶就要花很多時(shí)間在一切一樣的內(nèi)容里去找他最喜歡的內(nèi)容和功用，對(duì)用戶不夠友好。越是用戶經(jīng)常運(yùn)用、經(jīng)常閱讀的內(nèi)容，越要放在最重要的位置，用戶會(huì)用最短的時(shí)間獲得最關(guān)注的內(nèi)容和功用，才干吸收他留下來。
在頁面設(shè)計(jì)的時(shí)分，突出重點(diǎn)的內(nèi)容有許多的方法，常用的有：字體加粗、字號(hào)變大、字的顏色和周圍的顏色不一樣、文字前配上醒目的圖標(biāo)、用圖片或顏色作為背景等等。
B功用或內(nèi)容相關(guān)的部分在視覺上也要相關(guān)
在功用或內(nèi)容相關(guān)的部分視覺也要相關(guān)，由于用戶掃描的時(shí)分，視覺相關(guān)的部分就會(huì)作為一同掃描，否則容易忽略掉，同時(shí)會(huì)顯得紊亂。常用的方法是把相關(guān)的功用或內(nèi)容用同樣的框、同樣的背景、同樣的圖標(biāo)來表達(dá)。
C功用或內(nèi)容在邏輯上包含的部分在視覺上也要中止嵌套
所謂邏輯上包含，就是從邏輯的角度推理，他應(yīng)該是屬于包含的，比如：B2B行業(yè)網(wǎng)站的上游原料和設(shè)備，假定我們把這2個(gè)部分放在一個(gè)頁面，就應(yīng)該把設(shè)備和原料分開來設(shè)計(jì)，但是原料和設(shè)備模塊本身還會(huì)包括許多不同的內(nèi)容，為了讓想采購的企業(yè)很快速的找到自己想要的產(chǎn)品，就要在設(shè)備模塊和原料模塊內(nèi)部再中止嵌套。
5訪問者不是在閱讀，而是在掃描
訪問者不是在閱讀，而是在掃描，是極少數(shù)幾個(gè)得到了證明的事實(shí)之一，人們會(huì)花極少的時(shí)間來閱讀大部分的頁面，相反，我們只是掃描一下（或者匆匆擦過）網(wǎng)頁，尋覓能吸收我們留意力的文字或詞語。”關(guān)于導(dǎo)航頁、首頁等，用戶會(huì)更多的用掃描來獲得自己感興味的內(nèi)容。關(guān)于內(nèi)容最終頁，用戶在閱讀前也會(huì)先掃描一下大約內(nèi)容，關(guān)于太長的文章或內(nèi)容，就要看下能否有小標(biāo)題，假定有就要先掃描小標(biāo)題，看自己能否感興味，感興味了才會(huì)繼續(xù)閱讀下去。用戶普通會(huì)先掃描如下內(nèi)容：
A、與我們往常手頭任務(wù)有關(guān)的，急需想知道的。
B、我們當(dāng)前或接下來的個(gè)人興味，比如：想采購一批機(jī)器、想找工作；
C、還有我們腦袋里一些根深蒂固的詞，例如“免費(fèi)”、“打折”、“美女”等。B2B行業(yè)網(wǎng)站用戶都會(huì)感興味的：例如行業(yè)最爆炸性的新聞、知名公司老總動(dòng)態(tài)、最新求購等。
當(dāng)我們?cè)谥\劃、設(shè)計(jì)網(wǎng)站的頁面時(shí)，在編輯網(wǎng)站內(nèi)容時(shí)，要時(shí)辰謹(jǐn)記用戶不是在閱讀，而是在掃描，將這個(gè)思想貫徹地執(zhí)行下去。會(huì)指導(dǎo)很多正確的謀劃和設(shè)計(jì)，比如：重要的內(nèi)容要大標(biāo)題、要加粗；每個(gè)模塊盡量能圖文并茂，讓讀者掃描的時(shí)分看到圖片，更容易惹起興味；對(duì)廣告文案等要多加總結(jié)、提煉，吸收他們感興味；編輯在寫文章、內(nèi)容編輯的時(shí)分，關(guān)于超越800字的文章，最好能加上小標(biāo)題，讓用戶可以預(yù)先掃描能否感興味等。
6閉門造車者做出的東西，是遠(yuǎn)遠(yuǎn)趕不上綜合自創(chuàng)者的
網(wǎng)頁技術(shù)更新很快，一個(gè)網(wǎng)站的界面設(shè)計(jì)壽命僅僅2-3年而已。不管是渣滓還是精品，都沒有所謂的經(jīng)典。經(jīng)典只存在于是那個(gè)初次成功創(chuàng)新性的應(yīng)用。一個(gè)閉門造車者做出的東西，是遠(yuǎn)遠(yuǎn)趕不上綜合自創(chuàng)者的。網(wǎng)頁設(shè)計(jì)不同于其他藝術(shù)，在模仿加創(chuàng)新的網(wǎng)頁設(shè)計(jì)范疇當(dāng)中，即便是完好自己設(shè)計(jì)的，也是沿用了人們?cè)?jīng)認(rèn)同的大部分用戶習(xí)氣，而且這種因循的痕跡有時(shí)非常的明顯！
關(guān)于B2B行業(yè)網(wǎng)站的設(shè)計(jì)，要多參考，多模仿，找出幾十個(gè)同類型的最優(yōu)秀網(wǎng)站來參考，分析別的網(wǎng)站為什么要這么設(shè)計(jì)，取其精華，去其糟粕，聯(lián)絡(luò)自己設(shè)計(jì)網(wǎng)站的特性加以改進(jìn)或修正，常常這樣的設(shè)計(jì)才是最成功的設(shè)計(jì)。由于最成功的網(wǎng)站都是經(jīng)過多方研討的，他們不只僅模仿，也有屬于自己的創(chuàng)新，大部分也經(jīng)得起用戶的考驗(yàn)，契合絕大部分用戶的需求。
7B2B行業(yè)網(wǎng)站大部分的界面應(yīng)弱化，強(qiáng)調(diào)功用和內(nèi)容
B2B行業(yè)門戶網(wǎng)站不同于企業(yè)網(wǎng)站，它存在的最大價(jià)值在于給用戶提供一個(gè)平臺(tái)，提供更多有價(jià)值的內(nèi)容，界面存在的價(jià)值在于輔助、引導(dǎo)用戶更好的去運(yùn)用這個(gè)平臺(tái)，發(fā)現(xiàn)里面自己感興味的內(nèi)容，選擇并閱讀，獲得學(xué)問。并不是要濃墨重彩的運(yùn)用大量的顏色和圖標(biāo)來表達(dá)頁面的主題，這個(gè)是一些設(shè)計(jì)B2B行業(yè)網(wǎng)站的人常犯的錯(cuò)誤，特別是初學(xué)者。
做一個(gè)企業(yè)網(wǎng)站，我們?yōu)槭裁匆\(yùn)用大的圖片、圖標(biāo)，大面積的顏色去渲染這個(gè)頁面呢？由于每個(gè)企業(yè)都有其自己共同的產(chǎn)品與企業(yè)文化，來這個(gè)頁面的讀者都是想了解這個(gè)企業(yè)或產(chǎn)品的，我們需求用設(shè)計(jì)向訪問者很直觀的傳送企業(yè)信息，特別是很多品牌公司網(wǎng)站。B2B行業(yè)網(wǎng)站的專題設(shè)計(jì)、收費(fèi)效勞引見等頁面與樹立企業(yè)網(wǎng)站一樣，需求用大圖片、小圖標(biāo)、大面積的顏色來襯托頁面的主題。
8頁面要模塊化、可修正性要強(qiáng)
模塊化不只可以進(jìn)步重用性，也能統(tǒng)一網(wǎng)站作風(fēng)，還可以降低程序開發(fā)的強(qiáng)度。模塊化的最大好處就是統(tǒng)一網(wǎng)站作風(fēng)，讓用戶無論在網(wǎng)站的那個(gè)頁面，也能明白還是在這個(gè)網(wǎng)站，構(gòu)成了很強(qiáng)的品牌辨識(shí)度。做網(wǎng)站的最終目的，就是做品牌，必需求作為設(shè)計(jì)的指導(dǎo)思想。
無論是架構(gòu)、模塊或圖片，都要思索其可修正性。舉個(gè)簡(jiǎn)單的例子：按鈕，很多人喜歡制造圖片，N個(gè)按鈕就是N張圖片。假定只做3-5類按鈕的背景圖片，在網(wǎng)頁代碼里打上文字，那么修正起來就簡(jiǎn)單了，讓程序/網(wǎng)頁制造者自己改字就可以了。
更多精彩請(qǐng)關(guān)注：http://www.webleydesigns.com
