爲(wéi / wèi)吸引用戶做好B2B網站的(de)網頁設計

對于(yú)B2B行業網站的(de)頁面設計，大(dà)家可能更多考慮頁面用色、導航條、按鈕、标題欄的(de)設計，内容設計可能常常被大(dà)家忽略。

但是(shì)如果内容設計的(de)不(bù)好，可能會讓你的(de)所有設計被毀于(yú)一(yī / yì ／yí)旦。比如如何讓内容有主次之(zhī)分、層次感，使内容看起來(lái)不(bù)會太亂、太多，使用戶不(bù)願意繼續閱讀下去，很快離開網站，不(bù)能留住用戶繼續訪問。

在(zài)本研究報告前面章節我講過，永遠要(yào / yāo)記得用戶在(zài)沒有明确的(de)閱讀内容前是(shì)掃描而(ér)不(bù)是(shì)閱讀，在(zài)導航頁面，用戶很樂于(yú)掃視一(yī / yì ／yí)句一(yī / yì ／yí)句的(de)内容，對于(yú)大(dà)面積沒有重點的(de)内容，沒有耐心，我們必須在(zài)網頁上(shàng)提供既簡短又有一(yī / yì ／yí)定視覺焦點的(de)内容。這(zhè)種焦點可以(yǐ)吸引用戶的(de)注意力，讓他(tā)們在(zài)看到(dào)喜歡内容的(de)時(shí)候，采取進一(yī / yì ／yí)步的(de)行動，點擊鏈接浏覽詳細信息，或看其他(tā)更多内容，讓用戶留下來(lái)，如果我們不(bù)區分重點，就(jiù)很難讓用戶很快發現他(tā)想找的(de)焦點内容，尤其是(shì)對于(yú)新用戶，第一(yī / yì ／yí)印象很重要(yào / yāo)。

了(le／liǎo)解到(dào)用戶浏覽頁面時(shí)的(de)需求和(hé / huò)行爲(wéi / wèi)後，在(zài)頁面設計時(shí)就(jiù)要(yào / yāo)滿足用戶的(de)需求和(hé / huò)習慣，有那些辦法可以(yǐ)突出(chū)焦點内容呢？一(yī / yì ／yí)般常用：文字加粗、文字配圖片、文字變顔色、加導讀、文字變大(dà)、重點突出(chū)的(de)部分四周多一(yī / yì ／yí)點空白、增加小圖标或按鈕等方法，都能突出(chū)焦點内容。下面來(lái)簡要(yào / yāo)講解。

1 标題及重點突出(chū)内容設計一(yī / yì ／yí)般标準

浏覽者來(lái)到(dào)網站，會試圖找出(chū)他(tā)們需要(yào / yāo)的(de)東西。再次重複，用戶并不(bù)一(yī / yì ／yí)定是(shì)來(lái)閱讀的(de)，他(tā)們是(shì)來(lái)做他(tā)們想做的(de)事情，每個(gè)人(rén)的(de)目的(de)不(bù)一(yī / yì ／yí)定相同，網站要(yào / yāo)節省他(tā)們的(de)時(shí)間并且突出(chū)優質内容來(lái)吸引每個(gè)用戶的(de)注意力，從而(ér)讓他(tā)們更加便于(yú)在(zài)幾秒鍾内掃描整個(gè)頁面。用戶隻有在(zài)這(zhè)幾秒内掃描并發現他(tā)們想要(yào / yāo)的(de)東西，才會繼續在(zài)你的(de)網站上(shàng)停留更長的(de)時(shí)間。所以(yǐ)對于(yú)B2B行業網站的(de)首頁、一(yī / yì ／yí)級欄目首頁等導航頁面來(lái)講，焦點内容就(jiù)是(shì)推薦内容标題，信息分類名稱，信息圖片等幾個(gè)方面。使焦點内容更突出(chū)的(de)方法有很多，下面來(lái)詳細講解。

（1） 文字加粗

