Skip to content

适配指南

PedroZ edited this page Oct 24, 2023 · 16 revisions

注意

一、普通静态分层图标分辨率必须为432x432左右或以下

二、动态分层图标中所有quietImage.png的分辨率必须在365x365以下

三、2023年10月小米发布HyperOS后,换回了正确的遮罩。所以完美图标的适配遮罩比例更改为正确的66.6%。


准备工作

Photoshop 或者类似的图片编辑软件,少量的PS知识;一些耐心。

项目 demo 目录内提供了两份psd示例文件以供参考,一份是哔哩哔哩图标文件,一份是遮罩文件,可用来查看最终在 MIUI 上显示的效果。 (Demo为62.5%,已过时)

原理

手动将图标内容和背景分离为两张图片,即背景 0.png 和内容 1.png(以下称为背景和前景),前景在上背景在下,叠加显示。

文件结构

在 icons/ 目录下,包含 0.png 和 1.png 两个文件,其中 package name 为应用包名,两个图片构成一组完美图标。适配者只需要在 icons/ 目录下添加目录名为包名的目录,文件夹内包含两张png图片即可。

以上内容与图标绘制无关

图标查找

https://icon.yukonga.top/ 上 ,可以找到 IOS 上的高清 APP 图标。或者可以从apk内提取,或者在网络上进行查找,注意要保证图片较为良好的清晰度。

图片格式

图片格式为PNG,正方形,背景和前景的分辨率应保持一致。

虽然分辨率大小没有规定,但是建议不低于252x252,分辨率过低会影响图标清晰度,分辨率过高对显示效果的提升不明显,其次还会增加模块体积。若图标较为复杂,比如游戏图标,则建议分辨率为512x512;若较为简单,则建议分辨率为384x384。

在某次桌面更新后,对分层图标的分辨率做了限制。

一、普通静态分层图标分辨率必须为432x432左右或以下。

二、动态分层图标中所有quietImage.png的分辨率必须在365x365以下。

图片内容

值得注意的是, MIUI 并不会将整张图片做为图标,而是只显示图标中心一部分的区域,并通过xml剪裁为最终的显示效果。所以适配时应当保证图片中心的显示效果。

具体数值为:图片以中心为基准,图标区域为 整张图片高度和宽度的 62.5% 66.66%。

以下示例仍旧基于62.5%进行说明,但实际制作请按照66.66%制作。

如图王者荣耀图标所示,若图片分辨率为 512x512,则实际有效高度(宽度)为 512×62.5=320,有效分辨率为 320x320,红色区域为不显示区域。中心图标区域为显示区域。

王者荣耀 62.5%示例.png

同时由于图标圆角显示,还会被遮挡一部分,但是这个问题几乎不需要考虑。

为了保证良好的显示质量,保证最终显示图标要覆盖中心62.5%的区域,其余区域可为透明或随便。 (以上提到的62.5%均为边长,非面积)

对于前景,将图标主体抠出后,出内容外其余位置设置成透明,并缩放至中心区域(即边长缩放62.5%)。 对于背景,将图标主体抠出后,删除banner内容(例如双十一、购物节、xxx活动),并补齐背景内容,即使单独拿出背景也不应该有空白或者透明区域,如果无法补齐则视情况可以重绘,完成后缩放至62.5%。有能力可以补齐外侧部分(虽然没什么用)。

将前景导出为1.png,背景导出为0.png。

可供参考的大致流程(以PS为例)

  1. 找到合适的图标文件,用PS打开
  2. 使用魔棒或者快速选择工具,将图标主体部分选择,右键剪切到图层,前景基本完成。
  3. 处理背景,如果背景较为简单,如纯色或者渐变,可直接重绘背景。如果较为复杂,可选择空白区域后,使用PS自带的内容填充工具填充,如果效果好,则可以使用,并用内容修复工具处理一些边框痕迹(大概率有);如果效果不好,则尝试用类似图片代替或直接改成纯色。
  4. 依次自由变换前景和背景,缩放至中心 62.5%(指边长)
  5. 导出 1.png 和 0.png 提交即可。

未尽事宜等待补充

Clone this wiki locally