你好-Web-设计-全-

你好 Web 设计（全）

原文：zh.annas-archive.org/md5/acc2947759a64fa52f8dfb1b8385dc44

译者：飞龙

协议：CC BY-NC-SA 4.0

前言

这不是一本典型的初学者设计书籍。

初学者的书籍通常假设你最终会成为专家。编程书籍假设你想从事编程或计算机工程工作；设计书籍假设你想成为一名成熟的设计师。

但是，如果你只是想学习足够的设计知识来提升你现有的职业怎么办？

我相信超越当前专注领域来提升技能的力量。我的个人经历不属于任何单一的类别——我拥有艺术与设计学位，使用 Python 开发网站和应用程序，并且创办并管理过一家初创公司。在许多领域拥有“足够”知识对我的职业生涯至关重要。

就像设计师通过学习一点编程受益一样，程序员（以及营销人员、产品经理、销售人员等等）也能从学习一些设计知识中受益。即使你不专注于设计，你也会在某个时刻需要设计——无论是制作幻灯片、创建程序和项目的界面，还是建立个人网站。如果你与设计师合作，拥有一些设计经验将为你与他们沟通并理解他们的工作打下更好的基础。

Hello Web Design的目的不是让你成为一名设计师——它的目标是让你在进行设计时感到更舒适。

本书仅专注于视觉方面：书中不会涉及 HTML、CSS 或前端开发与编码。我们将致力于让你的设计更加美观，几乎更重要的是，如何让它们更好地发挥作用。

设计是关于解决问题的。即使在你觉得自己只是在让事物变得“更漂亮”的地方（比如在做幻灯片时），你实际上是在努力让幻灯片中的信息更容易阅读和理解。在我们的网页界面中，我们真的想让事物看起来更加自然，使用起来更轻松——好的设计对于吸引并保持新用户，以及提升我们设计的成功率至关重要。

在本书中，我们不仅会探讨理论（以及一些原则背后的原因），还会提供一些常见设计问题的快捷解决方案。例如，我会分享一些色彩理论，同时还会提供一些资源，帮助你选择美观的配色方案，而不需要从零开始。这个模式会贯穿全书——很多快捷方式，并且一些关于这些快捷方式为何有效的见解。

我的希望是，在读完本书后，你能在设计方面更加自信，然后如果你想成为一名传统的设计师，可以跳入更多传统的初学者书籍，全面学习设计理论和实践。或者，你也可以仅仅用这本书来提升你当前的职业技能。无论哪种情况，到本书结束时，你都会成为一个更强大的设计师。

让我们开始吧！

—Tracy

第一章

如果你只读一章，那就读这一章

如果你碰到这本书，并且只有时间读一章，那就读这一章吧。为什么？因为它向你展示了改进设计的最快方法。

设计的效果比外观更重要

我知道你可能是来这本书寻求如何改进设计外观的帮助，但请耐心听我说一下：你的设计如何工作比它看起来如何更重要。

以 Craigslist 为例。多年来，该网站基本没有变化，设计看起来非常过时（图 1-1）。

如果外观最重要的话，Craigslist 很早就会被其他新兴的、现代化的分类广告网站淘汰。

Craigslist 之所以依然是分类广告的领先者，仅仅因为它简单直观，使用起来非常方便。没有花哨的效果或令人分心的横幅广告，Craigslist 使发布广告和搜索现有广告变得非常简单。

图 1-1： Craigslist 即使没有现代化的网页设计，依然是行业的佼佼者。

如果你担心你的网站太简单，看起来不够“现代”——也就是说，不符合所有最新的趋势，而这些趋势不一定代表“好的”网站设计——我在这里安慰你，外观远不如设计是否能达到你和用户的目标来得重要。

确保你的设计能带来良好的用户体验有两个重要步骤：知道你希望设计达成的目标，并从他人那里获得反馈。

确定什么是成功的标志

在你确定设计目标之前，你无法评估设计的效果。不同类型的设计有不同的目标。例如，你可能希望访客：

填写表格。
平均花费至少 30 秒浏览一个页面。
订阅新闻通讯。
留下评论。

你可能在用户体验书籍中听说过“转化率”这个术语，这是一个高大上的说法，意思是：“有多少人做了我希望他们做的事情？”一旦你为你的网站定义了“成功”的标准，就能做出更好的设计决策，衡量当前设计的效果，并提高转化率。

请其他人查看并评价你的设计

如果你对自己新学的设计技能感到害羞，可能不愿意将自己的设计展示给别人看。万一他们不喜欢怎么办？万一他们说些负面的评价呢？

克服这些不安全感，将你的设计展示给那些不是你的人，将带来设计上最大的改进。作为设计师，你无法客观评估你的设计效果。你会对潜在问题视而不见。

通过将你的设计展示给他人，你能够看到人们是否能成功地完成你想要他们做的事情，以及网站的任何部分是否让人感到困惑。你也可能会得到一些点赞。

反馈是有用的，但不要觉得你需要遵循每个建议或处理你收到的每个评论。把它们存放在心里，或者列个清单，等你听取了几个人的意见后再处理这些变化。有时候，你会从两个人那里收到相互矛盾的反馈，这是正常的（如果其中一个人的反馈更贴近你的目标用户画像，那么那个人的反馈更为重要！）。也许存在第三种方法能让每个人都满意，或者也许现在根本不需要为那个问题担忧。

快速提高设计的技巧

“但 Tracy，”你可能会说，“我也希望我的设计不仅仅更好用，还要更好看。”

我明白你的意思！你设计的外观同样会影响用户体验，你可以通过牢记一个关键概念来改进你的设计（这个概念适用于很多方面）：减少杂乱。

减少杂乱，创造更美观的设计

杂乱——就像你在繁忙、杂乱无章的设计中看到的那样——是良好用户体验的祸根，清理杂乱可以让你的网站既看起来更好，也运作得更好。

在此基础上，我们将介绍一些简短、易于理解的原则，稍后我们会更深入地探讨：

使用网格

大多数设计通过使用网格来减少杂乱，网格为你的设计创建了一个框架，帮助定位对象并无意识地营造一种秩序感。小的像素差异会让设计看起来显得杂乱无章和不专业。

我们将在第二章，第 2.1 节中更深入地讨论这个话题。

只选几种颜色

充满各种颜色的设计（24 种蓝色、5 种红色等等）看起来很繁杂。设定一个特定的色彩调色板，并在设计中只使用这些颜色，可以创造出更加统一的外观。

我们将在第二章，第 2.2 节中更深入地讨论这个话题。

限制使用两种字体

虽然你可以为你的导航使用一种字体，为文本使用另一种字体，为按钮使用另一种字体，为标题使用另一种字体——这会让你的设计显得杂乱无章。限制你使用的字体数量，并使用加粗、斜体、大写字母及其他变换来创造多样性并表示强调。

我们将在第二章，第 2.3 节中更深入地讨论这个话题。

简化你的文本

大段文本看起来像是杂乱。简化句子，并将段落限制在两到三句话内。你还可以通过添加项目符号和标题来分割文本。网络上的读者倾向于浏览文本，而较短的段落能让更多读者继续阅读。

我们将在第二章、第 2.6 节中深入讨论这个话题。

添加空白

空白是减少杂乱的终极法宝。新设计师常犯的一个最大错误是将元素之间放得太近。通过在元素之间（内容、小部件、表单、按钮、图片、文本等）添加空白，可以使设计更加易于阅读，更现代、通透并富有吸引力。

我们将在第二章、第 2.4 节中深入讨论这个话题。

上述所有内容可以浓缩为一句话：

**确保你的设计效果良好，

并尽可能减少杂乱。**

这些建议将帮助你走上创建更好设计的正确道路，接下来的章节会更详细地探讨这些指南。

第二章

理论与设计原则

我们来深入探讨一下这个信息，好吗？

本章的每一节都将平衡理论（让你了解背景和事物的原因）、现实生活中的例子（让你看到这些原则的应用）以及快捷方式（让你能够快速应用这些原则，而无需从头开始）。

我会给你一些规则和建议供你记住。当然，每个规则都有例外，每个规则也可以被打破。因为这些章节是面向初学者的，我们将遵循这些原则，但随着你作为设计师的成长，你会学会什么时候可以打破一些规则。

在我们深入每一节内容时，我们将把这些原则应用到这个小部件上（如图 2-1所示）。

图 2-1： 一个（相当丑的）小部件。我们来改善一下它的外观吧，怎么样？

它现在看起来不怎么样，但随着我们应用所学的内容，它会逐渐变得更好。

让我们开始吧！

第 2.1 节

网格

我们的第一个原则很简单：对齐！

你可能听过这个常见的设计师抱怨：

设计师制作了一个像素完美的模型，并交给开发者来实现。开发者根据设计建造了该设计，但实际的设计与模型的差距只有两个像素！

“傻设计师，”开发者说。“为什么这么小的差异会重要？它基本上是一样的。”

事情是这样的——像素级的小差异确实很重要，尤其是在页面元素方面。如果一个元素接近但没有完全与另一个元素对齐，它可能会产生一点微小的不均匀感，而这种小小的混乱会导致不安和杂乱的感觉（图 2-2）。

图 2-2： 这两张截图基本相同，但左边那张，所有东西稍微不对齐，看起来不那么协调和专业。

确保元素之间对齐的最简单方法是给我们的设计加上一个网格。网格为我们的应用添加了一个看不见的框架，这是我们用来设置和排列元素的支架，使得整体布局看起来整洁有序。将元素对齐到基础网格上，将帮助你在整个设计中实现对齐和一致性。

纽约时报 网站 (图 2-3) 使用五个主要的列来组织大量信息。列与列之间的红色高亮部分是缝隙。网格中的对象可以跨越多个列，有些对象可能会突破网格，但一切大致上都遵循网格。

你可以在设计中使用任意数量的列 (图 2-4)，但 12 列网格 (图 2-5) 是最常用的，因为它的通用性。

网格还帮助你为网站布局创建一个计划，因为它限制了你将元素放置在特定区域，而不是让你自由选择整个页面的任何地方。双赢三赢。

本质上：有很多元素吗？将它们对齐（水平、垂直，或两者）以创建一种整体感。

图 2-3: 纽约时报 网站使用网格有效地组织大量元素，并在主页上展示项目。

图 2-4: Gridset 网站演示了带或不带引导线的复合 4+6 网格。

图 2-5: Bootstrap CSS 框架中的 12 列网格系统。

快捷键

这里的理论很简单——只需对齐元素——但有很多工具可以帮助确保我们使用网格。

模型程序中的网格

如果你正在设计一些不会用 CSS 构建的东西，你需要为设计添加引导线。

所有模型程序——如 Photoshop、Sketch 或 GIMP——都允许你设置浮动的引导线，使得对齐设计元素到引导线变得轻松。

如果你在像 Photoshop 这样的程序中制作网站模型，可以使用网格模板来布置网站，使用与你的网站框架系统中相同的列数 (图 2-6)。

图 2-6: 在 Photoshop 中，可以通过拖动屏幕左侧和顶部的标尺来设置引导线。

引导线在大多数幻灯片程序和其他简单布局中也可以访问，如 Keynote (图 2-7)。

图 2-7: Keynote 也允许你从屏幕上的标尺拉出引导线。许多其他程序也有类似的选项。

对于幻灯片，你无需为系统添加一个完整的 12 列网格——图 2-7 中的幻灯片只有几个引导线，足以保持不同页面上的元素对齐。

然而，如果你正在设计一些更复杂的内容，你可以下载一些已设置多列的模板，如 960.gs (hellobks.com/hwd/4) 系统。

网页设计中的网格