無論什麽内容，隻要(yào / yāo)我們将少部分的(de)内容加粗，将大(dà)部分不(bù)加粗，那麽加粗的(de)内容肯定就(jiù)會非常突出(chū)，這(zhè)個(gè)是(shì)常用的(de)制造焦點内容的(de)方法。在(zài)一(yī / yì ／yí)個(gè)頁面上(shàng)我們會見到(dào)很多加粗的(de)文字，這(zhè)些加粗的(de)文字就(jiù)會是(shì)焦點内容的(de)一(yī / yì ／yí)個(gè)部分，推薦的(de)鏈接内容标題、主要(yào / yāo)分類名稱等經常使用。這(zhè)個(gè)是(shì)頁面設計時(shí)創造焦點内容的(de)主要(yào / yāo)方法。

（2） 字号變大(dà)

這(zhè)個(gè)方法與文字加粗一(yī / yì ／yí)樣，屬于(yú)設計焦點内容的(de)常用方法，對于(yú)最重點的(de)内容，通常都是(shì)既加粗，字号又變大(dà)。同樣是(shì)推薦鏈接内容标題、主要(yào / yāo)分類名稱等經常使用的(de)。

（3） 文字變顔色

一(yī / yì ／yí)般字号變大(dà)、字體加粗，也(yě)會與變顔色同時(shí)出(chū)現，更加突出(chū)，但是(shì)變顔色也(yě)會出(chū)現在(zài)一(yī / yì ／yí)些次突出(chū)内容上(shàng)出(chū)現，隻變顔色，不(bù)加粗，不(bù)變大(dà)字體。

圖（69） 阿裏巴巴産品列表頁截圖

如圖（69）所示，首先産品名稱，是(shì)最重要(yào / yāo)的(de)，用戶将通過名稱看是(shì)否是(shì)自己感興趣的(de)産品，所以(yǐ)阿裏的(de)設計師采用了(le／liǎo)最突出(chū)的(de)做法，既變顔色，又增大(dà)字體，還加粗。公司名字是(shì)第二個(gè)需要(yào / yāo)突出(chū)的(de)，在(zài)這(zhè)裏隻采用了(le／liǎo)變顔色，如果又加粗的(de)話，就(jiù)會使頁面看起來(lái)很累，突出(chū)的(de)内容太多了(le／liǎo)，就(jiù)沒有突出(chū)了(le／liǎo)。同時(shí)标題下面爲(wéi / wèi)産品的(de)導讀，将産品的(de)參數表示出(chū)來(lái)，當訪問者通過掃描對某個(gè)産品感興趣了(le／liǎo)，就(jiù)可能進一(yī / yì ／yí)步看産品的(de)介紹，屬于(yú)掃描到(dào)感興趣内容後的(de)第二步動作，所以(yǐ)在(zài)頁面上(shàng)，要(yào / yāo)弱化，設計師采用了(le／liǎo)灰色，以(yǐ)及地(dì / de)區、起訂量等都是(shì)灰色。搜索出(chū)來(lái)的(de)産品都很類似，價格的(de)比較就(jiù)變的(de)很重要(yào / yāo)，所以(yǐ)價格采用了(le／liǎo)浏覽者眼球最關注的(de)顔色：紅色。正如我在(zài)之(zhī)前文章裏講的(de)，要(yào / yāo)研究電子(zǐ)商務網站的(de)設計，阿裏巴巴是(shì)最重要(yào / yāo)的(de)研究對象。

（4） 文字配圖片

爲(wéi / wèi)了(le／liǎo)突出(chū)某個(gè)内容，我們常常配個(gè)圖片，吸引用戶的(de)眼球，當然有時(shí)是(shì)這(zhè)個(gè)内容本身就(jiù)包含圖片，但是(shì)更多的(de)時(shí)候我們會配個(gè)圖标、按鈕、小圖片，爲(wéi / wèi)了(le／liǎo)突出(chū)這(zhè)個(gè)内容，與周圍的(de)内容區别開來(lái)。

（5） 四周留空白

爲(wéi / wèi)了(le／liǎo)突出(chū)某個(gè)内容，我們常采用把這(zhè)個(gè)内容的(de)四周留白，這(zhè)也(yě)是(shì)突出(chū)這(zhè)個(gè)内容的(de)方法，這(zhè)種方法常常與加粗、字體變大(dà)、變顔色等一(yī / yì ／yí)起使用。

