編者按：這篇文章來(lái)自資深設(shè)計(jì)師 Taras Bakusevych，長(zhǎng)期從事金融和企業(yè)類(lèi)數(shù)字產(chǎn)品的設(shè)計(jì)，在 UI/UX 設(shè)計(jì)領(lǐng)域造詣精深。他之前曾輸出過(guò)很多篇高素質(zhì)的專(zhuān)業(yè)文章，這篇文章是他 2024 年第一次更新，文中重新梳理了 UI/UX 領(lǐng)域的 58 個(gè)核心規(guī)則，幫你全面地進(jìn)階。
這次梳理一些常見(jiàn)、實(shí)用且有效的 UI 設(shè)計(jì)原則。無(wú)論你是希望更新設(shè)計(jì)方法的經(jīng)驗(yàn)豐富的設(shè)計(jì)師，還是渴望學(xué)習(xí)訣竅的新手，這些規(guī)則都是為幫助你創(chuàng)建具有視覺(jué)吸引力、且足夠直觀的 UI 界面而存在。為了駕馭目前這個(gè)復(fù)雜的領(lǐng)域，我梳理了 58 條規(guī)則，共同組成了這么一套全面的「優(yōu)雅公式」。
- ??同理：美是沒(méi)有精準(zhǔn)的普遍概念的，只有當(dāng)你真正了解你的目標(biāo)受眾時(shí)，你才能創(chuàng)造出對(duì)他們有吸引力的設(shè)計(jì)。
- ???布局：布局是呈現(xiàn)界面的畫(huà)布，它應(yīng)該毫不費(fèi)力地引導(dǎo)用戶(hù)的視覺(jué)，創(chuàng)建無(wú)縫的流程，直觀地勾連每個(gè)元素。
- ??本質(zhì)：擁抱簡(jiǎn)約，設(shè)計(jì)中的每個(gè)元素都應(yīng)該服務(wù)于一個(gè)目標(biāo)，因?yàn)榛靵y會(huì)掩蓋信息并阻礙用戶(hù)體驗(yàn)。
- ??引導(dǎo)：設(shè)計(jì)不僅要賞心悅目，更要引導(dǎo)用戶(hù)，為他們下一步應(yīng)該做什么提供清晰的途徑和線(xiàn)索。
- ??美學(xué)：美學(xué)超越單純的外觀，美學(xué)是包含設(shè)計(jì)的整體感知，創(chuàng)造了一個(gè)與用戶(hù)產(chǎn)生情感共鳴的環(huán)境。
- ??新穎：創(chuàng)新的設(shè)計(jì)吸引用戶(hù)注意力，但真正的藝術(shù)在于平衡新穎性與熟悉性，確保用戶(hù)感到好奇又舒適。
- ??一致：設(shè)計(jì)的一致性會(huì)帶來(lái)熟悉感，它確保用戶(hù)在界面的各個(gè)部分都有賓至如歸的感覺(jué)，從而建立信任，營(yíng)造易用性。
- ??參與：引人入勝的設(shè)計(jì)就像一次愉快的對(duì)話(huà)，它讓用戶(hù)保持興趣，響應(yīng)用戶(hù)的行為，并鼓勵(lì)用戶(hù)不斷回來(lái)，獲取更多的信息。
1.考慮文化和社會(huì)影響：需要考慮到受眾的不同文化和社會(huì)背景，以確保你的設(shè)計(jì)能引起廣泛和尊重的共鳴。
2.了解行業(yè)和使用環(huán)境：定制化設(shè)計(jì)，盡量符合特定的行業(yè)規(guī)范和 UI 使用的實(shí)際環(huán)境。
3.擁抱用戶(hù)統(tǒng)計(jì)：擁抱用戶(hù)的多樣性，結(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ú)特的在線(xiàn)行為和不同的期望、老年人的數(shù)字技能素養(yǎng)的變化以及他們特定的可用性需求，還有兒童獨(dú)特且不斷變化的設(shè)計(jì)要求，所有的這些都反映了強(qiáng)調(diào)了同理心和用戶(hù)體驗(yàn)的重要性。以用戶(hù)為中心的 UI 界面設(shè)計(jì)可以有效地迎合每個(gè)群體的獨(dú)特特征和偏好。
5.擁抱負(fù)空間：巧妙使用負(fù)空間來(lái)創(chuàng)建干凈、整潔的 UI 界面，突出顯示最重要的元素并提高可讀性。
6.用好黃金比例：在你的設(shè)計(jì)中融入黃金比例和三分法則，以實(shí)現(xiàn)自然平衡和美觀的視覺(jué)比例。
7.構(gòu)建視覺(jué)層次結(jié)構(gòu)：利用大小、顏色和間距的變化來(lái)創(chuàng)建有效的視覺(jué)層次結(jié)構(gòu)，引導(dǎo)用戶(hù)的眼睛首先看到最重要的信息。
8.運(yùn)用網(wǎng)格系統(tǒng)：通過(guò)網(wǎng)格系統(tǒng)為你的布局結(jié)構(gòu)化，具備一致性，確保元素的有凝聚力，內(nèi)容和諧地排列。
Allset 的 APP 的歡迎界面巧妙地利用 Z 型布局來(lái)創(chuàng)造視覺(jué)節(jié)奏，將用戶(hù)的注意力引導(dǎo)到「注冊(cè)」和「登錄」按鈕。通過(guò)網(wǎng)格系統(tǒng)和充足的負(fù)空間，設(shè)計(jì)以清晰而不喧賓奪主的方式呈現(xiàn)多變的選項(xiàng)，有效平衡信息展示與視覺(jué)的呼吸感。
9.創(chuàng)建清晰的視覺(jué)焦點(diǎn)：在布局中指定清晰的視覺(jué)焦點(diǎn)，可以立即吸引用戶(hù)注意力，并引導(dǎo)用戶(hù)與內(nèi)容交互。
10.創(chuàng)造節(jié)奏感引導(dǎo)注意力：采用有節(jié)奏的設(shè)計(jì)元素，例如重復(fù)的圖案或結(jié)構(gòu)化的布局，來(lái)創(chuàng)建視覺(jué)流，通過(guò)界面直觀地引導(dǎo)用戶(hù)的注意力。
此外，考慮利用 F 型和 Z 型布局來(lái)匹配用戶(hù)的自然掃度的習(xí)慣。在文本密集的 UI 中采用 F 式布局，戰(zhàn)略性地將關(guān)鍵信息放置在頂部和左側(cè)。
剝離非必要元素，并專(zhuān)注于對(duì)用戶(hù)真正重要的內(nèi)容。
11.通過(guò)深思熟慮來(lái)精簡(jiǎn)：優(yōu)先考慮內(nèi)容和功能，刪除任何非必要的內(nèi)容。專(zhuān)注于核心功能，創(chuàng)建精簡(jiǎn)且更加用戶(hù)友好的界面。
12.使用組織結(jié)構(gòu)來(lái)讓系統(tǒng)顯得極簡(jiǎn)：使用清晰的元素分類(lèi)和分組，通過(guò)下拉菜單或選項(xiàng)卡來(lái)組織內(nèi)容，使界面更整潔、更易于導(dǎo)航。
13.不要讓用戶(hù)思考：確保導(dǎo)航和任務(wù)流程符合邏輯且可預(yù)測(cè)。使用常見(jiàn)的 UI 元素，并將它們放置在用戶(hù)期望的位置，從而減少認(rèn)知負(fù)擔(dān)。
14.盡可能少的設(shè)計(jì)：采用極簡(jiǎn)主義方法，僅使用功能所需的元素。避免過(guò)度使用顏色、字體和圖形元素，以保持界面干凈、重點(diǎn)突出。
Tesla 應(yīng)用程序的設(shè)計(jì)注重極簡(jiǎn)主義設(shè)計(jì)，追求持久的設(shè)計(jì)美學(xué)。它主要是通過(guò)減少組件和復(fù)雜的標(biāo)簽來(lái)實(shí)現(xiàn)，它的 UI 避免使用侵略性的視覺(jué)元素，并且采用汽車(chē)本身的視覺(jué)設(shè)計(jì)元素，來(lái)作為主要視覺(jué)元素。
15.將大的任務(wù)分解為更小的步驟：將復(fù)雜的流程（例如表單或多步驟任務(wù)）拆分成更小的組件，使用進(jìn)度條和面包屑來(lái)直觀地指引用戶(hù)，告知進(jìn)度和呈現(xiàn)剩余的內(nèi)容。
16.降低時(shí)間感：優(yōu)化加載時(shí)間并簡(jiǎn)化流程，讓交互感知上更快。使用智能化的默認(rèn)設(shè)置、自動(dòng)完成等功能，結(jié)合預(yù)測(cè)文本，加快用戶(hù)輸入和決策速度。
您可以在如何簡(jiǎn)化設(shè)計(jì)中找到更多建議：
UI 設(shè)計(jì)同樣是講究藝術(shù)的，涉及引導(dǎo)用戶(hù)創(chuàng)建直觀、輕松的瀏覽體驗(yàn)。
17.精心設(shè)計(jì)吸引人的用戶(hù)引導(dǎo)流程：首先要設(shè)計(jì)一個(gè)吸引人的引導(dǎo)流程，從第一次交互開(kāi)始就向用戶(hù)介紹產(chǎn)品，有效地引導(dǎo)為 UI 界面整體體驗(yàn)奠定了基礎(chǔ)。
18.確保直觀的流程：使用富有邏輯的、逐步漸進(jìn)的流程來(lái)開(kāi)發(fā)界面，讓用戶(hù)感覺(jué)自然，只需最少的努力即可導(dǎo)航，從而增強(qiáng)整體體驗(yàn)。
19.提供上下文提示：提供上下文環(huán)境信息，例如在用戶(hù)需要時(shí)，出現(xiàn)的對(duì)應(yīng)的工具提示、彈窗和內(nèi)嵌說(shuō)明，幫助用戶(hù)理解和使用 UI。
「How We Feel」 APP 使用引人入勝的新用戶(hù)引導(dǎo)流程讓用戶(hù)能夠立即掌握產(chǎn)品的價(jià)值。有用的提示和引導(dǎo)性建議，都是根據(jù)用戶(hù)當(dāng)前的感受量身定制的，從而增強(qiáng)了用戶(hù)體驗(yàn)的控制感和直觀性。
20.實(shí)施漸進(jìn)式呈現(xiàn)：戰(zhàn)略性地向用戶(hù)展現(xiàn)信息，僅顯示每一步所必需的內(nèi)容。這種方法有助于保持界面簡(jiǎn)潔，并將用戶(hù)的注意力集中在當(dāng)前的任務(wù)上。
21.鼓勵(lì)用戶(hù)交互的設(shè)計(jì)：使用按鈕、圖標(biāo)和號(hào)召性語(yǔ)言等足夠清晰的設(shè)計(jì)元素，來(lái)引導(dǎo)用戶(hù)進(jìn)行所需的交互，確保這些元素突出且易于訪(fǎng)問(wèn)。
22.為用戶(hù)操作提供反饋：創(chuàng)建整個(gè)交互系統(tǒng)的時(shí)候，讓用戶(hù)操作具有即時(shí)視覺(jué)和聽(tīng)覺(jué)的反饋，確認(rèn)他們的交互，隨后引導(dǎo)他們進(jìn)入界面中的下一步。
23.建立排版層次結(jié)構(gòu)：使用不同的字體大小、粗細(xì)和樣式創(chuàng)建清晰的層次結(jié)構(gòu)，以引導(dǎo)用戶(hù)首先關(guān)注最重要的內(nèi)容。
24.優(yōu)先考慮可讀性：選擇易于在各種不同設(shè)備和屏幕尺寸上閱讀的字體。易讀性應(yīng)該是重中之重，尤其是對(duì)于正文文本。
25.反映品牌情緒：選擇與品牌個(gè)性相符的字體。無(wú)論是專(zhuān)業(yè)的、俏皮的還是優(yōu)雅的，排版都應(yīng)該強(qiáng)化品牌的調(diào)性。
Nike Run Club 的 APP 巧妙地采用大膽的斜體字體作為主要的視覺(jué)字體，由于APP 內(nèi)中性字體較少使用，在視覺(jué)上喚起運(yùn)動(dòng)感，具有獨(dú)特的氣質(zhì)，但又不至于讓人不知所措。
26.明智地選擇字體搭配：組合多種字體時(shí)，確保它們?cè)谝曈X(jué)上是互補(bǔ)的。
27.限制字體和樣式變化：太多的字體類(lèi)型或樣式可能會(huì)造成 UI 混亂。堅(jiān)持使用有限的字體組合，以保持干凈和有凝聚力的視覺(jué)。
28.調(diào)整行距、字距和行高：字符（字距）、單詞和行之間的適當(dāng)間距，可提高可讀性和文本的流暢性。嘗試不同的設(shè)置，找到最具視覺(jué)吸引力和可讀性的格式版面。
29.對(duì)比度是關(guān)鍵：確保文本和背景之間有足夠的對(duì)比度，以增強(qiáng)可讀性和可訪(fǎng)問(wèn)性。
30.使用一致的配色方案：創(chuàng)造一套足以反映你的品牌特質(zhì)的一致的調(diào)色板，并在整個(gè)界面上一致地使用它以保持視覺(jué)連貫性。
31.使用 631 原則來(lái)平衡配色：配色的時(shí)候使用 60% 主色、30% 輔助色和 10% 強(qiáng)調(diào)色，以創(chuàng)建視覺(jué)上和諧的效果。
MasterClass 的 APP 是 631 原則在設(shè)計(jì)中應(yīng)用的典范，展示了如何有效利用這一原則來(lái)增強(qiáng)用戶(hù)界面的美觀性和功能性。
32.了解色彩心理學(xué)和色彩的文化意義：考慮不同的顏色在不同的文化中喚起不同的情感和意義。根據(jù)受眾的認(rèn)知，來(lái)定制配色，這樣可以增強(qiáng)用戶(hù)體驗(yàn)并避免失誤。
33.使用顏色語(yǔ)義來(lái)傳達(dá)狀態(tài)：使用不同的眼顏色來(lái)直觀地傳達(dá)狀態(tài)，例如紅色表示錯(cuò)誤、綠色表示成功，這樣幫助用戶(hù)快速理解系統(tǒng)的反饋。
34.使用顏色來(lái)引導(dǎo)交互：策略性地利用不同顏色來(lái)突出顯示關(guān)鍵交互，例如關(guān)鍵按鈕和鏈接，引導(dǎo)用戶(hù)對(duì)重要交互的注意力。
35.優(yōu)先考慮內(nèi)容而不是過(guò)多的 UI 樣式：專(zhuān)注于通過(guò)視覺(jué)來(lái)傳遞內(nèi)容，而不用過(guò)多的 UI 裝飾元素來(lái)壓倒用戶(hù)視覺(jué)，不言自明的設(shè)計(jì)是最好的。
36.帶著目的性來(lái)使用圖像：使用能為內(nèi)容增添意義的圖像，避免使用通用的圖庫(kù)，選擇定制或精心挑選的圖像內(nèi)容，來(lái)強(qiáng)化品牌的身份。
37.保持文本簡(jiǎn)潔明了：用清晰簡(jiǎn)潔的文本補(bǔ)充視覺(jué)，避免使用長(zhǎng)段落，選擇要點(diǎn)和簡(jiǎn)短描述來(lái)增強(qiáng)視覺(jué)信息。
Hims 以?xún)?nèi)容優(yōu)先的方式，在諸多同類(lèi)中脫穎而出，最大限度地減少了對(duì)復(fù)雜 UI 樣式的依賴(lài)。它采用高質(zhì)量的視覺(jué)內(nèi)容，包括精心策劃的照片和短視頻，與 APP 的情緒和風(fēng)格一致，有助于打造一個(gè)有凝聚力的 UI 。
38.微交互和令人愉快的動(dòng)畫(huà)：結(jié)合微妙的動(dòng)畫(huà)和微交互，在不影響主要內(nèi)容的情況下提升用戶(hù)參與度。
39.使用視頻進(jìn)行動(dòng)態(tài)敘事：使用視頻內(nèi)容來(lái)動(dòng)態(tài)地?cái)⑹拢璐私忉審?fù)雜的概念。視頻在傳達(dá)靜態(tài)圖像難以表達(dá)的信息方面尤其有效。
40.搭配高質(zhì)量的產(chǎn)品特寫(xiě)或視覺(jué)渲染：對(duì)于電商累和產(chǎn)品相關(guān)的 UI，使用高質(zhì)量的產(chǎn)品照片和 3D 渲染會(huì)非常有效。詳盡且有吸引力的產(chǎn)品視覺(jué)效果可以顯著提高用戶(hù)的興趣和產(chǎn)品的銷(xiāo)量。
41.力求原創(chuàng)性和獨(dú)特性：基于原創(chuàng)的概念和獨(dú)特元素來(lái)創(chuàng)作，可以讓 UI 設(shè)計(jì)脫穎而出，讓你的產(chǎn)品在激烈的市場(chǎng)競(jìng)爭(zhēng)中更加吸引人。
42.利用最新技術(shù)：及時(shí)了解新興技術(shù)，并考慮如何將它們納入你的設(shè)計(jì)中，以提供頂尖的體驗(yàn)。
43.成為可接受的頂尖設(shè)計(jì)：突破創(chuàng)新的界限，但要確保你的設(shè)計(jì)能保持對(duì)用戶(hù)友好，并且吸引目標(biāo)受眾，便于訪(fǎng)問(wèn)。
這個(gè)安全網(wǎng)絡(luò) APP 使用戶(hù)能夠保護(hù)自己和社區(qū)。它對(duì)個(gè)人「特工」概念的集成到 APP 當(dāng)中，既創(chuàng)新又用戶(hù)友好，為體驗(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)用戶(hù)體驗(yàn)而不是使其復(fù)雜化：新穎性應(yīng)該始終服務(wù)于一個(gè)目的，增強(qiáng)整體用戶(hù)體驗(yàn)而不是增加不必要的復(fù)雜性。
47.開(kāi)發(fā)全面的設(shè)計(jì)系統(tǒng)：設(shè)計(jì)系統(tǒng)應(yīng)該是所有設(shè)計(jì)元素的單一來(lái)源，確保 UI 各個(gè)方面的一致性。
48.限制設(shè)計(jì)模式：使用一組一致的設(shè)計(jì)模式來(lái)簡(jiǎn)化用戶(hù)的交互模型，使界面更具可預(yù)測(cè)性，從而對(duì)用戶(hù)友好。
49.確保元素行為的可預(yù)測(cè)性：UI 元素應(yīng)該在整個(gè) APP 中表現(xiàn)出一致性，以便用戶(hù)知道交互會(huì)怎么變化。
Apple Health 是各種設(shè)備上一致的用戶(hù)體驗(yàn)的典范。其廣泛的組件和標(biāo)準(zhǔn)模板庫(kù)確保新功能和更新可以無(wú)縫集成，保持易用性和一致性。
50.使用標(biāo)準(zhǔn)化模板：對(duì)于常見(jiàn)的頁(yè)面類(lèi)型，標(biāo)準(zhǔn)化模板提供了一致的結(jié)構(gòu)，有助于用戶(hù)導(dǎo)航和對(duì)內(nèi)容理解。
51.保持跨設(shè)備一致性：不同類(lèi)型設(shè)備和平臺(tái)本身保持一致的 UI ，可以增強(qiáng)用戶(hù)體驗(yàn)，使 UI 更加平易近人、易于訪(fǎng)問(wèn)。
52.標(biāo)準(zhǔn)化的內(nèi)容指南：讓內(nèi)容呈現(xiàn)出一致的語(yǔ)氣、風(fēng)格和版面，有助于在整個(gè) UI 上保持連貫的敘述。
53.引入游戲化元素：結(jié)合積分、成就和排行榜等游戲機(jī)制來(lái)激勵(lì)用戶(hù)，刺激交互。
54.個(gè)性化和定制：為用戶(hù)提供定制的體驗(yàn)，個(gè)性化可以增加 UI 與個(gè)人用戶(hù)的相關(guān)性，從而提高參與度。
55.利用敘事技巧：在用戶(hù)界面中嵌入敘事元素，以創(chuàng)造更引人注目、更令人難忘的用戶(hù)體驗(yàn)。講故事可以以引人入勝的方式，引導(dǎo)用戶(hù)瀏覽界面。
Bloom 有效地結(jié)合了游戲化和教育，以幫助投資者保持參與感，并做出明智的投資決策。一個(gè)例子是提供隨機(jī)禮物性的股票，這是一種可變獎(jiǎng)勵(lì)，可以在用戶(hù)中創(chuàng)造一種喜悅和驚喜的感覺(jué)。
56.直觀地顯示進(jìn)度：使用進(jìn)度條等視覺(jué)指示器，向用戶(hù)展示他們的成就和進(jìn)度。這可以增加動(dòng)力和成就感。
57.納入可變獎(jiǎng)勵(lì)機(jī)制：使用驚喜和快樂(lè)的元素，例如意想不到的獎(jiǎng)勵(lì)和獎(jiǎng)金，以保持用戶(hù)的參與度和好奇心。
58.整合社交功能：整合社交功能，例如分享成就或競(jìng)爭(zhēng)，以培養(yǎng)社區(qū)意識(shí)并鼓勵(lì)持續(xù)參與。
如果發(fā)現(xiàn)這些經(jīng)驗(yàn)梳理有幫助，請(qǐng)不要錯(cuò)過(guò)我制作的海報(bào)。這是一個(gè)實(shí)用的清單，你可以用它來(lái)提高您的設(shè)計(jì)技能。你可以在這里找到它：
復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場(chǎng)，未經(jīng)允許不得轉(zhuǎn)載。
繼續(xù)閱讀本文相關(guān)話(huà)題
發(fā)評(píng)論！每天贏獎(jiǎng)品
點(diǎn)擊 登錄 后，在評(píng)論區(qū)留言，系統(tǒng)會(huì)隨機(jī)派送獎(jiǎng)品
2012年成立至今，是國(guó)內(nèi)備受歡迎的設(shè)計(jì)師平臺(tái)，提供獎(jiǎng)品贊助 聯(lián)系我們
MJ+SD智能設(shè)計(jì)
已累計(jì)誕生 772 位幸運(yùn)星
發(fā)表評(píng)論 為下方 4 條評(píng)論點(diǎn)贊，解鎖好運(yùn)彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評(píng) ↓