Material Design Lite 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

色彩运用

毫无疑问,我们在一个界面中不能无约束的使用色彩,那将使事情变得一团糟。 说好听点,没有约束,就不再是设计,而成为艺术了。

Material Design给出了一些通常条件下的约束:

1. 最多用两个调色板

在一个界面中最多使用两个调色板,从主调色板选择最多三个色调,从辅调色板选择 一个强调色。下面的示例选择indigo调色板中的三个色调(100、500和700),从pink 调色板中选择色调A200作为强调色:

choose-palette

2. 为文本、图标和分割线应用透明度

通过为文本设置透明度来表达文本的相对重要性:

text-opacity

对于深色背景的浅色文字,最重要的文本使用87%的透明度,次重要的文本使用54%的 透明度。提示性文本,例如输入框、标签、被禁止的文字等使用26%的透明度。

对于浅色背景的深色文字,最重要的文本使用100%的透明度,次重要的文本使用70%的 透明度,其他文本使用30%的透明度。

3. 工具栏和状态栏

工具栏大色块应当使用调色板中色调为500的颜色为基准色状态栏应当选择 调色板中比基准色略深的色调为700的颜色。

在下面的示例中,左图的工具栏和右图的大色块,使用了indigo调色板中的色调 500的基准色;而两幅图顶端的状态栏则使用了indigo调色板中的色调700的深色:

toolbar-color

4. 使用强调色

在大色块上绝对不要使用强调色,对动作按钮、开关或滑动条之类的组件应当使用强调色

accent-color

右边示例中的色彩运用有什么问题?请改正。