翔田千里無碼破解,在线看黄片,欧美特级黄色片,亚洲成人图片小说,午夜激情久久,肏欧美逼,国产无码一区,天天射日日干

前端程序員、獨(dú)立開發(fā)者懂一些設(shè)計(jì)知識(shí)是很有必要的。

這篇文章將探索 60-30-10 規(guī)則，它在實(shí)現(xiàn)色調(diào)平衡方面發(fā)揮著重要作用。我們將深入研究這條規(guī)則的細(xì)節(jié)，以及你如何將它應(yīng)用到你的設(shè)計(jì)中，同時(shí)考慮到色彩心理學(xué)，使事物更有關(guān)聯(lián)性。

我還將分享一些現(xiàn)實(shí)生活中使用 60-30-10 法則的例子。準(zhǔn)備好進(jìn)入 UI 設(shè)計(jì)色彩世界的深刻旅程吧！

理解 60-30-10 法則
UI 設(shè)計(jì)與色彩的影響
如何在 UI 設(shè)計(jì)中使用 60-30-10 規(guī)則
針對(duì)不同的 UI 設(shè)計(jì)風(fēng)格采用 60-30-10 規(guī)則
- Neobrutalism 新野獸主義
- Neumorphism 新擬態(tài)
網(wǎng)格系統(tǒng)和 60-30-10 規(guī)則之間的交互
- 列網(wǎng)格
- 分層的網(wǎng)格
色彩和諧的品牌標(biāo)識(shí)和設(shè)計(jì)美學(xué)
創(chuàng)建品牌設(shè)計(jì)指南
60-30-10 法則的真實(shí)例子
- Google 的 Material Design
- 蘋果的 iOS
- Spotify
結(jié)論

理解 60-30-10 法則

在充滿激情的 UI 設(shè)計(jì)世界中，60-30-10 規(guī)則是一盞指路明燈，它為混亂的色彩帶來(lái)了秩序:

這條規(guī)則簡(jiǎn)單而深刻，它將顏色的使用分為三個(gè)不同的類別：

60%為主色調(diào)：這種顏色為你的設(shè)計(jì)設(shè)定了整體基調(diào)，通常用于背景
30%為副色：作為主色的補(bǔ)充，用于較小的區(qū)域，以產(chǎn)生對(duì)比和興趣
10% 用于強(qiáng)調(diào)色：這種鮮艷的顏色可少量用于交互按鈕或關(guān)鍵元素

這是一種經(jīng)過(guò)精心設(shè)計(jì)的方法，目的是在設(shè)計(jì)中營(yíng)造一種和諧感和視覺(jué)舒適感，但 60-30-10 規(guī)則不僅僅是一個(gè)美學(xué)公式。它有一個(gè)功能性目的，即引導(dǎo)用戶的視線穿過(guò)界面、突出重要元素并創(chuàng)建視覺(jué)層次。這種直觀的導(dǎo)航使界面不僅可用，而且令人愉悅。

這一規(guī)則的影響超出了單個(gè)用戶的范圍。它會(huì)影響整體用戶體驗(yàn)，影響用戶的參與度和滿意度，并最終影響設(shè)計(jì)的成功。

在競(jìng)爭(zhēng)激烈的 UI 設(shè)計(jì)領(lǐng)域，掌握 60-30-10 規(guī)則不僅僅是一種選擇，而是一種必要。這是創(chuàng)造不僅視覺(jué)上令人愉悅，而且用戶友好和有效的設(shè)計(jì)的關(guān)鍵。

UI 設(shè)計(jì)與色彩的影響

色彩心理學(xué)在 UI 設(shè)計(jì)中扮演著關(guān)鍵的角色，它能夠喚起情感，塑造感知并指導(dǎo)行為：

每種顏色都有自己的心理價(jià)值，影響著用戶與界面的交互方式。例如，紅色通常意味著緊迫性或重要性，而藍(lán)色則散發(fā)著信任和穩(wěn)定的氣息。

理解這些情感和心理聯(lián)系在 UI 設(shè)計(jì)中至關(guān)重要。設(shè)計(jì)師利用色彩心理學(xué)來(lái)創(chuàng)造期望的用戶反應(yīng)。

精心選擇的色調(diào)可以引導(dǎo)用戶的注意力，促使他們采取行動(dòng)，甚至影響他們的整體體驗(yàn)。

因此，色彩心理學(xué)不僅僅是一個(gè)設(shè)計(jì)考慮因素——它是設(shè)計(jì)有效和吸引人的用戶界面的戰(zhàn)略工具。

如何在 UI 設(shè)計(jì)中使用 60-30-10 規(guī)則

在 UI 設(shè)計(jì)中應(yīng)用 60-30-10 規(guī)則是一個(gè)確保界面平衡和視覺(jué)吸引力的戰(zhàn)略過(guò)程。以下是一個(gè)循序漸進(jìn)的指南：

選擇主色調(diào)(60%)

