|
2017-07-28 11:58 来源:谷歌开发者 设计 /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 设计了一个参考图标用来简单地讲述这个思路，即将彩色三角形放置在白色背景上的前景中，atv，如下图所示，已经成型的 logo 单独放在一个图层里。
△ 一定有设计师认为这是一张透明底的图片对不对？ 但是！如果放弃这种做法，转而使用彩色背景和白色前景（被镂空出了三角形轮廓），就能实现相同的静态输出：
但上面这种做法允许下方图层的颜色 “渗出”，并独立于遮罩进行移动，从而在移动或放大时显示出背景的不同部分。下图就是两种方案的对比：
光与影 (责任编辑：本港台直播) |
