每個網絡專業人士都應該知道的 20 條網站設計原則

關於作者：Alina Khazanova，產品設計師@Elementor

Alina 是 Elementor 的產品設計師。 她熱衷於為用戶帶來有價值且令人滿意的產品體驗。

遵循網站設計原則可以成就或破壞您網站的成功。 這是用戶幾乎在訪問您的主頁後就離開，或探索您的服務和產品並最終轉換之間的區別。

設計絕不是一門精確的科學。 但是，在構建專業網站時，有許多有用的原則和經驗法則可以幫助您的項目在可用性和美學方面變得更好。

在本文中，我們將解釋什麼是設計原則以及您應該了解它們的原因。 我們還將討論一些最流行和最有效的指導方針。 讓我們開始吧！

設計原則基於心理學和行為科學、物理學、人體工程學等各行各業的專業人士的貢獻。 一般來說，這些原則是指導設計師生產有效最終產品的靈活法則。 它們影響選擇或丟棄哪些元素以及這些特徵的組織方式。

設計原則可以輕鬆創建美觀且高效的用戶體驗 (UX) 和用戶界面 (UI)。 正確實施它們可以推動轉化。 例如，Pipedrive 在實施了一個關鍵的最佳實踐——簡單性後，註冊人數增加了 300%。

將設計原則納入您的項目將提高您網站的可用性，影響它們的感知方式，並最終使您能夠為您的用戶和您的網頁設計業務做出最佳決策。

網上有很多設計原則的定義，不同的設計師和其他專業人士會根據自己的需要進行解讀。 但是，無論上下文如何，都有一些最佳實踐適用。

以下是科學家和可用性專家建議的一些最流行的網站設計原則。

用戶體驗法則是通用汽車高級產品設計師喬恩·亞布隆斯基 (Jon Yablonski) 在他的著作《用戶體驗法則：使用心理學設計更好的產品和服務》中的一系列設計原則。 這些是每個設計師都應該考慮的可靠指導方針。 以下是 Yablonski 列出的一些最重要的原則：

菲茨定律源自心理學家保羅·菲茨 (Paul Fitts) 在檢查人體運動系統時所做的工作。 該定律指出，目標元素的距離和大小直接影響用戶導航到它並與之交互所需的時間。 這意味著您需要使您的主要可操作目標易於實現。

此外，如果您有多個目標，它們之間應該有足夠的空間。 例如，在為移動設備設計時，可點擊的圖標需要足夠大才能點擊：

按鈕之間的額外間距將確保用戶不會意外單擊錯誤的圖標。 通常，移動設計的最小可點擊區域應為 40 x 40 像素。

如果您之前曾經被眾多的選擇所淹沒，以至於無法在它們之間做出決定，那麼您就會明白太多的選擇會讓用戶感到麻木。 簡而言之，這就是希克定律。 可用的選擇越多，每個選擇越複雜，用戶做出決定所需的時間就越多。

希克定律，也稱為希克-海曼定律，以威廉·埃德蒙·希克和雷·海曼命名，這兩位心理學家研究了呈現給個人的刺激數量與其反應時間之間的相關性。

這個原則實際上意味著您希望消除混亂並僅向用戶展示他們需要的最重要的選項。 例如，大多數網站在確認某些操作時會在“保存”或“取消”和“是”或“否”之間做出明確選擇：

同樣，該法則也可應用於簡化您的導航菜單、展示產品或服務以及其他網站設計元素。

公共區域法則是格式塔心理學學派的幾條法則之一，它簡單地指出，如果頁面上的元素緊密地組合在一起，則它們被認為是相互關聯的。

您可以使用邊框、背景或間距來完成此操作。 例如，導航鏈接一般放在一起形成一個菜單：

這個原則是關於構圖和間距的，你會想要明智地使用它。 再舉一個例子，在按時間順序顯示預覽的博客主頁上，每個帖子的標題、描述和圖像應該在視覺上組合在一起。

Jakob 定律由 Nielsen Norman Group 的聯合創始人 Jakob Nielsen 創造，提倡在 UI 開發中使用熟悉的場景和邏輯。 您的用戶通常會期望 - 並且更喜歡 - 您的網站與他們已經熟悉的其他網站的工作方式相同。

我們每個人都圍繞網站的約定建立了心智模型。 這使您的用戶能夠專注於他們想要實現的目標，而不是在不熟悉的 UI 中學習。

這意味著您要堅持他們已經知道的內容，而不是用不熟悉的場景壓倒他們。 例如，“漢堡”圖標通常會打開某種菜單：

如果你在你的設計中使用這個圖標，它應該像你的用戶期望的那樣表現。

