B2B行業(yè)網(wǎng)站由于具有B2B網(wǎng)站的特性和門戶網(wǎng)站的特性，決定了頁面設(shè)計與其他網(wǎng)站一些不同點。在寫作“B2B行業(yè)門戶網(wǎng)站頁面設(shè)計”章節(jié)之前，在此從理論上講下頁面設(shè)計及制作的基本要點，供大家參考，講的不對的，希望大家批評指正。

　　1 頁面用色、框架及整體風格應(yīng)該是嚴謹?shù)?，充滿商業(yè)氛圍的

　　由于B2B行業(yè)網(wǎng)站的內(nèi)容是嚴謹?shù)?、高端的，涉及行業(yè)的發(fā)展動態(tài)、各種技術(shù)交流、企業(yè)的營銷管理知識等信息，注定了內(nèi)容是嚴謹?shù)?、高端?由于其涉的是企業(yè)與企業(yè)之間的交易促進、信息交流與交友，所以在商業(yè)欄目更多的要體現(xiàn)出濃厚的商業(yè)氛圍，一切頁面設(shè)計都是為商人而考慮的。

　　A 頁面的用色要更嚴謹、忌諱非商業(yè)色彩

　　藍色、紅色、黃色是B2B行業(yè)網(wǎng)站的常用主色，其中常常是幾種顏色搭配使用，當然在使用過程中，常常是用這幾種顏色之外的顏色來搭配，或者這幾種顏色的漸變色。

　　由此衍生的顏色包括：深藍色、暗紅色、鮮紅色、橙色、橙黃色、灰色等等，在此不一一列舉，顏色的搭配由設(shè)計師自己來確定，我們最后來審核。

　　忌諱使用如下幾種顏色為主色調(diào)：

　　綠色：綠色更多的象征大自然、純潔、天然等含義，不符合B2B行業(yè)網(wǎng)站的嚴謹、商業(yè)兩個特點，可作為橙色、紅色等的搭配顏色，但是建議不能作為主色調(diào)。

　　粉紅色：這種顏色更多表達的是女性化、溫馨的氛圍，就算是以女性產(chǎn)品為特色的行業(yè)，也不能使用，作為搭配顏色也盡量少用，畢竟與用戶需求相差太遠。

　　黑色：黑色、灰色是頁面絕大部分文字可以采用的顏色，但是不能作為B2B行業(yè)網(wǎng)站的主色調(diào)。

　　B 頁面的標題欄和導(dǎo)航欄更多要方形的、規(guī)則的

　　作為企業(yè)網(wǎng)站、時尚類型的網(wǎng)站，或者為了表達時尚、活潑的主題，網(wǎng)站的設(shè)計可以比較活潑一些，多采用圓形或不規(guī)則的排版方式，但是作為B2B行業(yè)網(wǎng)站，就不能這樣設(shè)計。

　　每個部分要具有明顯的區(qū)分，每個區(qū)域都是規(guī)則的，使用的圖片、背景都是嚴謹?shù)?。不能把圖片斜放、用很大的橢圓形、用很大的圖標、用卡通的圖標、活潑的圖形等來設(shè)計網(wǎng)站的標題欄和導(dǎo)航欄。

　　C 整體風格應(yīng)嚴謹、充滿商業(yè)氛圍

　　網(wǎng)站的整體風格比用色、標題欄設(shè)計更加重要，某個搭配顏色比較活潑、時尚一些，并不會影響整體的風格。某個圖片不規(guī)則，或者網(wǎng)頁里的內(nèi)容圖片不規(guī)則，也不會對整體的感覺產(chǎn)生多大影響。整體的頁面風格不能花哨，要降低框架、背景等對閱讀內(nèi)容的影響，降低頁面的噪聲，整體風格要淡雅，讓訪問的人靜下心來思考。

　　2 內(nèi)容和功能決定表現(xiàn)形式和界面設(shè)計

　　頁面設(shè)計是沒有一個固定標準的，很多時候不能用美丑來判斷，也不能用是否有創(chuàng)意來判斷，而應(yīng)該綜合分析這個頁面的訪問者，頁面內(nèi)容、功能。有時候一點創(chuàng)意都沒有，和其他很多網(wǎng)站都是類似的，才是最好的，因為就應(yīng)該是這樣的。任何設(shè)計、功能都是為訪問者、使用者服務(wù)的，設(shè)計者的分析能力遠比創(chuàng)意來的重要。

　　舉例說明：

