色彩

SystemIcons icon

色彩從當代建筑、路標、人行橫道以及運動場館中獲取靈感,由此引發出大膽的顏色表達激活了色彩,與單調乏味的周邊環境形成鮮明的對比。強調大膽的陰影和高光。引出意想不到且充滿活力的顏色。

色樣 - 0.13 MB(.zip)

UI調色板

調色板以一些基礎色為基準,通過填充光譜來為Android、Web和iOS環境提供一套完整可用的顏色。基礎色的飽和度是500。

choose11 icon choose12 icon choose13 icon choose14 icon choose15 icon choose16 icon choose17 icon

UI顏色使用

選擇你的調色板

限制顏色的數量,在眾多基礎色中選出三個色度以及一個強調色。強調色用于后背,可有可無。

choose1 icon choose2 icon

為灰色的文字、圖標和分隔線加上alpha值

為了有效地傳達信息的視覺層次,應該使用深淺不同的文本。對于白色背景上的文字,標準alpha值為87%(#000000)。視覺層次偏低的次要文字,應該使用54%(#000000)的alpha值。而像正文和標簽中用于提示用戶的文字,視覺層次更低,應該使用26%(#000000)的alpha值。

其它元素,如圖標和分隔線,也應該具有黑色的alpha值,而不是實心顏色,以確保他們能適應任何顏色的背景。

對于彩色背景上白色或黑色文字,可以通過表格中的調色板找到合適的色彩對比度和alpha值。

choose3 icon

我們十分鼓勵在UI中的大塊區域內使用醒目的顏色。UI中不同的元素適合主題中不同的色彩。工具欄和大色塊適合使用飽和度500的基礎色,這也是你應用的主要顏色。狀態欄適合使用更深一些的飽和度700的基礎色。

choose4 icon choose5 icon

強調色

鮮艷的強調色用于你的主要操作按鈕以及組件,如開關或滑片。左對齊的部分圖標或章節標題也可以使用強調色。

choose6 icon choose7 icon

備用強調色

如果你的強調色相對于背景色太深或者太淺,默認的做法是選擇一個更淺或者更深的備用顏色。如果你的強調色無法正常顯示,那么在白色背景上會使用飽和度500的基礎色。如果背景色就是飽和度500的基礎色,那么會使用100%的白色或者54%的黑色。

choose8 icon

主題

主題是對應用提供一致性色調的方法。樣式指定了表面的亮度、陰影的層次和字體元素的適當不透明度。為了提高應用間的一致性,提供兩種主題選擇:

主題 - 1.3 MB(.ai)

choose9 icon choose10 icon

原文:Color 翻譯:arjinmc 校對:PoppinLp

两码中特期期