前端的UI设计与交互之色彩篇

一、颜色
Red
热情、警示

Green
成功、通过、安全

Blue
专业、科技

Pink
典雅、明快、女性

Orange
醒目、温暖

Purple
高雅、浪漫

Yellow
活力、提示

Cyan
清新、冷静、结构化

Grey
平稳、中性
二、色彩应用
1、品牌色的应用
品牌色是体现产品特性和传播理念最直观的视觉元素之一
2、中性色的应用
灰色作为中性色，它的使用有利于关键内容的衬托和功能的引导。这类色彩主要体现在导航框架、背景底色、描边、或次级操作等等。
3、功能色的应用
这类色彩起到传递功能信息、代表某种状态等作用。主要应用于消息通知、反馈提醒、表单校验这类场景中的成功、出错、失败、提醒、链接等状态。
blue链接说明色
green成功色
yellow警告色
red失败色
4、视觉层次
将品牌色赋予在重要信息或关键主动点上，并衬以大面积的中性色，可以让用户更聚焦到任务本身，从而提高任务的执行效率。
注：界面用色建议不超过三种（数据图表和图形类插画除外）。
5、色彩的易识别性
操作类的色彩搭配都应满足颜色对比值 3:1 的最低标准。

色彩对比值校验工具