　　用戶注冊頁面如果頭部有很多導(dǎo)航條，左邊或右邊有許多精彩內(nèi)容推薦，設(shè)計很漂亮的圖標，反而是不對的，這個頁面的鏈接應(yīng)該越少越好，頁面越簡潔越好。引導(dǎo)用戶靜下心來填寫真實、豐富的內(nèi)容才是最關(guān)鍵的，不然用戶可能操作一半，覺得麻煩，還有更好的內(nèi)容吸引他，就不再填寫下去了。

　　任何一個頁面在設(shè)計之前，設(shè)計師都必須要靜下心來想想，這個頁面在表達什么內(nèi)容，或者說是一個什么樣的功能，根據(jù)內(nèi)容和功能再來確定應(yīng)該具有的表現(xiàn)形式。網(wǎng)站策劃時就要初步為設(shè)計師考慮頁面的表達形式，詳情請參考《B2B行業(yè)門戶網(wǎng)站策劃實戰(zhàn)研究報告》第四版第8章，對這個問題進行過系統(tǒng)化的闡述。

　　3 要多使用習慣用法，不要輕易使用一種新用法

　　所謂習慣用法，是用戶經(jīng)常使用的網(wǎng)站，或者非常知名的網(wǎng)站用法，往往就是用戶的習慣，因為知名網(wǎng)站的用戶最多，用戶也是最認可的。相同的功能，或者說不會因為網(wǎng)站的不同而表達方式發(fā)生變化的功能，就可以用習慣用法。

　　比如當我們來到一個新網(wǎng)站的時候，常常需要了解這個網(wǎng)站的介紹、主辦方聯(lián)系方式等信息，習慣就是在網(wǎng)站底部找這些信息，絕大部分的網(wǎng)站底部都有一排的鏈接來表達，如果你設(shè)計網(wǎng)站時，希望很創(chuàng)新，把這些鏈接不放在底部，用戶就會覺得不習慣。

　　對設(shè)計師來講，那怕這樣的熟悉讓你覺得相似而乏味，一點都沒有創(chuàng)新，你還是要這樣去用。但并不是說我們不需要創(chuàng)新，相反，在策劃、設(shè)計的工作中，需要大膽的創(chuàng)新，如果我們不打算使用一種習慣用法，策劃者、設(shè)計師必須確認新用法有如下兩個特點：

　　(1)同樣清楚，同樣不言而喻：只是換一個更好的表達方式，和原來本質(zhì)上沒有太大的改變，同樣讓用戶一眼就能看明白，不是完全憑空的創(chuàng)新，要比原來的更好才可以。

　　(2)帶來很大的價值，值得用戶付出努力來學習：這個功能雖然是以前大家沒有見過的，但是我們確認他能帶來質(zhì)的變化，而不是僅僅換個用戶不習慣的功能和界面。比如以前絕大多數(shù)的網(wǎng)站注冊都是一步搞定，現(xiàn)在如果注冊會員，有許多網(wǎng)站就分為二步或三步，為什么要這么設(shè)計呢?因為填寫的內(nèi)容太多，分成幾步用戶更能接受。

　　4 建立清楚的視覺層次，讓用戶能從視覺上區(qū)分

　　頁面具有層次感，一看就能明白那些是重點，那些是次要的，每個部分表達的內(nèi)容都非常的清晰，用戶能很快的找到自己重點關(guān)注的部分。與此相反的就是頁面很凌亂，結(jié)構(gòu)不清晰，用戶來到頁面不知道那些是重點。網(wǎng)絡(luò)用戶耐性很差，30秒之內(nèi)很難發(fā)現(xiàn)自己感興趣的內(nèi)容，可能就不找了，認為網(wǎng)站不是他感興趣的，或者干脆以后都不來了，但是實際上網(wǎng)站有他要的內(nèi)容或想使用的功能，只是由于頁面設(shè)計的不好，不能更快找到而已。

　　A 越重要的部分越突出

　　在一個頁面上，如果沒有重點，用戶就要花很多時間在所有一樣的內(nèi)容里去找他最喜歡的內(nèi)容和功能，對用戶不夠友好。越是用戶經(jīng)常使用、經(jīng)常閱讀的內(nèi)容，越要放在最重要的位置，用戶會用最短的時間獲得最關(guān)注的內(nèi)容和功能，才能吸引他留下來。

