UI设计中常用字体规范

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

本文总结了字体设计的重要性、界面常用字体推荐以及国内外权威设计体系中对字号、行高、字重的选择和设置。如果你想对界面字体设计有更深一步地了解和运用，本文将会提供一些帮助。

一、字体

1. 字体设计的重要性

辅助信息传递

文字是信息内容的载体，是记录思想、交流思想、承载语言的图像或符号，而字体则是文字的外在形式特征，是文字的视觉风格表现。合适的字体可以辅助文字，将信息清晰、准确地传递给用户。

表达情感体验

字体的艺术性体现在其完美的外在形式与丰富的内涵之中。在文字信息传递给用户之前，人们首先感受到的是字体带来的视觉魅力以及情感表达。

塑造品牌形象

不同字体有着不同的风格特征: 有的字体优美清新、线条流畅；有的字体造型规整、充满张力；还有的字体生动活泼、色彩明快……根据产品的属性选择正确的字体，便能有效地塑造品牌形象。

2. 界面常用字体推荐

字体的选择是由产品属性或品牌特性的关键词而决定。一般中文字体种类分为：黑体、宋体、仿宋、楷体等；英文字体种类分为：无衬线体、衬线体、意大利斜体、手写体、黑字体等。

中文字体推荐

线上中文字体推荐使用思源黑体、华文黑体、冬青黑体、微软雅黑、苹方-简、黑体-简、方正兰亭黑。其中 iOS 系统默认中文字体是「苹方PingFang」，Android 系统中文字体使用「思源黑体Noto Sans CJK」。

介绍下「思源黑体」这款字体，它是由 Google 和 Adobe 合作开发出来的，风格介于现代和传统之间，可以广泛用于多种途径，比如手机、平板、桌面的用户界面、网页浏览或者电子书阅读等。它为人们带来了愉悦和的信息阅读体验，并且是免费的。

英文字体推荐

线上英文字体推荐使用 San Francisco、Helvetica Neue、Roboto、Avenir Next、Open Sans。其中 iOS 系统默认英文字体为「San Francisco」，Android 系统默认英文字体为「Roboto」。

Helvetica 是一种被广泛使用的西文字体，1957年由瑞士字体设计师设计，微软常用的 Arial 字体也来自于它。

作为一款经典的无衬线字体，Helvetica 在平面设计和商业上非常普及和成功，被认为是现代主义设计理念的典范，其简洁朴素的线条风格非常受追捧。

数字字体推荐

线上数字字体推荐使用 DIN、Core Sans D、Helvetica Neue。

DIN 起源于1995年的德国，无衬线字体，易用耐看、字形开放，是设计师最爱的几类字体之一，适合显示比较长的大号数字，但是小字号的情况下识别度较低。

Core Sans D 是由韩国设计师设计的一款无衬线字体，支持 Thin、Light、Regular、Medium、Bold 等类型字重，对大号数字的显示效果不错，不过它是收费字体。

Helvetica Neue 除了上文介绍的简洁朴素、中性严谨、没有多余的修饰外，还是 Helvetica 的升级版，拥有了更多的字重，可以作为 iOS 和 Android 跨平台数字字体使用。

二、字号

1. 关于字号

字号是界面设计中另一个重要的元素，字号大小决定了信息的层级和主次关系，合理有序的字号设置能让界面信息清晰易读、层次分明；相反，糟糕无序的字号使用会让界面混乱不堪，影响阅读体验。

2. 字号的选择

字号的选择，可以遵循 iOS 、Material Design、Ant Design 等国内外权威设计体系中的字号规则，也可以根据产品的特点自行定义。

iOS 字号规则

在 iOS11 系统中，使用 San Francisco 作为系统英文字体，包含了以下几种字号的文本样式：

• 11pt / 12pt Caption 说明文字
• 13pt Footnote 脚注
• 15pt Subhead 副标题
• 16pt Callout 标注
• 17pt Body / Headline 正文 / 模块标题
• 20pt / 22pt / 28pt Title 页面标题
• 34pt Large Title 页面大标题