我强烈推荐使用带有网格的 CSS 框架，如 Bootstrap (hellobks.com/hwd/5), Foundation (hellobks.com/hwd/6), Skeleton (hellobks.com/hwd/7), mini.css (hellobks.com/hwd/8), 或 PureCSS (hellobks.com/hwd/9) (图 2-8)。

图 2-8: Bootstrap CSS 框架中包含的网格系统。

通过使用 HTML 类将设计约束在底层 CSS 网格中，元素将自然而然地与页面上的其他元素对齐 (图 2-9)。只需记住，CSS 中可能添加的额外边距或内边距可能会导致元素错位。

图 2-9： Bootstrap 中用于对齐和设置对象在底层网格中的一些 CSS 类。

CSS 正在获得一个新元素，叫做 CSS 网格（多方便啊！），它让元素无需使用 CSS 框架就能轻松地对齐到网格中。在本书写作时，CSS 网格已经接近发布，并且大多数浏览器都已经覆盖了它。尽管本书不涉及 CSS，但使用 CSS 网格会让实现基于网格的设计变得更加简单 (图 2-10)。

图 2-10： Mozilla 开发者网络上的 CSS 网格文档 (hellobks.com/hwd/10)

现实生活中的例子

记得我们在本章开始时介绍的小部件吗？让我们通过对齐元素来更新设计 (图 2-11)。

图 2-11： 左边是原始小部件，右边是我们对齐了盒子中元素的边缘，使其看起来更干净，少了一些混乱感。

尽管小部件仍然存在问题（毕竟我们才刚刚开始），但你可以看到，这一点小小的变化已经带来了显著的积极效果。所有的内部元素现在都已对齐：标题、内容、输入框、按钮。由于表单中的内边距，输入框的占位符文字稍微偏移了一些，但它的容器元素已对齐到网格。整体感觉稍微更加一致，混乱感减少了一些。

再次简而言之：只需将元素排列整齐。添加引导线，将元素对齐到一个看不见的网格，并注意那些细微的像素差异和不对齐的地方，这些都会让设计显得更混乱。偶尔打破规则，跳出网格也是可以的（哈），但对于大多数元素来说，使用网格会让设计看起来更干净、更有条理。

接下来，我们来聊聊颜色！

第 2.2 节

颜色

颜色对设计非常重要，但它也是一个可能让人感到不知所措的话题。我们可以触手可及地使用所有的彩虹色，怎样才能选择合适的颜色呢？这就是为什么色彩理论是设计专业学生一个学期课程的原因。

在我自己的色彩理论课程中，我必须在 20 个色样中创建一个从黑到白的完美渐变。实现这个目标的最佳方法是涂 200 多个色样：先用黑色涂料，加一滴白色涂料，涂一个色样……再加一滴白色涂料，再涂一个色样……然后将这些数百个色样缩减为 20 个完美均匀的从白到黑的步骤。

别担心，我不会让你经历这些的。看看你通过阅读这本书节省了多少时间和精力！

色彩理论课程涉及很多术语，这里我们将跳过——CMYK 与 RGB 色彩、色彩和谐理论与色轮、三色与类色——这些内容可能会让人感到非常复杂。我将提供一个非常广泛的色彩理论概览，旨在让你尽可能快地适应；在本章的最后，我将提供一些资源，供你深入学习我们所涉及的内容。

红色： 攻击性、重要、激情

黄色： 友好、快乐、专注

蓝色： 值得信赖、舒适、放松

粉色： 顽皮、天真、年轻

橙色： 充满活力、顽皮、实惠

绿色： 成长、自然、成功

紫色： 奢华、浪漫、神秘

棕色： 稳定、乡村、自然

黑色： 强大、复杂、前卫

灰色： 正式、中立、专业

白色： 纯洁、无菌、健康

象牙色： 安静、冷静、优雅

首先是色彩心理学，这是一种色彩“技巧”，你可以用它来在作品中唤起各种情感。颜色能影响你设计的感受和认知。一般来说，以下是某些颜色唤起的情感：

红色： 攻击性、重要性、激情
橙色： 活力、顽皮、实惠
黄色： 友善、幸福、专注
绿色： 成长、大自然、成功
蓝色： 信任、舒适、放松
紫色： 奢华、浪漫、神秘
粉色： 顽皮、天真、青春
棕色： 稳定、乡村、自然
黑色： 力量、复杂、前卫
白色： 美德、无菌、健康
灰色： 正式、中立、专业
象牙色： 安静、冷静、优雅

当你希望你的设计唤起成功和稳定的感觉时，绿色和蓝色是非常好的选择。一个现代酒店的网站可能会使用黑色和紫色。一般来说，温暖的颜色（红色、黄色）更具活力和激动人心，而冷色调（蓝色、紫色）则更稳定和宁静。

值得注意的是，这些是西方文化的联想——如果你在为其他文化设计，最好研究一下该文化对颜色的特殊联想。例如，在中国，白色是丧服色，而在西方文化中则是黑色。

你也可以尝试色彩的鲜艳度。像“Keep Portland Weird”页面上使用的色调（Oblio 的 Keep Earthquakes Weird 网站）比 Citysets 网站上使用的明亮和鲜艳的色调更加平静和微妙。在色彩心理学中，蓝色让人放松，但明亮的、耀眼的蓝色感觉更具活力(图 2-12)。

这些不是硬性规则。你当然可以使用红色来创建一个冷静而优雅的网站——然而，这些色彩心理学的技巧为你提供了一个起点，这样你就不会在一开始就被大量的颜色选项所压倒。

图 2-12： 较少鲜艳的色调比明亮、耀眼的色调更加平静和不那么有活力。

快捷方式

现在我们已经了解了一些基础知识，让我们来看看一些可以帮助我们节省时间的快捷方式。

限制你的配色方案

避免随意选择颜色进行设计。为你的网站选择两到四种颜色，并将所有元素限制在你的调色板颜色范围内，这样能让你的网站感觉不那么杂乱(图 2-13)。

使用色彩让设计更有“突出感”

在创建色彩调色板时，避免冲动地选择所有明亮的颜色。使用大部分较灰或更中性的颜色，并搭配一个“突出”颜色，可以更容易突出重要元素，而不会造成设计上的混乱(图 2-14)。

注意对比度

灰色文本在白色背景上看起来很漂亮，但阅读起来是噩梦，尤其是对于可能有视觉障碍的读者(图 2-15)。如果没有足够的对比度，彩色文本在彩色背景上也会让你陷入困境。若有疑虑，可以使用像 WebAIM 这样的色彩对比度检查工具（hellobks.com/hwd/25)来确保文本的可读性。

图 2-13： Siminki 网站有一个有限的配色方案，使其看起来更加统一。

图 2-14： Habita 网站有强烈的颜色突出。

图 2-15： 白色背景上的浅灰色文本对比度低，阅读起来可能很困难。

使用色彩调色板网站

从头开始创建一个色彩调色板可能需要很长时间和大量的思考。幸运的是，很多网站专门帮助你选择设计所用的色彩调色板。

Adobe Color CC（hellobks.com/hwd/28)根据你选择的基础色和各种色彩方案来构建一个调色板——我推荐使用“互补色”(图 2-16)。

Material Design Palette 网站（hellobks.com/hwd/29)会自动展示色彩在示例设计中的效果，这在你努力想象两种颜色如何搭配时非常有帮助(图 2-17)。

新选择是 Colormind（hellobks.com/hwd/30），它使用深度学习来生成配色方案。你可以在设置一个或多个特定颜色后循环使用配色方案，或者生成配色方案 （图 2-18）。

图 2-16: Adobe Color CC（hellobks.com/hwd/28）

图 2-17: 材料设计配色网站（hellobks.com/hwd/29）

Adobe 产品截图已获得 Adobe Systems Incorporated 的许可。

本页面的部分内容是由 Google 创建和共享，并根据创作共享 3.0 署名许可使用。

图 2-18: Colormind（hellobks.com/hwd/30）

请记住，如果你希望的话，可以轻微调整预设配色方案中的颜色 —— 它们并非一成不变。我经常发现，为了在设计中获得良好的对比度，我需要将某个色调调亮或调暗。

真实生活例子

不要过于固执于特定的配色方案 —— 一旦你将颜色实施到设计中，你可能会发现你最初喜欢的颜色效果并不如你所希望的那样好。我通常会经历至少几个配色方案，直到找到一个感觉最好的。

让我们通过几种不同的配色方案来运行我们的小部件 （图 2-19）。

最后一个选项为我们的文本增加了良好的对比度，为我们的按钮提供了一个漂亮的“突显”颜色，并且有一个舒适的绿色背景 —— 看起来非常不错，肯定比完全没有颜色的原始版本要好！

图 2-19: 应用不同的想法和选项，直到找到合适的东西。

想要阅读更多吗？这篇来自Smashing Magazine的文章，“网页开发人员的色彩指南”，是我对网页色彩理论最喜欢的文章：hellobks.com/hwd/31。

有了数百万种颜色，要缩小选项以找到适合你网站的漂亮配色方案可能感到很困难。通过使用我们提到的选项生成的配色方案，可以为你的设计提供一个和谐的配色方案，从而为自己减轻难度。

接下来是另一个重要主题 —— 排版和文字！

第 2.3 节

排版

如果你的设计包含任何形式的文字，你就在处理排版。根据维基百科的说法，“排版是安排排版以使书面语言在显示时清晰、可读且吸引人的艺术和技术。” 简单来说，让你的文字既易于阅读又令人愉悦。

字体可以很漂亮，但有时难以阅读（使用时髦的细、苍白灰色字体的网站），但也可以很容易阅读，却不那么令人愉悦（几乎任何使用默认系统字体的网站）。在这两个领域取得成功似乎很复杂，但有很多很好的快捷方式可以让它变得更简单。

我们本可以用整个学期来讲解排版理论、字体历史等内容。相反，我将这些信息浓缩成一个简短的部分。

你可能会想知道字体和字形之间的区别。严格来说，字形是一个“家族”，或者说是字体的集合。Arial是一个字形，Arial Bold是一个字体。尽管如此，这两个术语经常被交替使用（除非你是一个排版师），我们在这里也是这么做的。

排版基础

让我们从一些关于排版的重要术语和概念开始。

字体分类

字体的主要区别在于是否包含衬线，即字母末端的小装饰部分。本书的正文使用衬线字体（Tisa Pro），而标题使用无衬线字体（字面上是没有衬线——这里的标题字体是 Tisa Sans Pro）(图 2-20)。

图 2-20： 无衬线字体与衬线字体的对比。左侧为 Tisa Sans Pro，右侧为 Tisa Pro。

通常，衬线字体在印刷文本中更易于阅读，而无衬线字体在屏幕上更易于阅读。印刷文本中的衬线帮助眼睛快速读取字母，而在屏幕上，微小的衬线更难呈现，反而影响了可读性（不过，随着新型高清晰度屏幕的出现，这一区别正在消失）。

字体可以进一步细分为几个类别(图 2-21)：

厚衬线字体： 衬线像“厚板”一样——比典型的衬线更加方形和有角度。
等宽字体： 每个字母占据相同的空间。在其他字形中，像“i”这样的细字母占用的空间比“m”这样的宽字母少。
展示字体： 花哨、通常带有弯曲的字体，虽然不太适合阅读，但在标题或大字号文本中适度使用时，能够起到强调作用。
手写字体： 看起来像某人手写的字体。这些字体通常与展示字体一起归类。

图 2-21： 厚衬线字体（Chaparral Pro）、等宽字体（Courier New）、展示字体（Buttermilk）、手写字体（HanziPen TC）。

行距与行高

