阅读 6

如何有效的跟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、状态颜色集合

name
color
status
color-primary#5a98e0 info、primary
color-diabled#8b572a

expire、impassive

color-success

#8db261

passive、success

color-approved


#4a90e2


approved
color-warning

#5e47a9


warning
color-failed#d85756rejected、failed


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


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

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 是否限制区域


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



关注下面的标签,发现更多相似文章
评论