需要注意的是，San Francisco 字体有两种模式：文本模式 SF Pro Text 和展示模式 SF Pro Display，文本模式适用于字号小于 20pt 的文字，展示模式适用于字号大于等于 20pt 的文字。

Material Design 字号规则

在 Material Design 设计体系中，使用 Roboto 作为英文字体，规定了以下文字排版的常用字号：

• 12sp 小字提示
• 14sp（桌面端 13sp）正文 / 按钮文字
• 16sp（桌面端 15sp）小标题
• 20sp Appbar 文字
• 24sp 大标题
• 34sp / 45sp / 56sp / 112sp 超大号文字

长篇幅正文，每行建议 60 字符左右，短文本建议每行 30 字符左右。

Ant Design 字号规则

Ant Design 受到5音阶以及自然律的启发定义了10种不同的字号，从小到大依次为: 12px、14px、16px、20px、24px、30px、38px、46px、56px、68px。

建议主要字号为 14px，其余字号的选择可根据具体情况进行自由的定义，尽量控制在3-5种之间，保持克制的原则。

Kiwi 字号规则

Kiwi 是饿了么的中后台设计语言，致力于打造出能够「了解、洞察、温暖、激励用户」的产品。

在 Kiwi Web 中，规定最小字号为 12px，主要文本字号为 14px，最大字号为 46px。

三、行高

1. 关于行高

行高可以理解为一个包裹在字体外面的无形的框，字体距框的上下空隙为半行距。

参考 W3C 原理，眼睛到屏幕的距离 25cm 为最佳阅读距离。

西文的基本行高通常是字号的 1.2 倍左右。而中文因为字符密实且高度一致，没有西文的上伸部和下延部来创造行间空隙，所以一般行高需要更大，根据不同人群的特点（儿童、年轻人、老年人）以及使用环境，可达到1.5至2倍甚至更大。

2. 行高的设置

iOS 行高设置

Apple 官方的 iOS 字号与行高对应关系如下（@1x倍率）：

Fluent Design 行高设置

Microsoft 官方的 Fluent Design 字号与行高对应关系如下（使用字体 Segoe UI）：

Ant Design 行高设置

蚂蚁金服的 Ant Design 字号与行高对应关系如下（优先使用系统默认字体）：

行高计算公式：L = F + 8。其中 L 是行高（Line Height），F 是字号（Font Size），F ≥ 12。

四、字重

1. 关于字重

字重是指字体的粗细，一般在字体家族名后面注明的 Thin、Light、Regular、Medium、Bold、Heavy 等都是字重名称。越来越多的产品界面需要通过字重来拉开信息层次，当下主流趋势 iOS11 大标题风格就是通过字重来拉开信息层级的。

不同的字重体现不同的层级关系和情绪感受，细的字体给人以细腻、轻盈的感觉，而粗体则给人庄重和严肃的感受，所以在定义字体规范时候需要考虑什么场景用什么字重，从而保持良好阅读体验。

2. 字重的设置

字重的设置同样基于秩序、稳定、克制的原则。为了统一整体效果，一般情况下使用两种字重为佳，例如只出现 Regular 以及 Medium 这两种字体粗细，特殊情况下可以使用更粗或更细的字重进一步拉开信息层级。

当字号大小为 12-18pt 时，使用 Regular；20-26pt 时，使用 Light；28-34pt 时，使用 Thin；当字号大小超过 34pt 时，建议使用 Ultralight。

以上是按字号与字重反比的规则设置，即字号越大，字重越轻。当然也可以按正比的规则或者自定义规则，具体还是要根据产品的定位和用户的特点来设置，以保证信息层级清晰明了为准。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

这个词，国内有很多翻译版本——示能、功能可供性、承担特质、直观功能、预设用途、可操作暗示、支应性、示能性等...目前“功能可供性”使用较多。但无论通过哪个词汇来讲，可能都不会很清晰的传达其含义。

设计师不光要会做软件设计，一些造型的表达也是很重要的，今天那就随我来看看这只蝴蝶是怎么做出来的吧。

