最美UI

Android O 自适应图标的设计

android O引入了一个新的应用程序图标格式:自适应图标。通过统一所有应用程序图标的形状和打开有趣的视觉效果,自适应图标可以使设备更加连贯。我们就来聊聊它们是如何工作的,并探索了一些设计它们的技术。

1. 基本面

尺寸和形状

自适应图标的大小为108dp * 108dp,但最多可屏蔽72dp * 72dp。 不同的设备可以提供不同的蒙板,其必须是凸形的,并且可以从中心到达蒙板边缘最少33dp。

 

由于蒙板的最小面积,你可以将一个居中的66dp直径圆作为安全区域,保证不被剪裁。

方法

Keyline形状是图标网格的基础,帮助您的图标视觉比例与其他应用程序的图标一致。 keyline的形状是:

· 圈数:52dp和32dp直径

· 方形:44dp * 44dp,4dp角半径

· 矩形:52dp * 36dp&36dp * 52dp,4dp角半径

图层

自适应图标实际上由两层组成: 前景和背景。 两层均为108dp * 108dp; 背景必须完全不透明,而前景可能包括透明度。 这些层堆叠在彼此之上。

提供大于显示(即屏蔽)尺寸的两个单独层中的元素创建有趣的视觉处理和动画的机会。 究竟什么效果可以应用,仍然是一个悬而未决的问题; 由设备和发射器制造商决定。 以下是您可以想象的一些简单的例子:在应用蒙版之前,通过独立翻译或缩放每个图层来进行视差或脉冲。

 

由于108dp * 108dp图标被屏蔽到72dp * 72dp,每边的外部18dp可以被认为是“额外的”内容,只在运动过程中显示出来。

2. 设计注意事项

创建产品图标的材料设计指南仍然非常适用。具体来说,图标结构、阴影和完成部分仍然存在,但现在可以将元素放置在前景或背景层中,从而产生不同的效果。

现在,我相信许多图标将会被很好地服务,将他们的品牌标志放在一个坚实的彩色背景上,并在一天内将其称为“一天”。这将确保你的图标设备上很合适。让我感到兴奋的是,我们作为一个社区将如何探索这些新的约束,并找到有趣,有趣和创新的方式来制作令人愉快的图标。这里有一些需要记住的东西,还有一些可以探索的想法。

剪裁

由于自适应图标的动态特性,您无法知道将要应用的确切的蒙版形状。 因此,最好将任何关键元素(如品牌标记)放在安全区内,并远离掩模边缘。

背景锚定

放置一些可能看起来是前景的元素,实际上在后台意味着它们将独立移动。例如,计算器应用程序将大部分的元素放置在前台,而背景中的重音颜色块中的等于按钮

这给你在视觉上锚定明亮色块的运动创造了有趣的机会,但它比前景元素移动的少,产生了深度感。

蒙版中的蒙版

我认为在前景中放置屏蔽元素可能会有一些有趣的机会,那就是那些被切割的区域。考虑一下Google Play商店的一个可能的图标,这可能是用“明显”的方式构造的,它将彩色三角形置于一个白色背景之上。

我们不用这样做,我们可以使用一个丰富多彩的背景和一个白色的前景,用三角形减去来产生相同的静态输出:

此设置将使颜色“窥视”独立移动的蒙版揭示背景不同部位时,平移、缩放。

光和影

照明效果和阴影放置在单独的层中的相互作用可以产生有趣的结果。 例如,在前景元素上使用长阴影技术可以在屏蔽区域内移动时具有俏皮的互动。 类似地,照明效果可以放置在前景层中而不是被烘烤到背景中。 例如,“完成”层可以放置在前景中以模拟光源。 将其放置在前台意味着它将在运动时在背景层上播放,以不同的速率移动到它。

注意不要产生一个没有意义的效果,例如一个阴影从一个前景元素中分离或者移动到一个背景元素后面。同样要记住的是,许多图标很可能会在一起被看到,所以要保持对定制照明效果的保守,并且要严格遵循材料的指导原则。

离开的后面

你可以在背景层中放置元素,而背景层完全被前景层遮挡,只在运动中显现出来。

 

3. 资源和工具

这是我的草图文件,您可以使用它作为模板,同时创建自适应图标。 它包括图标网格,keyline形状和安全区域。 它被实现为一个符号,因此更改主元素将更新副本,使您可以使用不同的掩码进行预览。

自适应图标游乐场

在开发适应性图标时,运用效果时,许多细微之处来自前景和背景元素的相互作用。 这仍然是一个悬而未决的问题,因为我们尚未看到设备和启动器制造商将如何实施这一点。 为了帮助调查此空间,在此有一个小型测试应用程序,以帮助你评估它,同时创建你的图标

动图

该应用程序使用自适应图标显示设备上安装的所有应用程序 滚动网格对图标应用视差效果,并触摸图标应用缩放效果。 您可以配置效果的强度,并更改应用于所有图标的蒙版。 希望此工具可以帮助您设想您的图标将如何显示,并可能在不同的设备上移动。

4. 总结

希望这篇文章能给你提供信息和灵感与相应的设计方法,为你的应用设计一个很棒的自适应图标。站在用户角度,我迫不及待地将我们的应用程序变得更加一致。 

文章来源: 路口右转

原文链接: 微信公众号 

微信公众号微信公众号:zuimeiui

扫一扫 关注公众号

0

[ 最美特色栏目推荐 ]
设计导航:全球顶尖设计网站推荐,设计师必备导航! → 猛戳这里
设计欣赏:收集海量精选APP截图,让你设计灵感小宇宙大爆发!! → 猛戳这里
APP图标:精选APP图标,看看各大app图标的设计风格提升设计感! → 猛戳这里
最美UI(zuimeiui.com)每天发布高质量的设计教程和分享设计经验,帮助喜欢UI设计的初学同学快速转型,我们给大家提供更多免费学习ui的机会,想成为设计师的你赶快加入吧!
【原创文章 投稿邮箱:tougao@zuimeiui.com | 期待您的投稿!】

上一篇
移动UI设计中动画的主要用途
下一篇
UI动效:提高用户体验的完美解决方案