遵循網(wǎng)站設(shè)計(jì)原則可以成就或破壞您網(wǎng)站的成功。這是用戶幾乎一訪問您的主頁就離開，或?yàn)g覽您的服務(wù)和產(chǎn)品并最終轉(zhuǎn)換之間的區(qū)別。

設(shè)計(jì)認(rèn)為設(shè)計(jì)絕不是一門精確的科學(xué)。但是，在尋求建立專業(yè)網(wǎng)站時(shí)，有許多有用的原則和經(jīng)驗(yàn)法則可以幫助您的項(xiàng)目在可用性和美觀方面更好。

在本文中，我們將解釋什么是設(shè)計(jì)原則以及為什么您應(yīng)該了解它們。我們還將討論一些最流行和最有效的指導(dǎo)方針。讓我們開始吧！

什么是網(wǎng)站設(shè)計(jì)原則？

設(shè)計(jì)原則基于心理學(xué)和行為科學(xué)、物理學(xué)、人體工程學(xué)等各行各業(yè)的專業(yè)人士的貢獻(xiàn)。一般來說，這些原則是指導(dǎo)設(shè)計(jì)師生產(chǎn)有效最終產(chǎn)品的靈活法則。它們影響選擇或丟棄哪些元素以及這些特征的組織方式。

設(shè)計(jì)原則使創(chuàng)建美觀且高效的用戶體驗(yàn) (UX) 和用戶界面 (UI) 變得容易。正確實(shí)施它們會(huì)推動(dòng)轉(zhuǎn)化。例如，國外的Pipedrive在實(shí)施了一項(xiàng)關(guān)鍵的最佳實(shí)踐——簡單之后，注冊人數(shù)增加了 300% 。

將設(shè)計(jì)原則融入您的項(xiàng)目將提高您網(wǎng)站的可用性，影響人們對它們的看法，并最終使您能夠?yàn)槟挠脩艉湍?a href="http://m.mai345.com" target="_blank" class="keylink" >網(wǎng)頁設(shè)計(jì)業(yè)務(wù)做出最佳決策。

有效網(wǎng)站設(shè)計(jì)的 20 條關(guān)鍵原則

網(wǎng)上有很多關(guān)于設(shè)計(jì)原則的定義，不同的設(shè)計(jì)師和其他專業(yè)人士會(huì)根據(jù)自己的需要進(jìn)行解讀。但是，無論上下文如何，都有一些最佳實(shí)踐適用。

以下是可用性專家建議的一些最流行的網(wǎng)站設(shè)計(jì)原則。

10 條用戶體驗(yàn) (UX) 法則

用戶體驗(yàn)法則是通用汽車高級(jí)產(chǎn)品設(shè)計(jì)師喬恩·亞布隆斯基 (Jon Yablonski) 的設(shè)計(jì)原則集合，來自他的著作《用戶體驗(yàn)法則：使用心理學(xué)設(shè)計(jì)更好的產(chǎn)品和服務(wù)》。這些是每個(gè)設(shè)計(jì)師都應(yīng)該考慮的可靠指南。以下是 Yablonski 列出的一些最重要的原則：

使主要的可操作目標(biāo)易于實(shí)現(xiàn)（菲茨定律）

菲茨定律源于心理學(xué)家保羅·菲茨在檢查人體運(yùn)動(dòng)系統(tǒng)時(shí)的工作。該定律指出，目標(biāo)元素的距離和大小直接影響用戶導(dǎo)航到它并與之交互所需的時(shí)間。這意味著您需要使您的主要可操作目標(biāo)易于實(shí)現(xiàn)。

此外，如果您有多個(gè)目標(biāo)，它們之間應(yīng)該有足夠的空間。例如，在為移動(dòng)設(shè)備設(shè)計(jì)時(shí)，可點(diǎn)擊的圖標(biāo)需要足夠大才能點(diǎn)擊：