在做项目改版升级时，我们需要做两件大事，一是提炼核心设计理念，二是由理念推动设计执行。

留白对于设计的价值，已经得到相当广泛的认可了。尽管留白看起来不复杂，但是在复杂多变的设计环境之下，往往并不是一件简单的事情。优秀的留白设计能够在简约的风格和功能的可用性之间达到平衡，而要做到这一点，需要相当的实践和积累。

黄金分割大家应该早有耳闻，作为一名设计师，怎么来利用黄金分割线使其构图更加完美呢？

说实话，构图时是否使用黄金分割线构图并不是绝对的，它只是方法之一。但是黄金分割比例在全世界乃至全宇宙确实都是至高无上的。

围绕基模设计出来的Logo，可做到三个层次的功效

请别拿美观来评判LOGO的好坏，谢谢！

时至今日，很多企业仍然也没有对Logo形成一种正确的认知。当你问起他们时，企业做Logo是为了什么的？

很多人的回答是“做品牌”，然后就没有更深层次的认知了，而在这样的情况下就会很容易导致Logo的好坏完全是凭借企业主的喜好做判断，结果可想而知。

那企业做logo到底是为了干什么呢？

探寻问题的本质要追溯到本源去，logo源自于“烙印”一词，过去是为了做区分。

比如，你家和老王家都养鸡，为了避免放养的时候混在一起分辨不出来，你们两家在各自的鸡身上打上烙印。

最后，鸡到消费者的眼里，不仅可以通过烙印做区分，还可以起到质量的判断，谁家的鸡质量最好，通过logo就知道是谁家的了，哪家名声最响亮，消费者的选择成本就越低。

再然后慢慢发展到现在，logo不仅承载了产品区分的功能，更起到降低传播成本，诠释品牌内涵的功能。

但是，就像上面所说的，目前很多人根本都没有形成一个正确的认知，企业老板有时候完全就是凭借拍脑袋做决策。

而有些设计人员为了体现自己的专业价值，把Logo设计得精美复杂，然后再给出一大篇的解释。

如果老板不满意，再根据老板的喜好做出修改，改过之后双方皆大欢喜，老板得到了他心目中最理想的logo，设计人员也体现了自己的专业价值。

通常，在这种情况下设计出来的Logo，消费者是过目即忘的，logo也不会给消费者带来任何的品牌联想，因为除了企业内部的人懂，其他人是看不懂的。

那如何避免这种尴尬的情况发生呢？

最好的结果是利用基模，即利用别人脑海里面已经存在的概念，去进行logo设计。

比如，一家公司利用狮子作为企业logo，而狮子在人们脑海中已经是存在的事物，并对狮子的象征有了一个共同的认知，即力量和无畏，不需要再通过加工认知再进行记忆储存，消费者通过这个Logo的认知继而会联想到这家公司的做事风格。

这样一来，不仅大家都可以一目了然，不必废过多的口水解释，在传播上也可以降低成本。

那么，围绕基模设计出来的Logo，通常可以做到以下三个层次的功效，下面柯学将带大家分析一遍，基模是如何对logo进行赋能的。

• 记忆功能
• 二次传播功能
• 诠释功能

1. 记忆功能

Logo除了做产品区分的本质外，第一层也是最简单的功能就是记忆功能，让消费者记住你。

在这一点上就把很多精美复杂的logo给淘汰了，甚至有时候在一群人眼里感觉记忆简单的logo，但是，在另外一群人眼里就很难记忆了。

比如，这届世界杯的现场品牌广告，如何在众多品牌闪现下，且在有限的镜头下让全世界记住你，对企业的logo来说极为考验。

像万达、蒙牛等这些中文标字的logo品牌广告，目测广告资源起码浪费50%以上。

怎么说呢？

因为万达和蒙牛的标字logo对于国人来说这些字体本来就已经是脑海里的基模事物了，只要把万和达两字进行关联就可以，这一点对于记忆编码来说，并不复杂。

但是，对于全世界的外国人来说，他们看到这些字体，和我们看到韩文日文一样，是完完全全的新概念，理解都困难，更别谈什么记忆编码了。

