家好，从本系列专题起，笔者将给大家聊聊关于设计方面的一些常识，你也许会很奇怪的问，前端工程师有必要了解设计相关的常识吗？那我的答案就是十分有必要。因为我们这个工作岗位做的产品直接面向使用用户，因此用户直观的感受决定着产品的好与坏，其中设计的展现就是给用户的第一印象。为了保证产品的质量，你就避免不了和相关工作岗位的人直接沟通，比如产品经理，设计师，后端工程师等等。

为了更好还原设计师做的设计效果，设计师会不厌其烦的和你沟通，因为这也是他付出心血完成的作品，希望你能够认真对待尽可能百分之百的还原。在沟通的过程中，如果你不懂设计师的设计语言（设计常用语），这样你们的沟通成本会很高，甚至因为误解，造成各种的不愉快，为了解决此问题，前端工程师们还是有必要了解一些设计常识，本系列专题笔者将带着大家从色彩常识开始了解，本篇文章我将给大家介绍下什么是色彩的三属性以及其在CSS中的应用。

色彩三属性简介

在网页设计中，用到的设计素材主要有印刷品、拍摄的照片、扫描的图片、网上搜索的素材。若要让这些素材保持一致的色调，我们就必须要了解下组成这些素材的三要素：“色相”、“饱和度”、“明度”。

以前我也是听设计师们给我经常唠叨这些专业名词，我也是似懂非懂的，只是从字面意思简单理解，从没有想过深入理解以及背后的原理和应用，从而造成了不必要的沟通成本。为了避免大家少走弯路，今天我特意把相关的基础知识进行了梳理分享给大家。

1、色相

“色相”(或称作色调)指的是红色、蓝色等各种颜色。“色相环”则是把各种颜色以环状方式进行排列。这样做的好处，除了直观方便，其实还有对应的应用规则，由于文章篇幅有限，在稍后的专题文章里会有介绍，色环对设计工作者来说十分重要，是设计师常用的设计工具。

2、饱和度

“饱和度”指的是颜色的饱和程度。从字面上来说，你可以这么理解，比如你吃某一样东西吃多了就会有饱腹感，换成色彩，就是用某种色很浓厚，会显得这个色彩很饱满。在拿个例子来说，比如同样是红色，但红豆的红色暗沉，这时候这种红色则称为“饱和度低”的红色。饱和度是影响色彩的重要属性，完全没有饱和度的颜色称为“无彩色”，这就是我们熟知的“黑、白、灰”。这些“无彩色”的一个重要功能就是与其它色彩保持平衡的重要作用，这是为啥大部分网页选择这些“无彩色”作为网页背景的重要原因。

3、明度

“明度”（或称作亮度） 指的是颜色的明亮程度。原色的色相不同，明度也有所不同，如红色的明度较低，而绿色的明度较高，虽然都是原色，但是明度的差距比较大，我们在使用的时候需要特别注意。此外我们需要注意，“无彩色”只有明度数值。

好了，接下来我们看看业界还用哪些模式来表示色彩。色彩三要素的概念，在RGB色彩模式(RGB色彩模式是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色)或CMYK色彩模式(印刷四色模式是彩色印刷时采用的一种套色模式，利用色料的三原色混色原理，加上黑色油墨，共计四种颜色混合叠加，形成所谓“全彩印刷”。)中都能正常使用。而今天我们所说是HSB（Hue：色相、Saturation：饱和度、Brightness：明度）色彩模式能通过直接调整”色相“、”饱和度“、”明度“ 来调整颜色。

关于三属性的相关图示

为了让大家直观理解这三属性，我做了相关的图片，辅助大家进行理解。

1、如下图所示，把饱和度最高的几种颜色排列成色环，虽然他们的饱和度相同，但是按照色相不同，明度也会不同：

2、在色相、饱和度保持不变的情况下，我们来分别调整以下颜色的明亮，如下图所示（明度从100%按照20%的数值逐渐递减到20% ）：

