編者按：這篇文章來自資深設(shè)計師 Taras Bakusevych，長期從事金融和企業(yè)類數(shù)字產(chǎn)品的設(shè)計，在 UI/UX 設(shè)計領(lǐng)域造詣精深。他之前曾輸出過很多篇高素質(zhì)的專業(yè)文章，這篇文章是他 2024 年第一次更新，文中重新梳理了 UI/UX 領(lǐng)域的 58 個核心規(guī)則，幫你全面地進階。

這次梳理一些常見、實用且有效的 UI 設(shè)計原則。無論你是希望更新設(shè)計方法的經(jīng)驗豐富的設(shè)計師，還是渴望學習訣竅的新手，這些規(guī)則都是為幫助你創(chuàng)建具有視覺吸引力、且足夠直觀的 UI 界面而存在。為了駕馭目前這個復雜的領(lǐng)域，我梳理了 58 條規(guī)則，共同組成了這么一套全面的「優(yōu)雅公式」。

• ?同理：美是沒有精準的普遍概念的，只有當你真正了解你的目標受眾時，你才能創(chuàng)造出對他們有吸引力的設(shè)計。
• ??布局：布局是呈現(xiàn)界面的畫布，它應該毫不費力地引導用戶的視覺，創(chuàng)建無縫的流程，直觀地勾連每個元素。
• ?本質(zhì)：擁抱簡約，設(shè)計中的每個元素都應該服務(wù)于一個目標，因為混亂會掩蓋信息并阻礙用戶體驗。
• ?引導：設(shè)計不僅要賞心悅目，更要引導用戶，為他們下一步應該做什么提供清晰的途徑和線索。
• ?美學：美學超越單純的外觀，美學是包含設(shè)計的整體感知，創(chuàng)造了一個與用戶產(chǎn)生情感共鳴的環(huán)境。
• ?新穎：創(chuàng)新的設(shè)計吸引用戶注意力，但真正的藝術(shù)在于平衡新穎性與熟悉性，確保用戶感到好奇又舒適。
• ?一致：設(shè)計的一致性會帶來熟悉感，它確保用戶在界面的各個部分都有賓至如歸的感覺，從而建立信任，營造易用性。
• ?參與：引人入勝的設(shè)計就像一次愉快的對話，它讓用戶保持興趣，響應用戶的行為，并鼓勵用戶不斷回來，獲取更多的信息。

Part 1 ：文化和社會影響在塑造偏好和觀念方面，發(fā)揮著至關(guān)重要的作用

1.考慮文化和社會影響：需要考慮到受眾的不同文化和社會背景，以確保你的設(shè)計能引起廣泛和尊重的共鳴。

2.了解行業(yè)和使用環(huán)境：定制化設(shè)計，盡量符合特定的行業(yè)規(guī)范和 UI 使用的實際環(huán)境。

3.擁抱用戶統(tǒng)計：擁抱用戶的多樣性，結(jié)合對年齡、性別、職業(yè)和其他因素的調(diào)研，打造更量身定制、更有效的界面。

4.適應受眾的技術(shù)精通程度：提供自定義界面功能，以適應不同目標受眾的特定技術(shù)水平。

尼爾森·諾曼集團針對不同人群的進行了研究，調(diào)研發(fā)現(xiàn)了年輕人獨特的在線行為和不同的期望、老年人的數(shù)字技能素養(yǎng)的變化以及他們特定的可用性需求，還有兒童獨特且不斷變化的設(shè)計要求，所有的這些都反映了強調(diào)了同理心和用戶體驗的重要性。以用戶為中心的 UI 界面設(shè)計可以有效地迎合每個群體的獨特特征和偏好。

Part 2 ：精心規(guī)劃的 UI 布局不僅僅是將元素放置在屏幕上，而是創(chuàng)造一個富有韻律、節(jié)奏和層次的視覺來引導、取悅和吸引用戶。

5.擁抱負空間：巧妙使用負空間來創(chuàng)建干凈、整潔的 UI 界面，突出顯示最重要的元素并提高可讀性。

6.用好黃金比例：在你的設(shè)計中融入黃金比例和三分法則，以實現(xiàn)自然平衡和美觀的視覺比例。

7.構(gòu)建視覺層次結(jié)構(gòu)：利用大小、顏色和間距的變化來創(chuàng)建有效的視覺層次結(jié)構(gòu)，引導用戶的眼睛首先看到最重要的信息。

8.運用網(wǎng)格系統(tǒng)：通過網(wǎng)格系統(tǒng)為你的布局結(jié)構(gòu)化，具備一致性，確保元素的有凝聚力，內(nèi)容和諧地排列。