确保文本行之间的间距不要太小，否则会产生杂乱的感觉。段落中行与行之间的空间在排版学中被称为“行距”（来自于排字工人曾在文本行之间加入铅条的历史）。在 CSS 中，相同的概念被称为“行高”(图 2-22)。

目标是找到恰到好处的间距——如果文本行之间的距离太近或太远，段落就会难以阅读。给文本行留出一点间距，可以提高可读性并减少杂乱的感觉，但不要留得太多，以免难以阅读。1.6 是一个不错的起始比率（例如，12px 字体大小配 19.2px 行高，14px 字体大小配 22.4px 行高）。你可以随意调整间距，找到最适合你特定情况的感觉。

图 2-22：文本可能太近或太远，影响可读性。中间的示例最易阅读。

字距和字间距

字距是调整单个字母之间间距的过程，而字间距是所有字母之间的间距（调整字间距会影响每个字母，而字距只影响一对字母）。和行距一样，我们既不希望间距过多也不希望过少。幸运的是，浏览器显示文本时默认的设置通常是比较理想的，但 CSS 允许你使用 letterspacing 属性调整字母之间的间距。图形程序也允许你调整字距。大标题有时通过去掉一些间距看起来会更好，而小字可能会受益于增加一些间距(图 2-23)。

图 2-23：字母间距太近会使单词和句子更难阅读。

排版原则

现在，让我们来讨论一些在进行排版时需要记住的重要原则。

限制设计使用两种字体

使用大量字体可能会导致混乱和杂乱。通过选择一种字体用于标题，另一种用于内容来简化设计；这样会使你的设计看起来更简洁。你可以使用粗体、斜体、大写字母以及其他样式化处理来在文本中创造更多样式(图 2-24)。

图 2-24：大量字体会让设计显得混乱（左）。较少的字体更容易管理，看起来也更专业。

避免对齐或居中文本

对齐文本是完全填充在一列中的文本；两侧边距都要对齐，而不仅仅是一个边距。基于第 2.1 节，我们讨论了对齐内容，你可能会想使用对齐文本来在文本右侧创建一个均匀的线条(图 2-25)。

然而，对齐文本会引发一些严重问题：

为了适应列宽而拉伸单词，可能会在单词之间添加不美观的大空格。
词语之间的大空格可能会在多行文本中形成不美观的“白色河流”(图 2-26)。

图 2-25：“右对齐”文本（右），比对齐文本（左）更容易阅读。

图 2-26： 未经过连字符处理的对齐文本（左侧）有不美观的空隙和白色空间流（标记为红色）。

除非你有大量的时间进行调整，否则使用对齐文本并不值得。使用左对齐文本（也称为右边不对齐文本）可以确保文本的易读性。

居中文本可能会比较难以处理

居中对齐的文本适合用作标题，但如果不确定时，最好将文本左对齐，并依据底层网格进行排版，以便让文本整齐排列，便于阅读。居中对齐的段落尤其难以阅读，因为每一行的起始位置都会发生变化 (图 2-27)。

图 2-27： 居中内容的不平整左边缘使其更加难以阅读。

行长度

如果每句话的字符数超过 75 或者少于 45，那么段落将变得难以阅读。确保段落的宽度（或字体大小）合适，以便每行的长度恰到好处，确保最大的可读性 (图 2-28)。

图 2-28： 段落中过长的行让阅读变得困难。

快捷键

现在你已经掌握了这些新知识，让我们来了解一些快捷键，这些快捷键将让你的排版设计变得更加高效。

免费字体资源

最美丽的字体通常需要支付高昂费用——对于专业设计师来说是值得的，但对于像我们这样的业余设计师来说，可能就不那么划算了。

幸运的是，像 Google Fonts (hellobks.com/hwd/32) (图 2-29) 和 Adobe Fonts (hellobks.com/hwd/33) (图 2-30) 这样的站点为我们提供了美丽的字体选项，可以用于在线和印刷设计。Google Fonts 允许你下载字体，而 Adobe 的 Creative Cloud 功能则使得 Adobe Fonts 的网络字体可以在设计和幻灯片程序中使用。

图 2-29： Google 字体 (hellobks.com/hwd/32)

图 2-30： Adobe 字体 (hellobks.com/hwd/33)

Adobe 产品截图经 Adobe 系统公司许可转载。

本页面的部分内容摘自 Google 创作并共享的作品，并根据创意共享 3.0 署名许可协议使用。

还有其他免费的字体网站，但这两个网站一直以来都拥有最大且易于使用的字体库，且看起来非常好。

精选字体网站

Google 字体和 Adobe 字体中存在成千上万种字体和字形——你如何为你的设计选择最佳的字体？

与其浏览成百上千的选项，一遍遍读着相同的默认句子（保证让任何人的眼睛都要瞪直了），不如查看那些设计师精心挑选的免费字体网站，以缩小你的选择范围。这些网站让你更容易选择适合设计的字体，并帮助你挑选出美观且专业设计的字体 (图 2-31)。

Beautiful Web Type (hellobks.com/hwd/34)		Typewolf (hellobks.com/hwd/35)

Brick.im (hellobks.com/hwd/36)		Font Pair (hellobks.com/hwd/37)

图 2-31： 推荐免费字体并挑选最佳选项的各类网站。

真实案例

让我们选一个组件，并仅限于使用两种字体：一种衬线字体和一种无衬线字体 (图 2-32)。

图 2-32： 新的、统一的字体使我们的组件看起来更专业。

新的字体（Tisa Pro 和 Tisa Sans Pro）比组件之前使用的四种独立字体更专业且更和谐。

像颜色一样，排版是一个巨大且迷人的主题。希望这一简短的章节能为你提供一个良好的概览，帮助你入门，并为进一步学习提供一个良好的平台。

通过将你的字体选择缩小到那些已经被他人验证过的字体，并减少设计中的字体数量，你就能迈向具有美丽排版的设计。

接下来，我们将讨论白色空间以及如何为设计提供呼吸空间。

第 2.4 节

白色空间

如果你只使用一种工具来改善你的设计，我保证白色空间会带来最大的变化。白色空间是终极杂乱减少器。

也称为负空间，白色空间是空白区域（不一定是白色）。本质上，白色空间是页面上留白的区域，以及元素之间的空间 (图 2-33、2-34 和 2-35)。

在设计时，你可能会有填充设计内容的冲动，比如信息、链接和其他有用的元素。毕竟，空白区域可能会让人觉得是浪费的空间，是你可以添加更多内容的地方，以说服读者停留更久、使用你的网站或购买你的产品。为什么不填满这个空间呢？

然而，一个杂乱无章、拥挤的网站——即使它包含了更多信息——也比一个在简洁和呼吸空间方面有所取舍的网站表现得更差。白色空间对于改善设计的感知和功能至关重要。

图 2-33： 让我们来检查一下 Squarespace 网站上的白色空间。

图 2-34： 红色高亮部分显示的白色空间是页面上没有内容的区域。背景图像和纹理通常被视为白色空间。

图 2-35： 白色空间也指元素和文本行之间的空间。

白色空间基础

下面是一些白色空间重要性的额外原因。

白色空间提升理解力

设计拥挤的网站往往让用户难以跟随，并且过多信息让人感到压力。简洁的网站设计能让用户更轻松地消化你展示的内容，而不会被多余、不必要的细节所困扰 (图 2-36)。

图 2-36： Foursquare 网站有丰富的白色空间，清楚地引导用户知道该阅读什么和接下来做什么。简洁性使设计更易理解。

白色空间提升可读性

我们将重复一些在上一节中讲过的信息，以确保这些内容能记住。

还记得我们在排版部分讲过行间距（行与行之间的空间）吗？以行间距形式呈现的白色空间可以提升可读性。行间距过小会把句子挤在一起，而行间距过大会使可读性下降——这正是一个需要寻找到“恰到好处”的情况。增加文本和元素之间的空间，有助于用户理解你要表达的内容 (图 2-37)。

图 2-37： 行与行之间空间太小的段落难以阅读。

同样，字母之间的空间（字距）也很重要。确保字母之间不要过于紧密，保留足够的空间，可以让文本更易读 (图 2-38)。

图 2-38： 字母之间距离过近也很难阅读。增加一些间距可以提升可读性。

白色空间提升行动号召效果

更多的元素拥挤在同一空间中，会让用户难以辨识你的行动号召（也称为 CTA）。无论你希望读者关注哪个元素，它如果拥有更多的白色空间，便更容易被看到和使用——这样既能吸引用户注意行动号召，又能减少来自其他元素的干扰 (图 2-39)。

图 2-39： T4S 网站中的介绍文本和按钮通过大量的白色空间突出显示。

白色空间帮助设定氛围

开放的空白空间与奢华和高质量相关，而设计中元素拥挤、空间较少则常常与节俭和混乱的氛围相关——就像繁忙的跳蚤市场和奢华品牌的店面之间的对比。

如果你想让你的设计给人一种奢华、专业、优雅或卓越的印象，可以通过宽泛地使用空白空间来增强这种印象 (图 2-40 和 2-41)。

图 2-40： 缺乏空白空间的凌乱网站给人一种廉价的感觉。

图 2-41： 专注于帆船的 Helm 网站拥有大量的开放空间，给人一种奢华的感觉。

简短理论

作为新设计师，你的本能会让你倾向于减少空间，而不是增加空间。让我们看看你可以在哪里在设计中添加空白空间。

行与行之间的空白空间

空白空间从内容层面开始。你的文本需要空间呼吸。确保给文本行足够的空间，以提高可读性 (图 2-42)。

图 2-42： 行与行之间的空白空间。

元素之间的空格

现在我们已经弄清楚了文本的排版，让我们将重点放在元素之间的间距上。这指的是内容和段落与其他段落之间，或者段落和其标题之间的空间——任何靠近另一个元素的元素 (图 2-43)。

元素之间的间距有助于将元素分开，使眼睛能够更有效地识别各个独立的组。在图 2-43中，新闻通讯注册（位于文章标题的右侧）和标题之间的空间确保了这两个元素保持独立。

图 2-43： 元素之间的空白空间。

元素组之间的空白空间

从宏观角度来看，我们还需要确保元素组之间有足够的空间。这意味着在元素列与其他列之间，行与其他行之间，以及整个页面的元素与其容器（如浏览器窗口）之间要有足够的空间 (图 2-44)。

图 2-44： 元素组之间的空白空间。

快捷方式

这里有几个简单的技巧，可以帮助你在设计中更有效地使用空白空间。

元素之间的双倍空格

使用比你认为需要的更多的空白空间！是的，确实会有“过多”的情况，但在刚开始时，使用比你认为合适的更多空白空间是一个不错的经验法则。尝试将初始直觉认为合适的空间翻倍。走得比你舒服的程度更远，休息一下，然后重新评估。一开始觉得过于宽敞的地方，可能现在会感觉自然且平衡。

确保段落之间有足够的行距

为了强调，我们再次重复我们的排版部分！记住要保持足够的行距（段落中行与行之间的垂直空白），这样你的段落才容易阅读。

现实生活中的例子

移除我个人网站上的白色空间展示了白色空间如何极大地改变设计效果。没有白色空间，网站看起来杂乱且不专业。加入白色空间，尤其是非常宽敞的中间部分，使得设计看起来更专业且经过深思熟虑(图 2-45)。

让我们在小部件中加入更多白色空间：在每一行文本之间，以及小部件中各个元素之间(图 2-46)。

这样看起来是不是整洁多了？我还调整了元素之间的间距（容器内各个元素之间的空间相同，标题和内容之间、内容和表单之间的空间也相同）。这种均匀的间距同样减少了杂乱和混乱感。

图 2-45： 在我的个人网站中加入白色空间前后的对比。轻盈的设计让页面看起来不那么杂乱。

