开发者设计原则：提升网页设计的流程和 CSS 小贴士

从技术上讲，任何人都可以做饭。 但真正懂得如何准备美味佳肴，和把一些食材扔进锅里，然后祈祷一切顺利之间是有区别的。 正如网页开发一样，您可能知道这些食材——<span>、background-color、.heading-1——但并非每个人都知道如何将这些食材变成一个美观、易于使用的网站。

无论何时使用 HTML 和 CSS，您都在进行设计——为内容赋予形式和结构，以便其他人能够理解。 人们已经设计了几个世纪，并在此过程中发展了一些适用于当今数字界面的原则。 这些原则体现在三个关键领域：单词的显示方式（排版）、内容的排列方式（间距）以及个性化的添加方式（颜色）。 让我们从开发者的角度，通过 CSS 属性和指南来了解如何使用这些网页设计元素，消除网页设计中的猜测。

排版

易于阅读的网站并非偶然。 事实上，Taimur Abdaal 撰写了一篇关于该主题的完整文章，其中充满了对使用字体的开发人员的建议。 我们将重点关注两个基本的设计原则，它们可以帮助您以更赏心悦目、易于阅读的方式显示文字：重复和层次结构。

使用重复以确保一致性和可维护性

由于软件中可重用性的重要性，重复在网络上相当自然。 例如，CSS 类允许您为文本定义特定样式，然后在整个网站中重复使用该样式。 这将导致针对相似内容重复使用一致的文本样式，从而帮助用户浏览网站。

例如，如果您正在处理新段落的样式，请首先考虑是否有现有内容具有类似的样式，并尝试使用相同的 CSS 类。 如果没有，您可以使用通用名称创建一个新类，该类可以在您网站的其他地方重复使用。 考虑 .paragraph--emphasize 而不是 .footer__paragraph--emphasize 或 .heading-1 而不是 .hero__site-title。 前面的示例可以在整个网站中使用，而后面的示例仅限于特定组件。 您甚至可以添加一个前缀，例如 text-，以表明该类专门用于文本样式。 此方法将减小 CSS 文件大小和复杂度，同时使将来更新全局样式变得更加容易。

在设计中，有无数种方式可以尝试不同的样式。 设计师有时会因为使用大量的字体样式，而创建许多类似样式的细微变化。 但是，在代码中，将文本样式限制在最小限度非常重要。 开发人员应该敦促设计师将类似的样式组合在一起，以减少代码的重量，并提高可重用性和一致性。

层次结构为内容提供清晰的视觉顺序

层次结构是你只有在它不存在时才会注意到的事情。 在排版中，层次结构指的是不同文本片段之间的视觉差异。 它是标题、段落、链接和其他文本样式之间的区别。 这种区别是通过为每种类型的文本内容选择不同的字体、颜色、大小、大小写和其他属性来实现的。 良好的层次结构使复杂的信息更容易理解，并引导用户浏览您的内容。

开箱即用，HTML 提供了一些层次结构（例如，标题的字体大小随着您从 <h1> 到 <h6> 的变化而变小），但 CSS 为更多创意打开了大门。 通过为 <h1> 标签赋予更大的字体大小，您可以快速在标题级别之间建立更大的尺寸差异——从而形成更多的层次结构。 要创建更多变化，您还可以更改 color、text-align 和 text-transform 属性。

关于选择字体的说明

在排版中，我们需要确保它尽可能易于阅读。 可读性中最重要的因素是您选择的字体——这是一个巨大的话题。 许多因素决定了字体的“可读性”。 一些字体专门用于标题或短行文本； 这些称为“显示”字体，它们通常比专为文本设计使用时具有更多个性。 独特的装饰和怪癖使得显示字体在小尺寸或大段落中难以阅读。 作为经验法则，将更直接的字体用于文本，仅将显示字体用于标题。

如果您手头紧迫，需要一种易于阅读的字体，请尝试使用Google Fonts。 将一段文本添加到预览字段中，并将其大小调整为在您网站上显示的大致大小。 然后，您可以将结果缩小到衬线体或无衬线体，并在字体列表中扫描易于阅读的字体。 Roboto、Noto Sans、Merriweather 和 PT Serif 都是非常易于阅读的选项。

提高可读性的 CSS 属性

