当前内容所在位置（可进入专栏查看其他译好的章节内容）
- 第四部分 视觉增强技术 ✔️
- 【第 11 章 颜色与对比】 ✔️
- 11.1 通过对比进行交流 ✔️
- 11.1.1 模式的建立 ✔️
- 11.1.2 还原设计稿 ✔️
- 11.2 颜色的定义
文章目录
- 第四部分 视觉增强技术 Visual enhancements
- 第 11 章 颜色与对比 Color and contrast
- 11.1 通过对比进行交流 Communicating with contrast
- 11.1.1 模式的建立 Establishing patterns
- 11.1.2 还原设计稿 Implementing the design
《CSS in Depth》新版封面
译者按
补完了附录的两篇内容，终于可以开始全新章节的学习了。新版的第四部分是作者从之前的【高级话题】重新拆分出来的。之所以把后面四章列为视觉增强篇，主要也是为了体现 CSS 近年来在这方面取得的最新进展。正如作者谈到的，后续内容会站在专业设计师的角度考虑样式问题。可能有人会说，前端已经够累的了，干嘛还去管设计师的事？殊不知，CSS 水平高下立判的真正分水岭就在于此。很多时候 CSS 面临的挑战和困境并不是 CSS 本身造成的，如果缺乏这样的破圈意识，不仅给不出一针见血的意见，个人的职业发展也会很快遭遇瓶颈。一个人的心智模式并不会因为选择了计算机专业、选择了 CSS 而自动升级；它和其他技能一样，需要刻意练习，也需要一点笨拙与耐心。
第四部分 视觉增强技术 Visual enhancements
本书讲到这里，想必您已经建立了自己的 CSS 知识体系，也应该了解了这门语言的工作原理、处理浏览器样式问题的基本思路、以及如何绕开一些常见的陷阱。至此，也该引入一些趣味性强的内容了。此前构建的页面可能已经实现了功能全面的目标，现在该让它们看起来更美观了。用户往往更信赖经过专业外观设计后的应用产品。如果网站设计得赏心悦目，估计他们会更乐意花时间去浏览。因此，在本篇接下来的四章内容中，我们将整合前面所学的所有知识点，把重心放在与设计相关的一些关键考量上。这些看似微不足道的细节，往往会对网站的观感产生重大影响。
第 11 章 颜色与对比 Color and contrast
本章概要
- 将设计师的视觉稿转为 HTML 和 CSS 的方法
- 利用对比设计将用户注意力吸引到页面最重要部分的方法
- 颜色的选取及相关处理
- 深入理解色彩空间及 CSS 的各类颜色表示方法
- 深度解析 OKLCH 色彩空间
- 与颜色相关的无障碍浏览问题
使用 CSS 和 HTML 来实现设计师提供的视觉稿（designer mockup），是 Web 开发中一个至关重要的环节。着手这类实现工作，其实也是将艺术作品高效转为代码的过程。这种转化过程，有时是简单明了的，而更多的时候则往往需要和设计师进行沟通，最终采取折中的方案。 设计师对视觉稿做出的每一次微调，都需要我们站在系统组织 CSS 代码的角度综合考虑，使其更容易复用。相较于单页面的视觉稿，我们的 CSS 代码应该更具通用性。
转化工作完成后，基于设计师的最初构想、继续完成网站开发的重要任务就落到了开发者身上。您至少应该具备一些设计师的基本素养，站在设计师的角度去思考间距、颜色和排版等方面的问题，这一点极其重要。您得知道怎样确保最终实现的效果是准确的。如果您认可设计师的目标，那整个过程就会比较顺利。
当然了，您身边可能并非总有一名配合默契的设计师，要是身处一家小型创业公司或者面对的是某个个人项目，就只能靠您自己了。在这种情况下，掌握一些基本的设计原则无疑是大有裨益的，这样一来就能自行设计了。
接下来的两章内容将介绍如何像设计师一样思考，完成页面视觉稿，并将其转化为代码。本章将重点关注颜色的处理；第 12 章则重点讨论排版与间距方面的问题。设计稿的转换过程将为这些 CSS 主题的实际研究提供一套行之有效的思维框架。而颜色本身也是个很大的话题，并且在过去几年中发生了很大变化，因此单列出来进行介绍。
其间，我还将强调一些设计师可能会考虑的因素，旨在让您在学完这些内容之后，可以在一定程度上将其应用到实际项目设计中，甚至无需设计师参与也能推进项目开发。为此，需要构建如图 11.1 所示的演示页面。
【图 11.1 为 Ink 协同软件设计的最终网页效果图】
以上截图即为要实现的页面最终效果。如果是从设计师处拿到的设计稿，那么可能还会带有很多附加信息，后续会专门予以介绍；这里先明确设计过程中的几个要素。
11.1 通过对比进行交流 Communicating with contrast
当您看到图 11.1 所示的截图时，留意一下您的视线会落在哪里。大概率是被 Team collaboration done right 这句广告语和它下面的 Get Started 按钮吸引了。您也会看到页面上的一些别的东西 —— 像左上角的公司名称、右上角的导航菜单、页面下方的三栏内容等等 —— 但图片中间的内容无疑是最具吸引力的。原因就在于使用了 对比（contrast）。
对比是设计中的一种手段，通过突出某物来达到吸引注意力的目的。我们的眼睛和思维天生对模式（patterns）比较敏感。一旦某样东西破坏了模式的整体效果，我们的注意力就会立即转移到它身上。
若要起到对比的效果，页面就必须先建立起模式；如果连规矩都没有，打破规矩就更无从谈起了。在图 11.1 中，“Read More” 字样的导航按钮间的间距保持一致，其所在的三个内容栏的大小和间距也是一样的。此外，三个 “Read More” 按钮样式也完全相同。虽然页面颜色不尽相同，但都来自相同的绿色色调，只是明暗深浅不同罢了。这也是模块化 CSS 为何如此重要的一个原因（详见第 9 章）—— 我们要创建的是一个可以在任意位置使用的按钮，而不是通过层层嵌套的选择器构建的“某个板块下的按钮”（“button-in-a-tile”）。
推行复用样式代码后，网站上就能确保出现一致的模式。专业设计师的一个核心思路，就是先建立统一的模式，然后打破模式、突出页面中最重要的部分。
使用不同的颜色、间距和大小是建立对比的一些关键手法。如果好几个对象（items）是亮色的，还剩一个是暗色的，那您就会率先注意到这个暗色的对象；如果某个项目周围有很多无用的间距（也称 留白（whitespace）），那它就会比较突出；同理，尺寸较大的元素也会从一系列较小元素中脱颖而出。为了达到更强烈的对比效果，还可以多种方法组合使用，就像上面示例页中用到的那句 Team Collaboration Done Right 标语那样，它的字号偏大、且周围有留白，此外还紧贴着一个醒目的深色按钮。
不过标语部分并不是页面上唯一用到对比的地方。您会发现，通过对比，信息的重要程度和信息传递效果都有了层次感。除了标语和 “Get Started” 开始按钮，导航菜单（如图 11.2 所示）和页面底部的每个板块（如图 11.3 所示）明显也用到了对比。虽然这些元素的对比程度不如标语部分那么强烈，但在各自的区域内部也都能吸引人们的注意。而页脚是整个页面中相对不太重要的内容，因此设计得很小，也没用到什么对比。
【图 11.2 亮色的登录按钮比其他三个深绿色按钮更引人注目】
【图 11.3 带彩色文字和边框效果按钮在清一色黑白文字中格外显眼】
每个网页都应该有一个目的，或许是讲述某个故事，或许是为了收集信息，亦或是要求用户完成某类任务。除了核心目的，还可能会有导航元素、文本段落、广告以及包含版权信息及友情链接的页脚等。设计师的工作是让最重要的信息凸显出来；而我们开发者的工作，则是不要弄乱设计师的设计。
11.1.1 模式的建立 Establishing patterns
为了创建模式，有些在我们看来并没有那么重要的细节，在设计师的眼中反而会倍受关注。比如某些元素间的精确距离，对多个不同的组件使用相同的边框圆角与盒阴影（box shadow）。设计师甚至还会关注字符的间距和文本行间距。
图 11.4 展示了一张视觉稿，它使用像素单位精确标注了各个子元素的间距。在将设计稿转为代码时，保证精确还原这个过程可能稍显枯燥与繁琐（有时甚至还很棘手）。
【图 11.4 带有测量标注的页面设计视觉稿】
视觉稿里使用了几个小方框来标注这些测量过的间距。例如，导航菜单中的按钮相互之间的距离为 10px，主图的底端和三个白底内容栏之间的距离为 40px，各分栏标题以及后续的文本段落之间的距离为 30px，等等。有些固定的间距长度可能会在页面上多次重复出现，这有助于建立模式的视觉一致性。比如，10px 和 25px 的间距在该页面就较为通用。
下面再来看看紧凑设计的一个关键方面：颜色选择（间距和排版的控制也非常重要，下一章将重点关注）。我们将演示如何精确地还原如图 11.4 所示设计。同时也必须意识到网站是会随时间不断演化的。还原视觉稿只是完成了一部分工作，后续可能还需要添加新的特性功能和新的内容，需要始终忠于设计师的愿景。为此，再来看看做好这类工作还需要考虑哪些重要因素。
11.1.2 还原设计稿 Implementing the design
先创建一个新页面，并关联到一个新的样式表。然后将代码清单 11.1 中的 HTML 标记复制到页面中。我们会把整个设计页面划分为多个模块（modules），后续章节会讲解如何编写样式。
代码清单 11.1 页面 HTML 代码
<!doctype html>
<html lang="en-US">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav class="nav-container"><!-- 顶部导航容器 -->
<div class="nav-container__inner">
<a class="home-link" href="/">Ink</a>
<ul class="top-nav">
<li><a href="/features">Features</a></li>
<li><a href="/pricing">Pricing</a></li>
<li><a href="/support">Support</a></li>
<li class="top-nav__featured"><a href="/login">Login</a></li>
</ul>
</div>
</nav>
<div class="hero"><!-- 巨幅主图 -->
<div class="hero__inner">
<h2>Team collaboration done right</h2>
<a href="/sign-up" class="button button--cta">Get started</a>
</div>
</div>
<div class="container">
<div class="tile-row"><!-- 三栏板块 -->
<div class="tile">
<h4>Work together, even if you're apart</h4>
<p>Organize your team conversations into threads. Collaborate together on documents in real-time. Use face-to-face <a href="/features/video-calling">video calls</a> when typing just won't do.</p>
<a href="/collaboration" class="button">Read more</a>
</div>
<div class="tile">
<h4>Take it with you</h4>
<p>Ink is available on a wide array of devices, so you can work from anywhere:</p>
<ul class="tag-list">
<li>Web</li>
<li>iOS</li>
<li>Android</li>
<li>Windows Phone</li>
</ul>
<a href="/supported-devices" class="button">Read more</a>
</div>
<div class="tile">
<h4>Priced right</h4>
<p>Whether you work on a team of three or a three hundred, you'll find our tiered pricing reasonable at every level.</p>
<a href="/pricing" class="button">Read more</a>
</div>
</div>
</div>
<footer class="page-footer">
<div class="page-footer__inner">
Copyright © 2024 Ink, Inc.
</div>
</footer>
</body>
</html>
以上代码使用了 BEM 风格来为样式类命名，以便清楚地知道哪个元素属于哪个模块。双下划线表示模块的子元素，例如 hero__inner；双连字符代码模块的变体形式，例如 button--cta（更多 BEM 用法详见第 9 章）。我们将以自己的方式逐步实现这些模块。第一步先来看看它们所使用的颜色。
关于《CSS in Depth》（中译本书名《深入解析 CSS》）
| 第 1 版 | 第 2 版 | |
|---|---|---|
| 读者评分 | 原版：4.7（亚马逊）；中文版：9.3（豆瓣） | 原版：5.0（亚马逊）；中文版：暂无，待出版 |
| 出版时间 | 原版：2018 年 3 月；中文版：2020 年 4 月 | 原版：2024 年 7 月；中文版：暂无，待出版 |
| 原价 | 原版：$44.99；中文版：￥139.00 | 原版：$59.99；中文版：暂无，待出版 |
| 现价 | 原版：$36.49；中文版：￥52.54 起步 | 原版：$52.09；中文版：暂无，待出版 |
| 原版国内预订 | 起步价 ￥461.00 | 起步价 ￥750.00 |
本专栏为该书第 2 版高分译文专栏，全网首发，精译精校，持续更新，计划今年内完成全书翻译，敬请期待！！！
目前已完结的章节（可进入本专栏查看详情，连载期间完全免费）：
- 第一章 层叠、优先级与继承（已完结）
- 1.1 层叠
- 1.2 继承
- 1.3 特殊值
- 1.4 简写属性
- 1.5 CSS 渐进式增强技术
- 1.6 本章小结
- 第二章 相对单位（已完结）
- 2.1 相对单位的威力
- 2.2 em 与 rem
- 2.3 告别像素思维
- 2.4 视口的相对单位
- 2.5 无单位的数值与行高
- 2.6 自定义属性
- 2.7 本章小结
- 第三章 文档流与盒模型（已完结）
- 3.1 常规文档流
- 3.2 盒模型
- 3.3 元素的高度
- 3.4 负的外边距
- 3.5 外边距折叠
- 3.6 容器内的元素间距问题
- 3.7 本章小结
- 第四章 Flexbox 布局（已完结）
- 4.1 Flexbox 布局原理
- 4.2 弹性子元素的大小
- 4.3 弹性布局的方向
- 4.4 对齐、间距等细节处
- 4.5 本章小结
- 第五章 网格布局（已完结）
- 5.1 构建基础网格
- 5.2 网格结构剖析 （上）
- 5.2.1 网格线的编号（下）
- 5.2.2 网格与 Flexbox 配合（下）
- 5.3 两种替代语法
- 5.3.1 命名网格线
- 5.3.2 命名网格区域
- 5.4 显式网格与隐式网格（上）
- 5.4.1 添加变化 （中）
- 5.4.2 让网格元素填满网格轨道（下）
- 5.5 子网格（全新增补内容）
- 5.6 对齐相关的属性
- 5.7 本章小结
- 第六章 定位与堆叠上下文（已完结）
- 6.1 固定定位
- 6.1.1 创建一个固定定位的模态对话框
- 6.1.2 在模态对话框打开时防止屏幕滚动
- 6.1.3 控制定位元素的大小
- 6.2 绝对定位
- 6.2.1 关闭按钮的绝对定位
- 6.2.2 伪元素的定位问题
- 6.3 相对定位
- 6.3.1 创建下拉菜单（上）
- 6.3.2 创建 CSS 三角形（下）
- 6.4 堆叠上下文与 z-index
- 6.4.1 理解渲染过程与堆叠顺序（上）
- 6.4.2 用 z-index 控制堆叠顺序（上）
- 6.4.3 深入理解堆叠上下文（下）
- 6.5 粘性定位
- 6.6 本章小结
- 第七章 响应式设计（已完结）
- 7.1 移动端优先设计原则（上篇）
- 7.1.1 创建移动端菜单（下篇）
- 7.1.2 给视口添加 meta 标签（下篇）
- 7.2 媒体查询（上篇）
- 7.2.1 深入理解媒体查询的类型（上篇）
- 7.2.2 页面断点的添加（中篇）
- 7.2.3 响应式列的添加（下篇）
- 7.3 流式布局
- 7.4 响应式图片
- 7.5 本章小结
- 第八章 层叠图层及其嵌套
- 8.1 用 layer 图层来操控层叠规则（上篇）
- 8.1.1 图层的定义（上篇）
- 8.1.2 图层的顺序与优先级（下篇）
- 8.1.3 revert-layer 关键字（下篇）
- 8.2 层叠图层的推荐组织方案
- 8.3 伪类 :is() 和 :where() 的用法
- 8.4 CSS 嵌套的使用
- 8.4.1 嵌套选择器的使用
- 8.4.2 深入理解嵌套选择器
- 8.4.3 媒体查询及其他 @规则 的嵌套
- 8.5 本章小结
- 第九章 CSS 的模块化与作用域
- 9.1 模块的定义
- 9.1.1 模块和全局样式
- 9.1.2 一个简单的 CSS 模块
- 9.1.3 模块的变体
- 9.1.4 多元素模块
- 9.2 将模块组合为更大的结构
- 9.2.1 模块中多个职责的拆分
- 9.2.2 模块的命名
- 9.3 CSS 的作用域
- 9.3.1 CSS 作用域的就近原则
- 9.3.2 划定作用域的边界
- 9.3.3 CSS 中的隐式作用域
- 9.3.4 关于 CSS 作用域与层叠图层
- 9.4 CSS 模式库
- 9.5 本章小结
- 第十章 CSS 容器查询
- 10.1 容器查询的一个简单示例
- 10.1.1 容器尺寸查询的用法
- 10.2 深入理解容器
- 10.2.1 容器的类型
- 10.2.2 容器的名称
- 10.2.3 容器与模块化 CSS
- 10.3 与容器相关的单位
- 10.4 容器样式查询的用法
- 10.4.1 将模块与所在容器解耦
- 10.4.2 减少重复代码
- 10.5 本章小结
- 附录
- 附录A：CSS 选择器参考
- 附录B：CSS 预处理器简介