注：不论任何颜色，只要明度降到最低都会变成黑色，而不同“无彩色”之间只有明度上的差异。

3、在 MAC 电脑中，具备可以直接编辑 HSB 颜色的调色板，能让我们更容易的了解色相、饱和度和明度之间的关系，如下图所示：

4、为了加深大家对色相环的理解，笔者做了一个小视频，希望对大家有所帮助：

<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

在 CSS 中应用色彩三要素—— HSL

说了这么多知识，我们如何在前段中进行应用呢？在 css3 中引入了一个表示色彩的新方法，例如 hsl(45,75%,50%)，类似我们今天讲的色彩三要素，HSL颜色的写法在现代浏览器中完全支持，你完全不用担心，以前我们常用的十六进制表示方法 background-color：#21439c，或 rgb(10%,10%,50%) 这两种方法，今天关于 HSL 这种新的写法以还是值得你关注的：

• 从十六进制颜色转换成 RGB 颜色很容易，但是转换成 HSL 则不是这么容易
• HSL不会提供很大的色域，它与十六进制和RGB颜色的范围相同。

你也许会问例如 hsl(45,75%,50%) 这个括号里，三个数值代表什么意思，其实就是分别对应我刚才讲过的色彩三属性：色相、饱和度、明度。

首先我们来看下图这个色相环，每种色相都是有其对应的度数值：

我们在来看hsl(45,75%,50%) 这里的第一个属性，45其实就是表示这个色环45度对应的位置，就是黄色这个范围；75% 就是这个黄色对应的饱和程度，50%表示的就是对应的颜色明度，为了让大家对饱和度这个值的理解，对 hsl(45,X%,50%) 这个写法在保证明色相、明度数值一样的情况下，调整饱和度的值，你将会看到如下的效果：

接下来我们在看一个例子，在保持色相、饱和度数值不变的情况下，我们来调整明度，例如 hsl(90,100%,x%)，你会看到如下效果：

在 CSS 实际场景中的运用

既然在 CSS3 中我们中能够运用类似 hsl(45,75%,50%) 这种方式来表示色彩的三要素，但是我们为什么要使用这方式，而不用我们习惯的RGB写法或十六进制写法表示颜色呢？下面是我举例几个应用场景：

1、网页背景色还能在“亮”些吗？

有时候客户或老板，向你提出要求：“你的网页背景色太暗，能否在亮些呢?“, 如果你使用的是 RGB 或 十六进制 表示颜色，如果要现场给他们调整来确认的话，估计有点麻烦。但是如果你是使用的 HSL 来表示颜色，那就恭喜你，你能很方便的现场进行调整，直到他们满意为止，比如下面这个例子，老板说道：“你能不能让橙色背景更亮些呢？“

原先我们的背景颜色是这么写的：

然后我们就按照要求，调整最后一个明度属性即可，是不是很简单呢？

2、制作一个现代感十足的单选按钮：

如下图所示，我们要制作一个镜像渐变的警示选择按钮，效果如下图：

这里我们主要用到了径向渐变的属性（radial-gradient）和 hsla 这个相结合，代码如下：

如果你不喜欢红色，你可以很方便的进行调整为蓝色，示例如下：

小节

今天的内容就分享到这里，希望你能喜欢此文章的内容，关于颜色这三属性我做下简单的总结，色相指的是“红色”等颜色，饱和度指的是颜色的饱和程度，明度是颜色的明亮程度。接下来我们又学习了，这些属性在 CSS 中的应用，如果你的项目不考虑 IE8 及以下版本的 IE 浏览器，你可以放心使用，用起来会很方便许多，调整颜色 So easy！

文：https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112

作者：Tess Gadd

翻译：水手哥（公众号ID:shuishouge_design）

按钮在UI界面设计中是不可或缺的元素之一，这篇文章我们将介绍不同类型的按钮包括按钮的状态和交互。我们介绍的都是日常界面中使用的普通按钮，并不包括单选按钮、选项卡、复选框等其他类型的按钮。

按钮的不同分类如下：

