logo
当前位置:首 页 > 移动开发 >android > 查看文章

Android O 引入了一种新的应用图标格式:自适应图标。自适应图标可以统一所有应用图标的形状,为用户展现有趣的视觉效果,从而使设备提供更为一致的体验。本文会向您解释它的工作原理,以及一些设计这种图标的技术。

基础元素部分

尺寸和形状

自适应图标的大小为 108dp * 108dp,但最大只能遮盖 72dp * 72dp 的面积。不同的设备可以提供不同的遮盖,但必须是凸形的(不能凹进去),图标边缘距离中心不小于 33dp。

△ 内容 + 遮罩 = 成品,注意刚才强调的,不要使用凹进去的轮廓

考虑到遮罩的最小面积,您可以画一个 66dp 直径的圆来作为安全区域的参考,以保证图标不被剪裁。

△ 安全区域的参考

参考线

参考线的形状是图标网格的基础,它可以让您的图标的视觉比例与其他应用图标一致。参考线的一些具体设置如下:

  • 圆形:直径为 52dp 或 32dp
  • 方形:44dp * 44dp,圆角半径为 4dp
  • 矩形:52dp * 36dp 或 36dp * 52dp,圆角半径为 4dp

内容图层

自适应图标实际上由两层内容堆叠而成:前景和背景。两层图形的大小均为 108dp * 108dp; 背景必须完全不透明,而前景允许出现一定的透明度。

简单计算一下:由于 108dp * 108dp 图标被遮盖到了 72dp * 72dp 大小,每条边外部被切掉的 18dp 可以被认为是 “额外的” 内容,只在动效中显示。

设计时需要注意的地方

用于创建产品图标的 Material Design 设计规范在这里仍然适用。具体来说,图标结构、阴影和修饰效果仍然存在,但您现在可以将多种元素分散放置在前景或背景图层中,以产生不同的效果。

我们相信,如果您将图标的品牌标记放置在前景上,再把它们放置在纯色背景上,图标的显示效果就会非常出色。您的图标会完全与设备贴合。聪明绝顶的设计师们将会如何探索这些新的设计要求,并使用有趣和创新的方式来创造多少令人愉快的图标?只要想象一下设计社区里可能涌现出来诸多杰作就颇令人兴奋呢。下面列出一些要记住的事情和一些可供探索的想法。

剪裁

由于自适应图标的动态特性,您无法知道将要应用的遮罩的形状究竟会是什么样子。因此,最好将所有关键元素(如品牌 logo)放在安全区内,并远离遮罩边缘。

背景锚定

放置一些看起来像是前景的元素,但实际上它们被画在背景图层上,这也意味着他们可以在后面独立移动。例如,下面计算器应用将大多数元素放置在前景中,而将等号按钮放置在背景内的高光色块中:

这样一来就为动效提供了一个有趣的机会,您可以把视觉锚点标定在明亮的色块上,但它又比前景元素的移动量少,从而创造出一种深度感。

被遮盖的遮罩

我们认为如果将遮盖元素放置在前景中,可能会很有趣  ——  您会发现本该是固定的内容也能灵动起来。这里我们为 Google Play Store 设计了一个参考图标用来简单地讲述这个思路,即将彩色三角形放置在白色背景上的前景中,如下图所示,已经成型的 logo 单独放在一个图层里。

△ 一定有设计师认为这是一张透明底的图片对不对?

但是!如果放弃这种做法,转而使用彩色背景和白色前景(被镂空出了三角形轮廓),就能实现相同的静态输出:

 

但上面这种做法允许下方图层的颜色 “渗出”,并独立于遮罩进行移动,从而在移动或放大时显示出背景的不同部分。下图就是两种方案的对比:

光与影

放置在不同图层中的光照和阴影效果,在相互作用时,可以产生有趣的现象。例如,在前景元素上使用长阴影,并在遮盖区域内移动时,可以产生出很好玩的视觉效果。类似地,光照效果可以放置在前景图层中,而不是被固定到背景中。例如,“高光” 层可以放置在前景中,以模拟光源。将其放置在前景中,意味着它在运动时将在背景层上播放,并以不同的速率向它移动。

 

请当心,不要创建没有意义的效果。例如,从前景元素中分离出来的阴影,或是在背景元素后移动的阴影。还要记住,许多图标可能会一起被看到,所以请保守地定制光照效果,并时刻遵循 Material Design 中对图标光影的设计要求。

迟滞效果

您可以将元素放置在背景图层中,这时它们会被前景层完全遮蔽,仅在动效下显示。

资源和工具

Sketch 源文件(请注意里面的关键元素都符号化了,必要的时候请断开符号和副本的依赖关系):

https://github.com/nickbutcher/AdaptiveIconPlayground/raw/master/art/ic_launcher.sketch

Illustrator 源文件:

https://github.com/nickbutcher/AdaptiveIconPlayground/raw/master/art/adaptive-icon.ai

自适应图标 Playground

在开发自适应图标时,我们已经明白,在运用动效时,许多细微之处来自前景和背景元素的相互作用。这仍然是一个开放的问题,因为我们尚未看到设备和启动器制造商将如何实现这一点。为了提前让大家能预览一下 “实机” 效果,我们创建了一个小型测试应用,以帮助您对它进行评估,同时创建您的图标:

 

该应用使用自适应图标显示设备上安装的所有应用。滚动网格会对图标应用视差效果,触摸图标则会应用缩放效果。您可以配置效果的强度,并更改适用于所有图标的遮罩形状。希望此工具能够帮助您感知您的图标将会如何被显示出来,在不同的设备上将会如何移动。

Github 地址:

https://github.com/nickbutcher/AdaptiveIconPlayground

尽管去适应吧

希望这篇文章能够为您提供一些信息和灵感,从而帮助您为应用设计出很棒的自适应图标。大家也可以看到我们虽然提供了一些思路,但更多只是在抛砖引玉。我们期待着大家的作品。

一个有大大梦想但是没有支撑这梦想的技术的攻城狮,大家就当这个博客是你的技术工具箱吧,我会吧我工作中遇到的问题贴在这,大家需要的记得把我放到收藏夹哦! 百度输入“子傲代码”就可以了

—— 陈子傲

admin
众说纷纭Comments
大眼 可爱 大笑 坏笑 害羞 发怒 折磨 快哭了 大哭 白眼 晕 流汗 困 腼腆 惊讶 憨笑 色 得意 骷髅 囧 睡觉 眨眼 亲亲 疑问 闭嘴 难过 淡定 抗议 鄙视 猪头
小提示:直接粘贴图片到输入框试试
努力发送中...
  • 评论最多
  • 最新评论
  • 随机文章
footer logo
未经许可请勿自行使用、转载、修改、复制、发行、出售、发表或以其它方式利用本网站之内容
Copyright ©ziao design Studio All Rights Reserved.沪ICP备14052271号-3