图 2-46： 在文本行之间、元素之间以及元素周围增加白色空间有助于我们的部件看起来更加专业。

字体、颜色和元素对齐都能起到很大作用，但增加呼吸空间是你整理设计的最强工具，有助于构建更具美感的设计。

接下来，我们将从整体上探讨布局——从这些微观问题出发，开始从宏观角度看待我们的设计！

2.5 节

布局与层次结构

过去的几个部分讲解了具体概念：颜色、字体和白色空间。现在我们将考虑更抽象的概念：布局和层次结构。

布局指的是信息的排列与优先级排序；你在布局上做出的选择会影响信息传递的效果和理解程度。我们之前已经讨论了网格：通过对齐元素，减少那些可能让设计显得杂乱的像素差异。元素的位置和层次结构是布局的其他重要方面。

元素可以放在任何地方——你如何确定它们的合适位置？

作为英语读者，我们是从左到右阅读的，这意味着我们的视线自然从页面的左上角开始。研究表明，网站用户浏览网站的方式呈现出“F”形模式(图 2-47 和 2-48)。

利用这一发现，构建从页面左上角开始，接着向右和向下延伸的布局。这也是为什么大多数网站将其 logo 放在左上角，而不是底部。

图 2-47： Google Ventures 网站是“F”形布局的一个良好示例。

图 2-48： 眼动追踪热图显示了读者如何以“F”形模式浏览网站。

进入层次感！在设计时，一些元素比其他元素更重要。你的任务是建立一个视觉层次感，让读者和用户能够看出哪些项目更重要。本质上，视觉层次感引导你的受众，并帮助他们决定首先关注什么（图 2-49）。

本页面的部分内容摘自由 Google 创建并分享的作品，依据创作共用 3.0 署名许可协议使用。

图 2-49： 左侧块没有层次感。右侧通过增加一个元素的大小，使其首先引起注意。

没有层次感的页面看起来平淡无奇且无聊。有几种方法可以用来标示重要性并增加可见性：

大小： 更大的项目更重要，也更吸引眼球。
颜色： 饱和度更高的颜色比低对比度的颜色更显眼。暖色（红色、橙色、黄色）比冷色（蓝色、紫色、绿色）更显眼。
定位： 放置在左上角的项目更重要。
对比度： 对比度更大的项目比低对比度的项目更吸引眼球。
空白空间： 四周有更多空白空间的项目看起来更重要。
排版： 字体选择可以是另一个层次感的指示符。为标题使用一种字体，为内容使用另一种字体，可以形成视觉层次感。

排版在网页工作中尤为重要。以下段落没有视觉层次感，赋予每个项目相同的重要性：

我们要开派对啦！你被邀请参加 Zuni Cafe 的年度庆典。庆祝活动将在纽约的 Zuni Cafe 举行，时间为下午 6 点。要求正式着装；请回复出席。

我们可以通过增加一些空白空间来增强层次感：

我们要开派对啦！

你被邀请参加 Zuni Cafe 的年度庆典。庆祝活动将在纽约的 Zuni Cafe 举行，时间为下午 6 点。

要求正式着装；请回复出席。

一旦我们开始玩转排版和颜色，层次感变得更加明显：

我们要开派对啦！

你被邀请参加 Zuni Cafe 的年度庆典。庆祝活动将在纽约的 Zuni Cafe 举行，时间为下午 6 点。

要求正式着装；请回复出席。

这三种设计都可以阅读，但最后一种设计在视觉上最有趣，并且立刻清晰地显示了信息的层次感。

如何判断你是否正确地为设计添加了层次感？试试眯眼测试。眯起眼睛，直到设计变得模糊。

当内容消失，只剩下布局和元素的抽象呈现时，就更容易看到哪个元素最先引起注意。在 纽约时报 网站（图 2-50），logo 和图片最先吸引眼球（尤其是广告上的橙色按钮，可能并不理想，因为它分散了对网站本身的注意）。在内容部分，居中的图片和最左侧、带有最大标题文字的文章也很突出。

图 2-50： 纽约时报首页的模糊版本。当你无法阅读文本时，内容的层次结构变得更加清晰。

在进行设计时，列出所有元素并按重要性进行排序。然后查看你的设计，根据元素在设计中的展示情况对它们进行排序。这两个列表一致吗？

当我们未能建立视觉层次结构时，读者或用户就不知道从哪里开始或结束他们的浏览；这种困惑可能会降低用户参与度和转化率。设计效果将会变差。

如果某个元素需要看起来更重要，并在视觉层次中排得更高，可以根据上面提到的设计理念进行调整——改变颜色或位置，添加间距，改进排版——直到该元素在视觉上更加突出。

如果你希望打破设计中的“F”型模式，可以通过使用我们上面列出的视觉工具来建立正确的层次结构。例如，通过放大或使用更丰富的颜色将页面右上角的元素引起注意。“F”型模式是由于元素的典型位置而自然形成的层次结构，这是一个很好的起点，层次结构是我们工具箱中的一部分，可以打破这个模式，同时仍然实现自然的网页体验。

实际示例

让我们分析一下我们的组件，看看我们是如何建立视觉层次结构的（图 2-51）。

图 2-51： 我们的下载按钮使用更亮的颜色来提升其视觉层次结构。我们可不想无意中隐藏这个重要按钮！

我们首先看到的两个重要元素是标题和登录按钮。标题颜色与内容不同，并且字体较大。登录按钮的颜色比小部件其他部分更加鲜明、温暖。你可能会首先看到标题或按钮，然后浏览剩余的小部件——因此，在我们更新颜色和字体的早期部分时，已经建立了正确的层次结构。我们做得好！

我们在之前的章节中讨论了许多原则——颜色、排版和空白空间——布局是这些概念开始真正协同工作的地方。现在，我们将从单纯的视觉设计转向更多关注用户体验。

在接下来的章节中，我们将讨论内容原则以及如何通过内容和层次结构来提升设计效果！

第 2.6 节

内容

初看之下，关于内容的讨论似乎在一本关于设计的书中不太合适，但对文字和内容做出明智的选择在减少杂乱方面起着至关重要的作用。

本节涵盖内容原则和策略，帮助你创建用户愿意阅读和享受的内容，同时提高设计的有效性。

内容密集的段落容易让人产生杂乱感，尤其是在屏幕上查看内容时（而不是纸质版）。研究表明，在线读者比起完整阅读，更多倾向于浏览内容。大段的文字更可能被跳过，而不是被完全阅读（图 2-52）。

人们很少逐字阅读网页内容；他们通常是扫描页面，挑选出个别的词语和句子。

《用户如何在网页上阅读》，Nielsen Norman Group（ hellobks.com/hwd/45）*

首先，关于内容，通常少即是多。

图 2-52： 用户只有在兴趣被激发的情况下才会完整阅读网页内容，否则他们会快速浏览内容，寻找能引起他们注意的部分。

在编写网页内容时，人们容易陷入囊括每个可能细节并使用复杂、专业词汇的诱惑。但更好的做法是少写一些，使用更简单、更清晰的词语，帮助读者通过最少的文字理解你要表达的意思。大段的文字是杂乱的标志——一个很好的经验法则是每段不超过两到三句话。

面对一大段信息时，尽量将其简化并缩短。让我们来看一个来自 《简单且可用的网页、移动和交互设计》（Giles Colborne 著）中的好例子（《hellobks.com/hwd/46》）。

请注意，尽管 Chrome 浏览器在 Mac 和 Windows 操作系统上都得到了支持，但为了获得最佳效果，建议所有该网站的用户切换到最新版的 Firefox 浏览器。

虽然上面的内容从技术上讲是正确的并且涵盖了所有要点，但它有些冗长。我们可以简化：

为了获得最佳效果，使用最新版的 Firefox 浏览器。Mac 和 Windows 上也支持 Chrome。

仍然是正确的，它涵盖了我们想要讲的所有内容，但更加简洁，且一目了然。

在内容创作时很难限制自己。我理解——你有很多重要的信息要表达！但请记住：无论你写多少，读者最终也只会读 80、100，甚至最多 200 个字，如果你非常幸运的话。

提供的内容超过了读者愿意阅读的量，他们可能会选择浏览或完全放弃。

如果你写了冗长的段落，把最重要的信息深藏其中，那么你就冒着一个大风险：读者可能浪费他们的 80 个字去阅读不太重要的信息。

你展示的内容越多，你对读者实际阅读内容的控制就越少。

如果你不能通过使用更少的词语来缩短内容，也可以尝试将段落拆成要点列表。以这个段落为例：

我们做了一些改动：注册章节已分为两部分，分别是添加注册和将用户与对象关联。之前这一章节内容庞大，因此将其分开更容易管理。管理员界面的截图已更新，以反映新的 Django 1.9 风格。已经修复了一些小的拼写错误。更新了我们使用的 django-registration-redux 版本至 1.3。最后但同样重要的是，介绍部分已更新。

这一段更适合用项目符号展示：

我们做了一些改动：

注册章节已分为两部分，分别是添加注册和将用户与对象关联。之前这一章节内容庞大，因此将其分开更容易管理。
管理员界面的截图已更新，以反映新的 Django 1.9 风格。
已经修复了一些小的拼写错误。更新了我们使用的 django-registration-redux 版本至 1.3。
介绍部分已更新。

项目符号和其他视觉辅助工具有助于读者从一块内容中挑选出信息，使得内容更有可能被阅读。

我还鼓励有策略地使用加粗，特别是在技术文档中，它有助于突出句子的最重要部分，进一步使内容更容易被浏览。

例如：

我们做了一些改动：

注册章节已分为两部分，分别是添加注册和将用户与对象关联。之前这一章节内容庞大，因此将其分开更容易管理。
管理员界面的截图已更新，以反映新的 Django 1.9 风格。
已经修复了一些小的拼写错误。 更新了我们使用的 django-registration-redux 版本至 1.3。
介绍部分已更新。

重要的部分已被加粗，这样读者可以快速浏览内容，找到对他们最感兴趣的部分，并在需要时继续阅读。

请注意，我们还更改了标题的格式！我们来看看标题的一般规则。

组织内容的最佳方法之一是使用标题。这些部分以较大且显眼的风格呈现，以引入后续内容，使得文本更容易浏览和阅读。

标题可能会显得冗长——你也希望这些部分简洁明了，以帮助理解并保持读者的兴趣。为了更好的用户体验，简化并明确你的标题，同时确保它们有吸引力，并说明对读者的好处。

例如，看看我的网站上关于我其他书籍的两种版本，《Hello Web App》系列。在 图 2-53 中，标题冗长且无趣。而在 图 2-54 中，标题已经被重写，简洁明了，讲述了这本书为网站访问者所做的事情，从而增加了访问者进一步浏览我网站的可能性。

图 2-53： Hello Web App 网站上的标题非常冗长。从技术上讲是正确的，但并不吸引人。

图 2-54： 这个标题依然正确，但它更简短、更激动人心，最重要的是，它更好地突出了读者的好处。

如果你写的是介绍产品或吸引注意的标题，确保你以展示产品好处的方式来写，而不仅仅是描述产品的功能。

这样的变化可以极大地影响你的利润。在 webprofits 的一项研究中（hellobks.com/hwd/47） (图 2-55)，将标题改为讲述好处而非细节，使转化率（购买产品的人数）提高了 52.8%。

图 2-55： 在这个示例中，将标题改为讲述好处而非细节，导致了 52.8% 的转化率提升，来源于 webprofits（hellobks.com/hwd/47）。

真实案例

回到我们的那个小部件！在了解了这些内容原则之后，我们可以大幅更新内容 (图 2-56)。

