色彩

调色板

描述颜色常见有四种种方式：RGB、CMYK、HSB、HEX（16进制值）。

RGB：由红-Red、绿-Green、蓝-Blue三基色共同描述一个颜色。将三基色各划分为256阶，共计可以描述256256256=约1680万种颜色。
- 用途：常用于描述电子显示其中的颜色。
- 示例：如 rgb(0,0,225) 标示蓝色
HSB：H(hues)表示色相，S(saturation)表示饱和度，B（brightness）表示亮度。 HSB模式对应的媒介是人眼。。饱和度为500的红色值等于#F44336
CMYK：印刷四色模式是彩色印刷时采用的一种套色模式，利用色料的三原色混色原理，加上黑色油墨，共计四种颜色混合叠加，形成所谓“全彩印刷”。
- C：Cyan = 青色，又称为天蓝色或湛蓝
- M：Magenta = 品红色，又称为洋红色
- Y：Yellow = 黄色
- K：Key Plate(blacK) = 定位套版色（黑色）
HEX（16进制值）：将RGB的10进制颜色数值转换为16进制数值，常常被用在界面设计和程序开发上。

以下是谷歌官方提供的调色板，由以下图可见，供选取了红色、粉色、紫色、深紫色、靛蓝色、蓝色、浅蓝色、青色、水鸭色、绿色、浅绿色、绿黄色、黄色、琥珀色、橙色、深橙色、棕色、灰色、蓝灰色、黑白两色，共计20类基础色和16类强调色
- 基础色：按照饱和度划分为10个等级，谷歌建议将饱和度500的基础色作为主调颜色。
- 强调色：按照饱和度划分为4个等级，以A开头，如A100。

配色方案

1. 选择一个调色板

这些调色板可以根据您的品牌来定义自己的调色板，例如单色，黑白，全色或中性，再或者您可以直接使用Material Design调色板。

注意：所有调色板应在不同UI元素之间包含足够的对比度。

2.选取材料颜色

首先从选好的调色板中选择三个不同饱和度的颜色作为基础色，其中饱和度500的作为主调颜色。然后在其他调色板中选取一个饱和度A开头的强调色，如A200 #68EFAD。

基础色-紫色 & 强调色-绿色

应用程序示例

基础色和强调色该如何使用呢？

基础色（或主调色）：该颜色应该尽可能的应用在所有界面或组件中。
合成色：该颜色被用来指示相关动作或信息。合成色可以是基础色更暗或更浅的变体颜色。

（基础色）合成色100 #C5CAE9
强调色：该颜色被应用于浮动操作按钮和交互式元素，例如：
- 文本字段和游标
- 文本选择
- 进度条
- 选择控件，按钮和滑块
- 链接
  浮动操作按钮 & 切换按钮

以下是一些使用示例：

文本中的超链接

应用栏上的按钮

状态栏 & 应用栏 & 按钮

聚焦状态或选择状态的控件

备选强调色：分为深色调和浅色调。如果您的强调色太浅或太暗，与背景颜色对比不够明显的话，改如何解决呢？
- 使用更深或更浅的强调色。
  
  备选强调色示例
使用基础色的变体色

使用基础色在白色背景下的饱和度为500的颜色值作为备选强调颜色。
但是，如果您的背景颜色已经是饱和度为500的基础色颜色值，请将颜色设置为100％的白色或54％的黑色。

Material design - 色彩样式（一）相关推荐

Material design 色彩
八月已过去,九月刚来到~暑假已过去~九月上学季~~又迎来了一个桂花飘香的季节,你是否有了新的目标和计划~~所以在九月初始给大家带来一个全新的东西(ps:对于我来说是全新的东西)--Material D ...
Android Material Design按钮样式
本文翻译自:Android Material Design Button Styles I'm confused on button styles for material design. 我对材质设 ...
Android Material Design按钮样式设计
Today we'll dive deep into Android Buttons in Material Design and develop an application that showca ...
mint ui tabbar选中后怎么改变icon图标_UI全书（下）读后梳理：iPhone设计规范和Material Design规范...
本文转载自简书,作者:Bystander7原文链接: https://www.jianshu.com/p/507f0fcb0457 - UI全书(下)<UI设计师进阶完全指南>读后梳理:i ...
Material Design：为你的 Android 应用提供精美的 UI 体验
Material Design:为你的 Android 应用提供精美的 UI 体验介绍 Material Design 概念:介绍 Material Design 是 Google 推出的一种设计语 ...
助你快速搭配 Material Design 配色方案的10款Web工具
在设计 Material Design 的过程中你会发现一个很大的问题,那就是如何大胆.灵活的使用色彩组合. Material Design 里的调色板工具将色彩描述为"受大胆排列色块并结合 ...
【Material Design视觉设计语言】应用样式设计
作者:郭孝星微博:郭孝星的新浪微博邮箱:allenwells@163.com 博客:http://blog.csdn.net/allenwells Github:https://github.co ...
android java 给控件设置style,在Android Lollipop for Material Design中为SwitchCompat按钮设置样式/着色...
我一直在尝试查找资源,解释如何在Material Design主题中设置切换按钮的样式 . 现在使用新的appcompat-v7:21,着色小部件非常简单 . 只要您使用appcompat-v7:21 ...
Material Design设计之【色彩】实践
1. 综述 Google I/O 2014 发布 Material Design设计指南,全文在google官方开发者平台上公布,这里推荐中文的翻译平台,http://wiki.jikexueyu ...
Material Design 设计规范总结(2)
本文是Material Design设计规范总结的第二部分,是进行UI设计与前端开发的必备参考资料. 八.布局 (1)所有可操作元素最小点击区域尺寸:48dp X 48dp. (2)栅格系统的最小单位 ...

Material design - 色彩样式（一）

色彩

调色板

配色方案

Material design - 色彩样式（一）相关推荐

最新文章

热门文章