# 效果图


效果图是表达UX设计的关键内容，用于直观呈现目标体验的静态效果，并作为开发者与测试工程师的实现与验收依据。效果图一般为jpg或png格式。


在优秀的设计交付件中，针对不同前置条件下，各交互流程所途经的每个界面都应匹配效果图。对于大量重复使用的组件元素，如弹窗和即时反馈，亦可配合规格统一说明，不做过多重复设计。


在多设备设计中，为了清晰表达设计效果，设计师仍需要针对不同尺寸的关键界面提供符合规范的效果图。关键界面包括且不限于：


- 应用的首页

- 可以从首页直接进入的各二级界面

- 核心使用流程途经的各界面

- 能典型体现多数界面的自适应与响应式规格的界面


不同尺寸的效果图，至少应包含小设备、中设备、大设备。根据业务涉及的设备特点，可补充超小尺寸效果，及不同设备的横竖屏效果，提前充分验证并优化UX设计体现的差异性、一致性、灵活性、兼容性。


对应不同设备效果图的设计画板尺寸推荐如下：


  | 设备类型 | 屏幕宽度 | 画板尺寸（vp） | 
| -------- | -------- | -------- |
| 超小设备 | [0, 320) | 240\*320 | 
| 小设备 | [320, 520) | 360\*780 | 
| 中设备 | [520, 840) | 677\*763 | 
| 大设备 | [840, +) | 1280\*800 | 


多设备效果示意图


![4.8-效果示意图](figures/4.8-效果示意图.png)


> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> - 画板尺寸为不同宽度断点下的典型设备屏幕尺寸，可根据业务具体针对的设备选择其他画板尺寸
> 
> - 画板尺寸以vp为单位提供，根据实际设计所需精度，可统一把设计文档中所有画板设置为1倍或多倍的px尺寸
> 
> - 如效果图需要展示一屏以上的内容，如列表内容较长，建议保持宽度不变并增加画板高度以容纳更多内容