图片资源优化

更新时间:

本章为 UI 设计师提供界面资源设计规范,通过科学管理图片资源降低内存占用、提升渲染性能、优化安装包体积,适用于设计阶段至开发交付全流程。

图片尺寸适配原则

推荐级别:强烈

图片物理尺寸必须与目标显示区域像素尺寸严格匹配,禁止使用超分辨率图片。大尺寸图片会导致内存占用激增,同时增加 GPU 渲染管线压力。

8 位色深资源优先

推荐级别:建议

智能手表等穿戴设备屏幕色域有限,建议采用 8 位色深(256 色)PNG 格式:

  • 通常可以提供足够的颜色范围
  • 有助于减少的存储空间
  • 支持透明度通道且无画质损失

png 图片替代 svg 图片

推荐级别:建议

svg 只在有动画或动态修改属性等特殊场景时使用,一般情况下都使用 png 格式图片资源

反例

<image src="/assets/images/logo.svg"></image>
复制代码

正例

<image src="/assets/images/logo.png"></image>
复制代码

删除冗余图片

推荐级别:建议

如果图片已经用不到了,需要及时的在项目中删除,否则冗余的图片会使得包体积增加。

资源复用体系

推荐级别:鼓励

设计的图片尽量实现共用,来减少存储占用。比如:确定、取消、返回、选中、未选中等使用频繁的按钮。