很多設(shè)計(jì)師在設(shè)計(jì)網(wǎng)頁時(shí)不自覺的犯一些錯(cuò)誤，導(dǎo)致頁面的用戶體驗(yàn)不好。下面列舉15個(gè)比較常見的著陸頁的設(shè)計(jì)錯(cuò)誤及改正。

1. 內(nèi)容不分區(qū)塊

如果將內(nèi)容分組分塊展示，則用戶更容易理解內(nèi)容的信息。將上下間距設(shè)置為120 px-180 px，并使用彩色背景分隔文本塊。

錯(cuò)誤?

在相關(guān)的內(nèi)容之間沒有間距，此外，這種設(shè)計(jì)需要色塊做區(qū)分。結(jié)果，內(nèi)容不容易理解，用戶不清楚哪些內(nèi)容是組合在一起的。

正確??

足夠大的間距，不同塊用不同的顏色做區(qū)分。這樣，用戶一看便知道哪些區(qū)塊包含哪些內(nèi)容。

2. 頁面上組與組之間的空間不均勻

應(yīng)該讓區(qū)塊上下之間設(shè)置相同高度的空間。否則頁面看上去會(huì)很混亂。用戶可能會(huì)認(rèn)為每個(gè)部分的內(nèi)容不是相等的。

錯(cuò)誤?

上圖中間距看起來不均勻會(huì)讓用戶認(rèn)為“About Stenser Brothers”是整個(gè)頁面的主標(biāo)題，其實(shí)“About Stenser Brothers”與“Why choose us？”是并列關(guān)系。

正確??

標(biāo)題周圍的間距與正文周圍的間距相同，用戶會(huì)認(rèn)為兩個(gè)區(qū)塊的內(nèi)容是并列關(guān)系。

3. 間距太小會(huì)讓用戶無法清晰辨識不同塊的內(nèi)容

為了避免內(nèi)容的混亂，請將間距調(diào)大到至少120像素。

錯(cuò)誤?

使用窄的間距，內(nèi)容塊之間像是粘在一起的。這會(huì)顯得混亂并讓用戶覺得這是整段，而不是分開來的內(nèi)容。

正確??

間距足夠大，立即就能看出這兩個(gè)內(nèi)容塊之間的差異。

4. 避免圖片上的顯示對比度低的文本

文本和背景圖片應(yīng)該有足夠的對比度。為了讓文本突出，圖片上可以加一層半透明的黑色，也可以用鮮艷的漸變色?；蛘咛暨x圖片的時(shí)候，就選擇對比度高的圖片，文本放在圖片比較暗或者亮的區(qū)域。

錯(cuò)誤?：此圖片太亮，使得文本難以辨識。

正確??：照片上多一層濾鏡效果，讓照片上的文本容易閱讀。

5. 同一頁面上的樣式太多

同一頁面上太多的板式和設(shè)計(jì)風(fēng)格會(huì)讓頁面看起來不專業(yè)而且難以閱讀。要避免這種情況，請將字體限制在一種，只有粗細(xì)的不同。

錯(cuò)誤?

由于使用了太多的版式風(fēng)格，用戶不清楚頁面的重點(diǎn)在哪里。

正確??

只用一種字體，一種顏色和兩種字體粗細(xì)變化。頁面上的排版看起來整潔明了。

6. 顏色區(qū)域太窄

避免使用較窄區(qū)域的顏色背景。看來起被切割了一樣，不好看。例如下圖：用色塊突出標(biāo)題，但是，標(biāo)題已經(jīng)用大號字體并加粗，已經(jīng)很明顯了，不需要再畫蛇添足用背景色。

錯(cuò)誤?

標(biāo)題的背景色打破了頁面的連續(xù)性，標(biāo)題看起來像是獨(dú)立的內(nèi)容塊。

正確??

標(biāo)題和相關(guān)的文本應(yīng)該用相同的背景色，表面他們屬于同一個(gè)內(nèi)容塊。

7.? 較窄的列用了太多的文本內(nèi)容

當(dāng)較窄的列中使用大量的文本，文本很難閱讀，用戶必須要掃看很多行。而且，這樣的排版看來起也不好看。最好是減少列數(shù)并縮短文本，否則沒人會(huì)去閱讀。

錯(cuò)誤?：居中的長段的文本列很難閱讀。

正確??：這些列中的文字很少，因此很容易閱讀。

8. 中心文本過多