图 2-56： 我们已经更新了小部件中的内容，使其更简短、更清晰、更激动人心，且更容易理解。

我们已经缩短了内容，并让一切看起来更激动人心、更具人情味。表单本身已经更新为更友好、更具人性化的句子，按钮也从简单的“登录”更新为更具行动感的“登录你的账户”。总体来说，这些更新应该能让小部件更容易阅读、理解和一眼看懂。

内容可能最初看起来不像设计的一部分，但它确实非常重要。内容、写作和文字定义了你的设计（特别是针对网页的设计）如何被用户消费，因此确保你将一些设计时间用于改善内容和写作。

总之，尽量精简并澄清你的内容。将段落保持在两到三句话之内。

确保你的内容工作也扩展到你的标题中。如果你的标题介绍的是页面或产品，确保标题讲述的是页面或产品如何影响读者，而不是它的功能。

接下来，我们来讨论一下用户体验！

第 2.7 节

用户体验

这一部分将所有内容结合起来。你所有让设计既愉悦又易于观看的工作，你所有让内容简洁易懂的努力，以及让布局易于理解的设计——这些概念都与用户体验息息相关。

用户体验（UX）是用户在使用你的网站时的整体体验——这是设计中最重要的一部分。

让我们来拆解一下用户体验的各个部分。

设计前

在你开始设计工作之前，你应该能够回答几个主要问题：谁是你的理想用户？他们的个人目标是什么？你的商业目标是什么？用户体验研究可以帮助回答这些问题。

例如，访问你个人网站的人可能在寻找更多关于你的工作和你做什么的信息（他们的个人目标）；你的商业目标可能是让他们注册你的个人新闻通讯。

或者，对于一款新 iPhone 应用的网页，你的用户会寻找有关应用的信息以及如何下载它；而你的商业目标则是尽可能多地获得下载量。

我们关注的是两件事：顾客是否达成了他们想要达成的目标，以及你是否达成了你的商业目标。希望你的设计能够实现这两者。

对于一个小型个人项目，你可能不需要做用户体验研究，但在大型重要项目的预设计阶段，你可以做一些工作来帮助了解你的用户及其目标。

竞争分析

简而言之，观察竞争对手并分析他们做得好的地方和做得不好的地方。

第三章，第 3.1 节：寻找灵感讲述了如何查看网站并从中提取可以在自己设计中实现的创意和内容。观察竞争对手是创建网站用户体验的重要部分——它为你提供了对比的标准，并帮助你创造出优于竞争对手的用户体验，从而吸引他们的顾客。

调查和访谈

如果你不问顾客，他们怎么知道自己想要什么和需要什么呢？许多网页设计师会掉进为自己不了解的用户设计的陷阱——例如，如果你自己没策划过婚礼，却设计了一款婚礼策划应用。你可能会有一些关于婚礼策划者需要什么的想法，但除非你真正与正在策划婚礼的人交谈，否则可能会做出一些错误的假设。

你需要对理想用户从设计中想要和需要什么有清晰的了解。有了这些知识，你就能设计出更好的产品，帮助顾客实现他们的目标，从而也帮助你实现更多自己的目标。

在设计过程中

你不希望花时间将设计实现为代码后，才发现用户对网站上的某个具体过程或流程感到困惑（例如，某人购买商品的步骤）。为了避免这些错误，你可以通过使用线框图、原型和可用性测试来进行设计的“测试运行”。

线框图、原型和可用性测试

线框图和原型是你设计的快速低保真模型。可用性测试让你在正式开始全面设计之前，先获得有关布局和交互的反馈。我们将在第三章、第 3.3 节中更详细地讨论这些概念：原型。

线框图和原型可以让你快速制作粗略的设计模型，并拿去给别人反馈，了解你的布局和流程是否合理。研究表明，使用低保真纸质原型可以像使用高保真屏幕原型一样容易发现并解决重大可用性问题。通过早期测试布局和流程，可以为自己节省宝贵的时间。

发布设计后

一旦发布了设计，你需要追踪自己是否真的达成了目标。你的转化率如何？你的跳出率够低吗——即访问者加载网页后立即离开的百分比？你是否获得了良好的客户反馈？为了帮助回答这些问题，你可以进行多种测试来衡量这些数据。

快捷方式

现在是我最喜欢的部分：在考虑用户体验时需要记住的最重要的事情。

让用户想要的操作易于找到和使用

无论你希望用户做什么，确保完成这些操作的步骤易于找到且简单易用。

让提交按钮设计得普通且难以看到是没有意义的——一个明亮的按钮更突出，能让表单提交变得更容易 (FIGURE 2-57)。

FIGURE 2-57: 表单的提交按钮很重要（就像我们在上一节中讨论的那样！）左侧的按钮可能有点难以找到，右侧的按钮更容易被发现并使用。

新闻通讯的注册链接不应隐藏在内容中（记得我们说过的关于浏览者的事）。将它们单独列出，方便更容易看到 (FIGURE 2-58)。

图 2-58： 如果你希望有人注册你的新闻通讯，不要将链接隐藏在你的内容中。应将其推向前面，并确保它显而易见。

注意网站大小

下载速度慢会促使人们在未查看网站前就离开。请注意图像大小；随着家中大屏幕和快速下载成为常态，很多人忘记了很多人仍然在信号差的手机上或有着过载 Wi-Fi 的咖啡店浏览网页。此外，还要考虑 JavaScript；下载大量脚本会减慢网站速度，性能不佳的脚本也会影响网站的流畅度。

在多个浏览器中检查你的网站，使用不同的屏幕大小和下载速度，确保它加载快速。

进行可用性测试

我们将在第三章、第 3.4 节：获取反馈中更深入地讨论可用性测试。本质上，就是向他人展示你的设计并获取他们的反馈，尽管这可能会让人感到很难。作为设计师，我们天生容易忽视设计中的问题，因此，找到更多人来查看设计以发现这些问题至关重要。

包括分析工具

确保在你的设计中包含分析追踪软件，这样你就能在发布后看到设计的表现。至少，可以考虑使用 Google Analytics（hellobks.com/hwd/48）或类似 Segment 的客户数据平台（hellobks.com/hwd/49），它们可以与 Google Analytics 及其他分析平台进行结合。

真实案例

回到我们的部件(图 2-59)，我们可以看到我们的登录按钮是一个明亮且易于识别的颜色。用户不会困惑该如何提交！

用户体验是书本中难以展示的一项内容。记住，你应该尽力了解你的受众，关注你的页面以及一个人如何在页面之间移动（并确保这一过程简便），从外部来源获取设计的反馈，并关注设计发布后它的表现。

恭喜你完成了这一部分！

图 2-59： 用户体验与层次结构密切相关。我们的表单更加易用，因为提交按钮是明亮且对比强烈的颜色。

第 2.8 节

图像与图像表现

到目前为止，我们仅使用了线条、框和文本进行设计，但图片（以及图标、图形等图像）可以发挥重要作用。在这一节中，我们将讨论你可以在哪里找到适合你项目使用的图片以及如何有效使用它们。

首先，让我们来讨论版权和许可。虽然右键点击并“另存为”几乎任何你在网上找到的图片非常容易，但你不能使用任何找到的东西。图片是有版权保护的，未经允许使用他人创作的图片是非法的。

你应该留意的术语概览：

版权管理图像： 应包括额外的条款，指明图像可用的用途。
免版税图像： 通常，你可以在遵循图像条款的前提下使用图像。例如，很多免版税图像只能用于非盈利性用途，这意味着你不能将其用于任何可能赚取金钱的应用场景。
创意共享： 为内容创作者提供的一个系统，允许他们的作品在不要求明确许可的情况下被使用。创意共享图像可以通过多种方式授权，包括要求注明出处、禁止修改（你不能自己更改图像）、禁止商业用途，或者允许任何用途。

基础知识

在向设计中添加图像时，了解一些基本要点非常重要。

不要觉得你必须使用照片或图标

不必担心你必须在设计中使用人物照片。文字和产品截图也可以大有作为(图 2-60)。

通过调整排版——使用不同的字体和样式——你可以创建一个美观且简洁的网站，而不必过多依赖图像。

如果你正在为网络开发产品，那么该产品的网站不需要比截图更多的内容(图 2-61)。

你可以随时添加图像和视觉元素——从一个干净、以文字为主的网站开始，可能帮助你更快上线，而无需过多纠结这些细节。

图 2-60： John Gruber 的 Daring Fireball 网站是一个美丽、成功的设计，使用了全文本（除了标志中的图标）。

图 2-61： T4S 网站简洁明了，展示了他们产品的截图。

面孔是强大的

开心的面孔引发开心的情感；愤怒的面孔引发愤怒的情感。你可以在设计中使用面孔来强调你想传达的情感，并引导视线集中在页面最重要的部分(图 2-62)。这是你设计工具箱中强大的工具。

图 2-62： Dan Mall 的个人网站。Dan 的照片吸引了眼球，他的目光引导我们看到介绍文本。

注意文件大小

图像很容易迅速增加网站的大小，从而导致下载时间变慢，并让用户感到沮丧，最终离开。此外，越来越多的屏幕变得更加高清，分辨率更高，像素更小，从而显示出更清晰的画面——这使得老分辨率的照片和图像显得模糊。

一些需要记住的原则：

确保你的图片是最大必要尺寸。 把一张 2000px 的图片放进 1200px 的框里毫无意义。
提供视网膜和非视网膜图片。 设置你的 HTML 和 CSS，让使用视网膜屏幕的用户能够下载更详细、分辨率更高的图片，而使用传统屏幕的用户则能获得更小的图片，避免浪费像素。这是一个很棒的指南：hellobks.com/hwd/54。

小心那些看起来像库存照片的照片

在 Google 上搜索“库存照片”会找到许多宣称提供大量你可以使用的好选项（付费和免费的）的网站，但也有大量低质量的图片。看看一些大型网站，如 iStock (图 2-63)，但尽量找到看起来更自然的图片，而不是示例图片（未来的数字建设！）。

图 2-63： iStock (hellobks.com/hwd/53) 有很多库存图片可以浏览，但要小心那些看起来过于摆拍和不自然的图片。

图标

尽管图片适合用作背景和大元素，但图标更像是支持角色——小图形支持你的内容和设计。你不需要图标，但它们可以让你的设计显得独特。

图标通过创造内容的图形表现形式来支持信息的吸收。Kite 网站有效地使用图标，通过抽象的内容表现形式吸引视线集中在三列特性上 (图 2-64)。

图 2-64： Kite 网站的图标简单但有效。

当然，这也是你需要关注授权的地方。就像照片一样，图标也受到版权保护。

快捷键

库存照片网站

我最喜欢的自然风格库存照片资源是 Unsplash (hellobks.com/hwd/56) (图 2-65)，它提供免费的创意共享图片。

其他库存照片网站包括 IM Free (hellobks.com/hwd/60), picjumbo (hellobks.com/hwd/61), iStock (hellobks.com/hwd/62), Gratisography (hellobks.com/hwd/63), 和 PhotoPin (hellobks.com/hwd/57) (图 2-66)。

图像（图标、图形和插图）

为了给你的设计增添一点特别的触感，可以尝试使用一些预设计的图标网站，比如 The Noun Project (hellobks.com/hwd/58) (图 2-67)，或者通过像 Fiverr (hellobks.com/hwd/59) (图 2-68) 和 Upwork (hellobks.com/hwd/64) 这样的网页定制设计。

图 2-65： Unsplash (hellobks.com/hwd/56) 是一个很好的自然风格图像来源。

图 2-66： PhotoPin (hellobks.com/hwd/57) 搜索 Flickr 上的创作共用图像。

图 2-67： Noun Project (hellobks.com/hwd/58) 包含了很多不同的创作共用图标，你可以在项目中使用。

