优秀网页设计师须了解的UI设计规范（二）

五、图片处理规范

1、图片统一性

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

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

2、图片细节处理

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

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

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

4）为了配合标题字体，图片可以局部调亮或调暗。

六、动效规范

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

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

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

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

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