按鈕之間的額外間距將確保用戶不會(huì)意外點(diǎn)擊錯(cuò)誤的圖標(biāo)。通常，移動(dòng)設(shè)計(jì)的最小可點(diǎn)擊區(qū)域應(yīng)為 40 x 40 像素。

盡量減少用戶的選擇（?？硕桑?

如果您曾經(jīng)對面前的選擇數(shù)量感到不知所措，以至于無法在它們之間做出決定，那么您就會(huì)明白有多少選擇會(huì)讓用戶陷入癱瘓。簡而言之，這就是?？硕伞？捎玫倪x擇越多，每個(gè)選項(xiàng)越復(fù)雜，用戶做出決定所需的時(shí)間就越長。

?？硕?，也稱為希克-海曼定律，以威廉·埃德蒙·?？撕屠住ずＢ拿置@兩位心理學(xué)家研究了呈現(xiàn)給個(gè)體的刺激數(shù)量與其反應(yīng)時(shí)間之間的相關(guān)性。

這一原則實(shí)際上意味著您希望消除混亂并僅向用戶展示他們需要的最重要的選項(xiàng)。例如，大多數(shù)網(wǎng)站在確認(rèn)某些操作時(shí)會(huì)在“保存”或“取消”和“是”或“否”之間做出明確的選擇：

同樣，該法也適用于簡化導(dǎo)航菜單、顯示產(chǎn)品或服務(wù)以及其他網(wǎng)站設(shè)計(jì)元素。

將相關(guān)元素放置在公共區(qū)域（公共區(qū)域法則）

公共區(qū)域法則是格式塔心理學(xué)學(xué)派的幾條法則之一，它簡單地指出，如果頁面上的元素緊密組合在一起，它們就會(huì)被認(rèn)為是相互關(guān)聯(lián)的 。

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

這個(gè)原則是關(guān)于構(gòu)圖和間距的，你會(huì)想要明智地使用它。作為另一個(gè)示例，在按時(shí)間順序顯示預(yù)覽的博客主頁上，每個(gè)帖子的標(biāo)題、描述和圖像應(yīng)該在視覺上分組在一起。

使用熟悉的場景和邏輯（雅各布定律）

雅各布定律由 Nielsen Norman Group 的聯(lián)合創(chuàng)始人 Jakob Nielsen 提出，提倡在 UI 開發(fā)中使用熟悉的場景和邏輯。您的用戶通常會(huì)期望 - 并且更喜歡 - 您的網(wǎng)站與他們已經(jīng)熟悉的其他網(wǎng)站的工作方式相同。

我們每個(gè)人都圍繞圍繞網(wǎng)站的約定建立心智模型。這使您的用戶能夠?qū)Ｗ⒂谒麄兿胍獙?shí)現(xiàn)的目標(biāo)，而不是在不熟悉的 UI 中學(xué)習(xí)他們的方式。

這意味著您將要堅(jiān)持他們已經(jīng)知道的內(nèi)容，而不是用不熟悉的場景壓倒他們。例如，“漢堡”圖標(biāo)通常會(huì)打開某種菜單：

如果您在設(shè)計(jì)中使用此圖標(biāo)，它的行為方式應(yīng)該符合您的用戶期望。

使用簡單的結(jié)構(gòu)，避免復(fù)雜的形狀（Pr?gnanz 法則）

1910 年，心理學(xué)家馬克斯·韋特海默 (Max Wertheimer) 在鐵路道口觀察到一系列閃爍的燈光。雖然看起來好像有一盞燈在燈泡之間的選框周圍移動(dòng)，但它實(shí)際上是一系列打開和關(guān)閉的燈泡。

這一觀察形成了一系列關(guān)于我們?nèi)绾我曈X感知物體的原則的基礎(chǔ)。其中之一是Pr?gnanz 法則，它建議使用簡單的結(jié)構(gòu)并避免復(fù)雜的形狀。