• 主段落font-size 应该在 16px 和 18px（1em 和 1.25em）之间，具体取决于您选择的字体。
• 手动设置line-height（两行文本之间的垂直间距）以使您的文本不那么拥挤，更易于阅读。 从标题的 line-height: 1.25（即 font-size 的 1.25 倍）开始，段落的 line-height 至少为 1.5（但不超过 1.9），然后根据需要进行调整。 文本行越长，line-height 应该越大。 为了使您的文本灵活，请避免在您的 line-height 中添加单位。 没有单位，您设置的 line-height 将与您的 font-size 成比例。 例如，line-height: 1.5 和 font-size: 18px 将使您获得 27 像素的行高。 如果您将较小屏幕上的字体大小更改为 font-size: 16px，则计算的行高将自动更改为 24 像素。

• 注意每行文本中的字符数，并力争使每行文本的长度在 45 到 75 个字符之间（包括标点符号和空格）。这样做可以减少用户阅读疲劳，因为可以限制眼睛和头部移动以跟踪文本行。由于网络的特性，完全控制行长是不可能的，但你可以使用 `max-width` 值和断点来防止文本行过长。一般来说，文本行越短，快速阅读时的扫描速度就越快。不用太担心每行文本的字符计数。做几次之后，你就会对什么看起来合适有一个感觉。

间距

在查看排版之后，你可以后退一步，检查内容的布局或间距。移动和接近度是与间距相关的两个设计原则。

移动是关于内容流的

移动指的是你的眼睛如何移动穿过页面或页面的流动。你可以使用移动来引导用户的眼睛，以便讲述故事、指向主要行动项或鼓励他们滚动。这是通过在单个组件内构建内容，然后排列这些组件以形成页面布局来完成的。通过关注你的眼睛如何移动穿过内容，你可以帮助用户在扫描页面时知道该看哪里。

与通常具有非常线性结构的书籍不同，网站可以在布局上更具创意——实际上有无数种方式。重要的是要确保你对如何布局内容有意识，并且以一种尽可能轻松地引导用户浏览你的内容的方式进行。

考虑上面这三个例子。哪一个最容易理解？左侧的排列由于图像的位置，会将你的视线从屏幕上吸引到左侧，这使得难以找到按钮。在中间选项中，由于图像与标题相比太大，很容易跳过标题。在右侧，标题首先吸引你的注意力，图像的构图方式使其指向主要行动项——按钮。

空白是创建强大移动的有效工具，但很容易使用太多或太少。思考你如何使用它来引导用户的眼睛并划分你的内容。如果使用得当，用户不会注意到空白本身，而是能够更好地关注你正在展示的内容。例如，你可以使用空白来分隔内容（而不是彩色框），这会导致布局不那么混乱。

接近度建立关系

当物体彼此更靠近时，它们被认为是相关的。通过控制元素周围的间距，你可以暗示它们之间的关系。创建一个间距系统来帮助通过重复构建一致性并避免使用随机数字可能会有所帮助。此系统基于默认的浏览器字体大小（1rem 或 16px）并使用涵盖大多数场景的不同值

• 0.25rem (4px)
• 0.5rem (8px)
• 1rem (16px)
• 2rem (32px)
• 4rem (64px)

你可以使用 Sass 或 CSS 变量，以便在整个项目中保持值的一致性。系统可能看起来像这样——但使用你习惯的任何东西，因为 命名事物很困难

• $space-sm
• $space-med
• $space-lg
• $space-xl
• $space-xxl

颜色传达个性并引起注意

颜色极大地影响网站的个性。如果使用得当，它会赋予页面生命和情感；如果使用不当，它会分散对内容的注意力，更糟糕的是，会使其无法访问。颜色与大多数设计原则密切相关。它可以用来通过引导用户的目光来创建移动，也可以用来通过引起对最重要的行动项的关注来创建强调。

关于选择颜色的说明

在颜色方面，可能很难知道从哪里开始。为了帮助你，你可以使用一个四步过程来指导你的颜色选择，并为网站构建一个 调色板。

步骤 1：了解你的心情

在选择颜色之前，你必须了解网站和品牌的基调或态度。查看你的内容，并确定你想传达什么。它是有趣的、信息丰富的、复古的、喧闹的、沉闷的？通常，你可以将网站的基调归结为几个形容词。例如，你可能会将 北面 概括为冒险和粗犷，而 苹果 则是极简主义和美丽。

步骤 2：找到你的主色