而万达的图标外围的圆圈是全人类都懂得的基模概念，但是里面那个就有点陌生了，一个熟悉的事物加上一个不熟悉的事物组成全新的概念，需要人们从新编码再记忆，在一点上，就增加了人们的记忆成本。

而在现场，做得最好的品牌广告logo目测就是adidas和麦当劳。

因为，无论是adidas的三条斜杠还是麦当劳的拱门（或M），对于全世界的人来说，都已经是存在脑海中的熟悉事物了，这些简单的符号从人类的历史长河中流传多年，并被人类从小所熟知，并不需要再从新编码记忆，只需要把已经存在的基模事物符号，即三条斜杠和拱门跟品牌进行关联就行了。

这些利用熟悉事物的基模跟logo进行关联，不仅一下子可以让人理解这是什么，且降低品牌传播的记忆成本，让人在众多的品牌中一下子就记住你。

2. 二次传播功能

利用熟悉事物的基模设计logo不仅可以降低人们的记忆成本，还可以降低人们的二次传播成本。

就拿麦当劳的例子说吧，假设，你在路上吃着一根冰淇淋，路上遇到一老人带着一小孩，小孩对你说，叔叔，你冰淇淋那里买的呀？

在对方老人和小孩识字不多的情况下，你是该如何精准的跟他们表达呢？很显然，直接说麦当劳的门头标志上面是一个金色的拱门，看到这个标志就是那一家在卖了。

这下老人和小孩子也会一下子就理解了，因为在他们脑海里已经存在这样的事物基模了，出错的概率就会极低。

但是，如果是复杂的logo，不仅表述的人困难，而且听的人也会混乱，当双方都不能精准的表达和接受时，那么出错的概率就会极大，后果就会很尴尬。

再比如，十几年前，国内流行起各种运动服装，有些中年人不太懂英语的情况下，都是通过识别标志进行传播，当你跟他表述品牌的时候，英语他听不懂，只能描述品牌标志了，这时候越简单，越熟悉的概念就越容易降低传播成本。

比如，上面的NIKE，你直接跟他说是一个勾，这样的表达就非常精准了，因为勾这个基模已经是人们熟悉的概念了，他去买的时候，看到门头是个勾的标志走进去就行了。

3. 诠释功能

利用基模设计logo来诠释品牌的内涵，可以做到让人一目了然，并对品牌进行正确的联想，但是，前提条件是基模必须跟品牌拥有以下三种联系：

• 与产品相似
• 与产品相关
• 习惯性联系

3.1 与产品相似

当你需要跟别人解释一个复杂的概念的时候最好的办法就是利用他已经存在的熟悉概念，其中一个办法就是找到跟新事物相似的熟悉事物基模。

比如，你跟其他人沟通在某个国家有个领导人如何如何伟大，如何如何厉害，把国家从一个极度贫困的国家拉到世界经济强国的地位，最后还怎么怎么样，还不如直接跟他说，他就是某国的邓小平，这一下谁都懂了，不仅可以让他感到震撼，而且短短几字就利用他脑海里已经存在的邓小平形象进行新事物关联。

而在logo上也可以借用相似的熟悉事物基模跟品牌进行联系，比如，美团外卖的袋鼠logo。

美团外卖的诉求是“快”，如何在logo上面精准表达，即可以让人简单易懂并且降低传播成本呢？

很显然，美团外卖利用了人们熟悉的基模“袋鼠”，上面的袋鼠在快速的奔跑状态，并且口袋是鼓起的，表示装着食物什么的。

这个跟美团外卖非常相似，同样是带着食物快速的在路上奔跑着，通过这个logo就很精准的表达出来了，别人也非常容易能理解到其中要表达的意思。

3.2 与产品相关

与之相关，是一种指示性，暗示着他们俩拥有共用的属性，比如，消费者看到图标A，就会推测出B产品的相关结论。

通常，在logo上只需要找到跟产品拥有共同属性的熟悉事物进行品牌联系就可以了。

