以下罗列了一些规范或建议,更规范的设计稿在 D2C 时会转出来更可用的代码。除此之外,你可以按照你习惯的方式画稿。
👍🏻 推荐使用 设计稿检查 功能检查设计稿。
图标含义:
- ✅ 请这样用
- 👍🏻 推荐用
- ❌ 不推荐用
UI Kit
✅ 如果你使用了 Semi 组件,请使用最新版 Semi Variants 或 自定义 Variants。
图层
图层分组
👍🏻 推荐把视觉上有层级含义的图层使用 Frame 聚合起来。
❌ 不推荐把所有的图层平铺展示。
图层命名
👍🏻 对于有明显聚合功能的图层,推荐使用有语义的图层名称,例如 header、confirm-btn等。
背景填充
👍🏻 推荐把背景色填充到 Frame 节点。
❌ 不推荐使用矩形作为背景色的载体。
图层遮罩
👍🏻 对于有遮罩关系的图层,建议把遮罩图层与被遮罩图层放在相同层级。
布局
自动布局
👍🏻 推荐使用 auto layout。
特殊组件
Table 组件
👍🏻 推荐查看 Table 组件文档
Form 组件
👍🏻 推荐查看 Form 组件文档