原文地址:http://blog-en.tilda.cc/articles-website-design-mistakes
原作者:Nikita Obukhov
轉(zhuǎn)發(fā)請注明來源
首頁設(shè)計的常見錯誤
1. 頁面內(nèi)容未分成對應(yīng)的邏輯塊
當(dāng)頁面被分成明顯的邏輯塊時凡涩,會更加利于用戶閱讀拣帽。試試設(shè)置 120px - 180px 之間的間距,并用不同的背景色塊來區(qū)分不同的邏輯塊。
2. 頁面元素之間的間距不對稱
邏輯塊應(yīng)該采用相同對稱的間距進(jìn)行包裹俭厚,否則頁面會看起來一片混亂,用戶不會留心觀看每個邏輯塊驶臊。
(譯:簡單來說就是會逼死強(qiáng)迫癥)
3. 太小的塊間距導(dǎo)致用戶無法將頁面內(nèi)容分成明顯的邏輯塊
使用至少 120px 以上的間距來分開不同的邏輯塊(每個塊的上扛门、下邊距,即padding)纵寝。
4. 避免圖片上的文字與圖片的對比度太低
文字與背景的背景的對比應(yīng)該足夠明顯,為了讓文字層更突出室奏,可以給背景色加上一層遮罩火焰,黑色是常用的遮罩顏色,但也可以試試混上明亮的顏色胧沫。
另一個方法是采用明暗對比明顯的圖片作為背景昌简,并把文案放在暗色部分的頂部。
5. 單個頁面用了太多樣式
一個頁面上應(yīng)用了太多不同字體和設(shè)計風(fēng)格會有一種不專業(yè)感且難以閱讀。采用單種字體以及兩種字重(如粗體和正常)來避免這種情況南蹂。
6. 色塊太窄
不要用色塊來強(qiáng)調(diào)太窄的頁面元素,比如說標(biāo)題在采用了大字體音同、粗體和上下間距后已經(jīng)足夠明顯了词爬,無需再畫蛇添足。當(dāng)你想突出頁面的某一部分的時候权均,不如直接為標(biāo)題和內(nèi)容部分整體添加一個統(tǒng)一的背景色塊顿膨。
7. 在一個很窄的列里放置太多的文案
當(dāng)在很窄的列里放置了太多的文案,用戶不得不逐行閱讀從而增加了閱讀成本必指∧矣剑砍短啰嗦的文案吧,不然也沒人會去仔細(xì)看的塔橡。
8. 居中文本過多
文本比較少的時候采用居中排版可以增加美感户辞,但是在文本內(nèi)容過度的情況下,用戶每次讀新的一行都要找一下下一行開始的位置癞谒。如果你真的有很多內(nèi)容底燎,可以把它們分成幾個塊,并用標(biāo)題來概括它們弹砚。
9. 文案與背景圖片的主體部分疊加
避免文案與圖片的主體或重要部分重疊迅栅,這會使得圖片與文字都變得難以辨認(rèn)殊校。試試改變文案的排版晴玖,比如居中读存、居左、垂直對齊呕屎。
10. 主次不分
為了分清頁面中信息的主次,封面上的字體應(yīng)該大于或至少跟其他標(biāo)題的字體大小一樣,特別是標(biāo)題很長的時候椭迎。
這個原則同樣適用于邏輯塊里的主次設(shè)計。主標(biāo)題應(yīng)該是最大的简软,然后才是次標(biāo)題蛮拔。次標(biāo)題應(yīng)明顯小于主標(biāo)題,并采用相同的字重痹升,而次標(biāo)題下面的內(nèi)容應(yīng)該采用相對最小的字體大小建炫,這樣有助于用戶區(qū)分信息的重要性。
11. 一個邏輯塊被切成了2部分
文字后面采用了全屏圖片或者滾動圖片绳锅,看起來像兩個相互獨立的部分西饵。如果在圖片或者滾動圖片周圍添加一些空白,它們就會自然地變成一個整體鳞芙,因為這時候能看到它們共同的背景色眷柔。
12. 標(biāo)題過大、過長
超大字體對于短文本很合適喳坠,但當(dāng)句子比較長的時候不妨換用小一點的字號鞠评,這樣會更利于閱讀,且不會占用太多其它元素的空間壕鹉。
13. 濫用按鈕的邊框樣式
如果按鈕是透明的脊凰,那么添加邊框是很有必要的抖棘,否則就顯得沒什么道理,只會加重頁面的負(fù)擔(dān)且難以理解。
14. 采用了太多的顏色
一個頁面采用過多的顏色顯得很混亂最岗,到底哪部分才是重要的?一到兩個顏色對于區(qū)分主次已經(jīng)足夠了朝捆。
15. 擁擠的導(dǎo)航欄
導(dǎo)航欄對于用戶導(dǎo)航和內(nèi)容查找很有幫助诊杆,但是不要過分地填充信息,這反而會讓導(dǎo)航欄難用何陆。導(dǎo)航欄上采用 5 - 7 個元素是比較合適的晨汹。