1910 年，心理學家馬克斯·韋特海默 (Max Wertheimer) 觀察到了鐵路道口處閃爍的一系列燈光。 雖然看起來好像有一盞燈在燈泡之間的天棚周圍移動，但它實際上是一系列打開和關閉的燈泡。

這一觀察形成了關於我們如何視覺感知物體的一系列原則的基礎。 其中之一是 Pragnanz 定律，它建議使用簡單的結構並避免複雜的形狀。

您的用戶將使用盡可能少的認知努力來解釋您的設計。 複雜的圖像將以最簡單的形式被感知。 減少認知過載應該是您設計目標的重要組成部分。

您可以通過將元素分組和對齊到相關的塊、列和部分來應用此原則，而不是將它們扔到整個頁面：

簡單的結構和元素將使解釋更容易。

接近法則是格式塔心理學的另一個原則，它指出，彼此靠近的元素將被視為一個群體。 這也減少了用戶的認知負擔，因為他們將更容易理解信息。

應用這個原則就是明智地使用間距。 組成一個組的元素應該比不同組的元素更緊密。

在許多網站標題中，菜單鏈接組合在一起，而號召性用語 (CTA) 與一側對齊或以某種方式與導航元素分開：

這是鄰近法則的完美例證。 由於菜單鏈接和 CTA 具有不同的功能，因此它們在視覺上是分開的。

另一個格式塔定律，即相似定律，指出相似的對象將被認為是相關的，無論它們之間存在多少分離。 這是具有相似配色方案、圖標和文本的樣式功能集背後的基礎：

您需要明智地使用此原則，通過相似且一致的樣式將連接的內容組合成組。

同樣來自格式塔心理學的統一連接定律指出，視覺上連接的元素將被視為比完全沒有連接的元素更相關。 該法律的一個應用是在您的入職或結帳流程中使用進度步進器：

這會創建一個視覺連接，顯示所有步驟都是同一過程的一部分。

米勒定律以認知心理學家喬治米勒的名字命名，他聲稱普通人的工作記憶中只能保留 5 到 9 條信息。 這個原則建議將內容分成塊。 例如，信用卡號通常分為四個一組，以幫助人們解析它們。

該定律強調了適當設計規劃的重要性。 隨著應用程序變得更大並獲得更多功能，它變得更難使用。 您應該考慮到這一點來規劃您的界面，以便它可以容納新功能，同時保持易於操作。

應用此規則的另一種方法是限制用戶在任何給定時間必須感知的內容量。 將內容分成塊而不是在一個塊中顯示所有內容：

此外，設計時考慮到最流行的屏幕尺寸，並控制用戶一眼就能看到的元素數量。

對您的設計持批判態度。 如果您認為某個部分的內容過多，請將其移到另一個部分並按邏輯分開項目。

該定律是由德國心理學家赫爾曼·艾賓浩斯 (Herman Ebbinghaus) 創造的，他開創了測量記憶的實驗方法。 它指出用戶將最好地記住系列中的第一個和最後一個項目。 您可以使用這種趨勢來突出顯示網頁中最重要的區域。

例如，CTA、表單或購買選項等關鍵內容在頁面頂部或底部最有效。

Jakob Nielsen——我們之前簡要提到的 Nielsen Norman Group 的聯合創始人——發明了幾種可用性方法，包括我們將要討論的十項啟發式評估原則。 Nielsen Norman Group 是一家著名的 UX 研究和諮詢公司，對網絡和軟件設計領域產生了重大影響。

Nielsen 最初在 1990 年制定了這些可用性原則，但在對 249 個可用性問題的分析的基礎上對其進行了修訂，以實現最大的清晰度。 請注意，它們不是法律或特定指南，而是更一般的經驗法則。 正是因為這個原因，它們被稱為“啟發式”。

用戶需要信任您的品牌並在使用您的應用程序時感到紮根。 這意味著您的網站需要不斷地傳達正在發生的事情，並讓他們知道他們的互動是否成功。

例如，電子商務商店會讓用戶知道他們已將商品添加到購物車或保存以供以後考慮。 反饋可以使用顏色變化、進度指示器、通知和警報來直觀地通知用戶。

用戶不應該需要參考字典來理解您網站上的術語。 你會想要遵守約定。 在你的界面文本中堅持使用他們已經熟悉的詞。

例如，術語“撤消”和“重做”在應用程序 UI 中具有相當普遍的含義。 將它們更改為不熟悉的術語，例如“反向”和“重複”會讓用戶迷失方向。

用戶經常會犯錯誤，並且需要一種方法來撤消或重做操作，例如使用我們前面提到的按鈕。 同樣，您可以考慮在相關時提供編輯選項。 例如，此功能通常可用於更改社交媒體應用程序中的評論和消息。

有了這些功能，用戶在發生事故時會感覺更有控制力，也不會那麼緊張。