图 2-68： 需要设计图标？试试类似 Fiverr 的平台 (hellobks.com/hwd/59)

现实生活中的例子

我们的小部件已经可读、间距良好且易于使用——但通过添加背景图案、细微的阴影和有趣的图标，我们可以真正提升它的外观 (图 2-69)。我们经常可以省略这些细节（我个人有时也会跳过这些步骤，快速完成一些设计工作），但正如你所看到的，对于重要的设计工作，这些小细节值得花时间去做。

图 2-69： 我们的小部件已经相当不错了，但加入背景图案、淡淡的阴影和一个有趣的图标，让它提升到了另一个层次。

接下来，我们将介绍一些有趣的设计小贴士，这些内容没有适合放在前面的章节中。

SECTION 2.9

额外小贴士

我们通过回顾一些有趣的设计小贴士来结束本章内容。本节是一些之前提到过的内容的集合，或者是那些不完全适合放在某一类中的内容；所有内容都很有趣，并且会为你的设计工作增添一些色彩。

从简单开始

当你刚开始时，刻意选择简单的界面和设计会让你的生活更轻松。简单的布局、简单的用户界面（UI）和简单的用户体验（UX）可能会让你觉得很无聊（但你绝对不是！），但它们非常有效，并且对初学者来说更容易掌控 (图 2-70)。

别害怕从小处开始——毕竟，你总是可以在第一次迭代后添加更多元素或进行重新设计。

考虑“三分法则”

“三分法则”是一个通常应用于摄影的概念。将物体居中拍摄会让照片显得单调无趣。相反，将图像水平和垂直地分为三等分；这些线的交点是放置兴趣点的好指南，能创造出视觉上更具吸引力的照片 (图 2-71)。

图 2-70： Appcanary 的网站简洁且非常有效。

这同样适用于网页设计——三栏布局之所以视觉上有吸引力，就是因为它遵循了三分法则。你还可以将背景图像和重要的元素（如人脸）沿这些线条布置 (图 2-72)。

这又是一个可以（并且常常应该）打破的规则，但它是一个值得记住的好概念。

避免使用纯黑色

纯黑色——自然界中并不存在——会让设计显得冷峻、不自然。相反，可以使用接近黑色的颜色；例如，十六进制色值 #222222 非常适合用作标题，#444444 用于正文，而不是使用 #000000。你还可以使用特定的 CSS 属性 RGBA (color: rgb(a(0,0,0,0.2));)，让文本加深背景颜色，而不是使用纯灰色 (图 2-73 和 2-74)。

图 2-71： 三分法则。兴趣点不应居中——而是将兴趣点放在“三分”交点上，以获得更具吸引力的布局。

图 2-72： Comovee 的网站背景基本上按照三等分的方式布局。

白色不太容易引发这种冷峻感，但在设计中使用接近白色的色调仍然值得尝试。

光线应该来自上方

如果你在设计元素中添加阴影或渐变，最好设置成看起来像是从正上方或正面照射的效果 (图 2-75)。从下方照射的物体看起来不自然，因为我们习惯了光线通常来自上方（如太阳、顶灯等） (图 2-76)。

图 2-73： 黑色可读性较好，但显得冷峻且对眼睛有些刺激。

图 2-74： 深灰色仍然可读，但在电脑屏幕上看起来更加柔和。

图 2-75： 从上方照射的光线让按钮显得自然地从页面中凸显出来。

图 2-76： 当按钮从下方照射光线时，看起来不自然。

对比度突出重要内容

在设计、控件和表单中，可以通过对比度来突出某些元素（或使其退后）。特别是在表单元素中使用这种方法，能够直观地显示哪些是可编辑的内容，哪些只是帮助文本 (图 2-77)。

颜色在不同环境下看起来会有所不同

你调色板中那款可爱的桃色，放在亮橙色背景上时可能会突然看起来像棕色 (图 2-78)。这不是你的调色板问题，是我们的眼睛——我们对颜色的感知会根据环境发生变化。你可以适当调整调色板中的颜色，使其在新的环境中也能视觉上与其原始环境相匹配。你的调色板不必是固定不变的！

图 2-77： 表单的帮助文本比主文本要浅，表明其重要性较低。

图 2-78： 这两张图片中的内方框颜色相同，但在右侧的示例中看起来明显更暗且更偏棕色。

小心在图像上覆盖文本

我们已经在不同的章节中讨论了排版、可读性和图片。将图像和文本结合起来可能很困难，因为图像本身可能会影响可读性（进而影响你的设计对用户的有效性）(图 2-79)。如果可读性可能成为问题，尝试在图像上覆盖透明色（通常使用黑色，但你也可以尝试白色或其他颜色）(图 2-80)，在文本后添加一个实心颜色块，或如果可读性问题较大，则模糊图像背后的内容。

图 2-79： 根据背景，文本可能变得不可读。

图 2-80： 将背景变暗可以确保文本始终可读。

设计重复工作流程时的一些技巧

本书主要集中在设计那些试图将首次访问者转化为某种行为的网页，这意味着我们尽量避免那些需要任何学习曲线的设计。

然而，日常使用频繁的内部工具让我们能够在要求一定的学习成本和提高用户工作流程效率之间做出权衡。比如创建键盘快捷键，或允许更多的杂乱，以便让重要信息集中显示。彭博终端 —— 对新手来说几乎令人恐惧，但对专业人士来说不可替代 —— 就是一个故意在专家界面中制造杂乱的例子(图 2-81)。

图 2-81： 彭博终端的设计杂乱无章，但却是有目的的。

在理想情况下，我们可以创造出两全其美的设计：既直观又美观，让用户尽可能快速地完成任何任务。但现实却通常要求我们在简洁性和功能性之间做出妥协。对于偏重哪一方面的决策，必须要有意识地做出选择。

这就是关于理论和快捷方式章节的结尾！

在过去的几个小节中，我们的小部件逐渐得到了改进。这就是我们如何将其转变的(图 2-82)。

图 2-82： 我们的小部件从最初到现在的变化。在每个部分，我们都增加了改进，使小部件更加美观和可用。

相当棒！

第三章

设计过程与训练你的设计眼光

现在我们已经聊过了设计原则和设计要素，接下来让我们来探讨设计的过程。虽然前几节内容讲了很多理论，但接下来的内容将会帮助你将所学的理论与现实世界的背景结合起来，帮助你进行设计工作。

接下来的几节将引导你从头到尾完成设计的各个部分——寻找灵感、草绘项目、获取反馈和构建。我们将抽象地讨论这些步骤，并将它们应用到一个示例项目中，让你看到所有内容如何结合在一起。

在我们的示例项目中，我们将构建一个理论上的开源项目主页——一个让访客可以了解和使用该项目的地方，同时提供文档链接和有关如何参与项目的信息。

我们开始吧！

第 3.1 节

寻找灵感

启动设计项目时，第一件事应该做什么？

如果你认为应该坐下来开始构思创意、绘制布局、规划内容——你已经接近了，但还没有完全准备好开始。

在没有先做研究和寻找灵感的情况下直接开始处理设计问题，就像是试图在没有互联网查找问题和错误的情况下进行编码——是可以做到的，但会更慢且更令人沮丧。

把灵感看作是视觉调试。查看优秀的设计和灵感将帮助你解决在创建自己设计时可能遇到的问题。

哪里可以找到灵感？对于网页设计，有许多网站收集并分享优秀设计 （图 3-1）。

当然，不要抄袭设计。如果你发现了喜欢的设计，你可以做类似的设计，但直接照搬是非常不可取的。不过，你可以从布局、颜色处理、语气、图像以及排版中获得灵感，并将你喜欢的元素融入到自己的项目中。尝试专注于设计中你喜欢的某一特定方面，而不是整个设计，并将其应用到你的项目中。

最佳设计（hellobks.com/hwd/67)		无与伦比的风格（hellobks.com/hwd/68)

Awwwards（hellobks.com/hwd/69)		Site Inspire（hellobks.com/hwd/70)

图 3-1： 一些你可以用来寻找网页设计灵感的众多选项。

作为设计师，你的工作不是重新发明轮子。注意已建立的设计规范和“有效”的设计元素将帮助你在自己的设计中实现熟悉的流程和布局——使用户在使用你的产品时更直观地进行导航。

我的Hello Web App书籍受到了精彩的A Book Apart系列书籍的启发（图 3-2）。

我特别为我的Hello Web App设计感到自豪，但我真诚地认为，如果没有受到A Book Apart的深刻启发，它们的设计可能不会变成现在这样。看到那些书籍帮助我确定了我喜欢的尺寸和厚度，平面化的明亮颜色也激发了我自己对Hello Web App封面的图形处理。

图 3-2： 我的Hello Web App书籍在左边，而精美设计的A Book Apart系列书籍在右边。

巴勃罗·毕加索曾著名地说过：“好艺术家模仿，伟大艺术家盗窃。”当你找到自己喜欢的东西，想要自己做的东西——无论是布局、颜色、字体选择等等——就把它作为灵感，创作出类似的作品，但不要完全一样。

让自己在设计方面变得更好的最有用的方式之一，就是观察其他设计，并批判性地思考它们做得好的地方和做得不好的地方。这是一个很好的练习过程，尤其是在寻找灵感时！

你做得越多（无论是好的设计还是差的设计），你就越能训练你的“设计眼”和设计直觉，这将使你更容易从零开始创作出好的设计。

让我们以 GitHub 首页设计为例（图 3-3）。

图 3-3： GitHub 一直拥有令人赏心悦目的首页设计，非常适合用来练习挑选出优秀的设计决策。

运用我们在第二章《理论与设计原则》中讲解的原则，你认为他们做得怎么样？以下是我挑选出的一些细节：

大量的空白区域。 标题、内容和表单上下方都有足够的空白区域，吸引眼球并强调内容。空白区域的量恰到好处——不多也不少。
注册表单位于显眼位置。 无需复杂操作——GitHub 让你可以从首页轻松注册账户。注意，“用户名”字段默认已获得焦点，用户可以立即开始输入。
重要的词汇在内容中被加粗并链接。 “开源”和“商业”这两个词都被加粗、链接，并且使用了更亮的颜色。乍一看，你可以看到 GitHub 关注的两个领域。
微妙的背景图案让空白区域看起来不那么空洞。 想象一下背景是平坦的灰色——设计依然看起来不错，但会感觉没有那么精致。微妙的图案填充了空白区域，同时让内容更突出。
主按钮是亮眼的突出颜色。 设计的主体部分是深色和灰色的，使得明亮的绿色表单提交按钮格外显眼。

你还看到了哪些其他好的设计决策？

开始更加有意识地浏览网页，批判性地思考哪些设计做得好，哪些做得不好。随着时间的推移，你的设计直觉会不断提高。把这作为一种练习，会使你更自然地创造出更好的设计。

当你正在积极工作于一个新的设计时，这一点尤其重要。首先，通过寻找你所在领域中优秀设计的示例以及查看竞争对手的设计来获取灵感。挑选出他们做得好的地方，并在你自己的设计中加以应用。挑选出你认为不太成功的地方（尤其是竞争对手的设计），确保在自己的设计中避免这些问题。

我们在第二章的示例项目是我们的控件。对于本章，我们将构建一个开源项目的主页。让我们从寻找一些干净且具有视觉吸引力的开源项目主页开始（图 3-4）。

有一些趋势是值得在我们自己的设计中实现的：

大量的白色空间 —— 开源项目的主页通常比较简洁（相比之下，比如报纸首页），而且通透、设计感强的感觉与面向开发者的项目形成了很好的对比。

图 3-4： 一些设计精良的开源项目主页，我们将以此为灵感。

