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

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

（4） 文字配圖片

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

（5） 四周留空白

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

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

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

2 內(nèi)容鏈接設(shè)計一般標(biāo)準(zhǔn)

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

（1）重要鏈接放圖片上

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

（2）鼠標(biāo)放鏈接上時文字顏色無變化

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

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

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

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

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

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

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

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

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

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

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

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

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

4 導(dǎo)航頁輔助內(nèi)容設(shè)計一般標(biāo)準(zhǔn)

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