1. 设计图注释规范

制定该注释规范,旨在优化交互图、设计图的可读性,避免不必要的错误,比纯文字效率更高。

在ID、UI 设计中,请遵循该注释规范,合理布局、解释页面功能。 要在sketch软件内使用该注释,请添加sketch库文件,添加后您可以收到库文件的更新,保持最新状态,同时可以应用规范中的symbols提升设计效率。

添加注释图规范sketch库文件 → commentSpec

  • 第一个默认状态使用粗线箭头风格,用于区分同页面的其他注释,避免混淆。
  • 条件分支需要条件的可以直接在箭头中写明条件,如果条件复杂,可以使用触发条件辅助藐视,用于复杂条件解释。确保能简洁、清晰、准确的描述状态触发条件。
  • 一组条件分支与其他条件分支之间的间距应至少大于条件分支的至少1.5倍,且需要应用首条分支的粗线条,以快速区分两组内容,如下图:

条件组间距

可以通过点击图片查看大图,或者“在新窗口打开图片”。

1.1. 图例说明

注释图例

1.2. 连接线

img img img

1.3. 流程图

img img

1.4. 手势

img

1.5. 屏幕触控舒适区

img

1.6. 注释

1.6.1. 文本注释

注释-文本竖排

注释-文本横排

1.6.2. 分子注释

注释-分子注释

了解更多——原子设计理论

1.6.3. 组件注释

注释-组件注释

1.6.4. 简短流程注释

需要有简短流程时,可直接在页面注释区通过蓝色连线说明流程。

注释-简短流程

1.6.5. 弹窗注释

注释-弹窗注释

1.6.6. 数字注释

注释-数字注释

1.6.7. 数字便签注释

注释-便签注释

1.6.8. 普通便签注释

img

1.6.9. 使用完整的设计页面

注释-使用完整的设计页面