『』Z轴拆分法:故事还得从安卓应用图标讲起


写这篇文章的初衷本来只是打算完成给读者的一个承诺 , 讲解一下Android 8.0后的应用图标适配 。 可是写着写着 , 发现安卓现行的图标适配法则和“Z轴拆分法”十分类似 , 便由适配法牵扯出了许多相关话题 。 希望通过本文 , UI同行们能透过手法本身 , 进行更多的思考 。
『』Z轴拆分法:故事还得从安卓应用图标讲起
本文插图

一、安卓应用图标适配
众所周知 , 安卓相较于iOS来说 , “建立标准化”一路走来是非常波折的 。 因为安卓的原始设备制造商 (OEM) 很多 , 每一个OEM又希望打造自己独立的产品特性 , 这些产品特性注入到硬件设备和系统软件等诸多方面 , 造就了安卓的杂屏现象 。
所以我们常说安卓“杂屏” , 可不仅仅指安卓设备物理像素、倍率繁多等方面 , 还有软件与各类系统适配的问题 。 这些问题在近几年其实已经得到了诸多改善 , 国内小米的创始人雷布斯就为设备的标准化做出了不小的贡献 。 而Google也一直在致力于解决软件标准化的问题 , 应用图标的适配就是其中一个方面 。
Material Design 规范中倡导:对于安卓应用图标 , 自Android O(Android 8.0)版本开始 , 应用程序设计者应提供一套标准化文件 。
文件应包含:

  • 前景层.svg文件:图标主视觉区域 72dp*72dp ;最终输出尺寸 108dp*108dp;
  • 背景层.svg文件:最终输出尺寸 108dp*108dp 。
可能听起来让你有些一头雾水 , 一个图标还要拆分输出前景层、背景层 , 什么鬼?下面我来讲解一下原因 。
前面我们说到 , 不同的OEM的系统视觉规范不同 , 对于桌面应用图标 , 有些OEM出厂设备是显示方形 , 有些OEM出厂设备是显示圆形 。 如果不采用一套标准输出应用图标的规范 , 图标很可能会被OEM所提供的形状蒙层裁剪到主体部分 。
并且从Android 8.1版本开始 , 安卓引入了图标的视差和脉动效果 。
『』Z轴拆分法:故事还得从安卓应用图标讲起
本文插图

如何让设计者只需提供一套图标文件 , 就自动适配解决前面的这些问题呢?
MD选择将应用图标的前景层与背景层分离 。
『』Z轴拆分法:故事还得从安卓应用图标讲起
本文插图

UI需提供给安卓开发人员两个图层.svg文件:前景层尺寸为108dp*108dp , 但主视觉区域为72dp*72dp;背景层尺寸为108dpx108dp , 仅包含背景图层 。
最后根据各个不同OEM提供的蒙层遮罩 , 自由适配不同的图标视觉样式 。
『』Z轴拆分法:故事还得从安卓应用图标讲起
本文插图

这样也就可以调节控制前景层与背景层不同的偏移距离 , 形成视差效果 。
看看MD官方展示的最终效果:
『』Z轴拆分法:故事还得从安卓应用图标讲起
本文插图

这就是MD规范为OEM安卓桌面图标差异性提供的解决方案 。 尽管MD官方并没有对这种制图手法给出一个官方的名称 , 但这种手法与“Z轴拆分法”十分类似 , 并且常被应用在设计体系当中 。
二、Z轴拆分法——机器作图的基本逻辑
记得阿里刚推出机器作图AI产品“鹿班”的时候 , 设计师们纷纷表示感受到了人工智能带来的威胁 。
AI机器作图的智能性不用多说 , 它可以根据产品分析、文案分析等手法 , 瞬间造出千万张适用于不同应用场景中的图片 。 并且它还能够不断学习 , 越来越符合主流审美 , 简直不要太玄乎 。
后期人工智能会强大到什么地步 , 我们不讨论 , 但实际上此类机器作图的基本逻辑就是运用的“Z轴拆分法” 。


推荐阅读