前端UI交互 - 中后台系统 - 1+4色彩模式

由于移动端与PC端的交互差异很大，而PC端的界面toC的与toB的中后台系统，又有很大的差别，本文开始从中后台系统交互讲起
基于目前主流的两大UI框架来讲，vue对应的element UI，react对应的ant design

1 何为1+4色彩模式

即1种主色+4种辅助颜色，下图源自element ui

2 主色彩

目前中后台主流的主色彩颜色，都是蓝色调，而且几大UI框架默认的颜色也是蓝色

2.1 用于主要的功能按钮底色

基本上来说，用户操作最多的按钮，或者你最想让用户点的那个按钮
比如弹窗底部的按钮，确定按钮是主色

又比如表单的提交按钮

2.2 用于超链接，表达一种“可以到达”的意思

2.3 用于表单类的选中色，表达处于“活跃状态”、“选中状态”

表单的选中项颜色、tab的active颜色，均使用主色调来展示

2.4 主色不能滥用

如果是不分主次，都使用主颜色的话，那就说明没有主颜色了，如下图

3 辅助色

代表着四种状态，目前前端江湖上基本上统一了四种状态
success：成功类，绿色，使用频率第一
warning：警告类：黄色
danger/error：危险、失败类，红色，使用频率第二
info：信息类，灰色、黑色
不难发现，辅助色采用了与现实生活中意思相同的红绿灯颜色，以及另外一种基础颜色

3.1 用于按钮的操作

一般按钮操作使用辅助色的比较少，之前的经验中，只有删除、停止类的操作，会使用，提示用户“谨慎操作”

3.2 用于表单的错误提示

此处辅助色一般使用表单校验错误的提示

3.3 用于tag类的数据表示

常见于table组件，不同状态下的数据，会展示不同颜色状态的tag，让人一目了然

3.4 用于消息类提醒

此处辅助色使用最多，

3.5 使用频率

由于色彩的直观感受度不同，高频使用的是success、error这两个颜色，其余的warning、info，由于场景少+颜色不明显，比较少用。
在某些使用场景上，也可使用warning，也可使用error，可以考虑尽量使用error，更容易被用户的视觉捕捉到

4 总结

1+4颜色状态，其实不止是中后台系统的UI库，移动端的UI库，也是基于这个色彩模式来运作的，不同的操作有了自己的感情色彩，这是人性化交互的一个基本。