您的用戶將使用盡可能少的認(rèn)知努力來解釋您的設(shè)計(jì)。復(fù)雜的圖像將以最簡單的形式被感知。減少認(rèn)知超載應(yīng)該是您設(shè)計(jì)目標(biāo)的重要組成部分。

您可以通過將元素分組和對齊到相關(guān)的塊、列和部分來應(yīng)用此原則，而不是將它們?nèi)拥秸麄€(gè)頁面：

簡單的結(jié)構(gòu)和元素將使解釋更容易。

將分組元素彼此靠近放置（鄰近法則）

接近法則是格式塔心理學(xué)的另一個(gè)原則，它指出彼此接近的元素將被視為一個(gè)群體。這也減少了用戶的認(rèn)知超載，因?yàn)樗麄兏菀桌斫庑畔ⅰ?

應(yīng)用這個(gè)原則就是明智地利用間距。組成一個(gè)組的元素應(yīng)該比不同組的元素更接近。

在許多網(wǎng)站標(biāo)題中，菜單鏈接被組合在一起，而號(hào)召性用語 (CTA) 與一側(cè)對齊或以某種方式與導(dǎo)航元素分開：

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

使用相似性將元素組合成組（相似性法則）

另一個(gè)格式塔定律，相似性定律指出，相似的對象將被認(rèn)為是相關(guān)的，無論它們之間存在多少分離。這是具有相似配色方案、圖標(biāo)和文本的樣式功能集的基礎(chǔ)：

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

連接設(shè)計(jì)元素以顯示它們之間的關(guān)系（統(tǒng)一連通性法則）

同樣來自格式塔心理學(xué)的統(tǒng)一連通性定律指出，視覺上連接的元素將被視為比完全不連接的元素更相關(guān)。該定律的一個(gè)應(yīng)用是在您的入職或結(jié)帳流程中使用進(jìn)度步進(jìn)器：

這創(chuàng)建了一個(gè)視覺連接，顯示所有步驟都是同一過程的一部分。

將內(nèi)容分成小塊（米勒定律）

米勒定律以認(rèn)知心理學(xué)家喬治米勒的名字命名，他斷言一個(gè)普通人在他們的工作記憶中只能保留五到九條信息。該原則建議將內(nèi)容分成塊。例如，信用卡號(hào)通常分成四個(gè)一組，以幫助人們解析它們。

該法律強(qiáng)調(diào)了適當(dāng)設(shè)計(jì)規(guī)劃的重要性。隨著應(yīng)用程序變得越來越大并獲得更多功能，它變得越來越難以使用。您應(yīng)該考慮到這一點(diǎn)來規(guī)劃您的界面，以便它可以適應(yīng)新功能，同時(shí)保持易于操作。

應(yīng)用此規(guī)則的另一種方法是限制用戶在任何給定時(shí)間必須感知的內(nèi)容量。將內(nèi)容分成塊，而不是在一個(gè)塊中全部顯示：

此外，設(shè)計(jì)時(shí)要考慮最流行的屏幕尺寸，并控制用戶一眼就能看到的元素?cái)?shù)量。

對您的設(shè)計(jì)持批評(píng)態(tài)度。如果您認(rèn)為某個(gè)部分的內(nèi)容過多，請將其移至另一個(gè)部分并在邏輯上分開項(xiàng)目。

強(qiáng)調(diào)系列中的第一個(gè)和最后一個(gè)項(xiàng)目（序列位置效果）

這條定律是由德國心理學(xué)家赫爾曼·艾賓浩斯（Herman Ebbinghaus）創(chuàng)造的，他開創(chuàng)了測量記憶的實(shí)驗(yàn)方法。它指出用戶將最好地記住系列中的第一個(gè)和最后一個(gè)項(xiàng)目。您可以利用這種趨勢突出網(wǎng)頁中最重要的區(qū)域。

例如，關(guān)鍵內(nèi)容（如 CTA、表單或購買選項(xiàng)）在頁面頂部或底部最有效。

1.通過適當(dāng)?shù)姆答佔(zhàn)屇挠脩袅私馇闆r

