與我們作為網(wǎng)頁設(shè)計師所做的一切一樣，UI設(shè)計原則都圍繞著用戶，使視覺元素和產(chǎn)品更加用戶友好。作為UI設(shè)計師，我們的目標(biāo)是創(chuàng)建盡可能簡化的體驗，以便人們可以享受網(wǎng)站并輕松瀏覽它。

良好的用戶界面對于良好的用戶體驗至關(guān)重要。如果界面不允許人們輕松使用網(wǎng)站或應(yīng)用程序，他們將不會使用該產(chǎn)品，或者他們將用成本壓倒技術(shù)支持，不斷膨脹的成本。

UI具有真實、切實的業(yè)務(wù)影響，它對企業(yè)的成功至關(guān)重要。

其中許多原則歸結(jié)為“讓用戶的生活更輕松”。

這 14 條用戶界面設(shè)計原則將提高用戶的可用性，讓他們在使用產(chǎn)品的同時享受產(chǎn)品。

1、將用戶置于中心

與往常一樣，第一個UI設(shè)計原則是關(guān)注人（或者，我們都說的“用戶”）。一個好的用戶界面使用起來簡單自然，避免混淆用戶，并滿足用戶的需求。

您需要了解您的用戶是誰以及他們想要做什么。他們是專家嗎？最好的方法是與他們交談。創(chuàng)建和組織采訪超出了本文的范圍，采訪你的客戶，了解他們是誰，并為他們開發(fā)UI設(shè)計。了解以人為本的設(shè)計將幫助您獲得最佳界面的正確心態(tài)，并首先關(guān)注用戶，然后才是設(shè)計。

2、力求清晰

用戶界面的目的是允許用戶與網(wǎng)站或應(yīng)用程序（或者，在更廣泛的設(shè)計中，任何產(chǎn)品）進行交互。避免任何讓人們感到困惑或無助于他們互動的事情。

3、最小化每個屏幕的操作和步驟

簡化任務(wù)和操作，以便它們可以通過盡可能少的步驟完成。每個屏幕都應(yīng)該有一個主要焦點。例如，此博客的目的是讓您閱讀并希望能夠享受它并從中學(xué)習(xí)。不是在平臺上分享它或給同事發(fā)電子郵件（盡管如果你覺得它有足夠的價值可以分享，請這樣做）。

將主要動作保持在前面和中心，并將次要動作移到頁面的更深處，或者賦予它們更輕的視覺重量和正確的排版。

4、簡單

經(jīng)典的存在是有原因的；它們是永恒的，永遠不會過時，盡管它們確實受益于現(xiàn)代風(fēng)格。想想黑色小禮服或燕尾服；每個都是時尚風(fēng)格的主食。它們簡單、優(yōu)雅，為佩戴者增添了一絲優(yōu)雅。

用戶界面應(yīng)該簡單而優(yōu)雅。

5、始終如一

一致性創(chuàng)造熟悉感，熟悉的界面自然更有用。坐在汽車的方向盤后面，剎車在右邊，油門在左邊，這有多令人沮喪？或者使用紅色的“提交”按鈕和綠色的“刪除”按鈕填寫 Web 表單。

一致的設(shè)計減少了用戶的摩擦。一致的設(shè)計是可以預(yù)測的?？深A(yù)測的設(shè)計意味著很容易理解如何在沒有指導(dǎo)的情況下使用功能。UI設(shè)計不僅應(yīng)該在內(nèi)部保持一致，而且在外部也是如此。工作方式相同或幾乎相同的網(wǎng)站和應(yīng)用程序的通用約定使您的網(wǎng)站易于導(dǎo)航和使用。Apple 的人機界面指南提供了跨應(yīng)用程序一致性的絕佳示例。該指南詳細說明了功能應(yīng)如何跨應(yīng)用程序和在所有 Apple 設(shè)備上運行，以便任何 Apple 產(chǎn)品的用戶可以選擇任何其他產(chǎn)品并輕松使用它。

這也意味著不要發(fā)明或重新發(fā)明常見的模式。對于設(shè)計問題已經(jīng)存在許多模式（模式也減少了認知負荷，下面的原則 9，因為用戶已經(jīng)知道他們是如何工作的）。將搜索欄放在頁面底部不會對設(shè)計產(chǎn)生革命性影響，只會令人困惑。

設(shè)計系統(tǒng)是確保UI設(shè)計一致性的好方法。

6、你的目標(biāo)：讓你的用戶界面設(shè)計不可見

不要提請注意您的用戶界面。出色的UI可以讓人們毫無摩擦地使用產(chǎn)品，而不是花時間弄清楚如何與產(chǎn)品交互。

7、提供有用的反饋