• 动作按钮
• 常用按钮样式
• 按钮的颜色和形状
• 按钮状态和反馈
• 标签按钮
• 触摸屏按钮
• 按钮的位置
• 系统按钮
• 总结

动作按钮

我们将分析按钮的层次结构和它们通信的语言。虽然有些按钮通熟易懂，但按钮操作不取决于它们的外观，而是取决于用户的行为。

1_1.行为召唤（CTA / C2A）

在设计中行为召唤按钮通常会提示用户注册/立即购买等。在产品设计中如果强烈建议用户应该做的事情应该使用CTA按钮。

行为召唤按钮

对于CTA按钮，我喜欢使用圆形按钮，这样会更引人注目。

1_2.主要操作按钮

虽然CTA按钮和主按钮看起来相同，但我喜欢将它们分开。主按钮应该是一个强大的视觉指示器，可以帮助用户完成他们的旅程。主按钮应该在用户可能想要“下一步”、“完成”、“开始”等的情况下使用。

主要操作按钮

对于主要操作，我喜欢使用实心按钮。

1_3.次要操作按钮

从“返回”的辅助按钮到“下一步”的主按钮，或从“编辑”的辅助按钮到“保存”的主按钮。辅助按钮是我们为用户提供的主要操作的备选方案。

主按钮旁边的辅助按钮的两种设计

我更倾向于使用线性按钮或文本链接作为辅助按钮。

1_4.三级按钮

三级按钮通常用于其他操作，可能暂时不是用户想要做的事情。比如“添加朋友”、“扫一扫”、“编辑”或“删除”之类的内容，前提是它们不是主要操作。

不同形式的三级按钮

一般来说，人们会使用较小或较不突出的按钮样式。

常用按钮样式

下面我们将介绍常见的按钮样式，不同风格的按钮样式和他们的使用技巧。

2_1.实心按钮

实心按钮是带有实心填充的按钮。

一个实心按钮

2_2.线性和幽灵按钮

线性按钮和实心按钮正好相反，一个没有填充的按钮 – 只是一个轮廓。虽然经常互换使用，但我更喜欢将线性按钮视为浅色（在白底下按钮的轮廓和文本颜色深一点更明显），将幽灵按钮视为深色（在黑底下按钮的轮廓和文本颜色浅一点更明显）。

线性按钮（左）和幽灵按钮（右）

2_3.圆形按钮

圆形按钮其边缘设置为最大圆角半径。

圆形按钮

2_4.FAB（悬浮按钮）

悬浮按钮是一种巧妙的设计模式，Google Material Design中更加受欢迎。虽然它们可能看起来像一个图标按钮，但实际上它们用在屏幕上的主要操作按钮。

一个悬浮按钮