比如，我们比较能常见的奶制品牌，就会利用奶牛这个熟悉事物的基模形象跟品牌进行关联。

通常，人们一看到奶牛都会联想到牛奶，利用这个熟悉的基模设计logo，不仅可以降低人们的记忆和传播成本，还可以指示人们不自觉的进行联想，即产品和Logo的形象之间存在着共同的属性，那就是牛奶。

3.3 习惯性联系

习惯性联系是基模的象征意义在习惯性或则一致认可的联想上跟品牌进行联系，通过这样的方式可以把比较抽象复杂的概念的表现出来，从而引导人们进行正确的品牌联想。

在这一点上，锤子手机的Logo做得就相当不错，不仅降低人们的记忆和传播成本，更引导人们进行正确的品牌联想。

logo利用人们熟悉的锤子基模，免去了人们再次记忆编码的过程，而锤子在现代人的习惯或则一致性联想的象征性意义，往往是等同于一种类似于工匠的精神，通过嫁接这个象征的意义到企业的Logo上，可以让人直接联想到这是一家具有工匠精神的科技公司。

反观最近争议比较大的得到logo，猫头鹰的基模并没有让人形成在习惯性或一致认同上的品牌联想。

没有得到习惯性或一致认可的联想，主要原因是因为这只雅典娜的猫头鹰代表着智慧的化身，设计人员想让人联想到“得到=智慧”。

但是，受限于每个人的知识经验背景，对这只猫头鹰产生的联想并没有一致上的认同，起码到目前看来，很多人看到代表着智慧化身的猫头鹰，更多的联想到的却是“夜猫子”，继而让人联想到“爱学习的都是夜猫子”这条错误的道路上去。

一旦人们对logo的象征意义产生不一致的联想，后续就需要花费更多资源去普及，而这样一来就有违设计logo的初衷，无法让人产生正确的联想，并最终增加了传播成本。

结语

Logo是每个企业必不可少的一部分，看似简单，所以很多人都不会过于深入的去了解，但是往往越简单的东西，其中隐含的影响力就越大，越需要花更多的时间去雕琢，从而达到以标志识公司的境界，通过简单的图标就可以实现精准表达，记忆并传播，一图胜过千言万语，而想达到这个境界，最快的捷径就是利用基模的力量。

渐变这一视觉趋势，在最近几年里可谓如日中天。很多平平淡淡的设计，将平涂改为渐变，立刻就能增加醒目感。

• 虽说渐变是一个有效的元素，但为什么我们的渐变，还是和大神们的渐变有区别？
• 我们应该怎样做出渐变的质感？
• 为什么说用色才是渐变的精髓？

今天我们就来和大家聊聊渐变这个话题，深入了解我们似乎以为自己懂了的渐变，我们将和大家一起分析渐变配色中，利用色彩不同特性之间的对比来用色，以及一些简单的操作小技巧。比如快速生成一个色轮，以及简单的利用混合工具来配出渐变配色的色彩。

渐变是在色彩上的一个相对缓慢的过渡，我们的视觉会随着这个渐变的过渡而产生一种流动感，而这种流动感全凭在色彩上发生的种种变化。是的，我们的重点来了，就是这个变化，需要我们今天深入去加以了解。

谈到变化，我们自然会想到这个变化的范围。如果拿出我们的色轮来看，我们就会发现色轮上的变化范围有大有小，当两个色彩距离较近时，我们可以说他们是邻近色，这时难以发现他们的区别，直至我们的肉眼无法分辨。这时候可以说变化范围较小。

当两个色彩距离180，在色轮上呈相对，我们可以说这时的色彩变化是最大的，于是也就产生了最强烈的对比。很多撞色的情况，也是在这种对比下发生的。我们通常会把这对颜色称为互补色。

当然，实际的情况比这要稍微复杂一点，我们一起来看下。

一、色相对比

刚刚大家可以发现，这个色轮上的色彩的一个特点是什么？只有色相的变化。没错，我们平时也已经习惯了，只用色相来区分色彩。所以，今天要讲的第一个对比，也就是色相的对比。

