原文地址http://blog-en.tilda.cc/articles-website-design-mistakes
關注我的個人部落格:pinbolei.cn，獲取更多內容

常見的登陸頁面設計錯誤要避免

1.內容不會分解為邏輯塊

如果將資訊分組為邏輯塊，則使用者更容易摘要資訊。將填充設定為120 px-180 px，並使用彩色背景分隔文字塊。

圖1-1，在相關資訊集之間幾乎沒有填充，而且這種設計需要顏色塊來將內容劃分為邏輯集。結果，這些資訊難以消化，並且不清楚哪個文字應該與每個塊一起使用。
圖1-2，充足夠大，塊被顏色分開，這使得一件事立即清楚 - 這些塊包含不同型別的內容。

2.網頁上專案之間的空格不均勻

應在邏輯塊周圍設定相同大小的空格。否則您的頁面看起來會很混亂，使用者可能不會對每個部分給予同等的考慮。

圖2-1，各種寬度的空間看起來不均勻，並且會產生一種印象，即公司資訊與標題相關聯，儘管每個塊都同樣重要。
圖2-2，標題周圍的相同大小的空間和正文副本有助於將邏輯塊視為攜帶同等重要的資訊。

3.填充太小意味著使用者無法將內容分解為邏輯塊

為避免邏輯部分混入，請將它們分開並在它們之間插入一個大空間（至少120畫素）。

圖3-1，使用窄填充，組成站點的塊彼此粘在一起。這會使頁面超載並且非常混亂 - 網站訪問者會認為這是一個純文字，而不是具有不同含義的部分。
圖3-2，填充足夠大，因此可以立即看到這兩個塊之間的差異

4.避免影象上文字複製的對比度低

文字和背景之間應該有足夠的對比。要使副本突出，請在影象上放置對比度濾鏡。黑色是一種流行的顏色，但您也可以使用鮮豔的顏色混合搭配。

另一種選擇是從一開始就使用對比影象，並將副本放在照片的暗部分上。

此影象太亮，這使得閱讀文字副本太困難

應用於照片的濾鏡使影印件易於閱讀

5.一頁上的樣式太多

一頁上太多的排版和設計風格使它看起來不專業且難以閱讀。要避免這種情況，請將自己限制為單個字型和兩個飽和度選項，例如，普通和粗體。

圖5-1，由於使用了太多的排版風格，目前還不清楚重點在哪裡。
圖5-2，一種字型，一種顏色和兩種飽和度。頁面上的排版看起來整潔明瞭。

6.顏色塊太窄

避免使用顏色強調窄頁面元素。它看起來不太好看。例如，由於標題的大小，型別飽和度和填充，標題已經很好地標記。您想突出顯示頁面上的特定點嗎？使用整個塊的顏色背景，包括相關的標題和文字副本。

圖6-1，放置在彩色背景上的標題打破了頁面的連續性，看起來像是獨立的獨立元素。
圖6-2，標題和相關文字都具有相同的背景。它表明它們屬於同一個邏輯集。

7.窄列內的文字複製太多

當窄列中有大量文字副本時，很難閱讀，因為網站訪問者必須從一行跳到下一行。另外，它看起來不太好看！最好減少列數並縮短文字副本，否則沒有人會閱讀它。

圖7-1，很長的，有爭議的專欄很難讀。
圖7-2，這些列中的文字很少，因此閱讀它很容易。

8.中心文字過多

當文字很少時，頁面上的居中文字很有效，否則使用者很難有效地瀏覽它。同時，從24畫素開始增加字型大小。

如果您需要包含大量文字，請使用具有可摺疊文字副本的塊（在Tilda中，它的塊為TX12，TX16N或按鈕BF703）。

圖8-1，長而居中的文字不易閱讀。
圖8-2，標題下的短文字（兩者都居中）在頁面上看起來很好。

9.文字複製疊加在影象的基本部分上

避免使用文字覆蓋有意義的部分或影象的小細節。通過這種方式，您將使影象模糊不清並使文字難以辨認。嘗試不同的線條位置，例如居中或對齊文字或垂直放置。

圖9-1，這個標題妨礙了女人的臉。有這麼多微小的細節，很難閱讀文字。
圖9-2，影象和文字副本易於閱讀並形成良好的構圖。

10.濫用視覺層次結構

為了使資訊層次在頁面上清晰可見，封面上的標題應該大於標題的其餘部分或者至少相同的大小，例如，如果標題很長的話。

圖10-1，標題上的標題不成比例地小於下一個標題，這令人困惑。為什麼？它使第二個標題顯得更加突出。
圖10-2，標題上的標題大於下一個塊中的標題，因此整個頁面看起來一致。

相同的原理適用於邏輯塊內的可視層次結構。標題應該是頁面上最大的設計元素，然後是較小的，不太突出的子標題。接下來，隨後的功能標題應明顯小於標題，並且重量相同。最小的字型應該用於功能描述。

這將有助於網站訪問者區分最重要和最不重要的資訊。

圖10-3，標題比標題更小，看起來是次要的，儘管在這種情況下它更重要。
圖10-4，標題是頁面上最突出的元素，雖然標題以較小的型別書寫，但它們仍然清晰可見。

11.一個邏輯集分為兩個

跟隨文字的全屏影象或相簿類似於單獨的獨立塊。如果在相簿周圍新增填充，由於共享背景，文字副本和影象看起來都是邏輯整體。

圖11-1，一個全屏畫廊看起來與上面的標題脫節，看起來像一個獨立的塊。
圖11-2，畫廊與它上方的標題共享相同的背景，這使得整個構圖看起來很穩固。

12.標題太大而且很長

非常大的字型非常適合短句。如果標題很長，請使用較小尺寸的字型。它易於閱讀，併為頁面上的所有其他設計元素留出足夠的空間。

圖12-1，標題太大佔據整個封面，而設計元素爭奪空間，標題難以閱讀。
圖12-2，這個頁面組合得很好，所有的設計元素都相互平衡，副本很容易閱讀。

13.錯誤地使用邊框樣式的按鈕

當按鈕透明時，邊框是必需的。為顏色按鈕新增邊框沒有意義，它只是另一個無意義的設計功能，它會使頁面過載並使其難以閱讀。

14.使用太多顏色

在頁面上使用太多顏色會令人困惑，並且不清楚哪些位更重要。一兩種顏色足以讓視覺突出顯示真正重要的東西。

圖14-1，頁面上有太多鮮豔的顏色; 這令人困惑。
圖14-2，一種顏色的口音創造了多樣性，並且不會分散頁面內容。

15.過載選單

人們訪問網站以找到解決問題的方法。幫助他們！使用選單可以幫助人們瀏覽網站並快速輕鬆地找到他們需要的內容。請勿使用過多資訊使其超載。這足以擁有5-7個選單項。

此選單包含太多資訊，使網站導航更加困難。

簡單的選單可以輕鬆找到您需要的東西。