如果您想了解有关FAB的更多信息，我建议您在Material Design的网站上查看( https://material.io/design/components/buttons-floating-action-button.html )

2_5.文字链接

文本链接是一种非常简单的按钮类型。有几种不同的方式可以表明它是一个链接。它可以是颜色/下划线/链接的文本，甚至就是文本本身（例如“阅读更多”）。

文本链接的不同样式

在颜色方面，大多数网站使用蓝色，因为它是最容易识别的。为什么文本链接的颜色会使用蓝色？它一直追溯到是万维网的发明者，在他选择颜色时发现蓝色很酷的一种颜色，即使是色盲的人通常也能看到它。

2_6.带图标的标签按钮

图标按钮越来越受欢迎，一些按钮仍然需要一个标签来确保按钮的语意明了。

带图标的标签按钮

处理图标和标签时最棘手的事情是弄清楚字体组合的图标有多大。

方法1：让图标的大小对齐字体的顶线。

方法2：让图标的大小对齐字体的行高。需要注意的是确保图标和字体的组合视觉均衡。

2_7.图标按钮

图标按钮没有标签，只是一个图标。因为它们没有标签，所以它们在界面中节省了大量空间。图标按钮还可以将其他图标按钮一起排列在它们的小空间中。

图标按钮具有不同的风格

如果你在为计算机认知度较低的人群设计产品时，我建议使用带标签的按钮 – 尤其是那些很抽象的语意。

2_8.带图标的文本链接

某些文本链接可能带有图标。这些通常不会在正文中使用。

各种带图标的文本链接

按钮的颜色和形状

在设计按钮时，需要考虑以下几个不同的元素。

3_1.颜色

在设计产品时，你应该要考虑有视觉障碍的人。为确保每个人都可以访问你的颜色，你可以使用在线对比度检查器。我使用的是那个。( https://accessible-colors.com/ )

不同颜色的按钮

另外，在选择颜色时应该考虑色彩心理学。红色按钮多用于删除，黄色按钮多用于警示等。

“删除”、“警告”、“保存”和“更多”按钮

3_2.边界半径

边界半径为按钮提供了很多个性化设计。具有更圆半径的按钮看起来更有趣。

不同边界半径设置的按钮

3_3.投影

按钮上的投影使按钮更加自然引人注意。阴影也可用于指示不同的状态。 ( https://material.io/design/environment/elevation.html#depicting-elevation )

Material Design通过使按钮在悬停状态下来达到这个效果。

不同阴影设置的按钮

3_4.标签样式

标签样式归结为字体以及阅读的容易程度。选择字体时，请确保它清晰可辨。

不同标签样式的按钮

以下是一些简单的方法可以让字体清晰易读：

* 选择大写的标签或大标题。（Material Design使用过带有大写标签的按钮。）

* 确保标签颜色与按钮填充对比较为突出。您可以使用( http://accessible-colors.com/ ) 查看。始终确保您的颜色符合AAA要求。

* 选择字体时，请确保字体清晰。

3_5.垂直内间距

按钮的大小对界面的可访问性起着很大的作用。大多数没有经验的设计师会说“按钮的高度应该是36像素”。如果你是为产品系统的设计按钮。你应该采用所用字体的行高，并在其中添加一定单位的内间距。例如：“我的按钮标签的行高为20px，垂直内间距为8px”。

不同垂直内间距的按钮

为什么会这样设定呢？这里有两个原因：

1）有视觉障碍的人可能会增大浏览器中的字体，因此他们需要更改字体大小而不会将按钮高度定死。

2）这也是开发人员创建按钮的方式-他们在DIV容器中添加内间距，而不是固定高度。

3_6.水平内间距

有两种方法可以接近水平内间距。

第一个方法：

使按钮宽度与网格对齐。这是保持所有按钮长度一致的好方法。但是它限制了你可以使用的字体数量。

宽度由网格决定的按钮

第二个方法：

两侧有固定内间距。我通常还会定按钮最小宽度，虽然避免了很窄的按钮，但是最小宽度按钮可容纳的不同字段会让按钮看上去不是很均匀。

宽度由内间距和标签长度决定的按钮

按钮状态和反馈

按钮状态让用户知道他们是否可以点击、已经点击或已成功点击。按钮还可以有重叠的状态。例如可以同时是“点击”和“悬停”状态。

4_1.点击和禁用状态

点击状态就是鼠标可以点击按下按钮的状态，当然如果用户没有完成必要的步骤，按钮可以被禁用。例如用户没有输入他们的姓名和电子邮件地址，他们就不能提交他们的详细信息。

点击和禁用按钮

4_2.悬停和悬停离开（鼠标悬停和鼠标悬停离开）

在PC端按钮应具有不同的状态，让用户知道它是可点击的。通常“悬停”状态和“悬停离开”状态相反，但也不一定。你应该有效的区分让用户感知鼠标悬停在某个按钮上。

悬停演示按钮

平板电脑和移动设备上永远不会出现悬停状态，因为你的手指无法“悬停”。如果您正在为应用程序进行设计，请不要担心此状态。

4_3.焦点

焦点状态可能会让用户困惑。如果你的用户专注度较差，他们可能需要使用选项卡式导航。用户将点击“选项卡”在网站上移动，从一个导航链接移动到下一个。这意味着按钮需要有一个“焦点”状态才能显示它是“可点击的或尚未点击”。

默认的焦点状态是蓝色“发光”，幸运的是，我们生活在一个可以自定义按钮状态的时代。大多数设计师对悬停和焦点状态使用相同的视觉提示。

两个不同“焦点”状态的例子

4_4.按下

按下状态是当用户的光标或手指“按住”按钮时的状态。当用户将手指或光标“释放”在按钮上时，该按钮会指示为“已点击”。

“按下”状态的按钮

4_5.点击

按钮需要“点击”状态以向用户指示它已被点击。

“点击”状态的按钮

按钮标签

按钮标签的诀窍是一致性。我们在产品设计前期需要制定按钮标签的规范，以避免以后花更多时间去改变你所有的按钮标签。

5_1.动词的用法

大多数按钮都包含指示按钮将执行什么操作，例如“保存”、“发布”、“编辑”。虽然“back”和“next”不是动词，但在接口上下文中，它们的工作方式似乎相同。我喜欢在编写按钮标签时使用“动词” “名词”结构，这会让操作更具规定性，例如“保存文章”等，而不是“保存”。

5_2.案例

你还应该决定使用哪种字体大小写。以下是我使用的一些规范：

所有大写字母，例如“NEXT SECTION”，我把它们用于更专业的平台。Material Design使用所有大写字母的按钮。

标题框，例如“Next Section”，我倾向于避免使用标题大小写，因为它不像句子大小写那样容易阅读。就语调而言，我认为它介于“专业”和“会话”之间。

句子大小写，例如“Next section”，我把它们用于更“友好”或“对话”的平台。它更像是一句话，正常我们一句话结束会加一个句号，但是为了设计的美感，请不要加一个句号。

小写，例如“next section”，小写按钮标签使用频率较低。

5_3.一致性

为按钮编写标签时，请确保一致性。以下是一些我在项目使用的指导原则：

选择字数：每个按钮一个、两个或多个字

选择大小写：句子大小写，或大写，或标题大小写，或小写

标签结构：如“动词” “名词”，或“动词”等。

触摸屏按钮

桌面按钮大小调整（单击）

因为桌面上的光标比触摸屏上的手指小，所以您可以将按钮缩小很多。

触摸屏按钮尺寸（点击）

麻省理工学院触摸实验室的研究表明，人在使用触摸屏时手指部分是8-10毫米，如果你想避免用户手指触摸错误，最小目标尺寸需要10毫米或更大。如上所述-我需要较大的按钮。

那么，你应该做多大尺寸的按钮呢？专家们说的是：

Material Design建议接触目标应为48dp x 48dp，不同接触点之间距为8dp。

虽然我找不到关于iOS设计系统目标尺寸的任何文档，但一般的理解是，它的最小目标尺寸是44 x 44磅。

如果您在设计大小尺寸方面遇到困难，我强烈推荐Zac Dickerson关于易用性的故事。

按钮位置

如果你非要放置2个按钮，主按钮应放在哪一侧？

主要和次要按钮的两种不同立场

选项A显示左侧为主按钮。它可能是用户首先想要看到的，所以先显示它。

选项B显示右侧为主按钮。我们希望用户首先看到辅助按钮，方便他们继续完成他们的旅程。右侧的按钮也表示继续。

系统按钮

这里会介绍一些很酷的设计原则和系统。我喜欢Material Design System的按钮，因为他们的原理是经过深思熟虑的。

Material Design System的按钮

Material Design 按钮图片

Material Design中介绍了按钮的操作，以及按钮如何与系统中的其他组件交互。我喜欢用户在触摸屏上使用按钮的交互方式。

查看按钮部分：

https://material.io/design/components/buttons.html

悬浮按钮在这里查看：

https://material.io/design/components/buttons-floating-action-button.html

总结

如果没有按钮，你就不能真正构建界面；我们应该更多的关注它们。了解按钮在界面中是如何设计的？怎样正确的使用按钮并为你的用户提供最佳的体验？