色相的对比，在色轮上就能很直观的表现。例如红色和黄色这一段，截取过来以后，就变为了红 – 黄渐变。利用色环就能很轻松的实现色相的渐变。距离越远，渐变色的对比也就越大，互补色之间的对比达到了极值，比如红 – 蓝渐变的对比就大过红 – 黄渐变。

这里首先教给大家一个快速生成色轮的小技巧，这个技巧不需要利用网上的图片或工具。现做现用，很方便。

1. 小技巧：快速生成色轮

STEP 01

让我们先用这个自定义形状工具画出一个圆环。

STEP 02

然后在圆环里填充色彩，这里我们运用一个渐变叠加。

渐变叠加的叠加方式为角度渐变，渐变色这里选用「色谱」，没有找到这个渐变的小伙伴记得要追加色谱。

这时做出的色轮，在色彩上饱和度达到最大值。因此也能表现最强烈的色相对比。目前比较流行的渐变色是明度偏高，饱和度居中的渐变，也像这样的糖果色，因此这时大家可以利用调整图层「色相/饱和度」来增加明度或降低饱和度。

2. 高能提醒：别被参数骗了

可能很容易被初学者忽略的是，我们在 PS 里的色彩（HSB）这个参数里看下，一般来说H-色相，S-饱和度，B-明度，这里的情况和我们在色彩学里学到的 HSB 有点小差异。

色相这里没有问题，但是饱和度和明度，尤其是饱和度上面，大家可以看到一般来说饱和度时，色彩是慢慢失去色度，也就是呈现灰色，但是在软件里把 S 这个值调到最小呈现出是白色；还有另一个属性：明度，最大的明度，应该是白色，在软件里的 B 这个参数调到最高时，并不是白色。

在 PS 里，只有把色彩放到「色相/饱和度」这个工具里，才会看到和我们书里的概念表现一致的特性。

3. 工具不同，渐变也就不同

运用色环配出的渐变色和直接利用渐变工具配出的渐变色还有差别的，最重要是体现在颜色的过渡上。如果是用渐变工具选择了左边绿色，右边紫色的渐变色，在中间出现的过渡色就表现出一种发灰的色彩。如果所选用的两端的颜色是在色环上距离有定的角度，就会出现这种灰色。这是因为两种颜色彼此混合所造成的。有些情况下，确实是需要这样过渡的，这就直接用渐变工具来做渐变。

另外一个情况就是不希望色彩发灰，这时需要用到色环，在色环上根据所需要的渐变过渡来选取不同的色彩配置。

可以看出来，尽管没有饱和度、明度的变化，色彩仍然是彼此之间所表现的特质都很独特，所以基本上利用色相对比，就能配出非常优秀的渐变作品。

一般来说，渐变本身就足够吸引人，有渐变参与的情况下，我个人的建议是色彩不要太多，尽量少元素，整体风格倾向极简，这时最能发挥渐变色这种特质的魅力。

这个案例中的渐变过渡，中间的这个红色和蓝色的渐变就是用渐变工具做出来的，两边的渐变都是取用了色环上的渐变过渡，可以看到色彩上两边的渐变中的色相更多，更饱满，饱和度和明度都没有丧失，而中间的渐变在红蓝之间的过渡出现了饱和度较低的紫灰色。

二、色温对比

色温是什么？色温更多是色彩对人的主观的心理因素的影响。虽说是主观，但是大家的整体倾向还是比较类同。比如蓝色清凉，红色温暖。

所以，把色环上的色彩根据主观温度进行一个划分，就有了我们经常听说的暖色和冷色。冷暖色虽然无法用属性值来进行衡量，但是却在色彩中发挥不小的作用。

1. 获得平衡感

渐变中加入色温这个属性，这个游戏就会更好玩。一般来说，为了达到配色平衡，我们的配色中需要冷暖进行平衡，这里的平衡并非是1：1的严格配比，而是彼此渗透，双方根据位置、面积、形状等等元素的共同参与，共同实现一个版面的平衡。当然，这不是件容易的事，但这是我们配色中的方向之一。

