Material Design学习笔记 (3)

  1)为了有效地传达信息的视觉层次,应该使用深浅不同的文本。对于白色背景上的文字,标准 alpha 值(透明度)为 87%(#000000)。视觉层次偏低的次要文字,应该使用 54%(#000000)的 alpha 值。而像正文和标签中用于提示用户的文字,视觉层次更低,应该使用26%(#000000)的 alpha 值。

  2)其它元素,如图标和分隔线,也应该具有黑色的 alpha 值,而不是实心颜色,以确保他们能适应任何颜色的背景。

  3)我们十分鼓励在 UI 中的大块区域内使用醒目的颜色。 UI 中不同的元素适合主题中不同的色彩。工具栏和大色块适合使用饱和度 500 的基础色,这也是你应用的主要颜色。状态栏适合使用更深一些的饱和度 700 的基础色。

    

Material Design学习笔记

(3)强调色

  鲜艳的强调色用于你的主要操作按钮以及组件,如开关或滑片。左对齐的部分图标或章节标题也可以使用强调色。

    

Material Design学习笔记

(4)备用强调色

  如果你的强调色相对于背景色太深或者太浅,默认的做法是选择一个更浅或者更深的备用颜色。如果你的强调色无法正常显示,那么在白色背景上会使用饱和度 500 的基础色。如果背景色就是饱和度 500 的基础色,那么会使用 100% 的白色或者 54% 的黑色。

Material Design学习笔记

(5)主题

  主题是对应用提供一致性色调的方法。样式指定了表面的亮度、阴影的层次和字体元素的适当不透明度。为了提高应用间的一致性,提供两种主题选择:

浅色

深色

二)字体排版

1.字体排版的缩放和基本样式(Typographic Scale & Basic Styles)

  同时使用过多的字体尺寸和样式可以很轻易的毁掉布局。字体排版的缩放是包含了有限个字体尺寸的集合,并且他们能够良好的适应布局结构。最基本的样式集合就是基于 12、14、16、20 和 34 号的字体排版缩放。

2.标题

  就任何表格元素来讲,App Bar 中出现的所有标题都要使用“标题”样式。就任何表格元素来讲,App Bar 中出现的所有标题都要使用“标题”样式。

3.基本色/色彩对比度(Basic colors/Color contrast)

  最基本的常识是,相同颜色的背景和文字是很难阅读的。但有些人不知道的是,带有过强对比度的文本会有些炫目,同样难以阅读。这一点在深色背景下尤其明显。要获得良好的辨识度,文本应当满足一个最低的对比度,也就是 4.5:1(依据明度计算)。7:1 的对比度是最适合阅读的。

  这些色彩的组合同样要考虑到某些非典型用户对于对比度的不同反应。

    

Material Design学习笔记

4.大号字/动态字体尺寸(Big Type / Dynamic Type sizes)

  如果使用得当,大号字会让应用显得更加有趣、容易辨别布局,并帮助用户快速理解内容。动态字体尺寸让大号字可以在文本长度未知的情况下保持在容器之内。动态尺寸是根据可用空间和预估的字符空间,从字体排版缩放中选择的。

  避免轻率地的使用小号字来适配较小的容器,除非万不得已。

5.行高(Line Height)

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zgjyfs.html