由于移动端与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库,也是基于这个色彩模式来运作的,不同的操作有了自己的感情色彩,这是人性化交互的一个基本。