回到我们的色温对比，要体现在渐变中，就是要有冷色和暖色的参与。一般来说，在比较简单的过渡性双色渐变里，一个冷色一个暖色是非常常见的表达方式。还是拿刚刚那个案例来看，左边两个配色就是冷暖的过渡，而右边的配色相对来说偏暖，当然相比之下，洋红色还是比橙色会更偏冷一些。

2. 绿色和紫色：冷暖不定

冷暖色的对比都是在同一个版面内的一个动态对比，尤其对于绿色和紫色这个范围内的色彩来说的话更是如此。比如绿色，在和蓝色搭配的时候，由于蓝色是绝对的冷色，所以绿色就表现出暖色的特质；而绿色如果和橙色搭配，橙色又是绝对的暖色，所以绿色又表现出冷色的特性。紫色也是同样的情况，和蓝色搭配它偏向暖色，而和橙色搭配时它又是偏冷的。

用起来其实也很简单，如果你的配色中发现整体感觉偏冷，就增加暖色。如果太暖，那就增加冷色调。如果整体的配色看不出哪里不对劲，但总觉得色彩有点奇怪，就先看看色温是不是实现了平衡。

三、明度对比

再增加一个属性，渐变这个游戏又增加难度了，明度这个属性表现为颜色的明暗程度，明度引入了另一个性质：光。其实我们平时看到的色彩就是因为有了光，才有了颜色。但是一般来说我们会把光简单归属于「发光」这个行列。事实上，由于光线的折射，我们视网膜接受到光的波长，才产生了色彩。那么光线的强烈与否，就会影响这个颜色的表现。

明度的对比，是所有颜色属性当中，最容易被觉察到的。我们可以简单来看，我们的素描就是利用明暗来表现物体，黑白灰能毫不费力表现现实中光的感觉。所以在配色中，有了明暗对比，是一个很好表现色彩感染力的元素。

1. 表现立体感

即使明度相同，我们的色彩明暗程度（从主观感受来说），也是不一样的。比如相同明度的黄绿色和紫色，在明暗表现上，黄绿色明显更亮，更靠前。如果让这两个色彩之间发生渐变关系，这样的表现就很像左上角有光渗入进这块平面中。如果进一步降低的紫色的明度，这时，明度的对比就更为强烈。这时很适合表现出某种立体感。

当然，我们的色彩并非一定要有立体感才能生动，有些配色大师，会刻意去弱化立体感，所以会尽量避免明暗的对比。但是，作为初学者，一定要知道明暗对比，懂得在适当的情况下拿来使用。

尤其是在同色系或者邻近色色系的渐变里，明度对比是一个增加立体表现力的方式。有些时候，平涂的方式看起来呆板单调，利用同色系渐变就能很好解决这个问题。两个色彩之间可以非常近似，即便如此，还是和平涂有差别。有了光的感觉就要随时注意受光的方向，在整个画面里保持全局光，所谓全局光，换个简单的说法就是大家都在同一光源照射下。

我们可以再和大家演示一下，例如这里有两个圆，这两个圆都是填充为紫 – 绿渐变，这时的紫和绿是同样的明度。这里注意，就算是同样明度，两个颜色在直观的感觉上，明暗程度也是有差别的，比如绿色会稍微亮一点。这时打开渐变工具，在后边的绿色这一端色彩，将它的明度调高，这时大家会发现，右边这个圆就变为了一个球体。

2. 从黑白灰开始

明度渐变还是增加作品细腻程度的一个方法，我们和大神的差距，也许真有可能就是一处小小的明暗关系的不同。别忘了，明度对比对整体效果所发生的影响是最大的，但也是我们最容易忽略的，有时候一旦有了颜色，我们的焦点都在色调和色度上。但其实所有的配色，比如我们做设计，一开始总是从黑白灰开始做起，先配置好明度，然后再开始根据明度来选择用色。

有了对明度的把握，我想我们对色彩的把握才能上升到新的层次，否则，我们在一堆色彩里，很容易迷失方向。

四、色度对比