　　在頁面設(shè)計的時候，突出重點的內(nèi)容有許多的方法，常用的有：字體加粗、字號變大、字的顏色和周圍的顏色不一樣、文字前配上醒目的圖標、用圖片或顏色作為背景等等，在《B2B行業(yè)門戶網(wǎng)站設(shè)計開發(fā)實戰(zhàn)研究報告》第三章做了重點闡述。

　　B 功能或內(nèi)容相關(guān)的部分在視覺上也要相關(guān)

　　在功能或內(nèi)容相關(guān)的部分視覺也要相關(guān)，因為用戶掃描的時候，視覺相關(guān)的部分就會作為一起掃描，否則容易忽略掉，同時會顯得凌亂。常用的方法是把相關(guān)的功能或內(nèi)容用同樣的框、同樣的背景、同樣的圖標來表達。

　　C 功能或內(nèi)容在邏輯上包含的部分在視覺上也要進行嵌套

　　所謂邏輯上包含，就是從邏輯的角度推理，他應(yīng)該是屬于包含的，比如：B2B行業(yè)網(wǎng)站的上游原料和設(shè)備，如果我們把這2個部分放在一個頁面，就應(yīng)該把設(shè)備和原料分開來設(shè)計，但是原料和設(shè)備模塊本身還會包括許多不同的內(nèi)容，為了讓想采購的企業(yè)很快速的找到自己想要的產(chǎn)品，就要在設(shè)備模塊和原料模塊內(nèi)部再進行嵌套。

　　5 訪問者不是在閱讀，而是在掃描

　　《別讓我思考》一書講：“訪問者不是在閱讀，而是在掃描，是極少數(shù)幾個得到了證明的事實之一，人們會花極少的時間來閱讀大部分的頁面，相反，我們只是掃描一下(或者匆匆掠過)網(wǎng)頁，尋找能吸引我們注意力的文字或詞語。”對于導(dǎo)航頁、首頁等，用戶會更多的用掃描來獲得自己感興趣的內(nèi)容。對于內(nèi)容最終頁，用戶在閱讀前也會先掃描一下大概內(nèi)容，對于太長的文章或內(nèi)容，就要看下是否有小標題，如果有就要先掃描小標題，看自己是否感興趣，感興趣了才會繼續(xù)閱讀下去。用戶一般會先掃描如下內(nèi)容：

　　A、與我們現(xiàn)在手頭任務(wù)有關(guān)的，急需想知道的。

　　B、我們當前或接下來的個人興趣，比如：想采購一批機器、想找工作;

　　C、還有我們腦袋里一些根深蒂固的詞，例如“免費”、“打折”、“美女”等。B2B行業(yè)網(wǎng)站用戶都會感興趣的：例如行業(yè)最爆炸性的新聞、知名公司老總動態(tài)、最新求購等。

　　當我們在策劃、設(shè)計網(wǎng)站的頁面時，在編輯網(wǎng)站內(nèi)容時，要時刻謹記用戶不是在閱讀，而是在掃描，將這個思想貫徹地執(zhí)行下去。會指導(dǎo)很多正確的策劃和設(shè)計，比如：重要的內(nèi)容要大標題、要加粗;每個模塊盡量能圖文并茂，讓讀者掃描的時候看到圖片，更容易引起興趣;對廣告文案等要多加總結(jié)、提煉，吸引他們感興趣;編輯在寫文章、內(nèi)容編輯的時候，對于超過800字的文章，最好能加上小標題，讓用戶可以預(yù)先掃描是否感興趣等。

　　6 閉門造車者做出的東西，是遠遠趕不上綜合借鑒者的

　　網(wǎng)頁技術(shù)更新很快，一個網(wǎng)站的界面設(shè)計壽命僅僅2-3年而已。不管是垃圾還是精品，都沒有所謂的經(jīng)典。經(jīng)典只存在于是那個首次成功創(chuàng)新性的應(yīng)用。一個閉門造車者做出的東西，是遠遠趕不上綜合借鑒者的。網(wǎng)頁設(shè)計不同于其他藝術(shù)，在模仿加創(chuàng)新的網(wǎng)頁設(shè)計領(lǐng)域當中，即便是完全自己設(shè)計的，也是沿用了人們已經(jīng)認同的大部分用戶習慣，而且這種沿襲的痕跡有時非常的明顯!還有那個設(shè)計者敢腆著臉說，這都是我自己的原創(chuàng)設(shè)計?對于業(yè)界來說，經(jīng)典只是個理念和象征!

