关于交互设计规范

出色的规范是好的产品的第一步，她能够帮助我们跟高质高效的完成我们的工作。

1.先有规范还是先有产品？

先出规范再做产品又or先出规范再做产品or边做边整理规范，其实没有对错之分，只要适合你就好。

当我们制定好框架，设计的工作会更加的清晰有条理，随之效率也会更高。

2.可以参考优秀案例：

交互规范主要分为WEB端和移动端极其相应的设备端，可以参考的优秀案例有：iview、Ant Design，Element、VUX等，

这类产品已经实现了端到端的体验一致，交互组件的的丰富度能够满足绝大部分交互场景。参考这些优秀的设计规范产品，做规范时可以起到事半功倍的效果。

首先我们把组件类型分类：页面布局类、导航类、基础组件类、表单组件类、数据展示类、提示组件类。每一类常见的内容如下：

页面布局：栅格布局、颜色色彩、排版字体等

导航：顶部导航、侧边抽屉导航、顶部导航栏、底部标签栏、分页器、面包屑、步骤条、tab标签、分段控制器

基础组件：按钮、加载、单行文本框、多行文本框、搜索框、下拉框、段落文本等

表单组件类：输入框、单选框、复选框、滑动开关、输入校验规则、文件上传、图片上传、图片查看、日期选择器、级联选择器等

数据展示类：表格、图表、手风琴、走马灯、列表、步骤条、九宫格等

提示组件类：tip、标签、对话框、吐司提示等

业务组件：根据当前产品业务的需要而设计出的一些特殊类型的组件

3.需要注意的问题：

1）文字不要太多，让项目成员更清晰的看出交互方式；

2）一定要标注重要的功能描述信息；

3）案表达形清晰一致，好的交互规范不需要太多的文字说明。

范是为了实现业务需求而服务的，如果某种设计方案能够更高效更有质量的解决某个问题，并不带来新的损失，那是不是可以不那么拘泥在当前的规范中。

规范不是我们的王牌，不要因为产品有了设计规范而让自己变成规范的奴隶，丧失了更多好设计和好灵感。

交互参考网址：

https://mobile.ant.design/index-cn

https://didi.github.io/cube-ui/example/#/

https://vux.li/demos/v2/#/demo

https://element.eleme.cn/#/zh-CN

https://ant.design/index-cn