图片与图标轻量化风格统一核心原则,图片图标服务于内容,体积精简影响加载速度,风格统一提升品牌感,实操技巧图片使用风
格统一,产品图用白底图案例图用实景图,避免混合风格、一张卡通图、一张实景图、压缩优化转为WebP格式体积减少50%,单张
图片≤150KB首屏图片≤100KB。
尺寸适配图片宽度屏幕宽度32px左右内边距各16px,避免图片拉伸或留白过多,懒加载非首屏图片启用懒加载,滚动到可视区域再
加载,减少初始加载压力。
图标使用风格统一全站使用线性图标,2px线条或面性图标避免混合,尺寸统一功能图标、搜索、分享、电话24×24px,导航图标
32×32px,点击区域≥44×44px适配拇指触摸,图标含义与功能一致电话图标、拨打功能,购物车图标、下单功能避免用户困惑,
避坑提示避免使用模糊、侵权图片不添加无意义装饰性图片,图标不使用复杂动画、旋转、闪烁、避免分散注意力。