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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Part 3 : 簡約其實(shí)是極致的復(fù)雜

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

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

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

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

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

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

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

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

您可以在如何簡化設(shè)計(jì)中找到更多建議：

產(chǎn)品簡化改版怎么做？資深設(shè)計(jì)師的 21 條實(shí)用建議

編者按：這篇文章來自 Taras Bakusevych 的文章《How to simplify your design》 如今的數(shù)字產(chǎn)品，在不斷迭代過程中，會(huì)加入更多功能，添加更多的技術(shù)支持，更新進(jìn)階的特性。

閱讀文章 >

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

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

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

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

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

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

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

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

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

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

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

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

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

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

26.明智地選擇字體搭配：組合多種字體時(shí)，確保它們?cè)谝曈X上是互補(bǔ)的。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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