拥有和谐的色彩系统的好处 (The benefits of having a harmonious color system)

• Consistent branding express across all platform在所有平台上表达一致的品牌
• The consistent interface creates a better user experience一致的界面创建了更好的用户体验
• More productive on designers and developers daily work提高设计师和开发人员的日常工作效率

这是我创建色彩系统的5个步骤： (Here are my 5 steps of creating a color system:)

1. Set Brightness System设置亮度系统
2. Define Hues定义色调
3. Apply brightness system to Hues将亮度系统应用于色相
4. Select Major Color under each Hue在每个色相下选择主要颜色
5. Apply to Design申请设计

步骤1：设定亮度系统 (Step 1: Set brightness system)

Choose the number of brightness levels that you need, there are 10 levels in the Google Material Design color system.

选择所需的亮度级别数， Google Material Design颜色系统中有10个级别。

I usually choose 12 levels of brightness as my system including white and also I added a darker brightness level (Brightness=5) it’s needed in our new iOS dark mode.

我通常选择12种亮度级别作为我的系统(包括白色)，并且还添加了较暗的亮度级别(亮度= 5)，这是我们新的iOS暗模式所需的。

12 levels also can be easily divided by 2, 3 or 4, which means I can create different rhythm by skip through several levels.

12个级别也可以轻松地除以2、3或4，这意味着我可以跳过几个级别来创建不同的节奏。

First, choose the highest and lowest brightness level that you need, Please note that for White’ brightness is 100, Black is 0.

首先，选择所需的最高和最低亮度级别。请注意，对于白色，亮度为100，黑色为0。

In this example below I choose 97 as the highest brightness (excluding white) and 5 as the lowest.

在下面的示例中，我选择97作为最高亮度(不包括白色)，选择5作为最低亮度。

Assume number between different 2 brightness level is “a”

假设两个不同亮度等级之间的数字为“ a”

97–10a = 5

97–10a = 5

92/10= a

92/10 =一个

a ≈ 9

≈9

After applying this formula, I can get the number of brightness below, for the last 2 levels I choose to -10 to get a darker color.

应用此公式后，我可以得到下面的亮度数量，对于最后两个级别，我选择-10以得到较暗的颜色。

提示：如何定义颜色系统中最亮和最暗的颜色？ (Tips: How to define the lightest and darkest colors in a color system?)

Check the lightest grey used in your product (eg. background) and darkest grey in your design (eg. text), here is an example:

检查产品中使用的最浅灰色(例如背景)和设计中最深色(例如文本)，下面是一个示例：

步骤2：定义色相 (Step 2: Define Hue)

如何创建和谐的色彩系统相关推荐

1. 【ArcGIS风暴】ArcGIS创建栅格数据集色彩映射表案例--以GlobeLand30土地覆盖数据为例

   矢量数据快速符号化,可以将常用的样式保存到样式符号库,栅格数据快速符号化,需要创建色彩映射表.本文以GlobeLand30土地覆盖数据为例,详解ArcGIS中创建与使用色彩映射表. 文章目录 一. A ...

2. 店铺商场一键报警紧急求助按钮创建和谐社会

   店铺商场一键报警紧急求助按钮助力创建和谐社会! 为了预防.震慑犯罪,减少财产损失,保障公民的人身安全,创建文明.安全.和谐.美丽的社会环境,安装一键报警器已经成为社会发展趋势.一键求救报警系统产品也在 ...

3. 北京2008年奥运会专用色彩系统

   长城灰 蜿蜒起伏的万里长城和掩映在绿树丛中的四合院民居的灰色,是北京城传统建筑景观中的重要的标志色.灰色是北京奥运色彩系统中独具魅力的元素. 基础色彩(配图): PANTONE: 443 C CMYK ...

4. reddit_如何使用Python创建自定义Reddit通知系统

   reddit by Kelsey Wang 王凯西 如何使用Python创建自定义Reddit通知系统 (How to make a custom Reddit notification system ...

5. 在VMware15中创建虚拟机安装ubuntu系统（超详细教程）

   此篇博文分享幼儿园老小(本人)创建虚拟机安装ubuntu系统的详细操作过程,希望对新手有所帮助咯!(大佬请自行略过哈哈) 我的下载地址详情如下: 下载请戳–>Ubuntu18.04/64位下载地 ...

6. 投票系统web服务器,创建一个Web投票系统

   您的位置:首页 → 精文荟萃 → 软件资讯 → 创建一个Web投票系统创建一个Web投票系统 时间:2004/10/7 19:09:00作者:蓝点 下面zip文件:http://www.content ...

7. Android WiFi热点完全研究(自定义创建、跳转系统界面设置、读取配置、切换，Android6.0适配)...

   前言: WiFi热点设置页面的安全性选项在Android 4.x上有"无"."WPA PSK"."WPA2 PSK"三个选项,在Androi ...

8. 用dedecms自定义表单创建简易自助预约系统

   建站往往需要根据客户的需求来增加相应的功能,比如预约.平时用比较多的是织梦系统,那么如何用dedecms自定义表单创建简易自助预约系统呢? 进入dedecms后台,左侧菜单中依次点击"核心& ...

9. hp服务器370G5硬盘列阵,hp DL380 g5创建raid阵列安装系统准备工作

   RAID 1称为磁盘镜像,原理是把一个磁盘的数据镜像到另一个磁盘上,也就是说数据在写入一块磁盘的同时,会在另一块闲置的磁盘上生成镜像文件,在不影响性能情况下最大限度的保证系统的可靠性和可修复性上,只要 ...

最新文章

1. pandas计算滑动窗口中的数值总和实战（Rolling Sum of a Pandas Column）：计算单数据列滑动窗口中的数值总和（sum）、计算多数据列滑动窗口中的数值总和（sum）
2. 元宇宙“众声喧哗”，三季度财报超预期的欢聚能否分一杯羹？
3. username is marked non-null but is null
4. 130道ASP.NET面试题
5. 一个CSS3滤镜Drop-shadow阴影效果
6. Java中的LinkedHashSet
7. 自己制作的ORMap框架终于完成的差不多了。
8. Android中缓存记忆
9. linux红帽8怎么安yum,RedHat Linux 8本地Yum源配置方法
10. python 循环十次_python机器学习——十次交叉验证训练的数据准备算法
11. null underfined NaN 判断
12. 程序员去哪接私活？分享10个兼职平台，人已赚麻
13. 求web嘎嘎厉害的朋友
14. Win7 运行bat批处理文件时怎么隐藏cmd命令提示符窗口
15. 雷达的工作原理示意图_雷达的工作原理是什么？
16. UbuntuMate安装中文输入法
17. MySQL中实用函数及查询技巧
18. C# 读取Excel转换为DataTable的几种常见方式及实现步骤
19. Laravel9+Layui实现的低代码开发平台
20. android的亮屏幕的锁和键盘锁

热门文章

1. T(n) = 25T(n/5)+n^2的时间复杂度 计算方法
2. 第3章 Python 数字图像处理(DIP) - 灰度变换与空间滤波7 - 直方图处理 - 直方图、归一化直方图
3. 中文TeX的编辑环境推荐
4. C++右值引用与转移语义
5. setTimeout详解
6. 查看python内部模块命令，内置函数，查看python已经安装的模块命令
7. 查看Eclipse中的jar包的源代码：jd-gui.exe
8. ie11浏览器不能显示最新修改的程序，调试出现代码逻辑错误却依旧执行
9. 35岁前把下面十件事做好
10. 用installshield打包的asp.net程序