UI 設計通識:通過 60-30-10 規(guī)則增強美感
前端程序員、獨立開發(fā)者懂一些設計知識是很有必要的。
這篇文章將探索 60-30-10 規(guī)則，它在實現(xiàn)色調平衡方面發(fā)揮著重要作用。我們將深入研究這條規(guī)則的細節(jié)，以及你如何將它應用到你的設計中，同時考慮到色彩心理學，使事物更有關聯(lián)性。
我還將分享一些現(xiàn)實生活中使用 60-30-10 法則的例子。準備好進入 UI 設計色彩世界的深刻旅程吧！
目錄：
-
理解 60-30-10 法則
-
UI 設計與色彩的影響
-
如何在 UI 設計中使用 60-30-10 規(guī)則
-
針對不同的 UI 設計風格采用 60-30-10 規(guī)則
-
Neobrutalism 新野獸主義
-
Neumorphism 新擬態(tài)
-
-
網(wǎng)格系統(tǒng)和 60-30-10 規(guī)則之間的交互
-
列網(wǎng)格
-
分層的網(wǎng)格
-
-
色彩和諧的品牌標識和設計美學
-
創(chuàng)建品牌設計指南
-
60-30-10 法則的真實例子
-
Google 的 Material Design
-
蘋果的 iOS
-
Spotify
-
-
結論
理解 60-30-10 法則
在充滿激情的 UI 設計世界中，60-30-10 規(guī)則是一盞指路明燈，它為混亂的色彩帶來了秩序:
這條規(guī)則簡單而深刻，它將顏色的使用分為三個不同的類別：
- 60%為主色調：這種顏色為你的設計設定了整體基調，通常用于背景
- 30%為副色：作為主色的補充，用于較小的區(qū)域，以產(chǎn)生對比和興趣
- 10% 用于強調色：這種鮮艷的顏色可少量用于交互按鈕或關鍵元素
這是一種經(jīng)過精心設計的方法，目的是在設計中營造一種和諧感和視覺舒適感，但 60-30-10 規(guī)則不僅僅是一個美學公式。它有一個功能性目的，即引導用戶的視線穿過界面、突出重要元素并創(chuàng)建視覺層次。這種直觀的導航使界面不僅可用，而且令人愉悅。
這一規(guī)則的影響超出了單個用戶的范圍。它會影響整體用戶體驗，影響用戶的參與度和滿意度，并最終影響設計的成功。
在競爭激烈的 UI 設計領域，掌握 60-30-10 規(guī)則不僅僅是一種選擇，而是一種必要。這是創(chuàng)造不僅視覺上令人愉悅，而且用戶友好和有效的設計的關鍵。
UI 設計與色彩的影響
色彩心理學在 UI 設計中扮演著關鍵的角色，它能夠喚起情感，塑造感知并指導行為：
每種顏色都有自己的心理價值，影響著用戶與界面的交互方式。例如，紅色通常意味著緊迫性或重要性，而藍色則散發(fā)著信任和穩(wěn)定的氣息。
理解這些情感和心理聯(lián)系在 UI 設計中至關重要。設計師利用色彩心理學來創(chuàng)造期望的用戶反應。
精心選擇的色調可以引導用戶的注意力，促使他們采取行動，甚至影響他們的整體體驗。
因此，色彩心理學不僅僅是一個設計考慮因素——它是設計有效和吸引人的用戶界面的戰(zhàn)略工具。
如何在 UI 設計中使用 60-30-10 規(guī)則
在 UI 設計中應用 60-30-10 規(guī)則是一個確保界面平衡和視覺吸引力的戰(zhàn)略過程。以下是一個循序漸進的指南：
選擇主色調(60%)
這種顏色決定了你設計的整體基調。它應該是中性的或低飽和的顏色，不要壓倒其他的設計。這種顏色通常覆蓋大面積的背景。
選擇輔助色 (30%)
這種顏色應該和主色互補。它用于較小的區(qū)域，如側邊欄或次要部分，以創(chuàng)建對比和興趣。
選擇強調色(10%)
這種顏色應該是最鮮艷的，并且要謹慎地用于你想要突出的交互按鈕或關鍵元素。
記住，60-30-10 規(guī)則是一個指導方針，而不是硬性規(guī)則。請隨意調整百分比以適應您的設計。
關鍵是要保持平衡的色彩層次，引導用戶的視線穿過界面。
針對不同的 UI 設計風格采用 60-30-10 規(guī)則
許多 UI 設計風格都可以從“60-30-10”規(guī)則中獲益。在這里，我們將討論如何將這一規(guī)則應用于一些最流行的 UI 設計風格。
Neobrutalism 新野獸主義
Neobrutalism 設計風格的特點是原始，粗糙的美學，通常伴隨著大膽的排版和強烈的對比色組合。
在這種風格中，通常會看到卡片、按鈕和其他帶有重黑色邊框的組件，作為強調色(10%)。
設計的主背景是主色調（占 60%），部件的次要顏色（占 30%）始終與主色調形成強烈對比，使設計具有一種原始感。
Neumorphism 新擬態(tài)
Neumorphism 以其柔軟，逼真和簡約的外觀而聞名，它可以通過應用 60-30-10 規(guī)則來增強：
主色調(60%)構成了背景，并為設計設定了基調。一般來說，它是一種柔和的中性色調。然后輔色(30%)補充主色，提供微妙的對比，增強設計的深度和現(xiàn)實主義。這主要應用于卡片、面板或其他重要的 UI 組件等元素。
最后，強調色(10%)在吸引用戶注意小的交互元素或關鍵動作(如按鈕或圖標)方面起著很小但很關鍵的作用;它以各種方式使用，如微妙的陰影和高光。
網(wǎng)格系統(tǒng)和 60-30-10 規(guī)則之間的交互
列網(wǎng)格
它是一種布局結構，將網(wǎng)頁或屏幕分成幾列來組織其內容。
在列網(wǎng)格系統(tǒng)的上下文中，主要內容通常占據(jù)布局的中心和最大部分。重要的文字、圖片、關鍵信息等主要內容在這里顯示：
次要內容區(qū)域包括側邊欄，為用戶提供補充信息、導航菜單、鏈接或選項。這可能會占用列網(wǎng)格中 30%的可用水平空間。剩下的 10%分配給空白或填充。
它作為主要和次要內容區(qū)域之間的緩沖，提供視覺分離和干凈的外觀，同時也提高了可讀性和用戶體驗。
分層的網(wǎng)格
設計中常用的 60-30-10 規(guī)則可以有效地應用于分層網(wǎng)格系統(tǒng)中。這個系統(tǒng)是一個結構化的布局，以層次的方式安排內容元素，強調它們的重要性和關系：
在分層網(wǎng)格系統(tǒng)中，顯示最關鍵信息的主要內容區(qū)域約占可用空間的 60%。它通常包含核心信息、主要圖像或中心信息。
次要內容區(qū)域通過提供支持信息或附加上下文來補充主要內容。大約 30%的空間是專用的，這可能包括側邊欄、相關文章或輔助圖像。
第三內容區(qū)大約占布局的 10%，包含一些支持信息或元素，以增強用戶的整體體驗。它包括導航菜單、相關鏈接或按鈕等元素。
色彩和諧的品牌標識和設計美學
在適應不同品牌標識和設計語言的同時，保持色彩的和諧需要深思熟慮和靈活的方法。60-30-10 規(guī)則可以作為一個很好的指導方針，在品牌標識和設計風格之間實現(xiàn)視覺平衡和一致性。以下是如何有效應用這一規(guī)則的簡要介紹：
定義通用調色板 (60%)
首先決定一個通用的調色板，形成你的設計系統(tǒng)的基礎。理想情況下，這個調色板應該由中性和通用的顏色組成，可以與不同的品牌標識和設計美學相協(xié)調。
你設計的 60%的部分可以整合這些通用的顏色作為他們的主要背景或基礎。
適配輔助色 (30%)
你設計的 30%應該用來融入與你所使用的特定品牌標識相一致的次要顏色。
這些次要顏色的選擇應該與通用調色板形成對比和補充，同時添加代表品牌的獨特觸感。同樣重要的是要考慮這些顏色的情感和心理聯(lián)系，以確保它們與品牌的價值觀和信息產(chǎn)生共鳴。
品牌特色（10%）
最后的 10%用于品牌特有的點綴或亮點。這一小部分包括獨特的品牌色彩或奇特的設計元素，這些都是每種標識所獨有的。
創(chuàng)建品牌設計指南
記錄設計決策，創(chuàng)建詳細的設計指南或風格指南，概述如何在所有資產(chǎn)中應用 60-30-10 規(guī)則，是使設計流程簡化和一致的重要組成部分。
這個指南應該包括顏色使用、排版和布局的細節(jié)，以確保品牌未來設計的一致性。
60-30-10 法則的真實例子
60-30-10 法則不僅僅是一個理論概念;它是在成功的 UI 設計中廣泛使用的實用工具。讓我們來看看一些現(xiàn)實世界的例子。
Google 的 Material Design
谷歌的 “Material Design” 就是 60-30-10 規(guī)則的典型例子。主色調為白色（60%），用于背景。輔助色是淺灰色（30%），用于搜索欄等元素。重點色是明亮的藍色（10%），用于按鈕和鏈接。
蘋果的 iOS
蘋果的 iOS 界面也遵循 60-30-10 規(guī)則。主色調是白色(60%)，次色調是淺灰色(30%)，強調色是藍色和綠色等充滿活力的色調(10%)。
Spotify
Spotify 的界面以深色為主題。主色調為黑色（占 60%），輔助色為深灰色（占 30%），點綴色為鮮艷的綠色（占 10%）。
在每一個例子中，60-30-10 規(guī)則都有助于創(chuàng)建視覺平衡和直觀的界面。
主色提供了一個干凈的畫布，副色增加了深度，強調色將注意力吸引到關鍵元素上。這種策略性的色彩運用增強了可用性和用戶體驗。
結論
總之，60-30-10 規(guī)則是 UI 設計中的一個戰(zhàn)略工具，確保平衡的配色方案。它有助于創(chuàng)建視覺層次結構，增強用戶體驗。
色彩心理學在影響用戶情緒和行為方面起著關鍵作用。現(xiàn)實世界的例子說明了它的有效應用。
我們鼓勵設計師在嘗試滿足獨特設計需求的同時，將這一規(guī)則作為基礎，目標是創(chuàng)建視覺上令人愉悅的用戶友好界面。
原文：https://blog.logrocket.com/ux-design/60-30-10-rule/