B2B網站內容設計:頁面設計要滿足使用者需求和習慣

文章描述：如何做好B2B行業網站頁面內容設計留住使用者.

對於B2B行業網站的頁面設計，大家可能更多考慮頁面用色、導航條、按鈕、標題列的設計，內容設計可能常常被大家忽略。但是如果內容設計的不好，可能會讓你的所有設計被毀於一旦。比如如何讓內容有主次之分、層次感，使內容看起來不會太亂、太多，使使用者不願意繼續閱讀下去，很快離開網站，不能留住使用者繼續訪問。

在本研究報告前面章節我講過，永遠要記得使用者在沒有明確的閱讀內容前是掃描而不是閱讀，在導航頁面，使用者很樂於掃視一句一句的內容，對於大面積沒有重點的內容，沒有耐心，我們必須在網頁上提供既簡短又有一定視覺焦點的內容。這種焦點可以吸引使用者的注意力，讓他們在看到喜歡內容的時候，採取進一步的行動，點選連結瀏覽詳細資料，或看其他更多內容，讓使用者留下來，如果我們不區分重點，就很難讓使用者很快發現他想找的焦點內容，尤其是對於新使用者，第一印象很重要。

瞭解到使用者瀏覽頁面時的需求和行為後，在頁面設計時就要滿足使用者的需求和習慣，有那些辦法可以突出焦點內容呢？一般常用：文字加粗、文字配圖片、文字變顏色、加導讀、文字變大、重點突出的部分四周多一點空白、增加小表徵圖或按鈕等方法，都能突出焦點內容。下面來簡要講解。

1 標題及重點突出內容設計一般標準

瀏覽者來到網站，會試圖找出他們需要的東西。再次重複，使用者並不一定是來閱讀的，他們是來做他們想做的事情，每個人的目的不一定相同，網站要節省他們的時間並且突出優質內容來吸引每個使用者的注意力，從而讓他們更加便於在幾秒鐘內掃描整個頁面。使用者只有在這幾秒內掃描並發現他們想要的東西，才會繼續在你的網站上停留更長的時間。所以對於B2B行業網站的首頁、一級欄目首頁等導航頁面來講，焦點內容就是推薦內容標題，資訊分類名稱，資訊圖片等幾個方面。使焦點內容更突出的方法有很多，下面來詳細講解。

（1） 文字加粗

無論什麼內容，只要我們將少部分的內容加粗，將大部分不加粗，那麼加粗的內容肯定就會非常突出，這個是常用的製造焦點內容的方法。在一個頁面上我們會見到很多加粗的文字，這些加粗的文字就會是焦點內容的一個部分，推薦的連結內容標題、主要分類名稱等經常使用。這個是頁面設計時創造焦點內容的主要方法。

（2） 字型大小變大

這個方法與文字加粗一樣，屬於設計焦點內容的常用方法，對於最重點的內容，通常都是既加粗，字型大小又變大。同樣是推薦連結內容標題、主要分類名稱等經常使用的。

（3） 文字變顏色

一般字型大小變大、字型加粗，也會與變顏色同時出現，更加突出，但是變顏色也會出現在一些次突出內容上出現，只變顏色，不加粗，不變大字型。

圖（69） 阿里巴巴產品列表頁截圖

如圖（69）所示，首先產品名稱，是最重要的，使用者將通過名稱看是否是自己感興趣的產品，所以阿里的設計師採用了最突出的做法，既變顏色，又增大字型，還加粗。公司名字是第二個需要突出的，在這裡只採用了變顏色，如果又加粗的話，就會使頁面看起來很累，突出的內容太多了，就沒有突出了。同時標題下面為產品的導讀，將產品的參數表示出來，當訪問者通過掃描對某個產品感興趣了，就可能進一步看產品的介紹，屬於掃描到感興趣內容後的第二步動作，所以在頁面上，要弱化，設計師採用了灰色，以及地區、起訂量等都是灰色。搜尋出來的產品都很類似，價格的比較就變的很重要，所以價格採用了瀏覽者眼球最關注的顏色：紅色。正如我在之前文章裡講的，要研究電子商務網站的設計，阿里巴巴是最重要的研究對象。

（4） 文字配圖片

