[譯]常見網頁設計錯誤一覽

• 原文地址：Common webpage design mistakes
• 原文做者：tilda
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：StellaBauhinia
• 校對者：BillShiyaoZhang，Hopsken

常見網頁設計錯誤一覽

簡單的排版和設計訣竅，助力你編寫出出色的網頁

須要避免的首頁常見設計錯誤

1. 頁面內容沒有分割成邏輯區域

若是頁面信息被分組造成邏輯區域，用戶會更容易看懂。請把內邊距（Padding）設置成 120 像素到 180 像素，而且經過背景色把不一樣文本區域分開。

不一樣組的相關信息間沒有設置邊距，並且這個設計須要用色塊把頁面劃分出邏輯區域。因此，目前這些信息讓人很難看懂，並且文字的區域分組也很不清晰。

邊距足夠大，並且不一樣區域經過背景色分開，這讓什麼區域包含什麼信息變得一目瞭然。

2. 頁面元素的空白間距不相等

請爲頁面的邏輯區域設置相等的空白間距。不然，你的頁面會看起來很凌亂，用戶不會把注意力均分到每個區域上。

不一樣位置的空白間距不均勻，並讓人產生了公司信息與標題相連的印象，儘管每一個區域的結構是同樣的。

標題和內容上下的空白邊距相等，讓人意識到每一個邏輯區域的信息同樣重要。

3. 邊距過小，意味着用戶沒法把內容分解成不一樣邏輯區域

爲了不邏輯分區混在一塊兒，請把它們隔開並插入大段空白（至少 120 像素）。

使用了窄邊距，構成站點的區域彼此粘在了一塊兒。這讓頁面很擁擠，並且十分費解 —— 網站訪問者會覺得這是一段純文字，而不是含義不一樣的區域。

邊距足夠大，所以這兩個區域很容易被區別開。

4. 避免圖上文字與底圖對比度過低

文字和背景之間應有足夠的對比度。爲了讓文本更顯眼，在底圖上放一層（增長）對比度的濾鏡。黑色比較流行，但你也可使用鮮豔的顏色混合搭配。

另外一個選擇是從開始就使用高對比圖片，並將放在照片較暗部分的上面。

這張照片太亮，文字難以閱讀

在照片上使用濾鏡後文字易於閱讀了。

5. 頁面上太多樣式

單頁上的排版和設計樣式太多，會看起來不專業，也難以閱讀。爲了不這點，下降頁面視覺飽和度，請限制本身只用一個字體和兩個文字樣式，如普通和加粗。

因爲使用了太多的排版樣式，徹底不清楚視覺重點在哪裏。

爲視覺飽和度只使用了一種字體，一種顏色和兩種樣式。本頁排版看着很整潔。

6. 色塊區域太窄了

請不要用色塊突出狹窄的頁面元素。它就是很難看。例如，標題已經經過它們的文字大小、樣式和間距變得很顯眼了。你想突出頁面上的某一點嗎？請在整個區域上使用背景色，包括相關的標題和文本。

放置在彩色背景上的標題打破了頁面的連續性，讓它們看起來像分離的、獨立的元素。

標題和相關文本使用了相同的背景。這代表它們屬於同一邏輯區域。

7. 在窄欄中包含了太多文字

當窄欄中含有大量文字時，閱讀會很費勁，由於頁面訪問者不得不一行一行地跳轉視線。另外，它就是很難看！最好減小列數，縮短文本長度，不然沒人會看的。

長而集中的欄列很難閱讀

欄列中的文本不多，因此很容易閱讀

8. 太多居中文字了

當文本很短的時候，頁面居中是一種很好的方式，不然用戶很難高效地瀏覽。同時，從 24 像素開始增長字體大小。

若是須要包含大量文本，請使用具備可摺疊文本功能的區域（在 Tilda 中，它們是 TX十二、TX16N 或者是按鈕 BF703）。

長而集中的文字很難閱讀

標題下的短文本（均爲居中樣式）在頁面上看起來很好

9. 文字覆蓋住了圖片的重要部分

避免使用文本覆蓋圖片的有意義的部分或小細節。這樣作的話你既會模糊圖像，也使文本難以辨認。嘗試不一樣的文字位置，如居中，左對齊或者垂直放置。

這個標題擋住了女人的面容。（文字下的圖片中）有大量細節，使文本難以閱讀。

圖片和文字都容易閱讀，構圖很好。

