2020 年仍然有效的 8 條網頁設計原則
已發表: 2021-07-22您的網站設計對轉化的影響比您想像的要重要。 您可以實施世界上每一種促進轉化的策略，但如果您的網頁設計看起來很垃圾，那對您沒有多大好處。
設計不僅僅是設計師所做的事情。 設計就是營銷。 設計是您的產品及其運作方式。 我對網頁設計原則了解得越多，我得到的結果就越好。
免費的用戶體驗和可用性課程
從原則到實踐。 觀看有關用戶體驗和可用性的免費課程。
以下是您應該了解和遵循的8 條有效的網頁設計原則。
1. 視覺層次
吱吱作響的車輪獲得油脂，突出的視覺效果引起注意。 視覺層次結構是優秀網頁設計背後最重要的原則之一。 這是人眼感知所見事物的順序。
鍛煉。 請按重要性排列圓圈：
如果不知道這些圈任何事情，你能對他們進行排名
容易地。 這是一個視覺層次。
您網站的某些部分比其他部分更重要（形式、號召性用語、價值主張等），並且您希望這些部分比不太重要的部分獲得更多關注。
如果您的網站菜單有 10 個項目，它們是否都同樣重要？ 您希望用戶點擊哪裡？ 使重要鏈接更加突出。
層次結構不僅僅來自大小。 亞馬遜通過使用顏色使“加入購物車”和“立即購買”號召性用語按鈕更加突出：
從業務目標開始
您應該根據您的業務目標對網站上的元素進行排名。 如果您沒有特定的目標，您將不知道該優先考慮什麼。
這是一個例子。 這是我從 Williams-Sonoma 網站截取的屏幕截圖。 他們想銷售戶外炊具。
最引人注目的是一大塊肉（讓我想要它），其次是標題（說出它是什麼）和號召性用語（得到它）。 第四名是標題下的一段文字； 第五個是免運費橫幅，頂部導航在最後。
這是視覺層次結構——網頁設計的永恆原則——做得很好。
鍛煉。 瀏覽網頁並有意識地對視覺層次結構中的元素進行排名。 然後去看看你的網站。 重要的東西（即訪問者尋求的關鍵信息）是否在層次結構中太靠下？ 讓它更加突出。
2. 神聖的比例
黃金比例是神奇的數字 1.618 (φ)。 使用由黃金比例定義的比例的設計被認為在美學上令人愉悅。
然後是斐波那契數列。 每一項都是前兩項的總和：0、1、1、2、3、5、8、13、21 等等。 有趣的是，這兩個看似無關的話題產生了完全相同的數字。
這是黃金比例的樣子：
許多藝術家和建築師使用比例來近似黃金比例。 一個著名的例子是建於古希臘的帕台農神廟：
黃金比例可以用於網頁設計嗎？ 你打賭。 這是推特：
這是 Twitter 創意總監 Doug Bowman 多年前發表的評論。 設計選擇並非偶然：
因此，如果您的佈局寬度為 960 像素，請將其除以 1.618（=593 像素）。 您知道內容區域的寬度應該是 593 像素，側邊欄應該是 367 像素。 如果網站高度為 760 像素高，您可以將其拆分為 470 像素和 290 像素的塊（760/1.618=~470）。
如果您想了解更多信息，請查看有關如何將黃金比例應用於排版的文章。
3. 希克定律
希克定律說，每增加一個選擇，做出決定所需的時間就會增加。
你在餐館裡無數次經歷過這種情況。 菜單上有很多選擇，讓您很難選擇晚餐。 如果它提供兩種選擇，做出決定所需的時間就會少得多。 這類似於選擇悖論——你提供的選擇越多，什麼都不選擇就越容易。 這兩個原則都與網頁設計有關。
用戶在您的網站上擁有的選項越多，使用起來就越困難（如果使用過的話）。 我們需要消除選擇。 為了做出更好的網頁設計，在整個設計過程中專注於消除分散注意力的選項。
在無限選擇的時代，人們需要更好的過濾器！ 如果您銷售大量產品，請添加更好的過濾器以便更輕鬆地做出決策。 葡萄酒圖書館出售大量葡萄酒。
他們在過濾器方面做得很好：
4. 費特定律
菲特定律規定，移動到目標區域（例如單擊按鈕）所需的時間是到目標的距離和目標大小的函數。 換句話說，物體越大，距離越近，使用起來就越容易。
Spotify 比其他按鈕更容易點擊“播放”：
在手機應用程序上，他們還將播放按鈕放置在易於點擊的位置。
更大並不總是更好。 佔屏幕一半的按鈕不是一個好主意，我們不需要數學研究來告訴我們。 即便如此，費特定律還是一個二元對數。 這意味著對象可用性的預測結果沿曲線運行，而不是直線。
當大小增加 20% 時，一個小按鈕更容易點擊，而一個非常大的對象，在大小增加 20% 的情況下，不會提供相同的可用性優勢。
這類似於目標大小的規則。 按鈕的大小應該與其預期的使用頻率成正比。 您可以使用鼠標跟踪來查看人們使用最多的按鈕，然後將常用按鈕放大（更容易點擊）。
讓我們想像一下您希望人們填寫的表格。 在表單的末尾，有兩個按鈕：“提交”和“重置”（清除字段）。
99.9999% 想點擊“提交”。 因此，按鈕應該比“重置”大得多。
5. 三分法
在您的設計中使用圖像是個好主意。 視覺效果比文本更快地傳達您的想法。
最好的圖像遵循三分法則：一張圖像應該被兩條等距的水平線和兩條等距的垂直線分成九個相等的部分。 重要的組成元素應該沿著這些線或它們的交叉點放置。
下面，看看右邊的圖像如何更有趣？ 這就是行動中的三分法則。
使用漂亮的大圖像有助於良好的網頁設計。 如果您的圖片更有趣，您的網站將更具吸引力。
6.格式塔設計法
格式塔心理學是一種關於心靈和大腦的理論。 它的原理是人眼在感知物體的各個部分之前先看到物體的整體。
這就是我的意思：
請注意您如何在不關注狗的每個黑點的情況下看到狗？ 格式塔主義的創始人庫爾特·科夫卡 (Kurt Koffka) 是這樣解釋的：“整體獨立於部分而存在。”
由於它與網頁設計有關，因此人們首先會看到您的整個網站，然後再區分頁眉、菜單、頁腳等。
有八項所謂的格式塔設計法則可以讓我們預測人們將如何看待某事。 以下是每個與網頁設計的關係：
1. 鄰近法則
人們將空間中靠得很近的事物組合在一起。 它們成為一個單一的感知對象。
對於有效的網頁設計，請確保不融合在一起的事物不會被視為一個整體。 同樣，您將相關的設計元素（導航菜單、頁腳等）組合在一起，以傳達它們形成一個整體。
Craigslist 使用這條法則讓人們很容易理解哪些子類別屬於“待售”：
2. 相似法則
我們將相似的事物歸為一組。 這種相似性可以以形狀、顏色、陰影或其他品質的形式出現。
在這裡，我們將黑點歸為一組，將白點歸為另一組，因為相同顏色的點看起來彼此相似。
當應用於網頁設計時，這看起來像什麼？ Mixpanel 對案例研究的鏈接使用了類似的設計，因此我們將它們視為一個組，每個組都相互加強：
3. 封閉法則
我們尋求完整性。 當未閉合的形狀或圖片的某些部分缺失時，我們的感知會填補視覺空白。 我們看到一個圓形和一個正方形，儘管下圖中實際上並不存在任何形狀。
如果沒有閉合定律，我們只會看到不同長度的不同線條。 但是閉合定律將線條組合起來形成整體形狀。
使用閉合定律可以使徽標或設計元素更有趣。 一個很好的例子是世界自然基金會標誌，它是由彼得·斯科特爵士於 1961 年設計的：
4. 對稱定律
頭腦認為物體是對稱的，圍繞一個中心點形成。 將物體分成偶數個對稱部分在感知上是令人愉悅的。
當我們看到兩個不相連的對稱元素時，大腦會在知覺上將它們連接起來，形成一個連貫的形狀。
當我們查看上圖時，我們傾向於觀察到三對對稱的支架，而不是六個單獨的支架。
人們更喜歡對稱的外觀而不是不對稱的外觀。 圖像和文本的交替列、居中的滑塊和三列列表增加了 Trello 主頁設計的視覺享受：
5. 共同命運法則
我們傾向於將物體視為沿著路徑移動的線。 我們將具有相同運動趨勢並因此在同一路徑上的對象組合在一起。
在心理上，人們將棍子或舉起的手聚集在一起指向某個地方，因為它們都指向同一個方向。 在您的網站設計中，您可以使用它來引導用戶注意某些內容（例如註冊表單、價值主張等）。
例如，如果有一組點，其中一半向上移動，另一半向下移動，我們將向上移動的點和向下移動的點視為兩個不同的單位。
6. 連續性法則
人們傾向於將一條線視為繼續其既定方向。 當對象（例如線）之間存在交叉時，我們傾向於將兩條線視為兩個單一的、不間斷的實體。 即使有重疊，刺激仍然是不同的。
Fixel 使用它來將面部連接到 bios：
還有其他格式塔定律，例如圖形和背景或良好格式塔定律。 （如果對象形成規則、簡單和有序的模式，則它們往往會在感知上組合在一起——就像奧運五環一樣。）然而，上面介紹的那些是網頁設計的最佳指導原則。
7.留白和乾淨的設計
空白（也稱為“負空間”）是網頁中保持“空白”的部分。 它是圖形之間的空間、邊距、裝訂線、列之間的空間、類型行之間的空間或視覺效果。
它不僅僅是“空白”空間——它是網頁設計的一個重要元素。 它使其中的對象能夠存在。 空白是關於信息、排版、顏色或圖像的層次結構的使用。
沒有空白的頁面，塞滿了文本或圖形，可能會顯得很忙或雜亂無章。 通常，它很難閱讀。 （人們甚至不會打擾。）這就是為什麼簡單的網站在科學上更好。
適量的空白使網站看起來“乾淨”。 雖然乾淨的設計對於傳達清晰的信息至關重要，但它不僅意味著內容減少。
乾淨的設計可以最好地利用它所在的空間。要創建乾淨的網站設計，您需要知道如何明智地使用空白來進行清晰的交流。 Made.com 很好地使用了空白：
對留白的巧妙利用，可以輕鬆地將注意力集中在主要信息和視覺效果上，並且正文易於閱讀。 一般來說，留白促進優雅和精緻，提高易讀性並推動注意力。
閱讀更多關於留白和簡約的信息。
8. 奧卡姆剃刀
當給出幾個相互競爭的假設時，奧卡姆剃刀會敦促您選擇假設最少的一個，從而提供最簡單的解釋。 把它放在網頁設計的背景下，奧卡姆剃刀認為最簡單的解決方案通常是最好的。
在一篇關於他們的 Angelpad 體驗的帖子中，Pipedrive 的團隊寫道：
Angelpad 團隊和導師以多種方式向我們提出挑戰。 “你的主頁上有太多東西”是我們最初不同意的，但我們很樂意測試。 事實證明我們確實錯了。 我們刪除了 80% 的內容，並在主頁上留下了一個註冊按鈕和一個“了解更多”鏈接。 註冊轉化率增加了 300%。
這不僅與外觀有關，還與它的工作原理有關。 一些公司——比如 37Signals——已經把“簡單”變成了一種商業模式。 這是創始人傑森·弗里德 (Jason Fried) 撰寫的《返工》一書中的引述：
很多人討厭我們，因為我們的產品比競爭對手做得少。 當我們拒絕包括他們的寵物功能時，他們受到了侮辱。 但我們為我們的產品沒有做什麼而感到自豪，因為我們為他們做了什麼而感到自豪。 我們將它們設計得很簡單，因為我們認為大多數軟件都太複雜了：功能太多、按鈕太多、混亂太多。
簡單、極簡的設計並不能保證設計會奏效。 但是，根據我的經驗，簡單總是比相反要好——因此，我們應該努力簡化我們的網頁設計。
結論
有效的網頁設計和藝術是不一樣的。 但是許多心理學和設計原則適用於網站。 您可以通過將這些法律的相關方面應用於您的佈局、排版和圖像來設計一個出色的網站。
為用戶和您的業務目標而設計。 好的網頁設計可以提供美觀和經濟上有益的結果。