當(dāng)頁面上的文本內(nèi)容較少時(shí)，居中的文本容易瀏覽，否則就是災(zāi)難性的。不然，您得設(shè)計(jì)成折疊式的。

錯(cuò)誤?：長段而且居中的文本不易閱讀。

正確??：標(biāo)題下的短文本（兩者都居中）在頁面上看起來很好。

9. 文本疊加在圖片最重要的位置上

避免文本覆蓋在圖片中比較重要的位置上。不然，會(huì)讓圖片不容易識別。嘗試不同的排版方式，劇中或者靠邊對齊。

錯(cuò)誤?

這個(gè)標(biāo)題擋住了女人的臉。圖片中女人的臉有豐富微小的細(xì)節(jié)，這會(huì)讓文本很難閱讀。

正確??

圖片和文本都容易識別和閱讀，并且這樣的構(gòu)圖也很漂亮。

10. 亂用視覺層次

為了使內(nèi)容層次在頁面上清晰可見，封面上的標(biāo)題應(yīng)該大于其它位置的標(biāo)題，如果標(biāo)題很長，則與其它位置的標(biāo)題大小相等。

錯(cuò)誤?

頭部的標(biāo)題不成比例地小于下一個(gè)標(biāo)題，這令人困惑。為什么？它使第二個(gè)標(biāo)題顯得更加突出。

正確??

頭部的標(biāo)題大于下一個(gè)內(nèi)容塊的標(biāo)題，因此整個(gè)頁面看起來和諧一致。

相同的原理適用于內(nèi)容塊內(nèi)的可視層次結(jié)構(gòu)。標(biāo)題應(yīng)該是頁面上最大的設(shè)計(jì)元素，然后是較小的，不太突出的子標(biāo)題。接下來的功能標(biāo)題應(yīng)明顯小于標(biāo)題，并且粗細(xì)相同。最小的字體應(yīng)該用于功能描述。

這樣才有助于用戶區(qū)分最重要和最不重要的信息。

錯(cuò)誤?

標(biāo)題比子標(biāo)題更小，看起來是次要的，但其實(shí)應(yīng)該更重要。

正確??

標(biāo)題是頁面上最突出的元素，雖然標(biāo)題的子號不大，但仍然清晰可見。

11. 一個(gè)內(nèi)容快分為兩部分

全屏幻燈片看上去像是一個(gè)單獨(dú)的模塊。這時(shí)，應(yīng)該在幻燈片周圍留白增加空隙，與標(biāo)題使用相同的背景，這樣的文本和圖片看起來才是對的。

錯(cuò)誤?

一個(gè)全屏畫廊看起來與上面的標(biāo)題脫節(jié)，看起來像一個(gè)獨(dú)立的內(nèi)容塊。

正確??

畫廊與它上方的標(biāo)題具有相同的背景，這使得整個(gè)構(gòu)圖看起來很和諧。

12. 標(biāo)題又長又大

大字體適合短小的句子。如果標(biāo)題很長，請使用較小的字體。這樣才易于閱讀，并為頁面上的其它設(shè)計(jì)元素留出足夠的空間。

錯(cuò)誤?

標(biāo)題太大并且占據(jù)整個(gè)頁面，標(biāo)題難以閱讀。

正確??

這個(gè)頁面組合得很好，所有的設(shè)計(jì)元素都相互平衡，副標(biāo)題也很容易閱讀。

13. 錯(cuò)誤地使用帶邊框樣式的按鈕

當(dāng)按鈕是透明時(shí)，按鈕是需要有邊框。但是給有背景顏色的按鈕添加邊框沒有意義。

14. 使用太多顏色

在頁面上使用太多顏色會(huì)令人眼花繚亂，并且不清楚哪些內(nèi)容更重要。一兩種顏色足以讓視覺突出顯示真正重要的東西。

錯(cuò)誤?：頁面上有太多鮮艷的顏色，令人眼花繚亂。

正確??：一種強(qiáng)調(diào)性顏色可以多變，并且不會(huì)分散頁面內(nèi)容。

15. 過多的菜單

用戶訪問您的網(wǎng)站是希望找到解決問題的方法。所以，您要使用盡可能少的菜單選項(xiàng)幫助用戶輕松找到他們需要的內(nèi)容。

錯(cuò)誤?：此菜單包含太多信息，導(dǎo)致網(wǎng)站導(dǎo)航非常困難。

正確??：簡單的菜單讓您輕松找到所需內(nèi)容。