這種顏色決定了你設(shè)計(jì)的整體基調(diào)。它應(yīng)該是中性的或低飽和的顏色，不要壓倒其他的設(shè)計(jì)。這種顏色通常覆蓋大面積的背景。

選擇輔助色 (30%)

這種顏色應(yīng)該和主色互補(bǔ)。它用于較小的區(qū)域，如側(cè)邊欄或次要部分，以創(chuàng)建對(duì)比和興趣。

選擇強(qiáng)調(diào)色(10%)

這種顏色應(yīng)該是最鮮艷的，并且要謹(jǐn)慎地用于你想要突出的交互按鈕或關(guān)鍵元素。

記住，60-30-10 規(guī)則是一個(gè)指導(dǎo)方針，而不是硬性規(guī)則。請(qǐng)隨意調(diào)整百分比以適應(yīng)您的設(shè)計(jì)。

關(guān)鍵是要保持平衡的色彩層次，引導(dǎo)用戶的視線穿過(guò)界面。

針對(duì)不同的 UI 設(shè)計(jì)風(fēng)格采用 60-30-10 規(guī)則

許多 UI 設(shè)計(jì)風(fēng)格都可以從“60-30-10”規(guī)則中獲益。在這里，我們將討論如何將這一規(guī)則應(yīng)用于一些最流行的 UI 設(shè)計(jì)風(fēng)格。

Neobrutalism 新野獸主義

Neobrutalism 設(shè)計(jì)風(fēng)格的特點(diǎn)是原始，粗糙的美學(xué)，通常伴隨著大膽的排版和強(qiáng)烈的對(duì)比色組合。

在這種風(fēng)格中，通常會(huì)看到卡片、按鈕和其他帶有重黑色邊框的組件，作為強(qiáng)調(diào)色(10%)。

設(shè)計(jì)的主背景是主色調(diào)（占 60%），部件的次要顏色（占 30%）始終與主色調(diào)形成強(qiáng)烈對(duì)比，使設(shè)計(jì)具有一種原始感。

Neumorphism 新擬態(tài)

Neumorphism 以其柔軟，逼真和簡(jiǎn)約的外觀而聞名，它可以通過(guò)應(yīng)用 60-30-10 規(guī)則來(lái)增強(qiáng)：

主色調(diào)(60%)構(gòu)成了背景，并為設(shè)計(jì)設(shè)定了基調(diào)。一般來(lái)說(shuō)，它是一種柔和的中性色調(diào)。然后輔色(30%)補(bǔ)充主色，提供微妙的對(duì)比，增強(qiáng)設(shè)計(jì)的深度和現(xiàn)實(shí)主義。這主要應(yīng)用于卡片、面板或其他重要的 UI 組件等元素。

最后，強(qiáng)調(diào)色(10%)在吸引用戶注意小的交互元素或關(guān)鍵動(dòng)作(如按鈕或圖標(biāo))方面起著很小但很關(guān)鍵的作用;它以各種方式使用，如微妙的陰影和高光。

網(wǎng)格系統(tǒng)和 60-30-10 規(guī)則之間的交互

列網(wǎng)格

它是一種布局結(jié)構(gòu)，將網(wǎng)頁(yè)或屏幕分成幾列來(lái)組織其內(nèi)容。

在列網(wǎng)格系統(tǒng)的上下文中，主要內(nèi)容通常占據(jù)布局的中心和最大部分。重要的文字、圖片、關(guān)鍵信息等主要內(nèi)容在這里顯示：

次要內(nèi)容區(qū)域包括側(cè)邊欄，為用戶提供補(bǔ)充信息、導(dǎo)航菜單、鏈接或選項(xiàng)。這可能會(huì)占用列網(wǎng)格中 30%的可用水平空間。剩下的 10%分配給空白或填充。

它作為主要和次要內(nèi)容區(qū)域之間的緩沖，提供視覺(jué)分離和干凈的外觀，同時(shí)也提高了可讀性和用戶體驗(yàn)。

分層的網(wǎng)格

設(shè)計(jì)中常用的 60-30-10 規(guī)則可以有效地應(yīng)用于分層網(wǎng)格系統(tǒng)中。這個(gè)系統(tǒng)是一個(gè)結(jié)構(gòu)化的布局，以層次的方式安排內(nèi)容元素，強(qiáng)調(diào)它們的重要性和關(guān)系：

在分層網(wǎng)格系統(tǒng)中，顯示最關(guān)鍵信息的主要內(nèi)容區(qū)域約占可用空間的 60%。它通常包含核心信息、主要圖像或中心信息。

次要內(nèi)容區(qū)域通過(guò)提供支持信息或附加上下文來(lái)補(bǔ)充主要內(nèi)容。大約 30%的空間是專用的，這可能包括側(cè)邊欄、相關(guān)文章或輔助圖像。

第三內(nèi)容區(qū)大約占布局的 10%，包含一些支持信息或元素，以增強(qiáng)用戶的整體體驗(yàn)。它包括導(dǎo)航菜單、相關(guān)鏈接或按鈕等元素。

