首页 > 代码库 > android应用开发-从设计到实现 2-5 图标的使用

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

图标的使用

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

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

  • 应用图标:在主界面上代表着整个应用的那个启动图标,是给用户第一印象的图标。一个应用开发成功后会不会被用户下载,也许就取决于用户看它的第一眼。

    技术分享
  • 系统图标:在应用里面使用的各种具有特别意义的图标,引导用户进行更多的操作。

    技术分享

应用图标

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

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

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

  1. Google给出了图标设计的网格图。设计应用图标的时候,要参考这个网格对图案进行布局和排列。

    技术分享
  2. 安卓系统希望应用的图标框定在48dp尺寸方框以内,并且拥有1dp的边框(包含在48dp的尺寸以内)。为了作图的细致,建议我们将48dp的图标先放大4倍,也就是变成192dp(边框4dp),再进行设计。

    技术分享
  3. 图标可以根据设计线,做成圆角方形、圆形、竖长方形、横长方形。各个形状的区域尺寸分别是:

    技术分享
    技术分享

    需要注意的是:虽然图标的形状不同,但是它们都是被限定在了192dp(缩放后)的正方形方框当中;标注出的尺寸都是放大了4倍以后的尺寸。

  4. 图标制作的时候,选择简单明了的几何图行。

    技术分享

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

  1. 背景:图标的背景,这个背景的大小是由图标的形状决定的,例如圆角方形、圆形等等,并不占用图标的整个区域。

  2. 前景:图标的前景,通常就是表达应用含义的几何图形。

  3. 颜色:颜色的选择与应用界面颜色的选择一样,要选择能体现应用内容的色调。颜色不宜不多,最好不要超过3个。颜色可以只是放在前景当中,也可以只放在背景当中。

  4. tint边沿:tint是一个遮罩,可以把它理解成给图层带上了一顶帽子。这顶帽子可以有自己的颜色和透明度,与它盖住的图层混合,显示出不同的效果。我们会在后面详细讲述tint。tint边沿出现在前景和背景的上边沿。它是有规定的:

    技术分享
  5. 阴影边沿:出现在前景和背景的下边沿。它是有规定的:

    技术分享
  6. 阴影:前景在背景上会留下投影,这个投影也是有规定的:

    技术分享

    前景相对于背景的高度是1dp。

  7. 光照:图标拥有从左上方45度角照射过来的光源。要注意的是:这个光源仅仅局限在图标的内部。光源的属性如下:

    技术分享

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

  1. 首先确定主色调的类型:冷色?暖色?

  2. 根据下表,选择tint与shade的颜色。

    技术分享
    技术分享
    技术分享
    技术分享
    技术分享

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

  • 它的tint颜色就是主颜色添加20%的白色。

  • 它的shade颜色就是主颜色,添加20%的Deep Orange 900

技术分享

系统图标

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

技术分享

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

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

  1. Google为这个类型的图标设计了网格图,

    技术分享
  2. 安卓系统希望应用的图标框定在24dp尺寸方框以内。

    技术分享
  3. 图案在20*20以内,多余的4dp作为边框空着。

    技术分享
  4. 图标可以根据设计线,做成圆角方形、圆形、竖长方形、横长方形。各个形状的区域尺寸分别是:

    技术分享
    技术分享

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

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

  1. 图标的外部边缘都是2dp的弧形,而内部边缘都是方形;

    技术分享
  2. 做图的笔划粗细要一致,而且笔划是方形的。笔划掉粗细是2dp。

    技术分享

    假如图形很复杂,2dp实在是显得拥挤,那可以适当用细一些的笔划,例如1.5dp。如果还很难画,那就的想想是不是你的图标太复杂,要考虑更简单的图案了。

  3. 图标在界面上布局的时候,要让它拥有额外的边距。加上边距,整个图标的尺寸要达到48dp。也就是说,它上下左右的边距要有24dp。为什么呢?因为系统图标大多是需要让用户点击的,经过测试,人的手指点击时接触屏幕的区域大小差不多就是48dp。

    技术分享
  4. 此外,在使用几何图形作为图标的时候,要选择平面的图形,有3D效果的就不需要了,因为Material Design是扁平化的设计。

系统图标的颜色设置也有需要遵循的规则,在亮暗不同的背景下,颜色不同,

  • 在亮背景下,使用黑色:

    技术分享
    技术分享
  • 在暗背景下,使用白色:

    技术分享
    技术分享

工具

知道了制作图标的规则,一切就好办了。如果你是设计高手,可以用工具,从无到有,完全自己画一个图标。如果你时间有限、不善此道,那么可以从网上找到很多设计图标的素材。

Google在官网上放出了很多现成的图标素材,涵盖了很多门类,基本上够我们直接拿过来使用了。

技术分享

阿里也提供了一个收集了很多图标的网站iconfont,我们需要某个类型的图标时,可以去上面搜索。这几乎一定能满足我们的需要。

技术分享

制作图标的素材最好是矢量图,这样随便缩放素材的大小,图案的边缘都可以清晰可见。而且向我们要使用的图标素材都是很简单的几何图形,矢量图占用的存储空间会非常的小。

还有一个实用的图标制作工具网站Android Asset Studio。你可以选择制作应用图标或者系统图标,调整好参数以后,就能将图标下载到本地使用。

技术分享
技术分享

本文是《从设计到实现-手把手教你做android应用开发》系列文档中的一篇。感谢您的阅读和反馈,对本文有任何的意见和建议请留言,我都会尽量一一回复。

如果您觉得本文对你有帮助,请推荐给更多的朋友;或者加入我们的QQ群348702074和更多的小伙伴一起讨论;也希望大家能给我出出主意,让这些文档能讲的更好,能最大化的帮助到希望学习开发的伙伴们。

除了CSDN发布的文章,本系列最新的文章将会首先发布到我的专属博客book.anddle.com。大家可以去那里先睹为快。

<script type="text/javascript"> $(function () { $(‘pre.prettyprint code‘).each(function () { var lines = $(this).text().split(‘\n‘).length; var $numbering = $(‘
    ‘).addClass(‘pre-numbering‘).hide(); $(this).addClass(‘has-numbering‘).parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($(‘
  • ‘).text(i)); }; $numbering.fadeIn(1700); }); }); </script>

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