一、颜色
Red
热情、警示

Green
成功、通过、安全

Blue
专业、科技

Pink
典雅、明快、女性

Orange
醒目、温暖

Purple
高雅、浪漫

Yellow
活力、提示

Cyan
清新、冷静、结构化

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

色彩对比值校验工具

前端的UI设计与交互之色彩篇的更多相关文章

  1. 前端的UI设计与交互之布局篇

    布局是页面构成的前提,是后续展开交互和视觉设计的基础.设计者在选择布局之前,需要注意以下几点原则:明确用户在此场景中完成的主要任务和需获取的决策信息.明确决策信息和操作的优先级及内容特点,选择合理布局 ...

  2. 前端的UI设计与交互之文案篇

    在界面中,我们需要通过对话的方式与用户产生共鸣.精准.清晰的语言会更容易让用户理解,合适的语气更容易让用户建立信任感.因此在界面设计时,文案也应当被重视. 在使用和书写文案时有以下几点需要注意:从用户 ...

  3. 前端的UI设计与交互之数据录入篇

    数据录入是获取对象信息的重要交互方式,用户会频繁的增加.修改或删除信息.多种多样的文本录入和选择录入方式帮助用户更加清晰和高效的完成这项体验.设计者应当注意这几点:为初级用户/偶尔访问的用户提供简单易 ...

  4. 前端的UI设计与交互之字体篇

    跨平台的字体设定,力求在各个操作系统下都有最佳展示效果.字体是界面设计中最重要的基本构成之一,用户通过文本来消化内容和完成工作,优雅的字体将大大提升用户的阅读体验及工作效率.在满足不同终端始终保持良好 ...

  5. 前端的UI设计与交互之图标篇

    图标是具有指代意义的图形,也是一种标识.通过使用图标表达命令,强调状态,表示产品或类别.为了系统及跨平台之间图形认知保持一致, 图标在设计和使用时有以下两个原则点需要注意:简单的图形语言以及高辨识度. ...

  6. 前端的UI设计与交互之导航篇

    在广义上,任何告知用户他在哪里,他能去什么地方以及如何到达那里的方式,都可以称之为导航.当设计者使用导航或者自定义一些导航结构时,请注意:尽可能提供标识.上下文线索,避免用户迷路:保持导航样式和行为一 ...

  7. 前端的UI设计与交互之设计原则篇

    1.亲密性 a)纵向间距示例这三种规格分别为:8px(小号间距).16px(中号间距).24px(大号间距). b)在这三种规格不适用的情况下,可以通过加减『基础间距』的倍数,或者增加元素来拉开信息层 ...

  8. 前端的UI设计与交互之反馈示篇

    为了帮助用户了解应用当前要做什么,也给用户的下一步行为做参考,以及了解操作后所产生的结果 ,当用户和系统需要交互时,使用不同的模式来反馈信息或结果.当设计者使用反馈或者自定义一些反馈时,请注意:为用户 ...

  9. 前端的UI设计与交互之数据展示篇

    合适的数据展示方式可以帮助用户快速地定位和浏览数据,以及更高效得协同工作.在设计时有以下几点需要注意:依据信息的重要等级.操作频率和关联程度来编排展示的顺序.注意极端情况下的引导.如数据信息过长,内容 ...

随机推荐

  1. AngularJS–Animations(动画)

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/   在AngularJS 1.3 中,给一些指令(eg:   ngRepeat,ngSw ...

  2. WPF控件自适应屏幕

    如果说界面设计,那么自适应问题一定无法避免,今天就来分享一下,wpf如何实现自适应,先看一下效果:(文末添加源代码下载)     基本思路就是用 Grid 的网格,进行宽度的自动填充适应,  不过对于 ...

  3. hive参数配置

    CLI参数 两种修改方式: 1)启动时 hive --hiveconf  hive.cli.print.current.db=true 2)修改当前用户home目录下 .hiverc文件,hive c ...

  4. VPS修改SSH端口不小心把自己给墙掉的一般解决办法

    很多人配置服务器的时候都习惯将 SSH 端口改为其他端口,以规避批量端口扫描,但也有不少人改完端口却忘了去防火墙修改端口,导致 SSH 登陆不上. 昨天我就这么干了 我把SSH端口从22改成了2345 ...

  5. poj3264 最大值与最小值的差

    For the daily milking, Farmer John's N cows (1 ≤ N ≤ 50,000) always line up in the same order. One d ...

  6. 推荐系统相关算法(1)：SVD

    假如要预测Zero君对一部电影M的评分,而手上只有Zero君对若干部电影的评分和风炎君对若干部电影的评分(包含M的评分).那么能预测出Zero君对M的评分吗?答案显然是能.最简单的方法就是直接将预测分 ...

  7. 最接近原生APP体验的高性能前端框架——MUI

      前  言 MUI有三大特点: 轻量 追求性能体验,是我们开始启动MUI项目的首要目标,轻量必然是重要特征: MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K 原生UI ...

  8. numpy学习整理

    今天先整理到这里,剩下的下次再整理 1.改变形状: reshape()返回改变的数组形状,但无法改变源数组形状 resize() 可以改变源数组形状 ravel() 输出类似C数组的列表,和resha ...

  9. sqlDependency监控数据库数据变化，自动通知

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  10. WPF通过代码动态的加载样式

    tabitem.SetResourceReference(TabItem.StyleProperty, "mainTabItemStyle"); tabitem.Content = ...