Allset 的 APP 的歡迎界面巧妙地利用 Z 型布局來創(chuàng)造視覺節(jié)奏，將用戶的注意力引導到「注冊」和「登錄」按鈕。通過網(wǎng)格系統(tǒng)和充足的負空間，設(shè)計以清晰而不喧賓奪主的方式呈現(xiàn)多變的選項，有效平衡信息展示與視覺的呼吸感。

9.創(chuàng)建清晰的視覺焦點：在布局中指定清晰的視覺焦點，可以立即吸引用戶注意力，并引導用戶與內(nèi)容交互。

10.創(chuàng)造節(jié)奏感引導注意力：采用有節(jié)奏的設(shè)計元素，例如重復的圖案或結(jié)構(gòu)化的布局，來創(chuàng)建視覺流，通過界面直觀地引導用戶的注意力。

此外，考慮利用 F 型和 Z 型布局來匹配用戶的自然掃度的習慣。在文本密集的 UI 中采用 F 式布局，戰(zhàn)略性地將關(guān)鍵信息放置在頂部和左側(cè)。

Part 3 : 簡約其實是極致的復雜

剝離非必要元素，并專注于對用戶真正重要的內(nèi)容。

11.通過深思熟慮來精簡：優(yōu)先考慮內(nèi)容和功能，刪除任何非必要的內(nèi)容。專注于核心功能，創(chuàng)建精簡且更加用戶友好的界面。

12.使用組織結(jié)構(gòu)來讓系統(tǒng)顯得極簡：使用清晰的元素分類和分組，通過下拉菜單或選項卡來組織內(nèi)容，使界面更整潔、更易于導航。

13.不要讓用戶思考：確保導航和任務(wù)流程符合邏輯且可預測。使用常見的 UI 元素，并將它們放置在用戶期望的位置，從而減少認知負擔。

14.盡可能少的設(shè)計：采用極簡主義方法，僅使用功能所需的元素。避免過度使用顏色、字體和圖形元素，以保持界面干凈、重點突出。

Tesla 應用程序的設(shè)計注重極簡主義設(shè)計，追求持久的設(shè)計美學。它主要是通過減少組件和復雜的標簽來實現(xiàn)，它的 UI 避免使用侵略性的視覺元素，并且采用汽車本身的視覺設(shè)計元素，來作為主要視覺元素。

15.將大的任務(wù)分解為更小的步驟：將復雜的流程（例如表單或多步驟任務(wù)）拆分成更小的組件，使用進度條和面包屑來直觀地指引用戶，告知進度和呈現(xiàn)剩余的內(nèi)容。

16.降低時間感：優(yōu)化加載時間并簡化流程，讓交互感知上更快。使用智能化的默認設(shè)置、自動完成等功能，結(jié)合預測文本，加快用戶輸入和決策速度。

Part 4 : 這不僅僅是引導用戶從 A 點到 B 點；這是為了創(chuàng)造一個感覺自然、輕松且引人入勝的旅程。

UI 設(shè)計同樣是講究藝術(shù)的，涉及引導用戶創(chuàng)建直觀、輕松的瀏覽體驗。

17.精心設(shè)計吸引人的用戶引導流程：首先要設(shè)計一個吸引人的引導流程，從第一次交互開始就向用戶介紹產(chǎn)品，有效地引導為 UI 界面整體體驗奠定了基礎(chǔ)。

18.確保直觀的流程：使用富有邏輯的、逐步漸進的流程來開發(fā)界面，讓用戶感覺自然，只需最少的努力即可導航，從而增強整體體驗。

19.提供上下文提示：提供上下文環(huán)境信息，例如在用戶需要時，出現(xiàn)的對應的工具提示、彈窗和內(nèi)嵌說明，幫助用戶理解和使用 UI。

「How We Feel」 APP 使用引人入勝的新用戶引導流程讓用戶能夠立即掌握產(chǎn)品的價值。有用的提示和引導性建議，都是根據(jù)用戶當前的感受量身定制的，從而增強了用戶體驗的控制感和直觀性。

20.實施漸進式呈現(xiàn)：戰(zhàn)略性地向用戶展現(xiàn)信息，僅顯示每一步所必需的內(nèi)容。這種方法有助于保持界面簡潔，并將用戶的注意力集中在當前的任務(wù)上。

21.鼓勵用戶交互的設(shè)計：使用按鈕、圖標和號召性語言等足夠清晰的設(shè)計元素，來引導用戶進行所需的交互，確保這些元素突出且易于訪問。

