「設計乾貨」UI設計中顏色使用的10條原則
衍果視覺 · 設計 ·

「設計乾貨」UI設計中顏色使用的10條原則

通過使用色彩,我們可以為元素分配不同的重要性級別。


1. 顏色術語


顏色術語構成了我們顏色知識的基礎。將諸如色相(hue),色調(tint)和陰影(shade)之類的顏色術語視為我們可以用來開發獨特調色板的工具。


• 色調/色相(Hue)


有更高的重要性。我們可以使用顏色和顏色權重建立層次結構。


色相是色彩的技術術語。色相是指父色-一種飽和色,沒有添加白色或黑色。


• 亮化著色/染色(Tint)


當某個元素的外觀與其周圍環境形成對比時,表明該元素具


亮化著色是把一種顏色和白色混合後形成的顏色,這將增加該顏色的亮度。


• 陰影(Shade)


度的顏色則暗淡。2層次結構


將黑色添加到色相時,將創建陰影。


• 明度(value)


飽和度是指顏色的亮度和強度。高度飽和的顏色充滿活力和光芒,而低飽和


值是指顏色的明暗程度。它指示反射的光量。明度(Value)分為11級,數值越大表示明度越高,最小值是0(黑色),最大值是10(白色)


• 飽和度(saturation)


•飽和度(saturation)


飽和度是指顏色的亮度和強度。高度飽和的顏色充滿活力和光芒,而低飽和度的顏色則暗淡。


2. 層次結構


大表示明度越高,最小值是0(黑色),最大值是10(白色)


當某個元素的外觀與其周圍環境形成對比時,表明該元素具有更高的重要性。我們可以使用顏色和顏色權重建立層次結構。


通過使用色彩,我們可以為元素分配不同的重要性級別。


如果一個元素比另一個元素更重要,則它應該具有更高的視覺重量。這使用戶易於快速瀏覽頁面並區分重要和次要信息。


更加醒目,富有重量感的信息內容可以快速吸引用戶的注意力,我們可以運用這種視覺規律引導用戶視線,並促使用戶繼續瀏覽其下方的支持信息。


3. 富有表現力


指顏色的明暗程度。它指示反射的光量。明度(Value)分為11級,數值越


在設計產品界面的時候,別忘記融入標誌性的品牌色彩,以增強用戶心中的品牌印象。


4. 包容性


•明度(value)值是


設計產品類似於在圖書館或學校之類的公共建築中建造建築-它必須包含所有人。因此,產品的包容性也是需要考慮的重要要素。


Web內容可訪問性指南(WCAG)提出了一些建議,以確保運動,聽覺和認知障礙人士可以無障礙訪問界面中的顏色。舉個例子,文字標準色差至少需要達到4.5:1的對比度。


5. 顏色的含義


將黑色添加到色相時,將創建陰影。


顏色會弔起用戶不同的情感感受,通過了解顏色的心理,我們可以利用與目標受眾產生共鳴的品牌顏色。


重要的是要了解您的受眾群體的差異,這些差異因為文化和地區而有所不同。例如,在西方文化中,白色通常與婚禮相關聯,而在東南文化中,白色被視為哀悼的顏色。


我們可以留意到:許多公司在其品牌營銷活動中都使用色彩作為一種策略。許多快餐店的品牌都使用紅色和黃色,這是因為紅色引發刺激,食慾,飢餓的效果,並引起人們的注意,而黃色則給人帶來幸福和友善的感覺。


6. 有限的顏色


該顏色的亮度。•陰影(Shade)


通過限制在應用程式中使用過多顏色,可以使應用顏色區域中的內容受到更多關注,例如界面中的文本,圖像以及按鈕等單個元素。


您會注意到,許多應用,例如Instagram或Twitter,它們的界面往往非常簡潔。它引導用戶將視覺焦點聚焦在內容上。


7. 提供狀態信息


亮化著色是把一種顏色和白色混合後形成的顏色,這將增加


顏色的差異可以提供有關應用程式狀態,組件和元素的信息。


顏色是我們可以在界面中顯示狀態變化的一種方式。通過靜音按鈕的顏色,可以指示按鈕已禁用,或者通過將其突出顯示為紅色來表示錯誤操作。我們還應該在錯誤顏色旁邊附加錯誤消息和圖標,以確保清晰度並吸引色盲用戶。


8. 一致性和上下文


。•亮化著色/染色(Tint)


界面中的顏色用法應保持一致,因此即使上下文發生變化,顏色也能保持統一,避免對用戶造成混淆。


如果顏色信息在展示內容和狀態上有衝突,例如在商標中使用紅色的情況,則應避免使用它來通知錯誤狀態。我們可以使用其他顏色(例如黃色)來避免混淆。


9. 調色板


色相是色彩的技術術語。色相是指父色-一種飽和色,沒有添加白色或黑色


如何獲得完美的調色板?讓我們從對顏色理論和基本工具的簡單理解開始。


第1步-原色和系統顏色(primary &system color)


•色調/色相(Hue)


設計師首先可以根據偏好,選擇調色板的主要顏色,例如使用產品的品牌顏色作為主色。並在此基礎上,為文本和背景添加顏色。


第2步-創建調色板


shade)之類的顏色術語視為我們可以用來開發獨特調色板的工具。

為UI選擇基本顏色後,將這些顏色放入Google顏色工具中,以獲取該顏色的不同陰影和色度。


它是生成近乎完美的調色板的一種簡單方法,如果需要互補色或要測試輔助功能,則可以使用Google顏色工具完成所有這些操作。


步驟3 —將這些顏色組合在一起


構成了我們顏色知識的基礎。將諸如色相(hue),色調(tint)和陰影(


10. 60–30–10規則


1顏色術語顏色術語


60-30-10原則是室內設計行業中的一個著名和永恆的裝飾原則。它非常簡單和高效。這個原則可以用來找到配色方案中的正確平衡。


60%+30%+10%是所用顏色之間的比例:其中60%屬於主要顏色的比例;30%是次要顏色的範圍;10%是剩餘部分的色彩比例。


在產品設計過程中,我們同樣可以遵循60-30-10的原則。其中:60%是主色,30%是輔助色,10%是強調色。

來源網絡

聲明:文章觀點僅代表作者本人,PTTZH僅提供信息發布平台存儲空間服務。
喔!快樂的時光竟然這麼快就過⋯
繼續其他精彩內容吧!
more