记住你的心情，试着想象一种代表它的颜色。从颜色的饱和度（颜色的强度）和亮度（颜色与白色或黑色的接近程度）开始。如果你的心情是乐观或闪耀的，那么较浅（更饱和）的颜色可能更合适。如果你的心情是严肃或保守的，那么较深（不太饱和）的颜色更好。

接下来，选择一个色相。色相指的是大多数人认为的颜色——它在色轮的旋转中位于哪里？颜色的色相是赋予它最大意义的东西。人们倾向于 将色相与某些想法联系起来。例如，红色通常与力量或危险相关，而绿色则与金钱或自然相关。查看类似的网站或品牌以了解他们使用什么颜色可能会有所帮助——尽管你不必遵循他们的引导。不要害怕尝试！

步骤 3：添加辅助颜色

有时，需要两个或三个主要颜色，但这不是必需的。想想不同品牌的颜色。一些品牌使用单一颜色，而另一些品牌则有一个主色和一个或两个支持色。 可口可乐 使用它独特的红色。 宜家 主要以蓝色为主，并带有一些黄色。 汰渍 是橙色为主，带有一些蓝色和黄色。根据你网站的基调，你可能需要一些颜色。尝试使用像 Adobe Color 或 Coolors 这样的工具，它们都允许你添加一个主色，然后尝试不同的 颜色关系，例如互补或单色，以便快速查看是否有任何效果很好。

步骤 4：扩展调色板

现在您已经缩小范围并找到了主要颜色，是时候用一个调色板来扩展您的范围了，这个调色板可以为您的项目提供多样性和约束——这里有一个我发现有用的方法论。色调和阴影是这里的关键。色调是通过将您的主要颜色与白色混合制成的，而阴影是通过与黑色混合制成的。您可以快速创建一个组织系统，使用Sass 颜色函数

$main-color:          #9AE799;

$main-color-lightest: lighten($main-color, 20%);
$main-color-lighter:  lighten($main-color, 15%);
$main-color-light:    lighten($main-color, 10%);

$main-color-dark:     darken($main-color, 40%);
$main-color-darker:   darken($main-color, 50%);
$main-color-darkest:  darken($main-color, 60%);

为了完善您的调色板，您还需要一些其他颜色，比如白色和黑色。尝试使用您主要颜色的深色、近乎黑色的阴影来创建一个“浓郁的黑色”，并且在光谱的另一端，选择一些用主要颜色调和的浅灰色。为白色和黑色调和添加一些个性，有助于为您的页面创造一致的外观和感觉。

最后但并非最不重要的一点是，如果您正在开发互动产品，则应该为成功、警告和错误状态添加颜色。通常，绿色、黄色和红色适用于这些状态，但请考虑如何调整色调以使其更适合您的调色板。例如，如果您的情绪友好，并且您的基本颜色是绿色，您可能希望降低错误状态颜色的饱和度，以使红色感觉不那么负面。

您可以使用mix Sass 颜色函数来实现这一点，方法是向其提供您的基本颜色、默认错误颜色以及您要与错误颜色混合的基本颜色百分比。添加去饱和度函数有助于降低颜色的饱和度。

$success: mix($base-color, desaturate(green, 50%), 50%);
$warning: mix($base-color, desaturate(yellow, 30%), 5%);
$error:   mix($base-color, desaturate(red, 50%), 20%);

说到网页，有一个颜色原则您必须格外注意：对比度。接下来我们将介绍这方面的内容。

对比度

颜色对比度——两种颜色之间饱和度、亮度和色调的差异——是确保网页对视力低下或色盲人士无障碍的重要设计原则。通过确保您的文本与其在网站上的背景之间有足够的对比度，您的网站将对所有视力正常的用户更易访问。在关注无障碍性时，请务必遵循W3C的网页内容无障碍指南 (WCAG) 中提供的颜色对比度指南。有很多工具可以帮助您遵循这些指南，包括 Chrome 开发者工具中的检查面板。

---

现在，是时候将这些原则付诸实践了！您可以使用这些流程和 CSS 提示来帮助消除设计中的猜测，并创建更好的解决方案。从您熟悉的内容开始，最终，这里提到的设计原则将变得自然而然。

如果您正在寻找更多实用技巧，Adam Wathan 和 Steve Schoger 撰写了关于他们的一些最喜欢的技巧。