22.為用戶操作提供反饋：創(chuàng)建整個交互系統(tǒng)的時候，讓用戶操作具有即時視覺和聽覺的反饋，確認他們的交互，隨后引導他們進入界面中的下一步。

Part 5 : 巧妙的排版設(shè)計可以增強可讀性和審美吸引力，從而脫穎而出。

23.建立排版層次結(jié)構(gòu)：使用不同的字體大小、粗細和樣式創(chuàng)建清晰的層次結(jié)構(gòu)，以引導用戶首先關(guān)注最重要的內(nèi)容。

24.優(yōu)先考慮可讀性：選擇易于在各種不同設(shè)備和屏幕尺寸上閱讀的字體。易讀性應該是重中之重，尤其是對于正文文本。

25.反映品牌情緒：選擇與品牌個性相符的字體。無論是專業(yè)的、俏皮的還是優(yōu)雅的，排版都應該強化品牌的調(diào)性。

Nike Run Club 的 APP 巧妙地采用大膽的斜體字體作為主要的視覺字體，由于APP 內(nèi)中性字體較少使用，在視覺上喚起運動感，具有獨特的氣質(zhì)，但又不至于讓人不知所措。

26.明智地選擇字體搭配：組合多種字體時，確保它們在視覺上是互補的。

27.限制字體和樣式變化：太多的字體類型或樣式可能會造成 UI 混亂。堅持使用有限的字體組合，以保持干凈和有凝聚力的視覺。

28.調(diào)整行距、字距和行高：字符（字距）、單詞和行之間的適當間距，可提高可讀性和文本的流暢性。嘗試不同的設(shè)置，找到最具視覺吸引力和可讀性的格式版面。

Part 6 : 正確的顏色搭配可以顯著改變用戶對產(chǎn)品的感知和交互方式。

29.對比度是關(guān)鍵：確保文本和背景之間有足夠的對比度，以增強可讀性和可訪問性。

30.使用一致的配色方案：創(chuàng)造一套足以反映你的品牌特質(zhì)的一致的調(diào)色板，并在整個界面上一致地使用它以保持視覺連貫性。

31.使用 631 原則來平衡配色：配色的時候使用 60% 主色、30% 輔助色和 10% 強調(diào)色，以創(chuàng)建視覺上和諧的效果。

MasterClass 的 APP 是 631 原則在設(shè)計中應用的典范，展示了如何有效利用這一原則來增強用戶界面的美觀性和功能性。

32.了解色彩心理學和色彩的文化意義：考慮不同的顏色在不同的文化中喚起不同的情感和意義。根據(jù)受眾的認知，來定制配色，這樣可以增強用戶體驗并避免失誤。

33.使用顏色語義來傳達狀態(tài)：使用不同的眼顏色來直觀地傳達狀態(tài)，例如紅色表示錯誤、綠色表示成功，這樣幫助用戶快速理解系統(tǒng)的反饋。

34.使用顏色來引導交互：策略性地利用不同顏色來突出顯示關(guān)鍵交互，例如關(guān)鍵按鈕和鏈接，引導用戶對重要交互的注意力。

Part 7：UI 設(shè)計中有效的視覺內(nèi)容可以增強用戶參與度和情感連接。

35.優(yōu)先考慮內(nèi)容而不是過多的 UI 樣式：專注于通過視覺來傳遞內(nèi)容，而不用過多的 UI 裝飾元素來壓倒用戶視覺，不言自明的設(shè)計是最好的。

36.帶著目的性來使用圖像：使用能為內(nèi)容增添意義的圖像，避免使用通用的圖庫，選擇定制或精心挑選的圖像內(nèi)容，來強化品牌的身份。

37.保持文本簡潔明了：用清晰簡潔的文本補充視覺，避免使用長段落，選擇要點和簡短描述來增強視覺信息。

Hims 以內(nèi)容優(yōu)先的方式，在諸多同類中脫穎而出，最大限度地減少了對復雜 UI 樣式的依賴。它采用高質(zhì)量的視覺內(nèi)容，包括精心策劃的照片和短視頻，與 APP 的情緒和風格一致，有助于打造一個有凝聚力的 UI 。

38.微交互和令人愉快的動畫：結(jié)合微妙的動畫和微交互，在不影響主要內(nèi)容的情況下提升用戶參與度。

39.使用視頻進行動態(tài)敘事：使用視頻內(nèi)容來動態(tài)地敘事，借此解釋復雜的概念。視頻在傳達靜態(tài)圖像難以表達的信息方面尤其有效。

