五、图片处理规范

1 、图片统一性

1）图片色调色温需统一，例如一个婴儿产品的首页，整体需要搭配暖色调的图片，这样看上去整体才比较统一舒服。

2）图片比例需统一，例如一个卖货的产品详情页，在同一屏的栏目中（页面）所出现的产品或者人物，比例就需要有一个统一的大小比例，这样看上去才比较统一舒服。

2 、图片细节处理

1）图片精度不够（这里所说的精度不是说 DPI 解析度需要 300 哦，那是做高精度印刷输出时才需要的，而在电脑及手机上的图片 DPI 解析度为 72 即可，另外输出图片时需适当压缩一下图片的大小）、杂色太多可以使用 PS 内建的 CR 滤镜处理。

2）图片尺寸建议统一为偶数值，方便前端技术人员开发。

3）图片边缘避免与白色背景融合，可以在边缘位置加色。

4）为了配合标题字型，图片可以区域性调亮或调暗。

六、动效规范

无论是现在经常看到的企业/品牌 H5 宣传页面、移动端启动页，还是曾经红极一时的首页动画，都需要用到动效效果。会做点动效会给我们加分不少，尤其是做一些载入动画，这是我们经常会遇到的需求。

做动效时，我们需要注意以下几点：

1）不论您的动画有多好看、多吸引眼球，如果成本太高或者过于复杂都是无法落地的，所以我们要遵循简单实用的原则来进行设计，千万不要过度设计。

2）任何互动动作所导致的状态都需要考虑正常状态与异常状态。拿载入动画来说，我们需要考虑载入成功的反馈与载入失败的反馈，并将之注明在输出规范中。

3）动效使用的工具：可以 PS 做一些动态表情，用 AE 做一些载入动画，页面之间的互动动效可以使用 Flinto 、 Principle 等。