更多精彩內容參見：https://liuhuapeng.jiangshi.org

B2B行業門戶網站由于具有B2B網站的特性和門戶網站的特性，決定了頁面設計及制作具有與其他網站很多的不同點，當然還是有許多的相同點。在寫這個篇章之前，我覺得有必要從理論上和大家講下頁面設計及制作的基本要點。這些基本原則將指導大家更好的閱讀和理解這個章節的所有內容。

1、頁面用色、框架及整體風格應該是嚴謹的，充滿商業氛圍的

由于B2B行業網站涉及行業的發展動態、技術知識、營銷管理知識、產品信息等，注定了內容是嚴謹的、高端的;由于涉及的是企業與企業之間的交易促進、信息交流與交友，所以在商業欄目更多的要體現出濃厚的商業氛圍，一切頁面設計都是為商人而考慮的。

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

藍色、紅色、黃色是B2B行業網站的常用主色，其中常常是幾種顏色搭配使用，當然在使用過程中，常常是用這幾種顏色之外的顏色來搭配，或者這幾種顏色的漸變色。由此衍生的顏色包括：深藍色、暗紅色、鮮紅色、橙色、橙黃色、灰色等等，在此不一一列舉，顏色的搭配由設計師自己來確定，我們最后來審核即可，關鍵要的就是一個頁面整體效果。

B、頁面標題欄和導航欄更多要方形的、規則的

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

每個部分要具有明顯的區分，每個區域都是規則的，使用的圖片、背景都是嚴謹的。不能把圖片斜放、用很大的橢圓形、用很大的圖標、用卡通的圖標、活潑的圖形等來設計網站的標題欄和導航欄。

C 、整體風格應嚴謹、充滿商業氛圍

網站的整體風格比用色、標題欄設計更加重要，某個搭配顏色比較活潑、時尚一些，并不會影響整體的風格。某個圖片不規則，或者網頁里的內容圖片不規則，也不會對整體的感覺產生多大的影響。B2B行業網站的首頁、二級欄目首頁、重要的專題頁，都要先做效果圖，保證整體的效果后，才能開始做頁面設計，不能一開始就做頁面。整體的頁面風格不能花哨，要降低框架、背景等對閱讀內容的影響，專業的說法叫降低頁面的噪聲，整體風格要淡雅，讓訪問的人靜下心來思考。同時B2B行業網站不是面對普通消費者的，而是面對行業從業者，是為了大家獲得行業知識與商業信息而出現的，提供的是工作和商業上的幫助，需要嚴謹。

2、內容和功能決定表現形式和界面設計

頁面設計是沒有一個固定標準的，很多時候我們不能用美丑來判斷，也不能用是否有創意來判斷，而應該綜合分析這個頁面的訪問者，頁面的內容、功能。有時候一點創意都沒有，和其他很多網站都是類似的，才是最好的，因為就應該是這樣的。看到過一篇講設計的文章說：“創意是可恥的，分析能力遠比創意來的重要”，和我這個小標題所要表達的內涵是一樣的。設計師常常希望自己的網站是最有創意的，最漂亮的;程序員希望自己開發的網站功能是最強的，最易用的;但是任何設計、功能都是為訪問者、使用者服務的，設計者的分析能力遠比創意來的重要。

綜上所述，任何一個頁面在設計之前，設計師都必須要靜下心來想想，這個頁面在表達什么內容，或者說是一個什么樣的功能，根據內容和功能再來確定應該具有的表現形式。否則設計的頁面與網站策劃者所想要達到目的的有時會相差很遠，甚至方向都是不對的。同時設計師還要具有一定的商業思維，將自己的設計變的更加商業化。關于在策劃的時候就要初步的為設計師考慮頁面的表達形式，我在《B2B行業門戶網站策劃實戰研究報告》里對這個問題進行過系統的闡述，策劃是設計的基礎。

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

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

比如網站的注冊，幾乎所有具有會員功能的網站都有這個功能，用戶點擊一個注冊的鏈接，在新窗口里填寫自己的登錄信息、聯系方式等，用戶注冊過非常多的網站，如果你的頁面做的和其他易用的知名網站很多不一樣，用戶就會不習慣。比如當我們來到一個新網站的時候，常常需要了解這個網站的介紹、主辦方聯系方式等信息，習慣就是在網站底部找這些信息，絕大部分的網站底部都有一排的鏈接來表達，如果你設計個網站，希望很創新，把這些鏈接不放在底部，用戶就會覺得不習慣，因為你打破了習慣用法。