明亮的颜色 —— 无论是作为背景色，还是作为白色背景上的高光。
清晰、突出的标题，解释工具的功能。
代码是重中之重 —— 自然地，为开发者制作的产品应该一开始就展示相关的代码，而不是将其隐藏。

这个过程很大程度上受个人偏好的影响——我选择了四个我个人喜欢并激发我灵感的设计；你可能不赞同我的选择。这完全没问题！设计是非常个人化的，最终你会想要一个能够代表你的设计。

第 3.2 节

计划阶段

你可以直接跳入编码阶段，开始用你的灵感创建网站，但设计过程中的中间步骤——制定计划、绘制创意和布局、制作模型——将帮助你尝试更多的创意，并且在总体上节省更多时间。虽然前期稍微费点劲，但从长远来看，它能节省大量时间。

如果你在开始设计和开发之前进行一些基本的规划，你的生活将会变得更加轻松。你需要多少页面？这些页面需要什么样的内容？你需要什么样的表单，字段有多少个？

我们将把开源项目主页示例项目构建为一个单一页面，并链接到外部文档——使得我们的计划非常简单。只有一页！

在这一页中，我们列出我们所需要的元素：

项目 Logo/名称。
解释项目的标题。
带有指向外部文档的链接菜单，包含 Read the Docs、GitHub 页面和作者的 Twitter。
显示代码的块（展示安装有多么简单）。
三个模块，分别详细介绍优势和功能。
贡献者的积极评价。
页脚中重复的菜单。

大多数网站不会这么简单。我们可以考虑另一种情景，比如一个设计师 Jane 的个人作品集网站，这需要更多的页面。

首先，我们来确定为 Jane 设计个人网站时需要哪些页面：

主页： 用户访问网站时看到的第一个页面。
关于页面： 深入了解 Jane 的背景和经验。
作品集页面： Jane 项目的概述。

— 单独的项目页面： 这些页面可能会使用相同的布局，因此我们可以将它们归为一类。
联系页面： 展示 Jane 的位置和联系她的方式。

我们可以立刻看到，我们需要为五种基本类型的页面设计布局。现在我们有了基本页面，我们希望每个页面包含哪些内容呢？

每个页面：

— 个人标志或名字。

— 顶部菜单列出网站中的所有顶级页面（也就是说，我们只列出上面的四个主要项目，而不是每个单独的作品集页面）。

— 内容后的页脚菜单。
主页：

— 简短、令人兴奋的 Jane 介绍。

— Jane 的照片。
关于页面：

— 更长的描述段落。

— Jane 的另一张照片。
作品集页面：

— 每个 Jane 项目的模块，包含每个项目的照片/截图、项目标题以及链接到各个项目页面。
单独的项目页面：

— 项目代表的图片。

— 项目的详细描述。

— 外部资源链接（GitHub 上的代码、已上线的网站等）。
联系页面：

— 简短的介绍段落。

— 电子邮件地址和位置。

— 联系表单，包含姓名、电子邮件、简短内容区和提交按钮。

制定一个计划，并列出所有这些页面、功能、组件和模块，将帮助你组织设计过程，确保在绘制和构建设计时不会错过任何重要元素。

在这个阶段，你可以跳过直接进行网站编码，但我强烈建议你花些时间来制作一些原型。我们将在下一节中详细讨论！

第 3.3 节

原型

绘制你的想法和制作原型的过程将帮助你比直接进入编码阶段更快速地尝试不同的解决方案。这个过程通常与灵感的激发并行进行。当你找到自己喜欢的想法时，应该记下这些想法，并草拟出它们如何融入你自己的设计。

绘制草图看起来可能比实际操作更令人生畏。也许你见过像图 3-5这样的网页草图。

如果你愿意，可以像图 3-5那样画个草图，但这并不是最初草图的制作方式。草图更抽象，使用最少的细节，并通过你的想象力将一切构思结合起来。你真正需要的只是框框和线条，用来快速记录一些布局的想法以及设计应如何呈现(图 3-6)。

这为你快速开始草图绘制设计想法提供了简便的方式。这里有一些更多的例子，来自我在重新设计Hello Web Books网站时的个人草图本(图 3-7)。

图 3-5： 草图不需要有这么多细节。

图 3-6： 低信息量的草图。弯曲的线条表示标题或较大的文本，直线表示内容，方框表示按钮，打叉的方框表示图片。

图 3-7： 我个人笔记本中的杂乱（数字化）草图，规划的是新的Hello Web Books网站设计。

再次强调，这些草图并不是像素完美：它们是为了提供快速的布局想法，帮助你开始构建设计。快速、杂乱、简单，绝对不完美。

你可以通过添加阴影或不同的灰度来升级你的草图，但尽量保持草图尽可能简单，不加修饰。在这第一轮中不要用花哨的字体，不用颜色，也不精确尺寸。尽量让这一轮对自己来说尽可能简单，这样你才能快速产生尽可能多的不同想法(图 3-8)。

图 3-8： 显示基础线条、方框、图片位置和内容布局的纸质草图。草图不需要太复杂。

让我们回到示例项目，画出几个快速的主页布局想法，针对我们的开源项目(图 3-9)。

这里是两种不同主页布局设计的快速草图，但我建议你在草图时多做一些。做得越多，你经过的想法就越多，这将帮助你在选择构建线框的草图时更加自信。

图 3-9： 显示两种不同主页布局设计的几个快速草图，针对我们的示例开源项目主页。

如果你没有具体的项目要做，画出你最喜欢网站的布局是很好的练习。

线框图

接下来，我们让快速草图更加具体。线框图帮助我们从草图中加入更多细节，使用实际的尺寸进行布局，并帮助我们在设计的更精细表现中确定间距。

有很多不同的软件工具可以帮助你完成这一阶段(图 3-10)。

GIMP (hellobks.com/hwd/77)		Sketch (hellobks.com/hwd/78)

Balsamiq (hellobks.com/hwd/79)		UXPin (hellobks.com/hwd/80)

图 3-10： 可用的几种线框图软件解决方案。

免费选项

GIMP. 开源图像编辑器： hellobks.com/hwd/77
Inkscape. 开源矢量图形编辑器： hellobks.com/hwd/81

付费选项

Adobe Illustrator 或其他 Adobe 产品。 hellobks.com/hwd/82
Sketch. hellobks.com/hwd/78
演示软件，如 Keynote（Mac）和 PowerPoint（Windows）。你可以设置可点击的区域，跳转到不同的幻灯片或你网站的“页面”，这样你的模型看起来更具互动性： hellobks.com/hwd/83， hellobks.com/hwd/84
Balsamiq. 在线线框图软件： hellobks.com/hwd/79
UXPin. 在线设计平台： hellobks.com/hwd/80

线框图位于草图和模型阶段之间。在这个阶段，我们并不选择颜色或字体——我们只是继续思考布局和流程。

回到我们的开源项目主页，我们将使用我最喜欢的草图来创建一个线框图 (图 3-11)。

我们使用三列布局，开始规划我们的内容（确保简短、易懂并具有吸引力），并确定间距和布局。一旦这些元素就位，我们可以开始测试我们的设计（见第 3.4 节：获取反馈），并尝试不同的想法，直到我们有了一个想要推进的方案。

我们仍然缺少一些重要的设计决策，如字体、颜色和图形，但这个基础的线框图为我们获取他人反馈和进行网站编码提供了一个很好的起点。

图 3-11： 基于我们草图的快速线框图。没有做重大设计选择——只是布局和间距。

使用真实内容非常重要——尽量避免使用假内容，例如 Lorem Ipsum（设计行业使用的虚拟文本）。使用真实内容，你将知道所需文本的长度，这对于布局设计至关重要，而不是使用可能比实际使用的文本更长或更短的虚假文本。

注意我们之前讨论的内容原则，确保你的内容简洁、易于阅读并且具有吸引力。在进行草图绘制、线框设计和模拟图制作的过程中——修订和测试不同版本的设计——你也应该同时修订和改进你的内容。

让我们看一个不相关的例子，以便获得另一个线框设计的示例(FIGURE 3-12)。

FIGURE 3-12: 另一个线框示例。

再次提醒，没有字体或颜色，但这个快速线框展示了规划的布局（主要是一个狭窄的列，菜单选项围绕着 logo），以及一些设计决策，比如使用项目符号列表来展示内容，并且表单足够高，能够在不滚动的情况下看到。

线框设计应该帮助你做出简单的布局决策，以便你能够快速尝试不同的想法并进行测试，而无需花时间在小的设计细节上或修改大量代码。

根据你所做的事情，你可以在创建线框后直接转到代码，或者你可以创建一个模拟图来探索最终的颜色、字体和图像。

制作模拟图

线框设计的保真度较低——我们也可以在设计程序中创建高保真的模拟图，在转向代码之前，我们可以将每个设计细节（字体、颜色、背景等）都规划好。

如果你以前没有使用过设计程序，这部分设计过程会有点困难。在第五章《附加资源》中，我提供了关于主要设计程序的基础设计技能教程和视频。

在制作设计模拟图时，花费额外时间的一些优缺点：

优点

你将会看到你设计的确切样子（希望如此），当你开始在 HTML 和 CSS 中构建时。
对象可以轻松移动和转换，因此你可以比设计已经编码时更快地改变主意。

缺点

增加了一个额外的步骤，可能需要更多的时间。
当你为网页设计时，你最终的网站需要是响应式的（设计可以适应不同的屏幕大小，既能在小屏幕上显示良好，也能在大屏幕上显示）。响应式设计更难制作模拟图，因为大多数设计方案是静态的。你需要创建模拟图，展示设计如何适应不同的屏幕尺寸（手机、电脑等）。
如果你不熟悉设计程序（或者你更熟悉代码），模拟图的制作可能会比直接编写 HTML 和 CSS 代码花费更多时间。

你的模拟图应该包括你在设计线框时所做的所有内容和布局决定，并且额外考虑了图形、颜色、字体以及额外的精美设计调整(FIGURE 3-13)。

FIGURE 3-13: 使用设计程序 Sketch 展示颜色、字体和图像决策的模拟图。

让我们拿出我们的示例首页线框图，开始添加一些颜色、字体和图像。专注于使这个初稿足够好，以便可以发布并展示给他人，因为你可以随着时间的推移继续迭代和改进设计(FIGURE 3-14)。

FIGURE 3-14: 回到我们的示例项目。通过添加颜色、图像、字体和其他风格决策，从线框图转换为模型。这个示例仍然很简单，但它作为第一个版本已经足够。你可以发布它，然后在此基础上迭代设计并逐步改进。

一旦你有了一个自己喜欢的模型，是时候进行下一轮测试，并与朋友和家人分享设计（在下一部分中会详细讨论），以确保在花时间编写网站代码之前，您没有遗漏任何重要的内容。

到这个阶段，你可以复制你的首页设计，构建其他页面（例如“关于”页面）的模型，并且模拟你的网站在小屏幕上的展示效果(FIGURE 3-15)。

FIGURE 3-15: 我们创建的模型，修改后显示设计在小屏幕上的样子。记住，确保你的网站在小屏幕上可用且易读是非常重要的。

在下一部分，我们将讨论设计过程中的一个非常重要的部分（在本部分中有所提示）——获取反馈！

SECTION 3.4

获取反馈

设计过程中最难但最关键的部分之一就是获取对你设计的反馈。

与编程不同，你设计的东西没有简单的“有效”或“无效”答案。你不能仅凭一眼判断设计是否成功，必须从外部来源获取反馈。这个简单的步骤可能是最难的，因为我们天生都害怕负面反馈。如果那个人讨厌我们设计的东西怎么办？如果他们发现问题怎么办？

