虎扑体育网

为了更好的让小伙伴们感知分层图标，简单地介绍一下分层图标的原理及效果演示，具体请通读此文。「提示：本图文需200MB左右的流量！」

1.什么是分层图标？分层图标由背景、前景、遮罩组成，遮罩层分别遮罩背景和前景，相当于独立的2层。

2.分层图标和非分层图标有什么区别？分层图标从桌面打开应用的过程中，背景进行非等比缩放并过渡显示为应用内容，前景进行等比缩放并逐渐消失，退出应用则相反。非分层图标在打开应用的过程中，相当于分层图标的背景与前景同时进行非等比缩放，退出应用则相反。具体如下两图对比所示。

上图为非分层图标在返回桌面时图标进行非等比缩放，以至于前景被变形。

上图为分层图标在返回桌面的过程中，图标背景进行非等比缩放，图标前景进行等比缩放，并逐渐合二为一，视觉连贯。3.采用分层图标的优点？① 能保证应用在打开和关闭时图标前景完全不会变形，保证视觉效果。② 突出图标的背景与前景，将图标变“活”。

4.采用分层图标的缺点？① 主题图标包复杂，每一个应用对应一个包名文件夹以及文件夹里的背景与前景，占用系统资源。② 主题包大小官方有限制（华为200MB、小米80MB），无法适配过多分层图标。如主题《Fluent UI》已适配2400+枚分层图标，主题包已达50MB+。③ 如日历等动态图标暂时无法适配分层图标。下面展示几个常用应用的分层图标。

5.为什么不用MIUI进行分层图标动画演示？MIUI主题分层图标目前仅7月份之后的开发版无BUG，稳定版使用遮罩将失效，从应用返回桌面时图标弹直角。（给MIUI主题运营反馈过此BUG，没想到竟然问我怎么做的分层图标，说还没开放给设计师。）

MIUI的分层图标动画没有EMUI的舒适流畅但是MIUI有更多的特效，比如卸载某个应用时，周围的图标前景有偏移动画。

MIUI分层图标拽拖会出现偏移动画，而EMUI仅支持打开退出动画。由于限制图片大小，以上动图展示采用GIF图片，视频分层图标演示请移步：

上文演示中的主题为《Fluent UI》《峥嵘》，EMUI、鸿蒙、MIUI在主题商店均可下载使用。

行文仓促，加之能力有限，如有错误之处敬请指正。