40.搭配高質(zhì)量的產(chǎn)品特寫或視覺渲染：對于電商累和產(chǎn)品相關(guān)的 UI，使用高質(zhì)量的產(chǎn)品照片和 3D 渲染會非常有效。詳盡且有吸引力的產(chǎn)品視覺效果可以顯著提高用戶的興趣和產(chǎn)品的銷量。

Part 8：創(chuàng)新和獨特的 UI 將創(chuàng)造難忘的體驗，進而提高用戶滿意度。

41.力求原創(chuàng)性和獨特性：基于原創(chuàng)的概念和獨特元素來創(chuàng)作，可以讓 UI 設(shè)計脫穎而出，讓你的產(chǎn)品在激烈的市場競爭中更加吸引人。

42.利用最新技術(shù)：及時了解新興技術(shù)，并考慮如何將它們納入你的設(shè)計中，以提供頂尖的體驗。

43.成為可接受的頂尖設(shè)計：突破創(chuàng)新的界限，但要確保你的設(shè)計能保持對用戶友好，并且吸引目標受眾，便于訪問。

這個安全網(wǎng)絡(luò) APP 使用戶能夠保護自己和社區(qū)。它對個人「特工」概念的集成到 APP 當中，既創(chuàng)新又用戶友好，為體驗提供了新穎而合乎邏輯的增強。

44.從其他行業(yè)獲取靈感：從 UI 設(shè)計領(lǐng)域之外尋找靈感，從藝術(shù)、建筑、自然等中汲取創(chuàng)意。

45.意識到最新趨勢，但不要盲目跟隨：隨時了解當前的設(shè)計趨勢，但明智地使用它們，以確保你的設(shè)計保持其獨特的身份。

46.確保新穎的設(shè)計增強用戶體驗而不是使其復雜化：新穎性應該始終服務(wù)于一個目的，增強整體用戶體驗而不是增加不必要的復雜性。

Part 9：一致性會產(chǎn)生熟悉感，并有助于建立信任和信心。

47.開發(fā)全面的設(shè)計系統(tǒng)：設(shè)計系統(tǒng)應該是所有設(shè)計元素的單一來源，確保 UI 各個方面的一致性。

48.限制設(shè)計模式：使用一組一致的設(shè)計模式來簡化用戶的交互模型，使界面更具可預測性，從而對用戶友好。

49.確保元素行為的可預測性：UI 元素應該在整個 APP 中表現(xiàn)出一致性，以便用戶知道交互會怎么變化。

Apple Health 是各種設(shè)備上一致的用戶體驗的典范。其廣泛的組件和標準模板庫確保新功能和更新可以無縫集成，保持易用性和一致性。

50.使用標準化模板：對于常見的頁面類型，標準化模板提供了一致的結(jié)構(gòu)，有助于用戶導航和對內(nèi)容理解。

51.保持跨設(shè)備一致性：不同類型設(shè)備和平臺本身保持一致的 UI ，可以增強用戶體驗，使 UI 更加平易近人、易于訪問。

52.標準化的內(nèi)容指南：讓內(nèi)容呈現(xiàn)出一致的語氣、風格和版面，有助于在整個 UI 上保持連貫的敘述。

Part 10：創(chuàng)造更加身臨其境的娛樂化用戶體驗。

53.引入游戲化元素：結(jié)合積分、成就和排行榜等游戲機制來激勵用戶，刺激交互。

54.個性化和定制：為用戶提供定制的體驗，個性化可以增加 UI 與個人用戶的相關(guān)性，從而提高參與度。

55.利用敘事技巧：在用戶界面中嵌入敘事元素，以創(chuàng)造更引人注目、更令人難忘的用戶體驗。講故事可以以引人入勝的方式，引導用戶瀏覽界面。

Bloom 有效地結(jié)合了游戲化和教育，以幫助投資者保持參與感，并做出明智的投資決策。一個例子是提供隨機禮物性的股票，這是一種可變獎勵，可以在用戶中創(chuàng)造一種喜悅和驚喜的感覺。

56.直觀地顯示進度：使用進度條等視覺指示器，向用戶展示他們的成就和進度。這可以增加動力和成就感。

57.納入可變獎勵機制：使用驚喜和快樂的元素，例如意想不到的獎勵和獎金，以保持用戶的參與度和好奇心。

58.整合社交功能：整合社交功能，例如分享成就或競爭，以培養(yǎng)社區(qū)意識并鼓勵持續(xù)參與。

如果發(fā)現(xiàn)這些經(jīng)驗梳理有幫助，請不要錯過我制作的海報。這是一個實用的清單，你可以用它來提高您的設(shè)計技能。你可以在這里找到它：

https://www.figma.com/community/file/1326467076529354215/poster-58-rules-for-stunning-and-effective-user-interface-design

陳子木