對于B2B行業(yè)網(wǎng)站的頁面設(shè)計，大家可能更多考慮頁面用色、導航條、按鈕、標題欄的設(shè)計，內(nèi)容設(shè)計可能常常被大家忽略。

但是如果內(nèi)容設(shè)計的不好，可能會讓你的所有設(shè)計被毀于一旦。比如如何讓內(nèi)容有主次之分、層次感，使內(nèi)容看起來不會太亂、太多，使用戶不愿意繼續(xù)閱讀下去，很快離開網(wǎng)站，不能留住用戶繼續(xù)訪問。

在本研究報告前面章節(jié)我講過，永遠要記得用戶在沒有明確的閱讀內(nèi)容前是掃描而不是閱讀，在導航頁面，用戶很樂于掃視一句一句的內(nèi)容，對于大面積沒有重點的內(nèi)容，沒有耐心，我們必須在網(wǎng)頁上提供既簡短又有一定視覺焦點的內(nèi)容。這種焦點可以吸引用戶的注意力，讓他們在看到喜歡內(nèi)容的時候，采取進一步的行動，點擊鏈接瀏覽詳細信息，或看其他更多內(nèi)容，讓用戶留下來，如果我們不區(qū)分重點，就很難讓用戶很快發(fā)現(xiàn)他想找的焦點內(nèi)容，尤其是對于新用戶，第一印象很重要。

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

1 標題及重點突出內(nèi)容設(shè)計一般標準

瀏覽者來到網(wǎng)站，會試圖找出他們需要的東西。再次重復，用戶并不一定是來閱讀的，他們是來做他們想做的事情，每個人的目的不一定相同，網(wǎng)站要節(jié)省他們的時間并且突出優(yōu)質(zhì)內(nèi)容來吸引每個用戶的注意力，從而讓他們更加便于在幾秒鐘內(nèi)掃描整個頁面。用戶只有在這幾秒內(nèi)掃描并發(fā)現(xiàn)他們想要的東西，才會繼續(xù)在你的網(wǎng)站上停留更長的時間。所以對于B2B行業(yè)網(wǎng)站的首頁、一級欄目首頁等導航頁面來講，焦點內(nèi)容就是推薦內(nèi)容標題，信息分類名稱，信息圖片等幾個方面。使焦點內(nèi)容更突出的方法有很多，下面來詳細講解。

（1） 文字加粗

無論什么內(nèi)容，只要我們將少部分的內(nèi)容加粗，將大部分不加粗，那么加粗的內(nèi)容肯定就會非常突出，這個是常用的制造焦點內(nèi)容的方法。在一個頁面上我們會見到很多加粗的文字，這些加粗的文字就會是焦點內(nèi)容的一個部分，推薦的鏈接內(nèi)容標題、主要分類名稱等經(jīng)常使用。這個是頁面設(shè)計時創(chuàng)造焦點內(nèi)容的主要方法。

（2） 字號變大

這個方法與文字加粗一樣，屬于設(shè)計焦點內(nèi)容的常用方法，對于最重點的內(nèi)容，通常都是既加粗，字號又變大。同樣是推薦鏈接內(nèi)容標題、主要分類名稱等經(jīng)常使用的。

（3） 文字變顏色

一般字號變大、字體加粗，也會與變顏色同時出現(xiàn)，更加突出，但是變顏色也會出現(xiàn)在一些次突出內(nèi)容上出現(xiàn)，只變顏色，不加粗，不變大字體。

圖（69） 阿里巴巴產(chǎn)品列表頁截圖

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

（4） 文字配圖片

為了突出某個內(nèi)容，我們常常配個圖片，吸引用戶的眼球，當然有時是這個內(nèi)容本身就包含圖片，但是更多的時候我們會配個圖標、按鈕、小圖片，為了突出這個內(nèi)容，與周圍的內(nèi)容區(qū)別開來。

（5） 四周留空白

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

（6） 為內(nèi)容加導讀

加導讀的方法，除了讓用戶增加對突出內(nèi)容有更多的了解，吸引用戶點擊，還從視覺上讓用戶覺得這個內(nèi)容相比其他信息占的空間更多，習慣上認為這個信息更加重要，突出這個部分的內(nèi)容。

2 內(nèi)容鏈接設(shè)計一般標準

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

（1）重要鏈接放圖片上

網(wǎng)站大部分的鏈接都應(yīng)該使用文字，尤其是內(nèi)容的鏈接，盡量減少對圖片做鏈接，不僅對搜索引擎優(yōu)化不利，而且用戶使用時更習慣點文字鏈接。

（2）鼠標放鏈接上時文字顏色無變化

鼠標放鏈接上時文字顏色變化是一個習慣用法，幾乎所有主流網(wǎng)站，當鼠標經(jīng)過鏈接時，都會變顏色，目的是讓用戶更清楚的知道，他準備點擊的是那個具體的內(nèi)容。如果鏈接顯示的時候沒有加下劃線，鼠標放上去后必須要加下劃線。

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

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

（4）鏈接的背景顏色很深

一般導航頁面鏈接背景都是白色，為了使看起來不累或美觀，可以用淺灰色的背景，或很淺的其他顏色作為背景，背景顏色不能對閱讀鏈接內(nèi)容造成視覺噪聲，干擾用戶的視線。

3 網(wǎng)站內(nèi)容圖片設(shè)計一般標準

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

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

這類圖片重要的一點就是要精致，使用的顏色一定要符合最新的設(shè)計潮流，要更多使用漸變顏色，可以參考很多大門戶網(wǎng)站的小圖片，可以直接抄過來使用，或者在一些專門的小圖標收集網(wǎng)站去找，然后修改下，就可以使用。

（2）產(chǎn)品圖片、新聞圖片及人物頭像

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

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

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

4 導航頁輔助內(nèi)容設(shè)計一般標準

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

關(guān)于B2B行業(yè)網(wǎng)站的內(nèi)容設(shè)計標準，就講到這里，其實這個標準，也與一般的商業(yè)門戶網(wǎng)站大同小異，但是與企業(yè)網(wǎng)站的區(qū)別很大。

為吸引用戶做好B2B網(wǎng)站的網(wǎng)頁設(shè)計由企業(yè)網(wǎng)站制作編輯 http://www.dalld.com/conghua/news/2597.html如需轉(zhuǎn)載請注明出處

企業(yè)網(wǎng)站制作 英文網(wǎng)站設(shè)計 做網(wǎng)站 網(wǎng)站改版 建站費用 商丘網(wǎng)站建設(shè) 開封網(wǎng)站建設(shè) 石家莊網(wǎng)站建設(shè) 沈陽網(wǎng)站設(shè)計 英德網(wǎng)站設(shè)計 泰州網(wǎng)站設(shè)計 哈爾濱網(wǎng)站制作 撫順網(wǎng)站制作 臺州網(wǎng)站制作 葫蘆島網(wǎng)站制作

外貿(mào)網(wǎng)站設(shè)計 東莞做網(wǎng)站 東莞外貿(mào)網(wǎng)站制作 東莞企業(yè)網(wǎng)站建設(shè) 東莞網(wǎng)站設(shè)計公司 網(wǎng)站制作公司 東莞企業(yè)網(wǎng)站設(shè)計 企業(yè)網(wǎng)站建設(shè) 企業(yè)網(wǎng)站設(shè)計 外貿(mào)網(wǎng)站建設(shè) 東莞網(wǎng)站建設(shè)公司 東莞網(wǎng)頁設(shè)計 企業(yè)網(wǎng)站制作 東莞網(wǎng)站建設(shè) 東莞外貿(mào)網(wǎng)站建設(shè)