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

五、图片处理规范

• 图片统一性
  • 1）确保图片色调和色温一致，如在婴儿产品首页应用暖色调，以营造和谐统一的视觉效果。
  • 2）维持图片比例的一致性。比如在商品详情页中，同一屏幕内的产品或人物应保持相同的比例，使页面看起来协调舒适。
• 图片细节处理
  • 1）对于图片清晰度不足或色彩杂乱的问题，可利用Photoshop的内置CR滤镜进行优化。
  • 2）建议设定图片尺寸为偶数，便于前端开发人员处理。
  • 3）防止图片边缘与白色背景混为一体，可在边缘添加颜色区分。
  • 4）根据标题字体调整图片局部明暗，以增强视觉配合。

六、动效规范

动效在现今的企业/品牌H5宣传页面、移动端启动页，乃至过去的首页动画中都发挥着重要作用。掌握动效设计能为作品增色不少，特别是制作加载动画，这是常见的需求场景。

• 在创建动效时，应注意以下几点：
  • 1）无论动画多么精美引人，如果实现成本过高或过于复杂，都可能难以实施。因此，设计应遵循简洁实用的原则，避免过度设计。
  • 2）对于任何交互动作引起的状态变化，都要考虑正常和异常两种情况。例如，加载动画需要涵盖成功和失败的反馈，并在规范中明确说明。
• 常用的动效工具包括：使用PS制作动态表情，用AE创建加载动画，以及Flinto、Principle等工具来设计页面间的交互动效。