為了突出某個內容，我們常常配個圖片，吸引使用者的眼球，當然有時是這個內容本身就包含圖片，但是更多的時候我們會配個表徵圖、按鈕、小圖片，為了突出這個內容，與周圍的內容區別開來。

（5） 四周留空白

為了突出某個內容，我們常採用把這個內容的四周留白，這也是突出這個內容的方法，這種方法常常與加粗、字型變大、變顏色等一起使用。

（6） 為內容加導讀

加導讀的方法，除了讓使用者增加對突出內容有更多的瞭解，吸引使用者點擊，還從視覺上讓使用者覺得這個內容相比其他資訊占的空間更多，習慣上認為這個資訊更加重要，突出這個部分的內容。

2 內容連結設計一般標準

網站內容連結要遵守使用者習慣，讓使用者看著就像一個連結，想去點擊。連結設計也是網站設計與平面設計最大的區別之一。一般的設計師對連結都能處理好，但是仍然有一些網站在這方面經常犯一些錯誤，也許各位讀者覺得這些錯誤太低級，但是據我看過的一些做的不好的網站，他們在連結設計上存在如下的問題。

（1）重要連結放圖片上

網站大部分的連結都應該使用文字，尤其是內容的連結，盡量減少對圖片做連結，不僅對搜尋引擎最佳化不利，而且使用者使用時更習慣點文字連結。

（2）滑鼠放連結上時文字顏色無變化

滑鼠放連結上時文字顏色變化是一個習慣用法，幾乎所有主流網站，當滑鼠經過連結時，都會變顏色，目的是讓使用者更清楚的知道，他準備點擊的是那個具體的內容。如果連結顯示的時候沒有加底線，滑鼠放上去後必須要加底線。

（3）連結文字之間行距太小，看起來很累

連結與連結之間，要有一定的行距，一般字型大小在12PX-13PX之間，行距在25-30象素之間，行距太高，太粗糙，行距太低，看起來太累，這些都一定要符合標準，常用的行距是：150%。

（4）連結的背景顏色很深

一般導航頁面連結背景都是白色，為了使看起來不累或美觀，可以用淺灰色的背景，或很淺的其他顏色作為背景，背景顏色不能對閱讀連結內容造成視覺雜訊，幹擾使用者的視線。

3 網站內容圖片設計一般標準

在網站導航頁面裡，圖片分為兩種情況，正如在《B2B行業門戶網站設計開發實戰研究報告》裡所講的，一種情況是圖片作為文字的點綴，讓文字內容更突出，更具有可讀性；另一種情況是圖片就是內容，產品圖片、新聞圖片、人物頭像等。這兩種情況對圖片設計的要求是不一樣的。

（1）作為點綴或類似按鈕的小圖片

這類圖片重要的一點就是要精緻，使用的顏色一定要符合最新的設計潮流，要更多使用漸層顏色，可以參考很多大門戶網站的小圖片，可以直接抄過來使用，或者在一些專門的小表徵圖收集網站去找，然後修改下，就可以使用。

（2）產品圖片、新聞圖片及人物頭像

在設計時，我們常常會涉及內容圖片，這類圖片尺寸不能太大，否則顯得太粗糙，也不能太小，太小就不顯眼，圖片周圍有文字說明，不能只有圖片，沒有文字說明。

（3）圖片清晰、不變形是最基本的要求，也是必須的

我們設計時使用的所有的圖片、表徵圖，一定要清晰，見過很多設計太差的網站，按鈕是變形的，有的表徵圖也是變形的，使用者上傳的產品圖片有的也是變形的，這個在網站設計中是絕對不允許出現的。圖片尺寸要符合圖片本身的特點，比如服裝款式圖片、人的頭像，高度就一定要比寬度大，見過很多網站設計的人物頭像，居然寬度比高度長。

4 導航頁輔助內容設計一般標準

比如資訊導航頁面重點推薦內容的導讀，產品列表頁面產品導讀、產品參數等，在本研究報告，我都歸納為輔助內容。這些內容設計時要用灰色，字要更小一些，行距要低一些，主要就是不能影響重點內容，使頁面看起來更有層次感，主次分明。使用者也是在掃描整個頁面，找到重要內容的時候，再去閱讀輔助內容。

關於B2B行業網站的內容設計標準，就講到這裡，其實這個標準，也與一般的商業門戶網站大同小異，但是與企業網站的區別很大。