android应用开发-从设计到实现 2-5 图标的使用

Posted 2020-09-02 anddlecn

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了android应用开发-从设计到实现 2-5 图标的使用相关的知识，希望对你有一定的参考价值。

图标的使用

图标能给人带来最直观的印象，有的时候再多的解释也抵不过一个图标。

安卓应用的图标分成两类，

应用图标的设计也是对Material Design的一种体现：制作应用图标的过程，就是对一张纸进行裁剪、折叠、上色、增加阴影的过程。

虽然应用图标可以被设计得千奇百怪，但是它还是有很多的套路可以使用的，只要遵守这些套路，你设计出来的图标也不会难看到哪里去。

先来说说应用图标的一定要执行的规则：

Google给出了图标设计的网格图。设计应用图标的时候，要参考这个网格对图案进行布局和排列。
安卓系统希望应用的图标框定在48dp尺寸方框以内，并且拥有1dp的边框（包含在48dp的尺寸以内）。为了作图的细致，建议我们将48dp的图标先放大4倍，也就是变成192dp（边框4dp），再进行设计。
图标可以根据设计线，做成圆角方形、圆形、竖长方形、横长方形。各个形状的区域尺寸分别是：

需要注意的是：虽然图标的形状不同，但是它们都是被限定在了192dp（缩放后）的正方形方框当中；标注出的尺寸都是放大了4倍以后的尺寸。
图标制作的时候，选择简单明了的几何图行。

之后就是和设计相关的要素了。一个图标由7个要素组成：

背景：图标的背景，这个背景的大小是由图标的形状决定的，例如圆角方形、圆形等等，并不占用图标的整个区域。
前景：图标的前景，通常就是表达应用含义的几何图形。
颜色：颜色的选择与应用界面颜色的选择一样，要选择能体现应用内容的色调。颜色不宜不多，最好不要超过3个。颜色可以只是放在前景当中，也可以只放在背景当中。
tint边沿：tint是一个遮罩，可以把它理解成给图层带上了一顶帽子。这顶帽子可以有自己的颜色和透明度，与它盖住的图层混合，显示出不同的效果。我们会在后面详细讲述tint。tint边沿出现在前景和背景的上边沿。它是有规定的：
阴影边沿：出现在前景和背景的下边沿。它是有规定的：
阴影：前景在背景上会留下投影，这个投影也是有规定的：

前景相对于背景的高度是1dp。
光照：图标拥有从左上方45度角照射过来的光源。要注意的是：这个光源仅仅局限在图标的内部。光源的属性如下：

最后我们讲讲前面提到的tint与shade的颜色。
tint与shade都是在原来图层的上方添加一个遮罩，让遮罩与图层叠加，产生不同的颜色效果。

例如主颜色是Yellow 500，它属于Warn暖色。因此，

下面这些常见的图标都是系统图标。

它们都是使用粗线条的几何图案，非常简约。设计系统图标也是很套路的事情。

先来说说应用图标的一定要执行的规则：

Google为这个类型的图标设计了网格图，
安卓系统希望应用的图标框定在24dp尺寸方框以内。
图案在20*20以内，多余的4dp作为边框空着。
图标可以根据设计线，做成圆角方形、圆形、竖长方形、横长方形。各个形状的区域尺寸分别是：

需要注意的是：虽然图标的形状可能不同，但是它们都是被限定在了24dp的正方形的方框当中。

之后就是和设计相关的要素了：

图标的外部边缘都是2dp的弧形，而内部边缘都是方形；
做图的笔划粗细要一致，而且笔划是方形的。笔划掉粗细是2dp。

假如图形很复杂，2dp实在是显得拥挤，那可以适当用细一些的笔划，例如1.5dp。如果还很难画，那就的想想是不是你的图标太复杂，要考虑更简单的图案了。
图标在界面上布局的时候，要让它拥有额外的边距。加上边距，整个图标的尺寸要达到48dp。也就是说，它上下左右的边距要有24dp。为什么呢？因为系统图标大多是需要让用户点击的，经过测试，人的手指点击时接触屏幕的区域大小差不多就是48dp。
此外，在使用几何图形作为图标的时候，要选择平面的图形，有3D效果的就不需要了，因为Material Design是扁平化的设计。