用戶需要信任您的品牌，并在使用您的應(yīng)用程序時(shí)感到腳踏實(shí)地。這意味著您的網(wǎng)站需要不斷地傳達(dá)正在發(fā)生的事情，并讓他們知道他們的互動(dòng)是否成功。

例如，電子商務(wù)商店會(huì)讓用戶知道他們已將商品添加到購物車或保存以供日后考慮。反饋可以使用顏色變化、進(jìn)度指示器、通知和警報(bào)來直觀地通知用戶。

2.信息應(yīng)按邏輯順序顯示并使用熟悉的短語和概念

用戶無需參考字典即可理解您網(wǎng)站上的術(shù)語。你會(huì)想要遵守約定。在您的界面文本中堅(jiān)持使用他們已經(jīng)熟悉的單詞。

例如，術(shù)語“撤消”和“重做”在應(yīng)用程序 UI 中具有相當(dāng)普遍的含義。將它們更改為“reverse”和“reprise”等不熟悉的術(shù)語會(huì)讓用戶迷失方向。

3. 以用戶與您的網(wǎng)站交互的方式實(shí)現(xiàn)控制和自由

用戶經(jīng)常犯錯(cuò)誤，需要一種方法來撤消或重做操作，例如使用我們前面提到的按鈕。同樣，您可以考慮在相關(guān)時(shí)提供編輯選項(xiàng)。例如，此功能通?？捎糜诟纳缃幻襟w應(yīng)用程序中的評(píng)論和消息。

有了這些功能，用戶在事故發(fā)生時(shí)會(huì)感覺更有控制力并且不會(huì)那么緊張。

4. 遵守約定和標(biāo)準(zhǔn)

遵守標(biāo)準(zhǔn)可能看起來類似于第二個(gè)原則，它可以被認(rèn)為是它的延伸。實(shí)現(xiàn)用戶熟悉的導(dǎo)航結(jié)構(gòu)。他們應(yīng)該很容易理解您的界面并訪問他們需要與您的頁面交互的任何元素。

一份關(guān)于購物車術(shù)語可用性的報(bào)告說明了這一點(diǎn)。該設(shè)計(jì)使用“購物雪橇”一詞來脫穎而出。然而，50% 的用戶不明白這意味著什么。另一半推斷其含義只是因?yàn)樗c購物車通常在網(wǎng)站上的位置相同。

5.盡可能防止錯(cuò)誤并在用戶采取不可逆轉(zhuǎn)的行動(dòng)之前警告他們

顯示有意義的錯(cuò)誤消息很聰明，以便清楚如何從問題中恢復(fù)以及導(dǎo)致問題的原因。但是，消除容易出錯(cuò)的情況或明確告知用戶他們將要采取的行動(dòng)的任何已知后果會(huì)更有效。

例如，刪除用戶帳戶通常是不可逆轉(zhuǎn)的。大多數(shù)應(yīng)用程序會(huì)以紅色突出顯示此設(shè)置，以便突出顯示?！澳愦_定要這樣做嗎？” 如果用戶也單擊“刪除”按鈕，通常也會(huì)顯示消息。

6. 保持重要信息可見

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

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

7. 構(gòu)建適合新手和專家的系統(tǒng)

您希望您的網(wǎng)站對新訪問者來說很容易，但對于那些可能需要進(jìn)行頻繁操作的更熟悉系統(tǒng)的人來說也很舒服。您可以提供或賦予用戶創(chuàng)建和編輯能力的鍵盤快捷鍵就是一個(gè)例子。

8.讓你的設(shè)計(jì)既美觀又簡單

你會(huì)希望你的界面保持整潔，而不是讓你的用戶有太多的選擇。不必要的項(xiàng)目會(huì)爭奪空間并降低更重要功能的可見性。

9. 提供易于理解的錯(cuò)誤信息

