Material Design之色彩設(shè)計
色彩從當(dāng)代建筑、路標(biāo)、人行橫道以及運動場館中獲取靈感,由此引發(fā)出大膽的顏色表達激活了色彩,與單調(diào)乏味的周邊環(huán)境形成鮮明的對比。強調(diào)大膽的陰影和高光。引出意想不到且充滿活力的顏色。
UI調(diào)色板
調(diào)色板以一些基礎(chǔ)色為基準(zhǔn),通過填充光譜來為Android、Web和iOS環(huán)境提供一套完整可用的顏色?;A(chǔ)色的飽和度是500。
UI顏色使用
選擇你的調(diào)色板
限制顏色的數(shù)量,在眾多基礎(chǔ)色中選出三個色度以及一個強調(diào)色。強調(diào)色用于后背,可有可無。
為灰色的文字、圖標(biāo)和分隔線加上alpha值
為了有效地傳達信息的視覺層次,應(yīng)該使用深淺不同的文本。對于白色背景上的文字,標(biāo)準(zhǔn)alpha值為87%(#000000)。視覺層次偏低的次要 文字,應(yīng)該使用54%(#000000)的alpha值。而像正文和標(biāo)簽中用于提示用戶的文字,視覺層次更低,應(yīng)該使用26%(#000000)的 alpha值。
其它元素,如圖標(biāo)和分隔線,也應(yīng)該具有黑色的alpha值,而不是實心顏色,以確保他們能適應(yīng)任何顏色的背景。
對于彩色背景上白色或黑色文字,可以通過表格中的調(diào)色板找到合適的色彩對比度和alpha值。
我們十分鼓勵在UI中的大塊區(qū)域內(nèi)使用醒目的顏色。UI中不同的元素適合主題中不同的色彩。工具欄和大色塊適合使用飽和度500的基礎(chǔ)色,這也是你應(yīng)用的主要顏色。狀態(tài)欄適合使用更深一些的飽和度700的基礎(chǔ)色。
強調(diào)色
鮮艷的強調(diào)色用于你的主要操作按鈕以及組件,如開關(guān)或滑片。左對齊的部分圖標(biāo)或章節(jié)標(biāo)題也可以使用強調(diào)色。
備用強調(diào)色
如果你的強調(diào)色相對于背景色太深或者太淺,默認的做法是選擇一個更淺或者更深的備用顏色。如果你的強調(diào)色無法正常顯示,那么在白色背景上會使用飽和度500的基礎(chǔ)色。如果背景色就是飽和度500的基礎(chǔ)色,那么會使用100%的白色或者54%的黑色。
主題
主題是對應(yīng)用提供一致性色調(diào)的方法。樣式指定了表面的亮度、陰影的層次和字體元素的適當(dāng)不透明度。為了提高應(yīng)用間的一致性,提供兩種主題選擇:
- 淺色
- 深色