在數字世界中，設計不僅僅是使應用程序或網站看起來不錯的光滑表面處理。周到的用戶界面設計可改善數字產品體驗，提高全球用戶的可用性、可訪問性和包容性。現在全球有數千名設計師使用 Figma 構建 UI，Figma 宣傳總監 Thomas Lowry 注意到最好的示例遵循五種 UI 設計最佳實踐。請繼續閱讀，了解如何更好地為用戶服務，并使每一個創意決策都發揮重要作用。

UI設計原則是什么？

在數字設計中，UI 設計原則是設計師賴以創建服務和取悅用戶的設計的總體指導。“作為數字設計師，我們的工作是幫助用戶導航到他們需要的內容和功能，以完成他們想做的事情，”湯姆說。“UI 設計原則從人類感知的格式塔原則中汲取靈感，將設計元素分組為用戶可以輕松遵循的簡單模式，以實現他們的目標。”

為什么 UI 設計原則很重要？

在 UI 設計中應用最佳實踐，可以讓每個人都更輕松地使用、遵循和享受數字產品。“將用戶想象成向你問路的人。如果你只是給他們看一張地圖并期望他們記住它，他們可能會迷路，”湯姆說。“但是，如果你向他們指出一個標志，上面寫著他們的目的地是這樣的，他們就可以從那里跟隨標志？這是一種更好的體驗。UI 設計原則可以幫助你設置用戶可以遵循的標志來實現他們的目標——只需點擊一下，滾動或一次交互。”

清晰、一致的 UI 設計原則也讓設計師更容易做出決策。預先建立 UI 設計原則可以減輕設計師的認知負擔，并使產品團隊更加高效。Figma 數據分析師發現，能夠訪問設計系統的參與者比沒有訪問設計系統的參與者完成設計目標的速度快 34% 。

改進產品的 5 個 UI 設計原則

Figma 的設計師社區共享了數百個 UI 套件、模板和插件，最成功的示例有五個共同的 UI 設計原則。“將這五個 UI 原則結合在一起將有助于改進任何數字產品，”Tom 說。“您可以通過應用核心圖形設計原則（例如層次結構、一致性和對齊）來提供有用的線索。但對于真正擅長 UI 的數字設計師來說，他們還需要了解如何使用漸進式披露和對比度來提高可用性和可訪問性。”

1. 層級結構

設計師使用層次結構來幫助用戶識別關鍵信息，并一目了然地將它們與不太重要的元素區分開來。“我經常將設計數字產品或網站與設計一本書進行比較，”湯姆說。“在每個頁面上，導航提示都會提醒您標題、章節和內容部分，因此您永遠不會迷路。”

與圖形設計師一樣，數字設計師經常玩弄字體的比例、粗細和顏色以及其他視覺元素，但湯姆鼓勵盡可能保持克制。“如何才能在不引入太多差異化因素的情況下吸引人們對最重要元素的關注？您可以僅使用空間來建立層次結構嗎？” 他問。

“要注意屏幕上的內容，尤其是用戶首先看到的內容以及他們必須滾動才能看到的內容，”湯姆建議。“考慮如何確定信息的優先級：您的 UI 內容層次結構應該反映用戶最關心的內容。”

2. 漸進式披露

用戶體驗設計師通常使用漸進式披露來引導用戶完成多步驟過程，提供適量的信息以便在每個步驟中做出明確的選擇。UI 設計師可以借用這種方法來優先考慮 UI 中包含的內容以及排除的內容。“太多的功能可能會讓人不知所措，尤其是當需要做出很多決定時，”Tom 解釋道。

“聰明的數字設計師對功能和流程進行排序，讓體驗不那么令人難以承受，”湯姆說。“考慮一下產品入門流程的用戶體驗示例，它會詢問您所有關于您自己的信息：您的姓名、聯系信息、您的角色和行業，也許您對此產品感興趣。如果您必須立即回答所有這些問題，那么該屏幕可能看起來需要填寫一份很長的表格，而且您可能會在開始之前就放棄，”湯姆說。

漸進式披露的一個注意事項是確保您不會在此過程中失去用戶。“為用戶提供一種自我定位的方法，以便他們知道自己在哪里以及需要走多少步，”湯姆建議。“我記得有一個會議評級工具，詢問與會者他們最喜歡兩次演講中的哪一場。如果你只參加兩次演講，那沒問題，但參加多次演講的人必須不斷重復這一步驟，沒有進步感。這個工具需要不同的格式和完成欄，這樣用戶就可以看到他們在到達終點線方面取得了多少進展。”

3、一致性

用戶可能不太清楚對您的數字產品有何期望，尤其是當您推出全新的技術或概念時。設計系統可以通過一致的設計線索使您的 UI 更易于遵循。借助可識別的路標和可預測的控件，用戶可以快速導航您的 UI 并掌控自己的體驗，而不會迷失方向或感到沮喪。

一致性也讓設計師的工作變得更輕松。“設計系統創造了一致性并優化了可重復性，但其中也有效率的一部分，”湯姆指出。“為什么每次需要創建按鈕時都要重新發明輪子？使用一致的模式，隨著時間的推移，該按鈕將變得熟悉并且可以被用戶預測。”

隨著用戶在流程中前進，連續性變得越來越重要。“如果一個 UI 按鈕突然變大，用戶會想知道為什么，”Tom 說。“這種不規則性增加了用戶的認知負擔，造成猶豫和困惑。因此，當你偏離既定模式時，你需要一個很好的理由。”

4.對比

UI 設計師仔細對比顏色和亮度，使設計與眾不同，并且更容易被低視力用戶使用——根據世界衛生組織的數據，低視力用戶在全球范圍內超過四分之一。“確保文本在背景顏色上可讀有助于使內容更易于訪問，這會影響數字產品的 AA 和 AAA 評級，”Tom 解釋道。

白底黑字仍然是印刷媒體的標準，但 UI 設計師可以使用Figma 設計社區創建的對比度檢查器和插件來選擇不同的顏色。Figma 的顏色選擇功能讓 UI 設計師可以探索不同的配色方案，然后在最終設計中應用一致的顏色和對比度。Figma 的顏色選擇功能讓 UI 設計師可以探索不同的配色方案，然后在最終設計中應用一致的顏色和對比度。

他說，UI 設計師還策略性地使用對比來吸引人們對重要內容或功能的注意。“對于一條關鍵信息——比如警告或刪除你的賬戶——你可以引入一個更高、更刺耳的對比來吸引用戶的注意力。”

5. 鄰近性

精明的設計師將具有相似功能的 UI 元素放置在一起，彼此靠近。設計師會對齊密切相關的 UI 元素 - 以流媒體服務為例，其中播放、快進和快退按鈕等相關功能位于同一行。但如果退出按鈕位于播放按鈕旁邊，您可能會失去用戶。