清晰、易于理解的錯(cuò)誤消息使您可以輕松查明問題的根源并快速找到可能的解決方案。你會(huì)想要讓你的直接、禮貌（而不是責(zé)怪用戶）和建設(shè)性的，就如何從問題中恢復(fù)提供建議。

10. 提供可搜索的幫助文檔

有時(shí)用戶可能需要參考額外的幫助信息。您的文檔應(yīng)該易于搜索，以便他們可以快速找到與他們的情況相關(guān)的內(nèi)容并解決他們的問題。

如何在您的項(xiàng)目中應(yīng)用網(wǎng)站設(shè)計(jì)原則

學(xué)習(xí)這么多原則和指導(dǎo)方針可能會(huì)讓人感到不知所措。以下是應(yīng)用它們的一些提示：

1. 熟悉最佳實(shí)踐

您將希望繼續(xù)學(xué)習(xí)和教育自己 UX 設(shè)計(jì)最佳實(shí)踐。從與網(wǎng)絡(luò)相關(guān)的現(xiàn)有解決方案中學(xué)習(xí)。從研究或啟發(fā)階段開始您的項(xiàng)目，在此階段您可以更多地了解用戶的需求并收集高質(zhì)量的參考資料以供學(xué)習(xí)。

2. 選擇你明智地使用哪些原則

因?yàn)槊總€(gè)項(xiàng)目都是一個(gè)單獨(dú)的案例，并且將受益于不同的設(shè)計(jì)原則。您需要優(yōu)先考慮哪些可以為您創(chuàng)建的每個(gè)網(wǎng)站提供最大的幫助。請牢記網(wǎng)站的主要功能、主要用戶流以及相應(yīng)的業(yè)務(wù)目標(biāo)。

3. 定期測試和改進(jìn)您的設(shè)計(jì)

您需要盡可能多地使用真實(shí)的目標(biāo)用戶來測試您的網(wǎng)站。如果您無法這樣做，您可以向同事、客戶甚至您的聯(lián)合設(shè)計(jì)師尋求幫助并進(jìn)行測試，以收集有關(guān)您網(wǎng)站可用性的相關(guān)信息。

在這個(gè)階段，你不是在尋找完美。從一開始就沒有什么是完美的，所以不要害怕根據(jù)使用數(shù)據(jù)的反饋來完善和改進(jìn)您的設(shè)計(jì)。

4. 練習(xí)

當(dāng)你練習(xí)它們時(shí)，你幾乎會(huì)下意識(shí)地開始應(yīng)用設(shè)計(jì)原則。您在設(shè)計(jì)時(shí)考慮的可用性原則越多，您就越容易快速生成有效的解決方案并避免問題。

5. 形成你獨(dú)特的風(fēng)格——但前提是你了解了基礎(chǔ)知識(shí)

規(guī)則旨在簡化流程，但并不意味著盲目遵循。然而，當(dāng)你完全理解規(guī)則的目的時(shí)，你通常才能成功地打破規(guī)則。

這些設(shè)計(jì)原則構(gòu)成了一個(gè)核心工具包和基礎(chǔ)知識(shí)，供您試驗(yàn)和發(fā)展自己的獨(dú)特風(fēng)格。一旦你掌握了它們，你就可以通過有目的地打破它們來產(chǎn)生非常成功的設(shè)計(jì)解決方案。

總結(jié)

要?jiǎng)?chuàng)建專業(yè)、用戶友好的網(wǎng)站，您需要熟悉主要的設(shè)計(jì)原則并在工作中明智地實(shí)施它們。這將幫助您改進(jìn)您的設(shè)計(jì)，使其更具吸引力、更易于使用，并且最重要的是，更有利可圖。

我們在這篇文章中涵蓋了很多內(nèi)容，包括Jon Yablonski 編寫的10 條用戶體驗(yàn)法則，以及Jakob Nielsen 開發(fā)的10 條可用性原則。此外，聯(lián)系設(shè)計(jì)分享更多工作中實(shí)施這些最佳實(shí)踐的方法。