1. 顏色術語
顏色術語構成了我們顏色知識的基礎。將諸如色相（hue），色調（tint）和陰影（shade）之類的顏色術語視為我們可以用來開發獨特調色盤的工具。
色調/色相(Hue)
色相是色彩的技術術語。色相是指父色-一種飽和色，沒有新增白色或黑色。
亮化著色/染色(Tint)
亮化著色是把一種顏色和白色混合後形成的顏色，這將增加該顏色的亮度。
陰影（Shade）
將黑色新增到色相時，將建立陰影。
明度（value）
值是指顏色的明暗程度。它指示反射的光量。明度（Value）分為11級，數值越大表示明度越高，最小值是0（黑色），最大值是10（白色）
飽和度（saturation）
飽和度是指顏色的亮度和強度。高度飽和的顏色充滿活力和光芒，而低飽和度的顏色則暗淡。
2. 層次結構
當某個元素的外觀與其周圍環境形成對比時，表明該元素具有更高的重要性。我們可以使用顏色和顏色權重建立層次結構。
透過使用色彩，我們可以為元素分配不同的重要性級別。
如果一個元素比另一個元素更重要，則它應該具有更高的視覺重量。這使使用者易於快速瀏覽頁面並區分重要和次要資訊。
更加醒目，富有重量感的資訊內容可以快速吸引使用者的注意力，我們可以運用這種視覺規律引導使用者視線，並促使使用者繼續瀏覽其下方的支援資訊。
3. 富有表現力
在設計產品介面的時候，別忘記融入標誌性的品牌色彩，以增強使用者心中的品牌印象。
4. 包容性
設計產品類似於在圖書館或學校之類的公共建築中建造建築-它必須包含所有人。因此，產品的包容性也是需要考慮的重要要素。
Web內容可訪問性指南（WCAG）提出了一些建議，以確保運動，聽覺和認知障礙人士可以無障礙訪問介面中的顏色。舉個例子，文字標準色差至少需要達到4。5：1的對比度。
5. 顏色的含義
顏色會弔起使用者不同的情感感受，通過了解顏色的心理，我們可以利用與目標受眾產生共鳴的品牌顏色。
重要的是要了解您的受眾群體的差異，這些差異因為文化和地區而有所不同。例如，在西方文化中，白色通常與婚禮相關聯，而在東南文化中，白色被視為哀悼的顏色。
我們可以留意到：許多公司在其品牌營銷活動中都使用色彩作為一種策略。許多快餐店的品牌都使用紅色和黃色，這是因為紅色引發刺激，食慾，飢餓的效果，並引起人們的注意，而黃色則給人帶來幸福和友善的感覺。
6. 有限的顏色
透過限制在應用程式中使用過多顏色，可以使應用顏色區域中的內容受到更多關注，例如介面中的文字，影象以及按鈕等單個元素。
您會注意到，許多應用，例如Instagram或Twitter，它們的介面往往非常簡潔。它引導使用者將視覺焦點聚焦在內容上。
7. 提供狀態資訊
顏色的差異可以提供有關應用程式狀態，元件和元素的資訊。
顏色是我們可以在介面中顯示狀態變化的一種方式。透過靜音按鈕的顏色，可以指示按鈕已禁用，或者透過將其突出顯示為紅色來表示錯誤操作。我們還應該在錯誤顏色旁邊附加錯誤訊息和圖示，以確保清晰度並吸引色盲使用者。
8. 一致性和上下文
介面中的顏色用法應保持一致，因此即使上下文發生變化，顏色也能保持統一，避免對使用者造成混淆。
如果顏色資訊在展示內容和狀態上有衝突，例如在商標中使用紅色的情況，則應避免使用它來通知錯誤狀態。我們可以使用其他顏色（例如黃色）來避免混淆。
9. 調色盤
如何獲得完美的調色盤？讓我們從對顏色理論和基本工具的簡單理解開始。
第1步-原色和系統顏色（primary &system color）
設計師首先可以根據偏好，選擇調色盤的主要顏色，例如使用產品的品牌顏色作為主色。並在此基礎上，為文字和背景新增顏色。
第2步-建立調色盤
為UI選擇基本顏色後，將這些顏色放入Google顏色工具中，以獲取該顏色的不同陰影和色度。
（https：//material。io/design/color/the-color-system。html#tools-for-picking-colors）
它是生成近乎完美的調色盤的一種簡單方法，如果需要互補色或要測試輔助功能，則可以使用Google顏色工具完成所有這些操作。
步驟3 —將這些顏色組合在一起
10. 60–30–10規則
60-30-10原則是室內設計行業中的一個著名和永恆的裝飾原則。它非常簡單和高效。這個原則可以用來找到配色方案中的正確平衡。
60%+30%+10%是所用顏色之間的比例：其中60%屬於主要顏色的比例；30%是次要顏色的範圍；10%是剩餘部分的色彩比例。
在產品設計過程中，我們同樣可以遵循60-30-10的原則。其中：60％是主色，30％是輔助色，10％是強調色。
顏色參考工具：
Color Tool Material Design
https：//material。io/design/color/the-color-system。html
Dribbble。com/colors
https：//dribbble。com/colors/109173
Coolors。co
https：//coolors。co/palettes/trending
Shaderade
https：//prowe214。github。io/color-shader/
文章來源：美國互動設計資訊