遵守標準可能看起來類似於第二個原則，它可以被認為是它的延伸。 實現用戶熟悉的導航結構。 他們應該會發現很容易理解您的界面並訪問他們需要與您的頁面交互的任何元素。

一份關於購物車術語可用性的報告說明了這一點。 為了脫穎而出，該設計使用了“購物雪橇”一詞。 然而，50% 的用戶不明白這意味著什麼。 另一半推斷它的含義只是因為它與購物車通常在網站上的位置相同。

顯示有​​意義的錯誤消息是明智的，這樣就可以清楚地了解如何從問題中恢復以及導致問題的原因。 但是，消除容易出錯的情況或明確告知用戶他們將要採取的行動的任何已知後果會更有效。

例如，刪除用戶帳戶通常是不可逆的。 大多數應用程序會以紅色突出顯示此設置，以便突出顯示。 一個“你確定要這樣做嗎？” 如果用戶單擊刪除按鈕，通常也會顯示消息。

用戶不必記住從流程的一個步驟（例如結帳或技術設置）到另一步驟的信息。 您希望您的用戶識別而不是回憶信息。

電子商務商店可以通過提供最近查看過的商品列表來應用這種啟發式方法，因此用戶不必記住他們尚未完成購買的產品的名稱。

您希望讓您的網站對新訪問者來說更容易，但也讓那些更熟悉可能需要加速器來頻繁操作的系統的人感到舒適。 您可以提供或讓用戶能夠創建和編輯的鍵盤快捷鍵就是一個例子。

您希望保持界面整潔，而不是讓您的用戶選擇太多。 不必要的物品會爭奪空間並降低更重要功能的可見性。

清晰易懂的錯誤消息可以輕鬆查明問題的根源并快速找到可能的解決方案。 你會希望你的建議直接、禮貌（而不是責怪用戶）和建設性的，就如何從問題中恢復提供建議。

用戶有時可能需要參考額外的幫助信息。 您的文檔應該易於搜索，以便他們可以快速找到與其情況相關的內容並解決他們的問題。

了解如此多的原則和指導方針可能會讓人不知所措。 以下是應用它們的一些提示：

您將希望繼續學習和教育自己有關 UX 設計最佳實踐的知識。 從與網絡相關的現有解決方案中學習。 從研究或靈感階段開始您的項目，在這個階段您可以了解有關用戶需求的更多信息並收集高質量的參考資料以供學習。

由於每個項目都是一個單獨的案例，並將受益於不同的設計原則。 您需要優先考慮哪些對您創建的每個網站最能幫助您。 請牢記網站的主要功能、主要用戶流程以及相應的業務目標。

您需要盡可能多地與真實目標用戶一起測試您的網站。 如果您無法這樣做，您可以向同事、客戶甚至您的合作設計師尋求幫助並進行測試，以收集有關您網站可用性的相關意見。

在這個階段，你不是在尋找完美。 沒有什麼是完美的，所以不要害怕根據使用數據的反饋來完善和改進您的設計。

當您練習它們時，您幾乎會下意識地開始應用設計原則。 您在設計時考慮到可用性原則越多，您就越容易快速生成有效的解決方案並避免出現問題。

規則旨在簡化流程，但不能盲目遵循。 但是，通常只有當您完全了解規則的目的時，您才能成功地打破規則。

這些設計原則形成了一個核心工具包和基礎知識，供您試驗和發展自己獨特的風格。 一旦你掌握了它們，你就可以通過有目的地打破它們來產生非常成功的設計解決方案。

我們的 Elementor 編輯器基於設計原則和邏輯。 通過使用我們的設計功能和廣泛的小部件集合，您可以更好地組織您網站的內容結構，並確保您正在構建用戶友好的數字產品。

例如，Elementor 的部分和列可幫助您對內容進行邏輯分組。 小部件提供了一種對內容進行分塊的簡單方法，利用相似性和視覺連接的原則來減輕用戶的感知。

總的來說，Elementor 消除了從頭開始組織內容的麻煩。 使用我們的小部件和模板庫，您可以擁有多種以最佳方式實施設計原則的解決方案。

要創建專業、用戶友好的網站，您需要熟悉主要設計原則並在工作中明智地實施它們。 這將幫助您改進您的設計，使它們更有吸引力、更易於使用，最重要的是，更有利可圖。

我們在這篇文章中涵蓋了很多內容，包括 Jon Yablonski 編寫的 10 條用戶體驗法則，以及 Jakob Nielsen 開發的 10 條可用性原則。 此外，我們還分享了您可以在工作中實施這些最佳實踐的幾種方法，包括使用我們的 Elementor 編輯器。

您對在工作中應用設計原則有任何疑問嗎？ 在下面的評論部分讓我們知道！