1. 程式人生 > >material design UI顏色的使用

material design UI顏色的使用



選擇色板

主色最好限制在三色調上,比如indigo的100,500和700

選擇一個強調色,比如pink的A100, A200, A400 同時可以備選一個回退強調色(白色100%)


文字,圖示及分割線上巧用alpha值

為了有效的反應文字資訊的層次性,要合理使用alpha值
白底黑字的標準alpha值為87%(#000000)
二級文字使用alpha值為54%(#000000)
提示文字可以使用alpha值為26%(#000000)
分割線可以使用alpha值為12%(#000000)


工具條及大片留白區可以使用 基本色500.這個是app的主色調。狀態列可以試更深色的700.


強調色

強調色可以用在主互動按鈕上,以及開關及滑塊等控制元件上。左側區域的圖示及上側的標題也可以用強調色。


強調色回退

如果強色調相對應背景色不夠突出,強調色回退準則是選擇一個更亮或則更暗的強調色。 如果強調色仍舊不夠突出,那麼就將背景色修改成主色500,同時將強調色設定為白色100%或則黑色54%