1 標題及重點(diǎn)突出內容設計一般標準

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

（1） 文字加粗

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

（2） 字號變大

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

（3） 文字變顏色

一般字號變大、字體加粗，也會(huì )與變顏色同時(shí)出現，更加突出，但是變顏色也會(huì )出現在一些次突出內容上出現，只變顏色，不加粗，不變大字體。

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

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

（4） 文字配圖片

為了突出某個(gè)內容，我們常常配個(gè)圖片，吸引用戶(hù)的眼球，當然有時(shí)是這個(gè)內容本身就包含圖片，但是更多的時(shí)候我們會(huì )配個(gè)圖標、按鈕、小圖片，為了突出這個(gè)內容，與周?chē)�的內容區別開(kāi)來(lái)。

（5） 四周留空白

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

（6） 為內容加導讀

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

2 內容鏈接設計一般標準

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

（1）重要鏈接放圖片上

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

（2）鼠標放鏈接上時(shí)文字顏色無(wú)變化

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

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

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

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

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

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

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

（1）作為點(diǎn)綴或類(lèi)似按鈕的小圖片

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

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

在設計時(shí)，我們常常會(huì )涉及內容圖片，這類(lèi)圖片尺寸不能太大，否則顯得太粗糙，也不能太小，太小就不顯眼，圖片周?chē)�有文字說(shuō)明，不能只有圖片，沒(méi)有文字說(shuō)明。

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

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

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

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