这里说的色度，也被叫饱和度，有的书上也叫彩度，拿我们日常用语讲就是鲜艳程度。色度对比越强，尤其是色轮上的互补色，在他们色度都达到最大时，会撞出最大的火花，产生最强烈的效果。

有时候这种高彩度的配色用在动感很强的设计中，看上去活力四射。但这种互补色之间也会发生彼此互斥的关系，造成整个版面的凌乱，所以要非常谨慎的对待色度。

空气透视 – 空间感的塑造

色度对比最常见的就是用在空间感的塑造上，大家都知道，色度越高，在视觉上会制造一种「更近」的效果。

举例来说吧，我们这里可以画一个梯形，这个梯形用渐变来填色。如果用单色，大家一定感觉不出空间感。如果我们采用渐变，使得同一个颜色，比如紫红色，在这个梯形上，由上到下做一个渐变，这个渐变中两端的色彩，在色度上有差距。那这时就能体现出一个慢慢延伸到远方的感觉。甚至还能有种暴露在空气中，被空气弱化的视觉效果。这个也运用在插画中，也被叫做空气透视。

色彩浓度的强弱对比，和其他的色彩的属性相结合，配色就变得更复杂。但是通常来说，配色并没有标准答案。所以导致很多人在配色的时候，都是依靠一种感觉在操作。其实感觉的确是一个最直接的选色方法之一，但是并不是唯一的方式。大家如果对色彩有更深入的了解以后，就会慢慢理解感觉层面下的更有趣的东西。这个也是经验积累。

在饱和度这一环，PS 里如果觉得不是很靠谱，就像我之前和大家提过，那么大家可以进入到 AI 里，利用 AI 的混合工具来生成不同的色阶。例如我们在这里用一个高饱和度的红色和一个低饱和度的蓝色相搭配。应该说，这两端的色彩既有饱和度的对比，也有色调和明度的对比，还有色温的对比，应该说是对比是非常丰富的。所以，这一条矩形，用在背景色上，我个人感觉不是太合适。如果是做成一些特殊的效果，还是不错，比如设计字体的时候做笔画造型，或者做装饰的线条。

最后一个我们要略提一下，就是透明度的对比。尽管透明度不是标准的颜色属性中的一种，但是在我们软件操作当中，透明度是相当实用的。渐变的色彩，我们可以改变其中一个色彩的透明度，比如降低到0，那么一端的色彩消失不见，这样最容易造成一种浓雾的效果。

这个插画，是在设计我自己的个人网站时做的，其中这些背景中的立方体的某些块面，就是采用某一端降低透明度的效果。有一种在云端的感觉。

五、两个渐变配色网站推荐

1. Grabient

网站链接：https://www.grabient.com/

这个网站的工具很好用，我当时在群里推荐的时候，有人问我说这个和 PS 里的渐变工具有什么区别。我在刚刚其实已经和大家讲过，PS里的颜色的设置是有一些和我们的色彩理论不太符合的地方，但是这个渐变工具就完全符合我们对色彩属性的了解。所以在这里可以进行调试，再确定渐变的值，最后放到 PS 里用。

2. WebGradients

网站链接：https://webgradients.com/

这个网站，我相信大家应该不会陌生，好多地方都推荐过，这个渐变色是可以作为背景色来使用的。大家可以看到这上面大部分的渐变的明度都比较高，比较浅。过渡也非常细腻。这一点大家可以拿来当作自己配色的参考。

这两个工具以外，还有很多其他好用的工具我就不一一演示了，这是我用的比较多，而且觉得还挺实用的两个网站。

写在最后

其实色彩和音乐的感觉是最接近的，每个色彩对应每个音调，那经过组合以后就能表现出一定的情感。通常你也很难说，哪一首音乐是最好听的，因为每个人喜欢的音乐风格都不一样。但是总有那么一些歌是广为流传成为经典的。

所以要学会渐变，首先应该是了解色彩。我们不可能通过一篇文章就能完成学习，肯定是希望以这篇文章作为一个启发点，大家可以从中找到自己的学习的方向。