色彩和諧的品牌標(biāo)識(shí)和設(shè)計(jì)美學(xué)

在適應(yīng)不同品牌標(biāo)識(shí)和設(shè)計(jì)語(yǔ)言的同時(shí)，保持色彩的和諧需要深思熟慮和靈活的方法。60-30-10 規(guī)則可以作為一個(gè)很好的指導(dǎo)方針，在品牌標(biāo)識(shí)和設(shè)計(jì)風(fēng)格之間實(shí)現(xiàn)視覺(jué)平衡和一致性。以下是如何有效應(yīng)用這一規(guī)則的簡(jiǎn)要介紹：

定義通用調(diào)色板 (60%)

首先決定一個(gè)通用的調(diào)色板，形成你的設(shè)計(jì)系統(tǒng)的基礎(chǔ)。理想情況下，這個(gè)調(diào)色板應(yīng)該由中性和通用的顏色組成，可以與不同的品牌標(biāo)識(shí)和設(shè)計(jì)美學(xué)相協(xié)調(diào)。

你設(shè)計(jì)的 60%的部分可以整合這些通用的顏色作為他們的主要背景或基礎(chǔ)。

適配輔助色 (30%)

你設(shè)計(jì)的 30%應(yīng)該用來(lái)融入與你所使用的特定品牌標(biāo)識(shí)相一致的次要顏色。

這些次要顏色的選擇應(yīng)該與通用調(diào)色板形成對(duì)比和補(bǔ)充，同時(shí)添加代表品牌的獨(dú)特觸感。同樣重要的是要考慮這些顏色的情感和心理聯(lián)系，以確保它們與品牌的價(jià)值觀和信息產(chǎn)生共鳴。

品牌特色（10%）

最后的 10%用于品牌特有的點(diǎn)綴或亮點(diǎn)。這一小部分包括獨(dú)特的品牌色彩或奇特的設(shè)計(jì)元素，這些都是每種標(biāo)識(shí)所獨(dú)有的。

創(chuàng)建品牌設(shè)計(jì)指南

記錄設(shè)計(jì)決策，創(chuàng)建詳細(xì)的設(shè)計(jì)指南或風(fēng)格指南，概述如何在所有資產(chǎn)中應(yīng)用 60-30-10 規(guī)則，是使設(shè)計(jì)流程簡(jiǎn)化和一致的重要組成部分。

這個(gè)指南應(yīng)該包括顏色使用、排版和布局的細(xì)節(jié)，以確保品牌未來(lái)設(shè)計(jì)的一致性。

60-30-10 法則的真實(shí)例子

60-30-10 法則不僅僅是一個(gè)理論概念;它是在成功的 UI 設(shè)計(jì)中廣泛使用的實(shí)用工具。讓我們來(lái)看看一些現(xiàn)實(shí)世界的例子。

Google 的 Material Design

谷歌的 “Material Design” 就是 60-30-10 規(guī)則的典型例子。主色調(diào)為白色（60%），用于背景。輔助色是淺灰色（30%），用于搜索欄等元素。重點(diǎn)色是明亮的藍(lán)色（10%），用于按鈕和鏈接。

蘋果的 iOS

蘋果的 iOS 界面也遵循 60-30-10 規(guī)則。主色調(diào)是白色(60%)，次色調(diào)是淺灰色(30%)，強(qiáng)調(diào)色是藍(lán)色和綠色等充滿活力的色調(diào)(10%)。

Spotify

Spotify 的界面以深色為主題。主色調(diào)為黑色（占 60%），輔助色為深灰色（占 30%），點(diǎn)綴色為鮮艷的綠色（占 10%）。

在每一個(gè)例子中，60-30-10 規(guī)則都有助于創(chuàng)建視覺(jué)平衡和直觀的界面。

主色提供了一個(gè)干凈的畫布，副色增加了深度，強(qiáng)調(diào)色將注意力吸引到關(guān)鍵元素上。這種策略性的色彩運(yùn)用增強(qiáng)了可用性和用戶體驗(yàn)。

結(jié)論

總之，60-30-10 規(guī)則是 UI 設(shè)計(jì)中的一個(gè)戰(zhàn)略工具，確保平衡的配色方案。它有助于創(chuàng)建視覺(jué)層次結(jié)構(gòu)，增強(qiáng)用戶體驗(yàn)。

色彩心理學(xué)在影響用戶情緒和行為方面起著關(guān)鍵作用。現(xiàn)實(shí)世界的例子說(shuō)明了它的有效應(yīng)用。

我們鼓勵(lì)設(shè)計(jì)師在嘗試滿足獨(dú)特設(shè)計(jì)需求的同時(shí)，將這一規(guī)則作為基礎(chǔ)，目標(biāo)是創(chuàng)建視覺(jué)上令人愉悅的用戶友好界面。

原文：https://blog.logrocket.com/ux-design/60-30-10-rule/

UI 設(shè)計(jì)通識(shí):通過(guò) 60-30-10 規(guī)則增強(qiáng)美感