火星網校
「設計干貨」UI設計中顏色使用的10條原則
發(fā)布時間：2024-02-22 18:29:41 瀏覽量：201次
1. 顏色術語
顏色術語構成了我們顏色知識的基礎。將諸如色相（hue）,色調(tint)和陰影(shade)之類的顏色術語視為我們可以用來開發(fā)獨特調色板的工具。
? 色調/色相(Hue)
色相是色彩的技術術語。色相是指父色-一種飽和色，沒有添加白色或黑色。
? 亮化著色/染色(Tint)
亮化著色是把一種顏色和白色混合后形成的顏色，這將增加該顏色的亮度。
? 陰影（Shade）
將黑色添加到色相時，將創(chuàng)建陰影。
? 明度（value）
值是指顏色的明暗程度。它指示反射的光量。明度（Value）分為11級，數(shù)值越大表示明度越高，最小值是0（黑色），最大值是10（白色）
? 飽和度（saturation）
飽和度是指顏色的亮度和強度。高度飽和的顏色充滿活力和光芒，而低飽和度的顏色則暗淡。
2. 層次結構
當某個元素的外觀與其周圍環(huán)境形成對比時，表明該元素具有更高的重要性。我們可以使用顏色和顏色權重建立層次結構。
通過使用色彩，我們可以為元素分配不同的重要性級別。
如果一個元素比另一個元素更重要，則它應該具有更高的視覺重量。這使用戶易于快速瀏覽頁面并區(qū)分重要和次要信息。
更加醒目，富有重量感的信息內容可以快速吸引用戶的注意力，我們可以運用這種視覺規(guī)律引導用戶視線，并促使用戶繼續(xù)瀏覽其下方的支持信息。
3. 富有表現(xiàn)力
在設計產品界面的時候，別忘記融入標志性的品牌色彩，以增強用戶心中的品牌印象。
4. 包容性
設計產品類似于在圖書館或學校之類的公共建筑中建造建筑-它必須包含所有人。因此，產品的包容性也是需要考慮的重要要素。
Web內容可訪問性指南（WCAG）提出了一些建議，以確保運動，聽覺和認知障礙人士可以無障礙訪問界面中的顏色。舉個例子，文字標準色差至少需要達到4.5：1的對比度。
5. 顏色的含義
顏色會吊起用戶不同的情感感受，通過了解顏色的心理，我們可以利用與目標受眾產生共鳴的品牌顏色。
重要的是要了解您的受眾群體的差異，這些差異因為文化和地區(qū)而有所不同。例如，在西方文化中，白色通常與婚禮相關聯(lián)，而在東南文化中，白色被視為哀悼的顏色。
我們可以留意到：許多公司在其品牌營銷活動中都使用色彩作為一種策略。許多快餐店的品牌都使用紅色和黃色，這是因為紅色引發(fā)刺激，食欲，饑餓的效果，并引起人們的注意，而黃色則給人帶來幸福和友善的感覺。
6. 有限的顏色
通過限制在應用程序中使用過多顏色，可以使應用顏色區(qū)域中的內容受到更多關注，例如界面中的文本，圖像以及按鈕等單個元素。
您會注意到，許多應用，例如Instagram或Twitter，它們的界面往往非常簡潔。它引導用戶將視覺焦點聚焦在內容上。
7. 提供狀態(tài)信息
顏色的差異可以提供有關應用程序狀態(tài)，組件和元素的信息。
顏色是我們可以在界面中顯示狀態(tài)變化的一種方式。通過靜音按鈕的顏色，可以指示按鈕已禁用，或者通過將其突出顯示為紅色來表示錯誤操作。我們還應該在錯誤顏色旁邊附加錯誤消息和圖標，以確保清晰度并吸引色盲用戶。
8. 一致性和上下文
界面中的顏色用法應保持一致，因此即使上下文發(fā)生變化，顏色也能保持統(tǒng)一，避免對用戶造成混淆。
如果顏色信息在展示內容和狀態(tài)上有沖突，例如在商標中使用紅色的情況，則應避免使用它來通知錯誤狀態(tài)。我們可以使用其他顏色（例如黃色）來避免混淆。
9. 調色板
如何獲得完美的調色板？讓我們從對顏色理論和基本工具的簡單理解開始。
第1步-原色和系統(tǒng)顏色（primary &system color）
設計師首先可以根據偏好，選擇調色板的主要顏色，例如使用產品的品牌顏色作為主色。并在此基礎上，為文本和背景添加顏色。
第2步-創(chuàng)建調色板
為UI選擇基本顏色后，將這些顏色放入Google顏色工具中，以獲取該顏色的不同陰影和色度。
它是生成近乎完美的調色板的一種簡單方法，如果需要互補色或要測試輔助功能，則可以使用Google顏色工具完成所有這些操作。
步驟3 —將這些顏色組合在一起
10. 60–30–10規(guī)則
60-30-10原則是室內設計行業(yè)中的一個著名和永恒的裝飾原則。它非常簡單和高效。這個原則可以用來找到配色方案中的正確平衡。
60%+30%+10%是所用顏色之間的比例：其中60%屬于主要顏色的比例；30%是次要顏色的范圍；10%是剩余部分的色彩比例。
在產品設計過程中，我們同樣可以遵循60-30-10的原則。其中：60％是主色，30％是輔助色，10％是強調色。
來源網絡
熱門課程推薦
熱門資訊
-
怎樣可以提升你的UI設計能力!第一個:站酷站酷想必是設計師都知道的一個網站,里面不止有UI設計的資源,還有其他設計的,不如:平面設計、網頁設計、字體...
-
2. iPhone6的UI設計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設計的尺寸規(guī)范嗎？這里為您詳細介紹iPhone6的UI設計尺寸規(guī)范，包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
3. 移動端UI設計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設計中的閃屏頁、引導頁、浮層引導頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設計的基本知識
-
4. 12個絕佳的UI設計網站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設計網站,這些網站不僅可以為你提供靈感,還可以幫助你學習新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設計師的...
-
在移動端設計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設計能夠讓用戶輕松地獲取信息并產生點擊欲望,從而提高點擊率。本文將為你...
-
6. 史上最全，平面設計UI設計必備的77個國內外素材、設計資源網站
ui設計社區(qū),大神太多了。3、behance: https://www.behance.net/ ,著名設計... 對于品牌設計師來說,除了圖案素材收集之外,還有一個很重要的,就是設計故...
-
對于想要提高自己的設計能力和創(chuàng)造力的小白和UI設計師來說,這本書是一個很好的選擇。4.《設計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
8. 設計中的色彩心理學:淺析中西方色彩的歷史演變與設計應用
摘要:本文探討了色彩的歷史演變和設計應用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設計中的重要性以及新興技...
-
想了解武漢UI設計培訓班的費用是多少嗎？不知道學UI設計要花多少錢？不妨看看這篇文章，了解UI設計培訓班的學費價格以及學習內容。
-
探索零基礎UI設計培訓的時長與薪資前景。了解數(shù)字藝術教育領域的專業(yè)課程，以及培訓后的職業(yè)發(fā)展機會。
最新文章