對設計師來講，那怕有時這樣的熟悉讓你覺得相似而乏味，一點都沒有創新，你還是要這樣去用。比如絕大部分的網站都是把Logo放在頁面左上角，如果你非要放在右上角，用戶就不能很快的明白這是一個什么樣的網站，因為他習慣了左邊看網站Logo，也許右邊根本就不怎么注意到。

但是并不是說，我們不需要創新，相反，在策劃、設計的工作中，我們需要大膽的創新，如果我們不打算使用一種習慣用法，策劃者、設計師必須確認新用法有如下兩個特點：

(1)同樣清楚，同樣不言而喻：只是換一個更好的表達方式，和原來的本質上沒有太大的改變，同樣讓用戶一眼就能看明白，也就是說我們有所創新，但還是建立在習慣用法的基礎上，不是完全憑空創新。

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

4、建立清楚的視覺層次，讓用戶能從視覺上區分

頁面具有層次感，一看就能明白那些是重點，那些是次要的，每個部分表達的內容都非常的清晰，用戶能很快的找到自己重點關注的部分。與此相反的就是頁面很凌亂，結構不清晰，用戶來到頁面不知道那些是重點，1分鐘之內很難發現自己感興趣的內容，網絡上的用戶耐性很差，不能很快找到就不找了，認為你的網站很差，或者干脆以后都不來了，但是實際上網站有他要的內容或想使用的功能，只是由于頁面設計的不好，不能更快的找到而已。

建立清楚的視覺層次，既要確保頁面上所有內容的外觀、所有的可視線索清楚，還要能準確地表述頁面上的內容之間的關系。一個視覺層次清楚的頁面有如下三個特點：A、越重要的部分越突出;B、功能或內容相關的部分在視覺上也要相關;C、功能或內容在邏輯上包含的部分在視覺上也要進行嵌套，關于這三個特點，我在《B2B行業門戶網站設計開發實戰研究報告》里做了非常詳細的闡述。

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

根據《別讓我思考》(英文名：DON’T MAKE ME THINK)一書所講：“訪問者不是在閱讀，而是在掃描，是極少數幾個得到了證明的事實之一，人們會花極少的時間來閱讀大部分的頁面，相反，我們只是掃描一下(或者匆匆掠過)網頁，尋找能吸引我們注意力的文字或詞語。”當然這個還是有一定條件的，對于導航頁、首頁等，用戶會更多的用掃描來獲得自己感興趣的內容。但是對于內容最終頁，大部分用戶是在閱讀，但是也會先掃描一下大概內容，對于太長的文章或內容，就要看下是否有小標題，如果有就要先掃描小標題，看自己是否感興趣，感興趣了才會繼續閱讀。從這個角度講，還是會先掃描。

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

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

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

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

7、B2B行業網站大部分的頁面界面應弱化，強調功能和內容

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

比如做一個企業網站，我們為什么要使用大的圖片、圖標，大面積的顏色去渲染這個頁面呢?因為每個企業都有其自己獨特的產品與企業文化，來這個頁面的讀者都是想了解這個企業或產品的，我們需要用設計向訪問者很直觀的傳遞企業信息，尤其是很多品牌公司網站。B2B行業網站的專題頁面設計、收費服務介紹等頁面與建設企業網站一樣，需要用大的圖片、小圖標、大面積的顏色來襯托頁面的主題。

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

模塊化不僅可以提高重用性，也能統一網站風格，還可以降低程序開發的強度。模塊化的最大好處就是統一網站風格，讓用戶無論在網站的那個頁面，也能明白還是在這個網站，形成了很強的品牌辨識度。時刻記住，做網站的最終目標，就是要做品牌，設計時就必須要作為指導思想。無論是架構、模塊或圖片，都要考慮其可修改性。采用DIV+CSS設計是目前最好的解決方法，不僅使頁面易于修改，關鍵是降低頁面代碼的數量，易于搜索引擎找到最重要的內容。

更多精彩內容參見：https://liuhuapeng.jiangshi.org