搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > UI设计达人 > 什么?Android O 图标能自适应了?!

什么?Android O 图标能自适应了?!

UI设计达人 2017-10-31



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


基础元素部分



尺寸和形状


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


什么?Android O 图标能自适应了?!

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


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


什么?Android O 图标能自适应了?!


△ 安全区域的参考


参考线



什么?Android O 图标能自适应了?!


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


  • 圆形:直径为 52dp 或 32dp

  • 方形:44dp * 44dp,圆角半径为 4dp

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


内容图层


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


什么?Android O 图标能自适应了?!

什么?Android O 图标能自适应了?!


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


设计时需要注意的地方


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


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


剪裁


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


背景锚定


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


什么?Android O 图标能自适应了?!


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


被遮盖的遮罩


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


什么?Android O 图标能自适应了?!


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


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

 

什么?Android O 图标能自适应了?!


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


什么?Android O 图标能自适应了?!


光与影


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

 

什么?Android O 图标能自适应了?!


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


迟滞效果


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

 什么?Android O 图标能自适应了?!



资源和工具


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


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

 


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



https://github.com/nickbutcher/AdaptiveIconPlayground


尽管去适应吧


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


关注『UI设计达人』

看更多精选UI设计文章

↓↓

版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《什么?Android O 图标能自适应了?!》的版权归原作者「UI设计达人」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注UI设计达人微信公众号

UI设计达人微信公众号:BestUIDesign

UI设计达人

手机扫描上方二维码即可关注UI设计达人微信公众号

UI设计达人最新文章

精品公众号随机推荐

上一篇 >>

性能测试之jmeter