(樂購網(wǎng)專欄 作者：李學(xué)江)對(duì)于B2B行業(yè)網(wǎng)站的頁面設(shè)計(jì)，大家可能更多考慮頁面用色、導(dǎo)航條、按鈕、標(biāo)題欄的設(shè)計(jì)，內(nèi)容設(shè)計(jì)可能常常被大家忽略。但是如果內(nèi)容設(shè)計(jì)的不好，可能會(huì)讓你的所有設(shè)計(jì)被毀于一旦。比如如何讓內(nèi)容有主次之分、層次感，使內(nèi)容看起來不會(huì)太亂、太多，使用戶不愿意繼續(xù)閱讀下去，很快離開網(wǎng)站，不能留住用戶繼續(xù)訪問。在本研究報(bào)告前面章節(jié)我講過，永遠(yuǎn)要記得用戶在沒有明確的閱讀內(nèi)容前是掃描而不是閱讀，在導(dǎo)航頁面，用戶很樂于掃視一句一句的內(nèi)容，對(duì)于大面積沒有重點(diǎn)的內(nèi)容，沒有耐心，我們必須在網(wǎng)頁上提供既簡(jiǎn)短又有一定視覺焦點(diǎn)的內(nèi)容。這種焦點(diǎn)可以吸引用戶的注意力，讓他們?cè)诳吹较矚g內(nèi)容的時(shí)候，采取進(jìn)一步的行動(dòng)，點(diǎn)擊鏈接瀏覽詳細(xì)信息，或看其他更多內(nèi)容，讓用戶留下來，如果我們不區(qū)分重點(diǎn)，就很難讓用戶很快發(fā)現(xiàn)他想找的焦點(diǎn)內(nèi)容，尤其是對(duì)于新用戶，第一印象很重要。
了解到用戶瀏覽頁面時(shí)的需求和行為后，在頁面設(shè)計(jì)時(shí)就要滿足用戶的需求和習(xí)慣，有那些辦法可以突出焦點(diǎn)內(nèi)容呢?一般常用：文字加粗、文字配圖片、文字變顏色、加導(dǎo)讀、文字變大、重點(diǎn)突出的部分四周多一點(diǎn)空白、增加小圖標(biāo)或按鈕等方法，都能突出焦點(diǎn)內(nèi)容。下面來簡(jiǎn)要講解。
1 標(biāo)題及重點(diǎn)突出內(nèi)容設(shè)計(jì)一般標(biāo)準(zhǔn)
瀏覽者來到網(wǎng)站，會(huì)試圖找出他們需要的東西。再次重復(fù)，用戶并不一定是來閱讀的，他們是來做他們想做的事情，每個(gè)人的目的不一定相同，網(wǎng)站要節(jié)省他們的時(shí)間并且突出優(yōu)質(zhì)內(nèi)容來吸引每個(gè)用戶的注意力，從而讓他們更加便于在幾秒鐘內(nèi)掃描整個(gè)頁面。用戶只有在這幾秒內(nèi)掃描并發(fā)現(xiàn)他們想要的東西，才會(huì)繼續(xù)在你的網(wǎng)站上停留更長的時(shí)間。所以對(duì)于B2B行業(yè)網(wǎng)站的首頁、一級(jí)欄目首頁等導(dǎo)航頁面來講，焦點(diǎn)內(nèi)容就是推薦內(nèi)容標(biāo)題，信息分類名稱，信息圖片等幾個(gè)方面。使焦點(diǎn)內(nèi)容更突出的方法有很多，下面來詳細(xì)講解。
(1) 文字加粗
無論什么內(nèi)容，只要我們將少部分的內(nèi)容加粗，將大部分不加粗，那么加粗的內(nèi)容肯定就會(huì)非常突出，這個(gè)是常用的制造焦點(diǎn)內(nèi)容的方法。在一個(gè)頁面上我們會(huì)見到很多加粗的文字，這些加粗的文字就會(huì)是焦點(diǎn)內(nèi)容的一個(gè)部分，推薦的鏈接內(nèi)容標(biāo)題、主要分類名稱等經(jīng)常使用。這個(gè)是頁面設(shè)計(jì)時(shí)創(chuàng)造焦點(diǎn)內(nèi)容的主要方法。
(2) 字號(hào)變大
這個(gè)方法與文字加粗一樣，屬于設(shè)計(jì)焦點(diǎn)內(nèi)容的常用方法，對(duì)于最重點(diǎn)的內(nèi)容，通常都是既加粗，字號(hào)又變大。同樣是推薦鏈接內(nèi)容標(biāo)題、主要分類名稱等經(jīng)常使用的。
(3) 文字變顏色
一般字號(hào)變大、字體加粗，也會(huì)與變顏色同時(shí)出現(xiàn)，更加突出，但是變顏色也會(huì)出現(xiàn)在一些次突出內(nèi)容上出現(xiàn)，只變顏色，不加粗，不變大字體。
圖(69) 阿里巴巴產(chǎn)品列表頁截圖
如圖(69)所示，首先產(chǎn)品名稱，是最重要的，用戶將通過名稱看是否是自己感興趣的產(chǎn)品，所以阿里的設(shè)計(jì)師采用了最突出的做法，既變顏色，又增大字體，還加粗。公司名字是第二個(gè)需要突出的，在這里只采用了變顏色，如果又加粗的話，就會(huì)使頁面看起來很累，突出的內(nèi)容太多了，就沒有突出了。同時(shí)標(biāo)題下面為產(chǎn)品的導(dǎo)讀，將產(chǎn)品的參數(shù)表示出來，當(dāng)訪問者通過掃描對(duì)某個(gè)產(chǎn)品感興趣了，就可能進(jìn)一步看產(chǎn)品的介紹，屬于掃描到感興趣內(nèi)容后的第二步動(dòng)作，所以在頁面上，要弱化，設(shè)計(jì)師采用了灰色，以及地區(qū)、起訂量等都是灰色。搜索出來的產(chǎn)品都很類似，價(jià)格的比較就變的很重要，所以價(jià)格采用了瀏覽者眼球最關(guān)注的顏色：紅色。正如我在《B2B行業(yè)門戶網(wǎng)站策劃實(shí)戰(zhàn)研究報(bào)告》里講的，要研究電子商務(wù)網(wǎng)站的設(shè)計(jì)，阿里巴巴是最重要的研究對(duì)象。
(4) 文字配圖片
為了突出某個(gè)內(nèi)容，我們常常配個(gè)圖片，吸引用戶的眼球，當(dāng)然有時(shí)是這個(gè)內(nèi)容本身就包含圖片，但是更多的時(shí)候我們會(huì)配個(gè)圖標(biāo)、按鈕、小圖片，為了突出這個(gè)內(nèi)容，與周圍的內(nèi)容區(qū)別開來。
(5) 四周留空白
為了突出某個(gè)內(nèi)容，我們常采用把這個(gè)內(nèi)容的四周留白，這也是突出這個(gè)內(nèi)容的方法，這種方法常常與加粗、字體變大、變顏色等一起使用。
(6) 為內(nèi)容加導(dǎo)讀
加導(dǎo)讀的方法，除了讓用戶增加對(duì)突出內(nèi)容有更多的了解，吸引用戶點(diǎn)擊，還從視覺上讓用戶覺得這個(gè)內(nèi)容相比其他信息占的空間更多，習(xí)慣上認(rèn)為這個(gè)信息更加重要，突出這個(gè)部分的內(nèi)容。
圖(70) 食品商務(wù)網(wǎng)資訊欄目的推薦資訊
圖(70)為食品商務(wù)網(wǎng)資訊欄目的推薦資訊，相比其他資訊，用戶更愿意閱讀這個(gè)內(nèi)容。
2 內(nèi)容鏈接設(shè)計(jì)一般標(biāo)準(zhǔn)
網(wǎng)站內(nèi)容鏈接要遵守用戶習(xí)慣，讓用戶看著就像一個(gè)鏈接，想去點(diǎn)擊。鏈接設(shè)計(jì)也是網(wǎng)站設(shè)計(jì)與平面設(shè)計(jì)最大的區(qū)別之一。一般的設(shè)計(jì)師對(duì)鏈接都能處理好，但是仍然有一些網(wǎng)站在這方面經(jīng)常犯一些錯(cuò)誤，也許各位讀者覺得這些錯(cuò)誤太低級(jí)，但是據(jù)我看過的一些做的不好的網(wǎng)站，他們?cè)阪溄釉O(shè)計(jì)上存在如下的問題。
(1)重要鏈接放圖片上
網(wǎng)站大部分的鏈接都應(yīng)該使用文字，尤其是內(nèi)容的鏈接，盡量減少對(duì)圖片做鏈接，不僅對(duì)搜索引擎優(yōu)化不利，而且用戶使用時(shí)更習(xí)慣點(diǎn)文字鏈接。
(2)鼠標(biāo)放鏈接上時(shí)文字顏色無變化
鼠標(biāo)放鏈接上時(shí)文字顏色變化是一個(gè)習(xí)慣用法，幾乎所有主流網(wǎng)站，當(dāng)鼠標(biāo)經(jīng)過鏈接時(shí)，都會(huì)變顏色，目的是讓用戶更清楚的知道，他準(zhǔn)備點(diǎn)擊的是那個(gè)具體的內(nèi)容。如果鏈接顯示的時(shí)候沒有加下劃線，鼠標(biāo)放上去后必須要加下劃線。
(3)鏈接文字之間行距太小，看起來很累
鏈接與鏈接之間，要有一定的行距，一般字號(hào)在12PX-13PX之間，行距在25-30象素之間，行距太高，太粗糙，行距太低，看起來太累，這些都一定要符合標(biāo)準(zhǔn)，常用的行距是：150%。
(4)鏈接的背景顏色很深
一般導(dǎo)航頁面鏈接背景都是白色，為了使看起來不累或美觀，可以用淺灰色的背景，或很淺的其他顏色作為背景，背景顏色不能對(duì)閱讀鏈接內(nèi)容造成視覺噪聲，干擾用戶的視線。
推薦閱讀
網(wǎng)易布局電商導(dǎo)購平臺(tái) 悄然推獨(dú)立網(wǎng)站惠惠
9月6日上午消息，網(wǎng)易正在從搜索方向布局電商領(lǐng)域，悄然用獨(dú)立域名huihui.cn推出導(dǎo)購平臺(tái)惠惠網(wǎng)，其功能包括搜搜比價(jià)、返現(xiàn)及導(dǎo)購文章等。 根據(jù)惠惠網(wǎng)的官方介紹，其定位是網(wǎng)購優(yōu)惠平臺(tái)，希望“以第三方身份提供客觀>>>詳細(xì)閱讀
本文標(biāo)題：做好B2B行業(yè)網(wǎng)站頁面內(nèi)容設(shè)計(jì)，留住用戶
地址：http://www.oumuer.cn/a/b2b/20120906/83775.html
網(wǎng)友點(diǎn)評(píng)
精彩導(dǎo)讀
科技快報(bào)
品牌展示