一个设计对你来说可能是合适的，但你是设计师——你知道设计的所有细节、它如何工作以及应该如何使用因为你是设计师。你只有在将设计展示给他人后，才知道这些路径和目标是否显而易见。你的设计可能很美，但你并不知道它是否会被欣赏和使用，直到你展示给别人。

如果有人发现设计中存在问题，感到难过是很自然的。当这种情况发生时，把它看作是一次学习的机会，尽量记住这些反馈会改善你的设计，并教给你一些新的东西。优雅地接受不好的反馈——不需要感到尴尬或受辱。最好在发布之前就听到坏消息，而不是发布后才发现。

不想听到负面反馈是完全正常的，但找出你的设计可以改进的地方，将使你的设计变得更强大，并在长远来看提升你的体验。抽离情绪，坚定意志，尽早发现问题。

以全新的眼光看待你的设计

在你展示设计给他人之前，给自己一个机会来批评自己的设计。简单地暂时放下设计（几个小时或过夜）可以帮助你发现潜在的设计问题。这是获取反馈最简单的方法，因为你正与一个自然赞同的“合作者”——你自己合作！

当你重新审视你的设计时，尽量将自己与设计师身份保持距离，尝试代入潜在用户的角度。你的设计是否可用？是否易于阅读和理解？设计是否便于使用并且感觉自然？仔细体验用户体验，并设想网站的使用方式——尽早发现所有“容易”的问题，然后再与他人分享你的设计。

获取设计新鲜反馈的另一个小技巧是拍一张截图并水平翻转。它仍然是相同的布局，但你的大脑会失去一些对设计的熟悉感，这样就能更容易客观地发现问题。

关于向他人展示设计的一些建议

你可以把设计展示给别人，得到“看起来很棒！”的反馈，拍拍自己背后，然后继续你的工作。但这真的是有价值的反馈吗？

确保你明确知道自己需要什么样的反馈。也许你希望帮助找出设计中的问题，并且你愿意接受一般性的反馈（正面或负面）和批评，或者你需要在两个选项中做出选择。或者，你可能已经完成了 90%的工作，只是想在发布前做一些小调整。

给你的审阅者提供明确的指示，告诉他们你需要什么，并确保他们有充足的时间来审视你的工作。快速浏览你的设计是不够的，所以不要在他们忙于其他任务时突然让他们审阅。让他们有时间真正深入思考你所做的工作。快速的反馈更可能仅仅涵盖表面问题或是空洞的赞美。

如果你只收到正面的反馈，尝试特别询问审阅者不喜欢的部分。这可能会促使更深入的反馈，也表明你在寻求（而非回避）负面反馈。

请记住，当你请求反馈时，你还需要判断收到的反馈。与不止一个人交流，因为一个问题只出现一次可能并不是真正的问题。如果一个问题反复出现，那就说明是需要解决的问题。

并非所有反馈都需要被采纳。你作为设计师，需要分辨哪些是实际的问题，哪些只是审阅者为了提供帮助而提出的建议。

向朋友和家人展示设计

你的朋友和家人是你可以寻求设计反馈的最友好的人，无论结果如何。那些离你最近的人最有可能想取悦你，可能只会给出积极的反馈。在这里，尤其需要明确表明你希望获得所有反馈（既有正面也有负面）。

如果你能把设计展示给符合你理想用户的人（如果你在为开发者开发工具，一个开发者朋友会是很好的测试者），那当然很好，但不要觉得只能局限于这个规则——任何人都可能发现 UX 问题。

把你的设计展示给陌生人

虽然这要难得多，但把设计展示给陌生人能获得更有价值的反馈，因为他们不会受到与你的个人关系的影响。

你可以在哪里找到可能愿意提供反馈的陌生人？

黑客松、冲刺和其他社区活动。 一些志同道合的聚会和活动是获得设计反馈的好地方。礼貌地询问别人是否愿意花 5 到 10 分钟时间审查你的设计。
在线社区。 Reddit 的design_critiques子版块（hellobks.com/hwd/85）和 Bootstrapped.fm（hellobks.com/hwd/86）等论坛和社区可以帮助你审查你的设计草图和早期版本。互联网的匿名性使得陌生人往往会给出负面反馈，因此你需要特别注意筛选出有用的反馈和不好的反馈。厚脸皮是必不可少的。
在线评审服务。 有不少在线服务允许你上传设计截图以获取反馈。一个例子是 Five Second Test（hellobks.com/hwd/87）。
咖啡店等地方的人们。 周围没有黑客松活动？你还可以尝试经典的可用性测试技巧——购买几张价值 5 美元的咖啡店礼品卡，找些看起来友善的陌生人，问他们愿不愿意用五分钟的反馈换取礼品卡（或者一杯咖啡，或类似的东西）。在公共场合接近陌生人可能让人害怕，但获得陌生人对设计的反馈是非常有价值的，值得一试。

这个步骤非常容易跳过，尤其是在你遵循最小可行产品（MVP）尽快上线的建议时，但获取反馈可以大大改善你项目的设计和可用性。你可能会发现一个可能决定你项目能否顺利推出的问题。

如果向别人获取反馈让你觉得害怕，我可以向你保证——你做得越多，就越容易。去吧，去获取你设计的反馈！

第 3.5 节

编码你的设计

如果这本书包括代码，它的篇幅将增加三倍！但在这里我确实想在吸引你注意力的同时谈一谈一些编码哲学。

别担心原创性

很多设计师抱怨说，太多网站看起来都一样 (FIGURE 3-16)。

作为初学者设计师，不要担心自己要做到百分之百的原创。 使用有效的设计！有时，令人熟悉的设计反而可能是一种优势。

当你作为设计师成长时，你会变得更加擅长创造新的、独特的细节。但当你刚起步时，如果你的设计与其他设计相似，不必担心，就像上面的那些美丽（但布局相似）的示例网站。如果你的设计看起来与其他设计相似，没有人会受到伤害（除非你完全照抄设计；那可不行！）。记住，设计如何运作比设计看起来如何更重要。

在打破规则之前，先学习规则和趋势。

图 3-16： Bootstrap 是一个流行的设计框架，这意味着很多网站会有相似的布局。这个网站取笑了这种趋势。

使用 CSS 框架

专业设计师和前端开发人员常常不屑一顾框架——最著名的是 Bootstrap (hellobks.com/hwd/5)，但也包括 Skeleton (hellobks.com/hwd/7)、Foundation (hellobks.com/hwd/6) 或 PureCSS (hellobks.com/hwd/9)——因为它们限制了你的设计以适应它们的方案，通常内置了设计（所以你并没有创造独特的东西；和上面的抱怨一样），而且可能让你的代码膨胀，包含不必要的 CSS 和 JavaScript。

但初学设计的设计师使用框架会受益匪浅。它将为你节省大量在 CSS、布局和最佳实践上浪费的时间。许多框架（比如 Bootstrap）附带的设计元素提供了一个很好的起点，你不需要花费大量时间去设计每个独立的元素。

在开始时，尽快推出设计是最重要的。你总是可以在发布后减少设计代码的大小并重新设计元素。

记住响应式设计

我们在前面的几节中提到了响应式设计，它在你编码网站时发挥着最重要的作用。

如今，随着各种尺寸屏幕的设备——从小巧的手机屏幕到巨大的显示器——出现，确保你的设计能够在多种格式中正常工作变得尤为重要。

了解媒体查询（*hellobks.com/hwd/89）以便你可以指定仅适用于某一屏幕尺寸的 CSS 规则。

框架通常附带响应式工具，这也是我推荐它们的另一个原因。注意你可以使用哪些功能来帮助你的设计，比如 Bootstrap 的可见/隐藏 CSS 类，这样你就可以根据屏幕尺寸显示/隐藏元素。

在你发布网站之前，查看你的设计在各种格式下的效果，确保你设计的流程在每种尺寸下都能正常工作——你的设计应该在任何媒介上都能正常运作 (FIGURE 3-17)。编码响应式设计需要花费大量时间，但它对设计的工作效果至关重要。不要忘了这一点！

关注网站大小

漂亮的图像（普通和高清图像）、JavaScript、框架代码——很快，你的网站可能就会变得下载缓慢。检查哪些部分可以优化，减少你的 CSS、图片和 JavaScript 的大小：下载缓慢会导致你失去访问者 (图 3-18)。

图 3-17： Chrome 开发者工具 (hellobks.com/hwd/90) 允许你在浏览器中查看不同尺寸的设计——无需拥有实际设备即可查看兼容性。

图 3-18： Chrome 开发者工具还会显示你网站的加载时间，让你看到哪些内容可能会导致网站加载变慢。

使用分析工具

不要只发布一个设计就忘了它——发布后要查看它的表现如何。你的跳出率（即访客在查看页面后立即离开的网站比例）是否很高？是否没人查看你的“关于我们”页面？批评设计可能很难，因为它非常定性，依赖于直觉和个人偏好。通过分析工具添加数据可以帮助你做出更具量化依据的设计决策。

分析的黄金标准是 Google Analytics (hellobks.com/hwd/48)，但你也可以选择其他分析工具。一个选择是 Segment (hellobks.com/hwd/49)，它允许你与其他分析服务集成，包括 Google Analytics 以及 Mixpanel (hellobks.com/hwd/91) 等。

恭喜你完成本章！我已将大量信息提炼成更小的、希望更易于管理的块。在本书的这一部分，我希望你对做出设计决策、规划、原型设计和构建设计感到更加自信。

第四章

鼓励的话

亲爱的读者：我从事设计和网站工作已经大约 20 年了，每一个新项目，我的内心对话都是这样：

“废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话……是的！”

有时候并不是“是的！”——有时候是“也许？”但最初的“废话”总是，总是存在的。

设计工作可能永远不会感觉轻松，尤其是在你刚开始的时候。你的第一批草图和模型更可能让你觉得糟糕而不是好。与编程不同，设计更注重质量而非数量——我们依赖直觉来判断某件事是否看起来合适、感觉对；你很可能会觉得自己的第一件作品并没有做得对。

欢迎进入设计的世界！

这并不是要让你泄气——相反，我希望你记住，当你在进行一个新设计并且感觉进展不顺时，你正在经历与其他设计师一样的过程。通过反复迭代、灵感、研究和努力，你的设计会不断进步。

当你有这些想法时，你并不是一个糟糕的设计师——你是一个设计师。

不要放弃，继续努力。我知道你能做到！你会从一次次的迭代中变得更好，从一项项新设计中变得更强。

第五章

额外资源

恭喜你，朋友！你已经完成了 Hello Web Design！

这仅仅是开始。我希望你对更多地学习设计并在生活中更自信地运用它感到兴奋。查看这些资源，继续你的设计学习之旅。

书籍

The Non-Designer’s Design Book, 第 4 版，作者：Robin Williams（Peachpit Press, 2014）：经典之作。这本书更加详细地探讨了我们覆盖的设计原则，并讲解了我们未涉及的传统设计概念（如重复性、接近性和对比度）。

Thinking with Type, 第 2 版，修订版，作者：Ellen Lupton（Princeton Architectural Press, 2010）：字体和排版历史的权威指南，不仅涵盖了传统的印刷字体排版，还包括了网页排版。

Don’t Make Me Think, Revisited: A Common Sense Approach to Web Usability, 第 3 版，作者：Steve Krug（New Riders, 2014）：深入探讨用户体验、信息设计和可用性，这本书易读且精彩。提供关于用户如何浏览和体验网页的见解，帮助你构建更直观、更高效的网站。

A Book Apart: abookapart.com

提供关于几乎所有网页主题的精彩短书（150 页或更少）——无障碍设计、前端开发、响应式设计等等。