开发人员的设计原理：流程和CSS提示更好的网页设计

人人都能烹饪，这在技术上是成立的。但真正懂得如何烹制美味佳肴，与随意将几种食材扔进锅里碰运气，两者之间存在差异。网页开发亦是如此，你可能了解“食材”——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></h1> 到 <h6></h6> 逐渐减小），但 CSS 为更大的创造力打开了大门。通过为 <h></h> 标签赋予更大的字体大小，你可以快速建立标题级别之间更大的尺寸差异——从而形成更多层次结构。为了创建更多变化，你还可以更改颜色、text-align 和 text-transform 属性。

关于字体选择的说明

===========================================================================================================================================================================================================================================================================

====================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================

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

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

用于提高可读性的 CSS 属性

• 主要段落的字体大小应在 16px 和 18px（1em 和 1.25em）之间，具体取决于你选择的字体。

• 手动设置行高（两行文本之间的垂直空间），使你的文本不那么拥挤，更容易阅读。对于标题，从 line-height: 1.25（即字体大小的 1.25 倍）开始，段落至少为 1.5（但不超过 1.9），然后根据需要调整。文本行越长，行高就应该越大。为了保持文本的灵活性，避免在行高添加单位。没有单位，你设置的行高将与你的字体大小成比例。例如，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：了解你的情绪

在选择颜色之前，你必须了解你网站和品牌的基调或态度。查看你的内容，并决定你试图传达什么。它是有趣的、信息丰富的、复古的、响亮的、阴沉的吗？通常，你可以将网站的基调归纳为几个形容词。例如，你可以将 The North Face 总结为冒险和粗犷的，而 Apple 则为极简和美丽的。

步骤 2：找到你的主色

记住你的情绪，尝试想象一种代表它的颜色。从颜色的饱和度（颜色的强度）和亮度（颜色与白色或黑色的接近程度）开始。如果你的情绪是乐观或华丽的，那么较浅（更饱和）的颜色可能是最好的。如果你的情绪是严肃或含蓄的，那么较暗（不太饱和）的颜色更好。

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

步骤 3：添加辅助色

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

步骤 4：扩展你的调色板

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

<code>$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%);</code>

为了完善你的调色板，你还需要几种颜色，例如白色和黑色。尝试使用你的主要颜色的深色、几乎黑色的阴影来创建“浓郁的黑色”，并在光谱的另一端，选择几种用你的主要颜色着色的浅灰色。为白色和黑色着色会为你的页面添加更多个性，并有助于创建连贯的外观和感觉。

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

你可以使用 mix Sass 颜色函数来实现这一点，方法是提供你的基色、默认错误颜色以及你想要与错误颜色混合的基色百分比。添加 desaturate 函数有助于降低颜色的色调：

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

在网络方面，有一个颜色原则你必须特别注意：对比度。这就是我们接下来要介绍的内容。

对比度

颜色对比度——两种颜色之间饱和度、亮度和色相的差异——是一个重要的设计原则，可确保网络对视力低下或色盲者具有可访问性。通过确保你的文本与其网站上的任何背景之间存在足够的对比度，将使所有视力正常的用户都能更好地访问。在查看可访问性时，请务必遵循 W3C 的 Web 内容可访问性指南 (WCAG) 中提供的颜色对比度指南。有很多工具可以帮助你遵循这些指南，包括 Chrome 开发工具中的检查面板。

现在，是时候将这些原则付诸实践了！你可以使用这些流程和 CSS 提示来帮助消除设计中的猜测成分，并创建更好的解决方案。从你熟悉的内容开始，最终，此处提到的设计原则将成为你的第二天性。

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

以上是开发人员的设计原理：流程和CSS提示更好的网页设计的详细内容。更多信息请关注PHP中文网其他相关文章！