　　對于B2B行業(yè)網(wǎng)站的設(shè)計，要多參考，多模仿，找出幾十個同類型的最優(yōu)秀網(wǎng)站來參考，分析別的網(wǎng)站為什么要這么設(shè)計，取其精華，去其糟粕，聯(lián)系自己設(shè)計網(wǎng)站的特點加以改進或修改，往往這樣的設(shè)計才是最成功的設(shè)計。因為最成功的網(wǎng)站都是經(jīng)過多方研究的，他們不僅僅模仿，也有屬于自己的創(chuàng)新，大部分也經(jīng)得起用戶的考驗，符合絕大部分用戶的需求。

　　7 B2B行業(yè)網(wǎng)站大部分的界面應(yīng)弱化，強調(diào)功能和內(nèi)容

　　B2B行業(yè)門戶網(wǎng)站不同于企業(yè)網(wǎng)站，它存在的最大價值在于給用戶提供一個平臺，提供更多有價值的內(nèi)容，界面存在的價值在于輔助、引導(dǎo)用戶更好的去使用這個平臺，發(fā)現(xiàn)里面自己感興趣的內(nèi)容，挑選并閱讀，獲得知識。并不是要濃墨重彩的使用大量的顏色和圖標來表達頁面的主題，這個是一些設(shè)計B2B行業(yè)網(wǎng)站的人常犯的錯誤，尤其是初學者。

　　做一個企業(yè)網(wǎng)站，我們?yōu)槭裁匆褂么蟮膱D片、圖標，大面積的顏色去渲染這個頁面呢?因為每個企業(yè)都有其自己獨特的產(chǎn)品與企業(yè)文化，來這個頁面的讀者都是想了解這個企業(yè)或產(chǎn)品的，我們需要用設(shè)計向訪問者很直觀的傳遞企業(yè)信息，尤其是很多品牌公司網(wǎng)站。B2B行業(yè)網(wǎng)站的專題設(shè)計、收費服務(wù)介紹等頁面與建設(shè)企業(yè)網(wǎng)站一樣，需要用大圖片、小圖標、大面積的顏色來襯托頁面的主題。

　　8 頁面要模塊化、可修改性要強

　　模塊化不僅可以提高重用性，也能統(tǒng)一網(wǎng)站風格，還可以降低程序開發(fā)的強度。模塊化的最大好處就是統(tǒng)一網(wǎng)站風格，讓用戶無論在網(wǎng)站的那個頁面，也能明白還是在這個網(wǎng)站，形成了很強的品牌辨識度。時刻記住，做網(wǎng)站的最終目標，就是做品牌，必須要作為設(shè)計的指導(dǎo)思想。關(guān)于如何打造B2B行業(yè)網(wǎng)站的品牌，在《B2B行業(yè)門戶網(wǎng)站推廣實戰(zhàn)秘籍》里做了系統(tǒng)的說明。

　　無論是架構(gòu)、模塊或圖片，都要考慮其可修改性。舉個簡單的例子：按鈕，很多人喜歡制作圖片，N個按鈕就是N張圖片。如果只做3-5類按鈕的背景圖片，在網(wǎng)頁代碼里打上文字，那么修改起來就簡單了，讓程序/網(wǎng)頁制作者自己改字就可以了。然而網(wǎng)頁顯示的字體是帶有鋸齒的，一般既能清晰又保證美觀的字體字號有幾類：“宋體 12px | 宋體 12px 粗體 | 宋體 14px | 宋體 14px 粗體 | 黑體 20px | verdana 9px | Arial Black 12px+|”等等。

　　關(guān)于B2B行業(yè)網(wǎng)站頁面設(shè)計基礎(chǔ)就講這8點，這將作為設(shè)計B2B行業(yè)門戶網(wǎng)站的指導(dǎo)思想，也是順利看完本章節(jié)的基礎(chǔ)知識。也許還有更多的設(shè)計基礎(chǔ)知識，待大家自己在工作中去總結(jié)和提升。作為一個做產(chǎn)品策劃的非設(shè)計工作者，對設(shè)計談的8點看法，希望廣大設(shè)計者和產(chǎn)品策劃朋友對李學江拍磚。

以上就是整理互聯(lián)網(wǎng)內(nèi)容給大家?guī)淼姆治鼋榻B，如果大家想了解更多相關(guān)內(nèi)容，請持續(xù)關(guān)注本站，本站小編將在第一時間為大家?guī)砀玫慕?jīng)典內(nèi)容。更多精彩內(nèi)容，盡在jb51網(wǎng)站運營欄目！