反饋可以是視覺的、音頻的（新消息警報的叮當(dāng)聲）或觸覺（在游戲中很有用，或者當(dāng)您的手機設(shè)置為“靜音”時，新電子郵件或電話的“嗡嗡聲”警報）。每個動作都應(yīng)該有反饋來表明該動作是否成功。

反饋有助于回答四個方面的問題：

1.地點：你在這里。

2.狀態(tài)：發(fā)生了什么事？它還在繼續(xù)嗎？

3.未來狀態(tài)：下一步是什么？

4.結(jié)果和結(jié)果：嘿，發(fā)生了什么？

將鼠標(biāo)懸停在導(dǎo)航項上然后改變顏色表示該項是可點擊的。按鈕應(yīng)該看起來像按鈕。反饋讓用戶知道他們是否在做正確的事情（或錯誤的事情）。

8、減少認知負荷

許多這些UI設(shè)計原則有助于減少用戶的認知負擔(dān)?；旧?，不要讓用戶思考（這也是一個有用的 UX 設(shè)計原則）。有一些常見的方法可以減少認知負荷并使您的網(wǎng)站或應(yīng)用程序的使用更加輕松：

塊動作和信息——大多數(shù)人在處理信息時可以處理七加或減兩塊信息。例如，以通常的 3-3-4 方式而不是 10 位數(shù)字序列來分解電話號碼會導(dǎo)致更少的錯誤。

記住 3-click 規(guī)則 - 查找任何信息不應(yīng)該超過 3 次點擊

最大限度地減少回憶以利于識別——上下文中的常見圖像和圖標(biāo)幫助用戶識別功能，想想垃圾桶和鈴鐺圖標(biāo)（通常用于通知）以及其他觸發(fā)預(yù)先存在的記憶的常用圖標(biāo)。這也意味著不要拿一個大多數(shù)人都理解的常用圖標(biāo)然后用它來代表其他東西，你只會讓人們感到困惑。

9、使其可訪問

UI設(shè)計需要考慮可訪問性問題。在線上，這通常意味著確保有視覺障礙的人可以訪問和使用產(chǎn)品。不要忘記色盲。大約每 12 名男性中有 1 人（大約 8%）和每 200 名女性中就有 1 人（大約 0.5%）在某種程度上存在色盲。使用顏色來強調(diào)和強調(diào)，但不要完全依靠顏色來傳達信息。

10、在UI中包含用戶反饋

不要在真空中設(shè)計。通過收集用戶反饋來測試和驗證UI選擇。觀察用戶嘗試使用您的設(shè)計（無需指導(dǎo)他們）。他們感到困惑嗎？他們能輕易達到預(yù)期的結(jié)果嗎？在設(shè)計過程中執(zhí)行此操作，并在發(fā)布后持續(xù)評估（熱圖是跟蹤UI有效性的一種方法）。

11、靈活性

創(chuàng)建一個可以在多個平臺上工作并且看起來很棒的 UI。當(dāng)然，它可能需要根據(jù)設(shè)備的外形尺寸及其操作系統(tǒng)（例如 Android 和 iOS）進行調(diào)整，但它應(yīng)該足夠靈活，可以在任何情況下工作。

12、視覺結(jié)構(gòu)

保持一致的視覺結(jié)構(gòu)，讓用戶有賓至如歸的感覺，從而營造熟悉感并緩解用戶焦慮。需要重點關(guān)注的一些元素包括視覺層次結(jié)構(gòu)，其中最重要的事情顯而易見、配色方案、一致的導(dǎo)航、重用元素以及使用網(wǎng)格創(chuàng)建視覺順序。

13、對話框應(yīng)該導(dǎo)致關(guān)閉

動作應(yīng)該有開始、中間和結(jié)束（每一步都有反饋）。例如，在進行在線購買時，我們從瀏覽和產(chǎn)品選擇轉(zhuǎn)移到結(jié)帳，然后最終確認購買完成。

14、提供明確的下一步

包括用戶在交互后可以采取的明確下一步。這可能就像在長博客文章末尾單擊“返回頂部”或指向更多信息一樣簡單。幫助用戶在下一步中實現(xiàn)他們的目標(biāo)。

在設(shè)計用戶界面時要記住的最后一個想法是，您永遠不會成功地吸引所有人。您可以盡最大努力吸引大多數(shù)人。您還可以根據(jù)角色和明確定義的用戶盡最大努力進行個性化。即便如此，你也永遠無法安撫所有人。但是，在您決定在用戶界面設(shè)計中包含和排除哪些內(nèi)容時，牢記所有這 14 條UI設(shè)計原則將有助于您在決策制定中始終將用戶放在首位。