设计稿规范

UED 遵循此规范(约定)可以让设计稿在研发 D2C 时生成更加可用的代码。
以下罗列了一些规范或建议,更规范的设计稿在 D2C 时会转出来更可用的代码。除此之外,你可以按照你习惯的方式画稿。
👍🏻 推荐使用 设计稿检查 功能检查设计稿。
图标含义:
  • ✅ 请这样用
  • 👍🏻 推荐用
  • ❌ 不推荐用

UI Kit

✅ 如果你使用了 Semi 组件,请使用最新版 Semi Variants自定义 Variants

图层

图层分组

👍🏻 推荐把视觉上有层级含义的图层使用 Frame 聚合起来。
❌ 不推荐把所有的图层平铺展示。

图层命名

👍🏻 对于有明显聚合功能的图层,推荐使用有语义的图层名称,例如 header、confirm-btn等。

背景填充

👍🏻 推荐把背景色填充到 Frame 节点。
❌ 不推荐使用矩形作为背景色的载体。

图层遮罩

👍🏻 对于有遮罩关系的图层,建议把遮罩图层与被遮罩图层放在相同层级。

布局

自动布局

👍🏻 推荐使用 auto layout。

特殊组件

Table 组件

👍🏻 推荐查看 Table 组件文档

Form 组件

👍🏻 推荐查看 Form 组件文档

© 2021 - 2024 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED

  • 开始
    • 介绍
    • 快速开始
    • 选型对比
    • 相关术语
    • 常见问题
    • 更新日志
  • 研发使用手册
    • 代码转译
    • 标记图层
    • 标记表格
    • 标记组件库
    • 标记图标库
    • 设计稿检查
    • 转码插件
    • 故障排除
    • 基础转换原理
    • 支持组件列表
    • 全局设置
  • 设计使用手册
    • 使用 Semi Variants
    • 自定义 Variants
    • 设计稿规范
    • 使用 Table 组件
    • 使用 Form 组件
    • 迁移旧设计稿
  • 更多
    • 联系我们
    • 路线图
    • JSON Schema
    • 已知问题