【CSS in Depth 2 精译_065】第四部分：CSS 视觉增强技术 + 第 11 章颜色与对比概述 + 11.1 通过对比进行交流-CFANZ编程社区

文章目录

第四部分视觉增强技术 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 in Depth》新版封面

第四部分视觉增强技术 Visual enhancements

本书讲到这里，想必您已经建立了自己的 CSS 知识体系，也应该了解了这门语言的工作原理、处理浏览器样式问题的基本思路、以及如何绕开一些常见的陷阱。至此，也该引入一些趣味性强的内容了。此前构建的页面可能已经实现了功能全面的目标，现在该让它们看起来更美观了。用户往往更信赖经过专业外观设计后的应用产品。如果网站设计得赏心悦目，估计他们会更乐意花时间去浏览。因此，在本篇接下来的四章内容中，我们将整合前面所学的所有知识点，把重心放在与设计相关的一些关键考量上。这些看似微不足道的细节，往往会对网站的观感产生重大影响。

第 11 章颜色与对比 Color and contrast

使用 CSS 和 HTML 来实现设计师提供的视觉稿（designer mockup），是 Web 开发中一个至关重要的环节。着手这类实现工作，其实也是将艺术作品高效转为代码的过程。这种转化过程，有时是简单明了的，而更多的时候则往往需要和设计师进行沟通，最终采取折中的方案。设计师对视觉稿做出的每一次微调，都需要我们站在系统组织 CSS 代码的角度综合考虑，使其更容易复用。相较于单页面的视觉稿，我们的 CSS 代码应该更具通用性。

转化工作完成后，基于设计师的最初构想、继续完成网站开发的重要任务就落到了开发者身上。您至少应该具备一些设计师的基本素养，站在设计师的角度去思考间距、颜色和排版等方面的问题，这一点极其重要。您得知道怎样确保最终实现的效果是准确的。如果您认可设计师的目标，那整个过程就会比较顺利。

当然了，您身边可能并非总有一名配合默契的设计师，要是身处一家小型创业公司或者面对的是某个个人项目，就只能靠您自己了。在这种情况下，掌握一些基本的设计原则无疑是大有裨益的，这样一来就能自行设计了。

接下来的两章内容将介绍如何像设计师一样思考，完成页面视觉稿，并将其转化为代码。本章将重点关注颜色的处理；第 12 章则重点讨论排版与间距方面的问题。设计稿的转换过程将为这些 CSS 主题的实际研究提供一套行之有效的思维框架。而颜色本身也是个很大的话题，并且在过去几年中发生了很大变化，因此单列出来进行介绍。

其间，我还将强调一些设计师可能会考虑的因素，旨在让您在学完这些内容之后，可以在一定程度上将其应用到实际项目设计中，甚至无需设计师参与也能推进项目开发。为此，需要构建如图 11.1 所示的演示页面。

图 11.1 为 Ink 协同软件设计的最终网页效果图

【图 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.2 亮色的登录按钮比其他三个深绿色按钮更引人注目】

图 11.3 带彩色文字和边框效果按钮在清一色黑白文字中格外显眼

【图 11.3 带彩色文字和边框效果按钮在清一色黑白文字中格外显眼】

每个网页都应该有一个目的，或许是讲述某个故事，或许是为了收集信息，亦或是要求用户完成某类任务。除了核心目的，还可能会有导航元素、文本段落、广告以及包含版权信息及友情链接的页脚等。设计师的工作是让最重要的信息凸显出来；而我们开发者的工作，则是不要弄乱设计师的设计。

11.1.1 模式的建立 Establishing patterns

为了创建模式，有些在我们看来并没有那么重要的细节，在设计师的眼中反而会倍受关注。比如某些元素间的精确距离，对多个不同的组件使用相同的边框圆角与盒阴影（box shadow）。设计师甚至还会关注字符的间距和文本行间距。

图 11.4 展示了一张视觉稿，它使用像素单位精确标注了各个子元素的间距。在将设计稿转为代码时，保证精确还原这个过程可能稍显枯燥与繁琐（有时甚至还很棘手）。

图 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 &copy; 2024 Ink, Inc.
    </div>
  </footer>
</body>
</html>

以上代码使用了 BEM 风格来为样式类命名，以便清楚地知道哪个元素属于哪个模块。双下划线表示模块的子元素，例如 hero__inner；双连字符代码模块的变体形式，例如 button--cta（更多 BEM 用法详见第 9 章）。我们将以自己的方式逐步实现这些模块。第一步先来看看它们所使用的颜色。

	第 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 版高分译文专栏，全网首发，精译精校，持续更新，计划今年内完成全书翻译，敬请期待！！！

目前已完结的章节（可进入本专栏查看详情，连载期间完全免费）：