如何有效的跟ui沟通

最近在重构一个项目，样式主题又是一顿变换。产品大大觉得更换一套主题是非常容易的事情，于是对着一个最好的网站交互规范，就定了。前端童鞋们开始干活儿，必然采坑~~~~

爬出来后，整理了一份比较完整的与ui和产品沟通设计规范方案的文章，跟大家好好分享一下，也许工作中，用得上。不啰嗦，上干货~~~

第一步：抽象项目中用到所有的颜色，并给定对应的名称。（无论主题再怎么变化，对应的那个颜色变量不变）

• 色彩规范

常用颜色：

1、primary-color:#1b5ab6

适用于：主题字体（包含菜单选中背景色，primary主题按钮背景色、default按钮字体颜色、链接状字体颜色、主文字颜色、表单focus边框)，基于整个主题ui而定，要求与整体主题风格非常匹配。

注意：按钮 :hover :active 状态颜色无需提供，前端可根据按钮颜色，进行颜色的百分比换算。（设计师有额外设计需求除外）

2、default-color: #606266

适用于：普通文字，一般要求颜色看起来舒服、柔和。

3、primary-color-bg: #242c5c

适用于菜单背景色，定义整个ui的主题风格。

4、default-color-bg#f1f3f7

适用于body、弹框、tab 的header部分背景色，增加视觉层次感。（todo:需要区分body、弹框）

5、default-color–tip: #909399

适用于提示文字,如：tabs组件未选中字体颜色、table无数据时字体，不需要突出的内容。

6、default-color–border: #EBEEF5

适用于大部分边框颜色

7、 pirmary-color–title: #8398ba

适用于页面定制化的title字体、强调。

8、 defaul-color–title: #303133

适用于一般title，如弹窗，与普通文字颜色区分。

9、状态颜色集合

第二步：根据组件指定规范，明确组件设计需求，避免采坑。

按常用功能组件指定的规范：

Tabs：

属性：header(字体、行高、背景、边框),content(边框、字体)；

功能：tabs的展示形态（带整体边框、下划线content不带边框），每个tab内部按钮的展示位置；

注意：tabs根据边框，单独设计内部组件样式（如talbe，详情）

Table：

属性：边框、字体、行高、是否折行、宽度、表头背景、表头字体

注意：1 通常需要两套标准，适用于普通列表和在tab、弹窗及其他内嵌的table

2 是否折行

3 查看详情交互规范

4 按钮过多时的交互

Button:

属性：边框、背景、字体、行高、圆角、icon

是否圆角、是否有icon（有无icon的规范），button主题（default、primary、disabled）并给出主题的（背景色、边框、字体颜色、字体大小）

注意：1 主题button不需要给定:active、:hover状态下的样式，前端可根据换算。

2 明确带icon按钮展示规则

3 多个按钮位置摆放

Dialog:

属性：title文案，字体、背景，footer文案、字体和背景，body字体、文案、背景

注意：1 不需要title

2 不需要底部

3 视窗比例

Pagination:

属性：背景、字体、选中字体

注意：1 是否固定底部（并非所有页面都固定底部）

2 是否支持选择多条记录

Datepicker:

注意：1 是否精确到时分秒

            2 是否限制区域

总之：一定要跟沟通好每个组件的交互细节和颜色定义规范，定制化的页面，需要单独出图。所有口头上的标书都是不靠谱的，团队的内耗更多的来自于，沟通的不顺利~~