CutEdge01 / 为不同位置分配不同任务
| 位置 | 用户要解决的问题 | 图片建议 |
|---|---|---|
| Hero | 这是什么？ | 一个强主角，展示代表性界面或成品 |
| 功能区 | 它能做什么？ | 更近的局部截图或操作结果 |
| 流程区 | 怎么做？ | 按顺序排列的步骤图 |
| 指南 | 我应该点哪里？ | 准确界面，少装饰、强对应 |
02 / 首屏只保留一个视觉焦点
首屏设备图应该在几秒内让用户理解产品形态。如果同时堆入多台设备、多层投影、一段视频和大段文案，所有东西都会抢焦点。
- 主设备与标题形成明确的左右或上下关系
- 给下载按钮保留视觉空间
- 移动端优先完整显示，不用巨大裁切追求“沉浸”
03 / 功能图优先准确，不是壮观
功能区可以用设备边框建立上下文，但需要放大用户应该注意的部分。如果必须把整台手机缩得很小才能放进卡片，就换成局部界面或拆成两张图。
04 / 把图片体积纳入设计
优先使用现代图片格式，为大图写明宽高，非首屏图延迟加载，视频提供封面并避免在移动端同时自动播放多份。高级感不应以用户的流量和等待时间为代价。
常见问题
官网首屏应该放视频还是图片？
取决于产品是否必须通过动态才能理解。如果静态成品已经足够说明价值，优先用图片；如果交互是核心，视频应有封面和静音预览。
一个页面能放多少张设备图？
没有固定数字。只在新图能回答新问题时增加，避免为了“丰富”重复展示同一个界面。
设备图的 alt 文字怎么写？
描述图中展示的界面、设备和用户需要理解的结果，不要重复堆叠关键词。