10. 誤用視覺層次結構

爲了使頁面上的信息層次清晰可見，封面上的標題字體應該大於其他標題，或者至少是相同大小。舉個例子，若是標題很長，尤爲要這麼處理。

封面上的標題不合比例地小於下面的標題，這很讓人費解。爲何？它讓第二個標題更顯眼了。

封面上的標題比下面區域中的標題大，所以整個頁面看起來協調一致。

一樣的原理適用於邏輯區域內的視覺層次結構。標題應該是頁面上最大的設計元素，其次是較小的、不太突出的子標題。接下來，內容標題應明顯小於主標題，但使用相同的粗細程度。最小的字體應該用於內容描述。

這將有助於頁面訪問者區分最重要和次等重要的信息。

主標題比內容標題小，看着像從屬內容，儘管它在總體內容中更重要。

主標題是頁面上最突出的元素，雖然內容標題的字體較小，但仍然清晰可見。

11. 一個邏輯區域拆成兩個

一個跟在文本以後，佔據全屏的圖像或圖片畫廊，顯得跟獨立的區域很像。若是你在圖片畫廊周圍添加邊距，因爲背景一致，文字和圖像看起來是一個邏輯區域總體。

全屏的圖片畫廊看起來與上面的標題脫節，像一個獨立的區域。

圖片畫廊和它上面的標題背景一致，這使整個構圖看着緊密。

12. 標題太大太長

對短句子來講，超大字體是完美適配的。若是標題較長，請使用小號字體。這將利於閱讀，並給其它的設計元素在頁面上留出足夠的空間。

標題太大，佔據了整個封面，而別的設計元素擠在剩餘空間中，標題也很難閱讀。

這個頁面被有機地整合到一塊兒，全部的設計元素之間都是協調的，文字也利於閱讀。

13. 誤用按鈕的邊框樣式

當按鈕是透明的時候，邊框是必需的。爲一個帶顏色的按鈕添加邊框是沒有意義的，它是另外一個無心義的設計特性，會讓頁面變得擁擠，並難以閱讀。

14. 使用太多種顏色了

在頁面上使用太多種顏色很使人費解, 並且讓人鬧不清哪些部分更重要。一兩種顏色足以給真正重要的東西帶來突出的視覺效果。

頁面上鮮豔的顏色太多了，這很混亂。

一種顏色做爲基調，在此之上衍生出色彩多樣性，這樣就不干擾頁面內容了。

15. 擁擠的菜單

人們訪問網站是要爲他們的問題找到解決方法。請幫助他們！使用菜單幫助人們瀏覽網站，並簡單快速地讓他們找到須要的東西。不要堆積過多信息使他們不堪重負。5-7 個菜單項就足夠了。

這個菜單包含了太多信息，讓頁面導航變得很困難。

一個簡單的菜單讓你很容易找到你須要的東西。

文章的排版設計錯誤

1. 密密麻麻的文字長段

一堵牆同樣的文字讓閱讀變得費勁並難以理解。爲了溫馨的瀏覽體驗，請將其拆分爲段落，或引入如關鍵句樣式、圖片做爲閱讀區的分隔。

一堵牆同樣的文字，很難閱讀。

引用句或圖片這樣的頁面元素使閱讀文本更容易。

2. 標題與上下段落距離相等

標題不該該以相等距離掛在章節中間，由於它歸屬於下面的段落。標題距上方的距離應該比下方大 2-3 倍。同時，標題與下方段落的距離應該與段落間距大體相同，或者稍大一些。這樣，標題會從視覺上引領着後續文本。

標題與上下段落之間的距離相等，不清楚它屬於哪一個段落。

因爲標題使用了合適的邊距，很明顯標題屬於下面的段落。

3. 排版沒有邏輯順序

在版面設計中，字體大小對比是用來劃分不一樣視覺層次的文本，並創建嚴謹結構的。主標題應該是網頁中最突出的，子標題應該小很多，但也要清晰可見。

標題和子標題的大小大體相同，之間沒有明顯的層次結構。

頁面排版邏輯顯現出標題比副標題更重要。

4. 區域的上下間距不等

若是不一樣區域在頁面中同等重要，那它們應有相同的界面外觀，而且位置間距離應該相等。

若是封面和做者照片之間的空白太窄，看起來做者是與封面，而不是與後面的文本有更多聯繫。

因爲圖像上下方邊距相等，各個區域顯得同等重要。