（6） 爲(wéi / wèi)内容加導讀

加導讀的(de)方法，除了(le／liǎo)讓用戶增加對突出(chū)内容有更多的(de)了(le／liǎo)解，吸引用戶點擊，還從視覺上(shàng)讓用戶覺得這(zhè)個(gè)内容相比其他(tā)信息占的(de)空間更多，習慣上(shàng)認爲(wéi / wèi)這(zhè)個(gè)信息更加重要(yào / yāo)，突出(chū)這(zhè)個(gè)部分的(de)内容。

2 内容鏈接設計一(yī / yì ／yí)般标準

網站内容鏈接要(yào / yāo)遵守用戶習慣，讓用戶看着就(jiù)像一(yī / yì ／yí)個(gè)鏈接，想去點擊。鏈接設計也(yě)是(shì)網站設計與平面設計最大(dà)的(de)區别之(zhī)一(yī / yì ／yí)。一(yī / yì ／yí)般的(de)設計師對鏈接都能處理好，但是(shì)仍然有一(yī / yì ／yí)些網站在(zài)這(zhè)方面經常犯一(yī / yì ／yí)些錯誤，也(yě)許各位讀者覺得這(zhè)些錯誤太低級，但是(shì)據我看過的(de)一(yī / yì ／yí)些做的(de)不(bù)好的(de)網站，他(tā)們在(zài)鏈接設計上(shàng)存在(zài)如下的(de)問題。

（1）重要(yào / yāo)鏈接放圖片上(shàng)

網站大(dà)部分的(de)鏈接都應該使用文字，尤其是(shì)内容的(de)鏈接，盡量減少對圖片做鏈接，不(bù)僅對搜索引擎優化不(bù)利，而(ér)且用戶使用時(shí)更習慣點文字鏈接。

（2）鼠标放鏈接上(shàng)時(shí)文字顔色無變化

鼠标放鏈接上(shàng)時(shí)文字顔色變化是(shì)一(yī / yì ／yí)個(gè)習慣用法，幾乎所有主流網站，當鼠标經過鏈接時(shí)，都會變顔色，目的(de)是(shì)讓用戶更清楚的(de)知道(dào)，他(tā)準備點擊的(de)是(shì)那個(gè)具體的(de)内容。如果鏈接顯示的(de)時(shí)候沒有加下劃線，鼠标放上(shàng)去後必須要(yào / yāo)加下劃線。

（3）鏈接文字之(zhī)間行距太小，看起來(lái)很累

鏈接與鏈接之(zhī)間，要(yào / yāo)有一(yī / yì ／yí)定的(de)行距，一(yī / yì ／yí)般字号在(zài)12PX-13PX之(zhī)間，行距在(zài)25-30象素之(zhī)間，行距太高，太粗糙，行距太低，看起來(lái)太累，這(zhè)些都一(yī / yì ／yí)定要(yào / yāo)符合标準，常用的(de)行距是(shì)：150%。

（4）鏈接的(de)背景顔色很深

一(yī / yì ／yí)般導航頁面鏈接背景都是(shì)白色，爲(wéi / wèi)了(le／liǎo)使看起來(lái)不(bù)累或美觀，可以(yǐ)用淺灰色的(de)背景，或很淺的(de)其他(tā)顔色作爲(wéi / wèi)背景，背景顔色不(bù)能對閱讀鏈接内容造成視覺噪聲，幹擾用戶的(de)視線。

3 網站内容圖片設計一(yī / yì ／yí)般标準

在(zài)網站導航頁面裏，圖片分爲(wéi / wèi)兩種情況，正如在(zài)《B2B行業門戶網站設計開發實戰研究報告》裏所講的(de)，一(yī / yì ／yí)種情況是(shì)圖片作爲(wéi / wèi)文字的(de)點綴，讓文字内容更突出(chū)，更具有可讀性；另一(yī / yì ／yí)種情況是(shì)圖片就(jiù)是(shì)内容，産品圖片、新聞圖片、人(rén)物頭像等。這(zhè)兩種情況對圖片設計的(de)要(yào / yāo)求是(shì)不(bù)一(yī / yì ／yí)樣的(de)。

