在數字世界中，設計不僅僅是使應用程序或網(wǎng)站看起來(lái)不錯的光滑表面處理。周到的用戶(hù)界面設計可改善數字產(chǎn)品體驗，提高全球用戶(hù)的可用性、可訪(fǎng)問(wèn)性和包容性?，F在全球有數千名設計師使用 Figma 構建 UI，Figma 宣傳總監 Thomas Lowry 注意到最好的示例遵循五種 UI 設計最佳實(shí)踐。請繼續閱讀，了解如何更好地為用戶(hù)服務(wù)，并使每一個(gè)創(chuàng )意決策都發(fā)揮重要作用。
UI設計原則是什么？
在數字設計中，UI 設計原則是設計師賴(lài)以創(chuàng )建服務(wù)和取悅用戶(hù)的設計的總體指導。“作為數字設計師，我們的工作是幫助用戶(hù)導航到他們需要的內容和功能，以完成他們想做的事情，”湯姆說(shuō)。“UI 設計原則從人類(lèi)感知的格式塔原則中汲取靈感，將設計元素分組為用戶(hù)可以輕松遵循的簡(jiǎn)單模式，以實(shí)現他們的目標。”
為什么 UI 設計原則很重要？
在 UI 設計中應用最佳實(shí)踐，可以讓每個(gè)人都更輕松地使用、遵循和享受數字產(chǎn)品。“將用戶(hù)想象成向你問(wèn)路的人。如果你只是給他們看一張地圖并期望他們記住它，他們可能會(huì )迷路，”湯姆說(shuō)。“但是，如果你向他們指出一個(gè)標志，上面寫(xiě)著(zhù)他們的目的地是這樣的，他們就可以從那里跟隨標志？這是一種更好的體驗。UI 設計原則可以幫助你設置用戶(hù)可以遵循的標志來(lái)實(shí)現他們的目標——只需點(diǎn)擊一下，滾動(dòng)或一次交互。”
清晰、一致的 UI 設計原則也讓設計師更容易做出決策。預先建立 UI 設計原則可以減輕設計師的認知負擔，并使產(chǎn)品團隊更加高效。Figma 數據分析師發(fā)現，能夠訪(fǎng)問(wèn)設計系統的參與者比沒(méi)有訪(fǎng)問(wèn)設計系統的參與者完成設計目標的速度快 34% 。
改進(jìn)產(chǎn)品的 5 個(gè) UI 設計原則
Figma 的設計師社區共享了數百個(gè) UI 套件、模板和插件，最成功的示例有五個(gè)共同的 UI 設計原則。“將這五個(gè) UI 原則結合在一起將有助于改進(jìn)任何數字產(chǎn)品，”Tom 說(shuō)。“您可以通過(guò)應用核心圖形設計原則（例如層次結構、一致性和對齊）來(lái)提供有用的線(xiàn)索。但對于真正擅長(cháng) UI 的數字設計師來(lái)說(shuō)，他們還需要了解如何使用漸進(jìn)式披露和對比度來(lái)提高可用性和可訪(fǎng)問(wèn)性。”
1. 層級結構
設計師使用層次結構來(lái)幫助用戶(hù)識別關(guān)鍵信息，并一目了然地將它們與不太重要的元素區分開(kāi)來(lái)。“我經(jīng)常將設計數字產(chǎn)品或網(wǎng)站與設計一本書(shū)進(jìn)行比較，”湯姆說(shuō)。“在每個(gè)頁(yè)面上，導航提示都會(huì )提醒您標題、章節和內容部分，因此您永遠不會(huì )迷路。”
與圖形設計師一樣，數字設計師經(jīng)常玩弄字體的比例、粗細和顏色以及其他視覺(jué)元素，但湯姆鼓勵盡可能保持克制。“如何才能在不引入太多差異化因素的情況下吸引人們對最重要元素的關(guān)注？您可以?xún)H使用空間來(lái)建立層次結構嗎？” 他問(wèn)。
“要注意屏幕上的內容，尤其是用戶(hù)首先看到的內容以及他們必須滾動(dòng)才能看到的內容，”湯姆建議。“考慮如何確定信息的優(yōu)先級：您的 UI 內容層次結構應該反映用戶(hù)最關(guān)心的內容。”
2. 漸進(jìn)式披露
用戶(hù)體驗設計師通常使用漸進(jìn)式披露來(lái)引導用戶(hù)完成多步驟過(guò)程，提供適量的信息以便在每個(gè)步驟中做出明確的選擇。UI 設計師可以借用這種方法來(lái)優(yōu)先考慮 UI 中包含的內容以及排除的內容。“太多的功能可能會(huì )讓人不知所措，尤其是當需要做出很多決定時(shí)，”Tom 解釋道。
“聰明的數字設計師對功能和流程進(jìn)行排序，讓體驗不那么令人難以承受，”湯姆說(shuō)。“考慮一下產(chǎn)品入門(mén)流程的用戶(hù)體驗示例，它會(huì )詢(xún)問(wèn)您所有關(guān)于您自己的信息：您的姓名、聯(lián)系信息、您的角色和行業(yè)，也許您對此產(chǎn)品感興趣。如果您必須立即回答所有這些問(wèn)題，那么該屏幕可能看起來(lái)需要填寫(xiě)一份很長(cháng)的表格，而且您可能會(huì )在開(kāi)始之前就放棄，”湯姆說(shuō)。
漸進(jìn)式披露的一個(gè)注意事項是確保您不會(huì )在此過(guò)程中失去用戶(hù)。“為用戶(hù)提供一種自我定位的方法，以便他們知道自己在哪里以及需要走多少步，”湯姆建議。“我記得有一個(gè)會(huì )議評級工具，詢(xún)問(wèn)與會(huì )者他們最喜歡兩次演講中的哪一場(chǎng)。如果你只參加兩次演講，那沒(méi)問(wèn)題，但參加多次演講的人必須不斷重復這一步驟，沒(méi)有進(jìn)步感。這個(gè)工具需要不同的格式和完成欄，這樣用戶(hù)就可以看到他們在到達終點(diǎn)線(xiàn)方面取得了多少進(jìn)展。”
3、一致性
用戶(hù)可能不太清楚對您的數字產(chǎn)品有何期望，尤其是當您推出全新的技術(shù)或概念時(shí)。設計系統可以通過(guò)一致的設計線(xiàn)索使您的 UI 更易于遵循。借助可識別的路標和可預測的控件，用戶(hù)可以快速導航您的 UI 并掌控自己的體驗，而不會(huì )迷失方向或感到沮喪。
一致性也讓設計師的工作變得更輕松。“設計系統創(chuàng )造了一致性并優(yōu)化了可重復性，但其中也有效率的一部分，”湯姆指出。“為什么每次需要創(chuàng )建按鈕時(shí)都要重新發(fā)明輪子？使用一致的模式，隨著(zhù)時(shí)間的推移，該按鈕將變得熟悉并且可以被用戶(hù)預測。”
隨著(zhù)用戶(hù)在流程中前進(jìn)，連續性變得越來(lái)越重要。“如果一個(gè) UI 按鈕突然變大，用戶(hù)會(huì )想知道為什么，”Tom 說(shuō)。“這種不規則性增加了用戶(hù)的認知負擔，造成猶豫和困惑。因此，當你偏離既定模式時(shí)，你需要一個(gè)很好的理由。”
4.對比
UI 設計師仔細對比顏色和亮度，使設計與眾不同，并且更容易被低視力用戶(hù)使用——根據世界衛生組織的數據，低視力用戶(hù)在全球范圍內超過(guò)四分之一。“確保文本在背景顏色上可讀有助于使內容更易于訪(fǎng)問(wèn)，這會(huì )影響數字產(chǎn)品的 AA 和 AAA 評級，”Tom 解釋道。
白底黑字仍然是印刷媒體的標準，但 UI 設計師可以使用Figma 設計社區創(chuàng )建的對比度檢查器和插件來(lái)選擇不同的顏色。Figma 的顏色選擇功能讓 UI 設計師可以探索不同的配色方案，然后在最終設計中應用一致的顏色和對比度。Figma 的顏色選擇功能讓 UI 設計師可以探索不同的配色方案，然后在最終設計中應用一致的顏色和對比度。
他說(shuō)，UI 設計師還策略性地使用對比來(lái)吸引人們對重要內容或功能的注意。“對于一條關(guān)鍵信息——比如警告或刪除你的賬戶(hù)——你可以引入一個(gè)更高、更刺耳的對比來(lái)吸引用戶(hù)的注意力。”
5. 鄰近性
精明的設計師將具有相似功能的 UI 元素放置在一起，彼此靠近。設計師會(huì )對齊密切相關(guān)的 UI 元素 - 以流媒體服務(wù)為例，其中播放、快進(jìn)和快退按鈕等相關(guān)功能位于同一行。但如果退出按鈕位于播放按鈕旁邊，您可能會(huì )失去用戶(hù)。