5. 說明文字與圖片距離太近了

從一方面說，圖片和說明文字造成一個總體，但這是兩個獨立的元素，說明文字不該該干擾圖片。

說明文字貼着圖片，咱們單獨看它們其中一個都很彆扭。

圖片和說明文字間有不少空白，可是很明顯，說明文字是附屬於圖片的。

6. 子標題和文字間空白太少

子標題和它緊隨其後的文本屬於一個總體，可是若是文章中段落間的空白大於子標題和段落間的空白，文章看起來是不連貫的。

標題和段落之間的空白小於段落之間的空白。

標題後的空白略大於段落之間的空白。

7. 視覺突出元素放得離正文太近了

用於強調錶達的頁面元素，如關鍵句或引用句是獨立的。把它們與正文的邊距設置成 75-120 像素，就可讓他們真正顯眼。

正文與突出元素的空白間距過小了。

因爲空白間距較大，引用句變得真正顯眼了。

8. 元素間的視覺對比差過低

若是你想強調某個句子，把它加粗，而且把關鍵句的字體調到比正文字體號大 10-15 像素。讓關鍵句從正文的其他部分中脫穎而出。

關鍵句與剩餘文字混在一塊兒。看起來很亂，請儘可能避免這樣。

如今每一個人均可以一眼看到，由於字體很大，周圍有足夠的空白間距。

9. 爲窄長的文本區域使用背景色

若是你想強調頁面的一小部分，如做者信息，在它周圍設足夠的空白間距就夠了，用戶會對間隔產生印象。不要把這一部分放在背景色上，這樣會顯得不合適。

不要爲子標題加背景色。使用更大的字體和間距就足夠讓它在頁面上突出了。

10. 兩個全屏圖片中的空白

當你使用了一串的全屏圖片時，請避免在它們之間留下空白。圖片邊框是可見的，而且不須要添加額外的元素。別再加任何東西了。

全屏圖片之間的空白沒有任何意義，看起來也很差。

在這個例子中，圖片流是和諧一體的。

11. 使用了了太多設計語言

設計語言（如粗體）在使用不多的時候表現良好。使用太多，就會妨礙頁面閱讀。

不少單詞用粗體標記，因此一段文本好像斷裂了。

一些有標記的詞能夠引發讀者注意，同時並不干擾正文的其他部分。

12. 太多排版樣式

設計不該干擾可讀性。排版風格越少，重要的元素就會在視覺上越明顯。使用主標題子標題，和關鍵句樣式對比就夠了。

這段文本有太多排版元素了。他們在分散讀者注意力。

很是少的排版樣式，強調點很清晰，文本層次結構盡收眼底。

13. 在長文本中使用居中樣式

居中樣式一般用於標題和引用句，用以把它們和其他文本區別開來。一個居中的長文本很難閱讀。

一個居中的文本看起來很亂，並且很難閱讀。

向左對齊的文本對視覺瀏覽來講是溫馨的。

14. 標題與圖片太接近了

標題是一個單獨的設計元素。它不該該離下面的圖片太近。對於一個成功的標題圖片組合區域，請設置元素的間距不小於 60 像素，並添加子標題 —— 它將展開頁面內容，把正確的重點放在你須要的地方。

標題太貼近圖片，頁面快窒息了。

在這裏，標題與用圖片用子標題分開，它引領了整個區域，而不只是圖片

15. 在沒必要要的地方使用斜體

斜體用來強調文本中的一個詞或短語。它並不像加粗樣式那樣會被當即注意到，可是它確實在須要時作到了強調的效果。

不要通篇使用斜體字（正文，標題等）。若是在文本中使用了 sans-serif（無襯線）系字體，請不要使用斜體。

因爲字體大小和空白間距，這個句子已經脫穎而出，因此這裏不須要斜體。

斜體用在了正確的地方，文本加入了適量的強調元素。

16. 相對與頁面中心和其它元素來講，區域很不協調

若是你在調整頁面（改變字體大小，對齊或縮進）的時候休息一下再回顧，你能夠輕鬆地發現這個錯誤。

在這個例子中，標題偏左移了，文本偏右移了。

全部的文本元素彼此和諧。

---

做者: Ira Smirnova, Masha Belaya, Julia Zass
頁面排版設計: Julia Zass

你以爲這篇文章有用嗎？若是是，請與你的朋友分享。很是感謝！

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。