（1）作爲(wéi / wèi)點綴或類似按鈕的(de)小圖片

這(zhè)類圖片重要(yào / yāo)的(de)一(yī / yì ／yí)點就(jiù)是(shì)要(yào / yāo)精緻，使用的(de)顔色一(yī / yì ／yí)定要(yào / yāo)符合最新的(de)設計潮流，要(yào / yāo)更多使用漸變顔色，可以(yǐ)參考很多大(dà)門戶網站的(de)小圖片，可以(yǐ)直接抄過來(lái)使用，或者在(zài)一(yī / yì ／yí)些專門的(de)小圖标收集網站去找，然後修改下，就(jiù)可以(yǐ)使用。

（2）産品圖片、新聞圖片及人(rén)物頭像

在(zài)設計時(shí)，我們常常會涉及内容圖片，這(zhè)類圖片尺寸不(bù)能太大(dà)，否則顯得太粗糙，也(yě)不(bù)能太小，太小就(jiù)不(bù)顯眼，圖片周圍有文字說(shuō)明，不(bù)能隻有圖片，沒有文字說(shuō)明。

（3）圖片清晰、不(bù)變形是(shì)最基本的(de)要(yào / yāo)求，也(yě)是(shì)必須的(de)

我們設計時(shí)使用的(de)所有的(de)圖片、圖标，一(yī / yì ／yí)定要(yào / yāo)清晰，見過很多設計太差的(de)網站，按鈕是(shì)變形的(de)，有的(de)圖标也(yě)是(shì)變形的(de)，用戶上(shàng)傳的(de)産品圖片有的(de)也(yě)是(shì)變形的(de)，這(zhè)個(gè)在(zài)網站設計中是(shì)絕對不(bù)允許出(chū)現的(de)。圖片尺寸要(yào / yāo)符合圖片本身的(de)特點，比如服裝款式圖片、人(rén)的(de)頭像，高度就(jiù)一(yī / yì ／yí)定要(yào / yāo)比寬度大(dà)，見過很多網站設計的(de)人(rén)物頭像，居然寬度比高度長。

4 導航頁輔助内容設計一(yī / yì ／yí)般标準

比如資訊導航頁面重點推薦内容的(de)導讀，産品列表頁面産品導讀、産品參數等，在(zài)本研究報告，我都歸納爲(wéi / wèi)輔助内容。這(zhè)些内容設計時(shí)要(yào / yāo)用灰色，字要(yào / yāo)更小一(yī / yì ／yí)些，行距要(yào / yāo)低一(yī / yì ／yí)些，主要(yào / yāo)就(jiù)是(shì)不(bù)能影響重點内容，使頁面看起來(lái)更有層次感，主次分明。用戶也(yě)是(shì)在(zài)掃描整個(gè)頁面，找到(dào)重要(yào / yāo)内容的(de)時(shí)候，再去閱讀輔助内容。

關于(yú)B2B行業網站的(de)内容設計标準，就(jiù)講到(dào)這(zhè)裏，其實這(zhè)個(gè)标準，也(yě)與一(yī / yì ／yí)般的(de)商業門戶網站大(dà)同小異，但是(shì)與企業網站的(de)區别很大(dà)。

爲(wéi / wèi)吸引用戶做好B2B網站的(de)網頁設計由東莞網站設計編輯 /conghua/news/2597.html如需轉載請注明出(chū)處

東莞做網站 東莞小程序商城開發 東莞網站建設 東莞網站優化 東莞微信小程序開發 東莞做網站公司 東莞小程序制作 東莞微信小程序商城 電商網站建設 個(gè)人(rén)網站建設 深圳網站建設 湛江網站建設 梅州網站建設 動态網站建設 珠海網站建設 商城網站建設 外貿網站建設 汕尾網站建設 SEO外包 關鍵詞優化 網站托管