关于AI Design Desktop组件交互文档编写的规范

目标：

• 是一份比Ant Design的介绍更加详细的设计文档，不仅仅是对各个组件的属性描述。
• 是不同行业背景的设计师、从初级到高级设计师、甚至是学生和设计爱好者都可以参考的设计文档。
• 是一份描述每一个组件是什么（Intro\Type）、怎样使用（Usage\Interaction\Layout）、使用细则的设计参考。
• 是面向中后台系统，具有统一性、普适性和可扩展性的交互规范。

1.交互文档的组成元素

AI Design的设计文档由文案和相关案例的图片组成，不提供代码预览。相关代码预览可在组件文档中查看。
a.图片：
案例图片的色彩和风格，采用AI Design中的色彩
案例的图片取自AI Design Uikit Desktop中
b.文案：
文案的风格简短、明确、亲切（由交互规范面向的使用人群来决定和组件使用的场景）

2.交互组件的目录

目前的组件分类方式，不能完全符合设计师查阅交互文档的逻辑。可能需要参考Ant Design设计语言中的“模式”来进行重新分类。

3.组件交互规范的内容

为了更清晰的编写组件的交互规范，可以把组件分为基础组件和复杂组件。基础组件构成复杂组件。

1.组件介绍 / Intro

a.简单的组件文字介绍介绍 b.组件的要素图和组件每个要素的相关介绍

2.用法 / Usage

用法包含何时使用这个组件，也可以包含何时不应该使用这个组件。以及使用这个组件的一些其他注意事项。

4.类型 / Types

对于大部分组件都有这个内容。
分类的方式可以根据AI Design所适用的对象特征来进行。（需要对AID所适用的对象特征进行提炼，这在设计语言的制定里也会用到）

5.交互 / Interaction

交互可以是指组件的默认、悬停、点击、选中、禁用五种状态。（通常对于基础组件）
也可以是用户可以对组件进行的操作方式，以及组件作出相应交互反馈的状态样式。（通常对于复杂组件）

6.布局 / Layout

8.尺寸/ Size

7.其他补充

当以上内容不能完整介绍一个组件的内容时，可以针对这个组件的特征来增加内容（例如这个组件的某种变形样式、）。
增加的内容与以上内容同级。

一些说明

样式 / Style：
在很多的设计语言中都有style这一项，但是在这份交互文档中没有。这是因为组件的各种类型以及交互方式产生了不同的样式。AID的交互设计文档将样式放置在了类型/Type或者交互/Interaction中。
准则 / Guideline：
在一些设计语言中会有guideline这一项。在这份交互文档中放在了用法Usage中

交互文档的编写流程：

1.查阅和比对ATLASSIAN、SAP、Ant Design、Fusion Design的同名组件或类似组件。
2.按照AID的“组件交互文档规范-内容”或者参考“案例”来进行编写。

• 在编写的过程中应始终考虑到AID中组件的使用场景（中后台产品、亚信的产品以及亚信提供设计支持的产 品）和使用人群（各个行业背景的设计师、从设计爱好者到专业设计师）。这是AID的交互设计规范区别其他 规范的根源。
• 文档中的配图需要按照“组件交互文档规范-组成元素”进行绘制

3.走查
4.输出

关于AI Design设计语言

收集素材的时候发现的有趣的点
无障碍设计（可访问性）
交互设计规范和组件使用规范完全分离，两个规范之间可以互相跳转
对一种语言的语言逻辑进行介绍，可以让使用者更加容易理解和接受这个设计语言。
2.