重构UI：从开发人员视角设计用户界面

封面 书名 作者 评分
|50 RefactoringUI
  • Adam Wathan
  • Steve Schoger
 - -

从开发人员的角度解释，如何不依赖设计师，用特定策略设计漂亮的用户界面。
读《Refactoring UI》 | 本山德彪的 Apple Notes

从零开始

从功能开始，而非布局

当你设计一个新的 APP 创意时，你先设计什么？如果是顶部的导航栏，你就错了。大部分人一开始就试图“设计新的应用程序”，他们考虑的是外壳。

image.png

问题是，“应用程序”实际上是一系列功能的集合。在你设计出一些功能之前，你甚至都不知道需要哪些信息来决定导航应该如何工作。这也难怪会令人沮丧！

与其从外壳开始，不如从实际功能开始。

例如，您正在构建一项航班预订服务。您可以从 “搜索航班”这样的功能开始。

您的界面需要：

从这里开始。
image.png

见鬼，你可能根本不需要其他的东西--谷歌就是这么做的。

image.png

细节稍后

在设计新功能的最初阶段，重要的是不要纠结于字体、阴影、图标等低级决定。

这些东西最终都会很重要，但现在并不重要。

如果你在浏览器或你最喜欢的设计工具等高保真环境中工作时难以忽略细节，Basecamp 的杰森-弗里德（Jason Fried）喜欢用的一个技巧是用厚厚的夏普笔在纸上进行设计。

用夏普笔无法专注于小细节，因此它是快速探索各种不同布局创意的好方法。

把握色彩

即使你准备以更高的保真度来完善一个想法，也要抵制立即引入色彩的诱惑。

通过灰度设计，你不得不使用间距、对比度和大小来完成所有繁重的工作。

这样做会更有挑战性，但你最终会得到一个层次分明、更清晰的界面，以后再用色彩来强化也会更容易。

不要过度投资

低保真设计的全部意义在于能够快速行动，这样你就可以尽快开始构建实物。

草图和线框图是一次性的--用户无法使用静态模型做任何事情。用它们来探索你的想法，并在你做出决定后将它们抛在脑后。

不要设计太多

在开始实施之前，您不需要设计应用程序中的每一个功能；事实上，最好不要这样做。

要想知道产品中的每个功能应该如何交互，每个边缘情况应该如何显示，这真的很难，尤其是在抽象的情况下。

如果用户有 2000 个联系人，这个屏幕应该如何显示？

这个表单中的错误信息应该放在哪里？

如果同时安排了两个活动，这个日历应该如何显示？

如果仅凭设计工具和想象力就想弄明白这些问题，会让自己陷入挫折之中。

循环工作

与其事先设计好所有东西，不如缩短工作周期。从设计下一个要构建的功能的简单版本开始。

一旦你对基本设计感到满意，就把它变成现实。

在设计过程中，你可能会遇到一些意想不到的复杂问题，但这正是问题所在--在实际使用的界面中解决设计问题，要比事先设想每一种边缘情况容易得多。

对工作设计进行迭代，直到没有问题需要解决为止，然后跳回设计模式，开始下一个功能的开发。

不要在抽象的工作中不知所措。尽早构建实物，这样你的想象力就不必承担所有繁重的工作。

做一个悲观主义者

不要在你的设计中暗示你还没有准备好构建的功能。

例如，你正在为一个项目管理工具设计一个评论系统。你知道有一天，你希望用户能够在评论中附加文件，因此你在设计中加入了附件部分。

深入实施后才发现，支持附件的工作量比你预想的要大得多。你现在不可能有时间完成它，所以整个评论系统就被搁置了，而你却在处理其他优先事项。

问题是，一个没有附件的评论系统仍然比没有评论系统要好，但因为你从一开始就计划包含它，所以你现在什么都没有。

当你设计一个新功能时，预计它很难构建。设计可以交付的最小有用版本可以大大降低这种风险。

如果某项功能的一部分是 “可有可无”，那就稍后再设计。先构建简单的版本，你就会有后路可退。

选择个性

每一种设计都有某种个性。一个银行网站可能会努力传达安全和专业的信息，而一个新潮的初创公司可能会有一个让人感觉有趣和好玩的设计。

从表面上看，赋予设计一种特定的个性可能听起来很抽象、很牵强，但其中很多都是由一些可靠、具体的因素决定的。

字体选择

字体设计在决定设计感觉方面发挥着巨大作用。

如果想要优雅或经典的外观，你可能想在设计中加入衬线字体：

如果想要俏皮的外观，可以使用圆形无衬线字体：

如果您想让设计看起来更朴素，或者想依靠其他元素来体现个性，那么中性无衬线字体就非常适合：

颜色

有很多关于色彩心理学的科学研究，但在实际操作中，你只需要注意不同颜色给你带来的感觉。

蓝色既安全又熟悉--没有人会抱怨蓝色；

金色可能会给人 “昂贵 ”和 “精致 ”的感觉；

粉色更有趣，不那么严肃；

虽然仅从心理学角度来选择颜色并不实用--很多时候只是看你觉得什么颜色好看--但当你试图理解为什么你认为某种颜色是合适的时候，思考一下还是很有帮助的。

边框半径

虽然听起来只是一个很小的细节，但在设计中是否将边角修圆以及修圆的程度会对整体感觉产生很大的影响。

边框半径越小越中性，本身并不能传达太多个性：

边框半径越大，感觉就越有趣：

......而没有边框半径则会给人严肃或正式的感觉：

无论选择什么，保持一致都很重要。在同一界面中混合使用方角和圆角，几乎总是比坚持使用其中一种更糟糕。

语言

虽然语言本身不是一种视觉设计技巧，但在界面中使用的语言对整体个性有很大影响。

使用不那么个人化的语气可能会让人感觉更正式或更专业：

......而使用更友好、更随意的语言则会让人感觉网站更友好：

在用户界面中，文字无处不在，选择正确的文字与选择正确的颜色或字体一样重要（如果不是更重要的话）。

决定你真正想要什么

很多时候，你可能只是凭直觉判断自己想要的个性。但如果没有，简化决定的一个好方法就是看看想要接触的人所使用的其他网站。

如果他们的网站大多都很 “严肃”，也许你的网站也应该如此。如果他们的网站比较俏皮、幽默，也许这才是更好的方向。

只是尽量不要过多借鉴直接竞争对手的风格，以免看起来像其他产品的二流版本。

限制你的选择

有数百万种颜色和数千种字体可供选择，这在理论上听起来不错，但在实践中通常是一种令人瘫痪的诅咒。

不仅是字体和颜色，你几乎可以在任何一个细小的设计决策上浪费时间。

这个文字应该是 12px 还是 13px？

这个框阴影的不透明度应该是 10%，还是 15%？

头像的高度应该是 24px 还是 25px？

这个按钮应该使用中等字重还是半粗体？

这个标题的下边距应该是 18px 还是 20px？

当你在没有约束的情况下进行设计时，决策是一种折磨，因为正确的选择总是不止一个。

例如，这些按钮都有不同的背景颜色，但光看几乎无法分辨它们之间的区别。

如果没有一个选择真的是错误的，你怎么能自信地做出决定呢？

提前定义系统

在你需要做决定的时候，不要从无穷无尽的信息库中手工挑选数值，而是从一组较小的选项开始。

不要每次需要选择一种新的蓝色时都拿起选色器，而是从事先选定的 8-10 种蓝色中进行选择。

同样，不要一个像素一个像素地调整字体大小，直到看起来完美为止。

事先定义一个限制性的字体尺度，并以此来决定未来的字体大小。

当你建立这样的系统时，你只需要做一次挑选初始值的艰苦工作，而不是每次设计新的用户界面时都要做。虽然前期工作会比较繁重，但这是值得的--它将为你省去大量的决策疲劳。

淘汰法设计

当你使用一组受限的值进行设计时，决策会容易得多，因为 “正确 ”的选择会少得多。

例如，您要为一个图标选择尺寸。你事先定义了一个尺寸标尺，其中中小尺寸的选项只有 12px、16px、24px 和 32px。

要选择最佳选项，首先要猜测哪个选项看起来最合适，也许是 16px。然后尝试两边的数值（12px 和 24px）进行比较。

很有可能，其中两个选项看起来明显不是最佳选择。如果是外侧的选项，你就完了--中间的选项是唯一的好选择。

如果外围选项中的一个看起来是最好的，那么就用这个选项作为 “中间 ”值再做一次比较，确保没有更好的选择。

这种方法适用于任何你已经定义好的系统。当你只有一组看起来明显不同的选项时，挑选最佳选项就变得易如反掌了。

将一切系统化

你拥有的系统越多，你的工作速度就越快，你就越不会猜测自己的决定。

你需要为以下事情建立系统：

以及其他任何让你感觉像是在为低层次设计决策费力的事情。

你不必提前定义所有这些内容，只需确保你在进行设计时以系统为中心。在做出新的决定时，寻找机会引入新的系统，尽量避免两次做出同样的小决定。

系统设计将是本书中反复出现的主题，在后面的章节中，我们将详细讨论如何构建这些系统。

层级关系决定一切

并非所有元素都平等

如果把视觉设计看成是 “让东西看起来好看的造型”，就不难理解为什么没有与生俱来的艺术天赋就很难做到这一点了。

但事实证明，让事物 “好看 ”的最大因素之一，与表面的造型毫无关系。

视觉层次是指界面中各元素之间的重要程度，是让人感觉 “设计 ”过的最有效工具。

当界面中的所有元素都在争夺注意力时，就会给人一种嘈杂混乱的感觉，就像一堵内容的大墙，让人不清楚什么才是真正重要的：

当你刻意淡化次要和第三级信息，努力突出最重要的元素时，即使配色方案、字体选择和布局没有改变，效果也会立即变得更令人愉悦：

那么，如何才能真正做到这一点呢？在接下来的章节中，我们将介绍一些具体的策略，用于在设计中引入层次感。

尺寸不是一切

过分依赖字体大小来控制层次结构是错误的--这往往导致主要内容过大，次要内容过小。

与其让字体大小独自承担所有重任，不如尝试使用字体重量或颜色来完成同样的工作。

例如，让主要元素更粗，就可以使用更合理的字体大小，而且往往能更好传达其重要性：

同样，在辅助文字上使用柔和的颜色，而不是使用小号字体，既能让人明白文字是次要的，又能减少可读性上的牺牲：

尝试并坚持两到三种颜色：

同样，对于用户界面作品来说，两种字体重量通常就足够了：

在用户界面工作中，不要使用 400 以下的字号--它们可以用于大标题，但在较小的字号下就太难读了。如果考虑使用较轻的字号来淡化某些文字，请使用较浅的颜色或较小的字号。

不要在彩色背景上使用灰色文字

在白色背景上用浅灰色文字是淡化文字的好方法，但在彩色背景上就不那么好看了。

这是因为白底灰色的实际效果是对比度降低。

让文字更接近背景色才是真正有助于创建层次感的方法，而不是让文字变浅灰。

你可能会认为，实现这一点的最简单方法就是使用白色文字并降低不透明度：

虽然这样做确实能降低对比度，但往往会使文字看起来暗淡无光，有时甚至是残缺的。

更糟糕的是，在图像或图案上使用这种方法意味着背景会透过文字显示出来：

更好的方法是根据背景颜色手工挑选一种新的颜色。

选择一种色调相同的颜色，然后调整饱和度和亮度，直到你觉得合适为止：

用这种方法手工挑选颜色，很容易降低对比度，文字也不会显得褪色。

通过取消强调来强调

有时，你会遇到这样的情况，即界面的主要元素不够突出，但你又无法添加任何东西来强调它。

例如，尽管我们尝试给这个活动导航项配上不同的颜色，让它变得 “突出”，但与非活动项相比，它仍然不够突出：

遇到这种情况时，与其进一步强调你想引起注意的元素，不如想想如何去强调与之竞争的元素。

在这个例子中，你可以给不活跃的元素涂上柔和的颜色，让它们处于背景中：

你也可以将这种想法应用到界面中更大的部分。例如，如果侧边栏感觉与主内容区域竞争，就不要给它添加背景色，而是让内容直接位于页面背景上：

标签是最后的手段

放下可访问性干草叉--这与表单无关。

在向用户展示数据（尤其是数据库中的数据）时，很容易陷入使用简单的标签：值格式来显示数据的陷阱。

这种方法的问题在于，它很难以任何层次结构来显示数据；每一条数据都受到同等重视。

你可能根本不需要标签

在很多情况下，只要看看格式就能知道数据是什么。

例如， [email protected] 是电子邮件地址，(555) 765-4321 是电话号码，19.99 美元是价格。

如果光看格式还不够，上下文往往才是关键。当你在员工通讯录中看到 “客户支持 ”这个短语列在某人的名字下面时、你不需要标签就能联想到这是这个人所在的部门。

在不使用标签的情况下展示数据，就更容易强调重要信息或识别信息，从而使界面更易于使用，同时让人感觉更有 “设计感”。

结合标签和数值

即使没有标签的数据并不完全清晰，也可以通过在值中添加说明文字来避免添加标签。

例如，如果需要在电子商务界面中显示库存，可以尝试使用 “库存剩余 12 件 ”来代替 “库存：12 件”。

如果您正在开发一款房地产应用程序，那么类似 “卧室：3 ”的内容就可以简单地变成 “3 间卧室”。

如果能将标签和值合并为一个单元，就能更容易地为每条数据赋予有意义的样式，同时又不影响清晰度。

标签是次要的

有时你确实需要一个标签；例如，当你显示多个类似的数据时，它们需要易于扫描，比如在仪表盘上。

在这种情况下，可以添加标签，但应将其视为辅助内容。数据本身才是最重要的，标签只是为了清晰起见。

将标签变小、降低对比度、使用较轻的字体，或三者结合使用，以减轻标签的重要性。

何时强调标签

如果你在设计一个知道用户会寻找标签的界面，那么强调标签而不是数据可能有意义。

在信息密集的页面（如产品的技术规格）中，通常会出现这种情况。

如果用户想了解一款智能手机的尺寸，他们可能会在页面上搜索 “深度 ”等字样，而不是 “7.6 毫米”。

在这些情况下，不要过于强调数据，它们仍然是重要的信息。通常情况下，只需使用较深的颜色标注标签，用稍浅的颜色标注数值即可。

将视觉层次结构与文档层次结构分开

在构建Web时，使用语义标记非常重要，这意味着如果你决定为界面的一部分添加标题，通常会使用 h1、h2 或 h3 等标题标签。

默认情况下，Web 浏览器会为标题元素分配逐渐变小的字体大小，因此 h1 非常大，而 h6 则非常小。这对于文章或文档等文档风格的内容很有帮助，但在应用程序用户界面中却会助长一些错误的决定。

使用 h1 标签为页面添加 “管理账户 ”这样的标题在语义上是完全合理的，但由于我们接受的培训让我们相信 h1 元素应该很大，因此很容易陷入将标题做得比实际需要的更大的陷阱。

很多时候，章节标题更像是标签而不是标题--它们是辅助支持性的内容，不应该抢走所有的注意力。

通常情况下，该部分的内容才是重点，而不是标题。这意味着很多时候，标题实际上应该很小：

更极端的情况是，出于可访问性的考虑，你甚至可以在标记中包含章节标题，但在视觉上完全隐藏它们，因为内容本身就能说明问题。

不要让你正在使用的元素影响你选择它的样式--出于语义目的选择元素，然后根据你的需要为它们设计样式，以创建最佳的视觉层次结构。

平衡重量和对比度

与普通文字相比，粗体文字让人感觉更突出的原因在于粗体文字覆盖了更大的表面积--在相同的空间内，文字所占的像素要多于背景所占的像素。

这有什么意义呢？原来，表面积和层次之间的关系对用户界面中的其他元素也有影响。

利用对比度补偿重量

在处理图标时，理解这种关系变得非常重要。

就像粗体文字一样，图标（尤其是实心图标）一般都很 “重”，而且覆盖了很大的表面积。因此，当你把图标放在一些文字旁边时，图标往往会给人突出的感觉。

与文字不同，图标的 “重量 ”是无法改变的，因此要想达到平衡，就需要通过其他方式来减轻图标的 “重量”。

一个简单而有效的方法就是通过柔和的颜色来降低图标的对比度。

这种方法适用于任何需要平衡不同重量元素的地方。降低对比度就像一种平衡，即使重量没有改变，也会让较重的元素感觉更轻。

利用权重补偿对比度

就像降低对比度有助于淡化重元素一样，增加权重也是一种为低对比度元素增加强调效果的好方法。

当使用柔和的颜色会使 1px 的细边框等过于微妙，但加深颜色又会使设计感觉刺眼和嘈杂时，这种方法就很有用。

通过增加宽度使边框更重一些，有助于突出边框，同时又不失柔和的外观：

语义是次要的

当用户在页面上可以进行多种操作时，很容易陷入纯粹根据语义来设计这些操作的陷阱。

语义是按钮设计的重要组成部分，但这并不意味着你可以忘记层次结构。

页面上的每个操作都处于重要性金字塔的某一位置。大多数页面只有一个真正的主要操作，几个不太重要的次要操作，以及几个很少使用的三级操作。

在设计这些操作时，传达它们在层次结构中的位置非常重要。

当你采用层次优先的方法设计页面上的操作时，用户界面就不会那么忙乱，而且能更清晰地传达信息：

破坏性行为

具有破坏性或高度严重性并不意味着按钮一定要又大又红又粗。

如果破坏性操作不是页面上的主要操作，那么最好将其放在二级或三级按钮上。

如果破坏性操作是页面上的主要操作，那么将其与确认步骤相结合，在确认步骤中使用大号、红色和粗体样式。

布局和间距

从留白过多开始

清理设计最简单的方法之一就是给每个元素多一点呼吸的空间。

image.png

听起来很简单，对吧？那为什么我们通常不这么做呢？

留白应该删除，而不是增加

在进行网页设计时，留白几乎总是被添加到设计中--如果某些东西看起来有点过于拥挤，你就添加一点边距或填充，直到看起来更好看为止。

image.png

这种做法的问题在于，只给元素留出最小的空间，使其看起来不会太糟糕。要想让东西看起来更漂亮，通常需要更多的留白空间。

更好的方法是，一开始就给某些东西留出过多的空间，然后将其移除，直到你对结果感到满意为止。

image.png

你可能会认为这种方法会导致留白过多，但实际上，在关注单个元素时可能看起来 “有点多 ”的留白，在整个用户界面中却更接近于 “刚刚好”。

密集的用户界面有它的用武之地

虽然有很大呼吸空间的界面几乎总是给人更简洁的感觉，但在某些情况下，更紧凑的设计也是合理的。

例如，如果你正在设计某种需要同时显示大量信息的仪表盘，那么将这些信息打包以便全部显示在一个屏幕上可能会让设计感觉更忙。

image.png

重要的是，要将此作为一个深思熟虑的决定，而不仅仅是默认设置。当你需要删除空白空间时，要比需要添加空白空间时明显得多。

建立间距和尺寸系统

当您试图为用户界面中的元素确定完美尺寸时，您不应该在 120px 和 125px 之间吹毛求疵。

一个像素一个像素地痛苦地试验任意值，往好了说会大大减慢您的速度，往坏了说会造成丑陋、不一致的设计。

取而代之的是，将自己限制在事先定义好的一组限定值范围内。

线性比例尺不起作用

创建一个间距和大小系统并不像 “确保所有东西都是 4px 的倍数 ”那么简单--这种天真的方法不会让你在 120px 和 125px 之间更容易做出选择。

要使系统真正有用，就需要考虑相对其他系统的相邻值之间的差异。

在较小的范围内（如图标的大小或按钮内的填充），几个像素就能产生很大的差别。从 12px 增加到 16px，就增加了 33%！

但在大端（卡片的宽度或着陆页英雄的垂直间距），几个像素基本上是无法察觉的。即使将卡片宽度从 500px 增加到 520px，也只有 4% 的差异，比从 12px 增加到 16px 少了八倍。

如果你希望你的系统能让你轻松决定大小，那么请确保你的比例尺中没有两个值的距离超过 25%。

确定系统

就像在确定元素大小或微调元素间距时，你不想在任意值上花费精力一样，你也不想在任意值上建立间距和大小比例。

一个简单的方法是，从一个合理的基础值开始，然后使用该值的系数和倍数建立一个比例。16px 是一个很好的起始值，因为它能很好地进行分割，同时也是所有主流网页浏览器的默认字体大小。

字号较小一端的数值开始时应该非常密集，随着字号的增大，间距也会逐渐增大。

下面是一个使用这种方法建立的相当实用的标尺示例：

使用系统

一旦定义了间距和大小系统，你就会发现设计速度快了很多，尤其是在浏览器中设计时（在输入数字时比用鼠标拖动时更容易遵循系统）。

需要在元素下增加一些空间？从比例尺中取一个值试试看。还不够吗？下一个值可能就完美了。

虽然工作流程的改进可能是最大的好处，但你也会开始注意到你的设计中出现了以前没有的微妙的一致性，而且看起来会更整洁一些。

间距和尺寸系统将帮助你在更短的时间内，以更少的精力，创造出更好的设计。没有比这更有价值的设计建议了。

不必填满整个屏幕

还记得 960px 是桌面大小设计事实上的布局宽度吗？如今，你很难找到分辨率这么低的手机了。

因此，当我们大多数人在高分辨率显示器上打开自己选择的设计工具时，都会给自己留出至少 1200-1400px 的空间来填充，这并不奇怪。但是，有足够的空间并不意味着你需要使用它。

如果只需要600px，那就用600px。把东西分散开或做得不必要的宽只会让界面更难理解，而在边缘多留出一点空间也无伤大雅。

这同样适用于界面的各个部分。你不需要因为其他部分（如导航）是全宽的， 就把所有内容都变成全宽的。给每个元素留出它所需要的空间--不要为了让它与其他东西相匹配而把它弄得更糟。

缩小画布

如果你很难在大画布上设计出小界面，那就缩小画布！很多时候，当限制条件真实存在时，设计小界面会更容易一些。

如果您要构建一个响应式网络应用程序，请尝试从约 400px 的画布开始，先设计移动布局。一旦你有了满意的移动设计，就把它放到更大尺寸的屏幕上，调整在小屏幕上
感觉不妥的地方。你可能不需要像你想象的那样做太多改动。

列式思维

如果你设计的东西在较窄的宽度下效果最好，但在宽大的用户界面中又感觉不平衡，那么看看是否可以将其分成几列，而不是仅仅将其变宽。

例如，下面这个窄表单布局：如果您想在不增加表格使用难度的前提下更好地利用可用空间，您可以将辅助文字分成单独的一栏：
这使设计感觉更加平衡和一致，同时又不影响表格本身的最佳宽度。

不要勉强

就像你不应该担心把整个屏幕都占满一样，你也不应该试图把所有东西都不必要地塞进一个小区域里。

如果你需要很大的空间，那就去吧！如果没有必要，就不要觉得有义务去填满它。

网格被高估了

使用像 12 栏网格这样的系统是简化布局决策的好方法，可以为你的设计带来令人满意的秩序感。

不过，尽管网格很有用，但将所有布局决策外包给网格可能弊大于利。

并非所有元素都应该是流动的

从根本上说，网格系统只是为元素提供基于百分比的流畅宽度，你可以从一组受限的百分比中进行选择。 例如，在 12 列网格中，每列宽 8.33%。只要元素的宽度是 8.33% 的某个倍数（包括任何边沟），则该元素“在网格上”。

把网格系统当作一种信仰的问题在于，在很多情况下，元素的固定宽度比相对宽度更有意义。

例如，考虑传统的侧边栏布局。使用 12 栏网格系统，侧边栏宽度为 3 栏（25%），主内容区域宽度为 9 栏（75%）。

这起初可能看起来很好，但想想调整屏幕大小时会发生什么。如果屏幕变宽，侧边栏也会变宽，占用了主内容区域本可以更好利用的空间。同样，如果将屏幕变窄，侧边栏就会缩小到最小合理宽度以下，从而导致尴尬的文本缠绕或截断。

在这种情况下，给侧边栏一个固定的宽度，并根据其内容进行优化，会更有意义。然后，主内容区域可以灵活填充剩余空间，并使用自己的内部网格来布局其子区域。这也适用于组件内部--除非你真的想让它缩放，否则不要使用百分比来调整大小。

在需要时才缩小元素

假设您正在设计一张登录卡。如果使用全屏宽度，看起来会很难看，因此您将其宽度定为 6 列（50%），每边偏移 3 列。在中等尺寸的屏幕上，即使有足够的空间将卡片变大，你也会发现卡片有点窄 ，因此在这种尺寸的屏幕上，你可以将卡片宽度改为 8 列，每边空出两列。

这种方法的愚蠢之处在于，由于列宽是不固定的，因此在屏幕尺寸范围内，中
型屏幕上的登录卡要比大型屏幕上的宽：

如果您知道 500px 是卡片的最佳尺寸，那么如果您有足够的空间，为什么还要把卡片做得比 500px 更小呢？

不要根据网格来确定元素的大小，而是给它们一个最大宽度，这样它们就不会太大，只有当屏幕小于最大宽度时才会强制缩小。

不要成为网格的奴隶--为你的组件提供它们所需的空间，在真正必要之前不要做出任何妥协。

相对尺寸不能缩放

我们很容易相信，界面的每个部分都应该相对调整大小，如果元素 A 在较小的屏幕上需要缩小 25%，那么元素 B 也应该缩小 25%。

例如，您正在设计一篇大屏幕尺寸的文章。如果您的正文是18px，而标题是 45px，那么您很有可能将标题大小定义为2.5em；当前字体大小的2.5倍，以此来编码这种关系。

使用em这样的相对单位本身并没有什么问题，但不要误以为这样定义的关系可以保持不变。

在桌面上，2.5em可能是最合适的标题大小，但在较小的屏幕上就不一定了。假设在小屏幕上将正文的大小减小到14px，以控制行的长度。将标题保持在2.5em的大小意味着呈现的字体大小为35px，这对于小屏幕来说太大了！

适合小屏幕的标题大小可能介于 20px 和 24px 之间

这只是正文 14px 大小的 1.5-1.7 倍，与桌面屏幕上的关系完全不同。这意味着根本不存在任何真正的关系，而且试图定义标题大小与正文大小的关系也没有任何实际好处。

一般来说，在大屏幕上较大的元素需要比已经相当小的元素收缩得更快，在小屏幕尺寸上，小元素和大元素之间的差异应该没有那么大。

元素内部的关系

事物应独立缩放的理念不仅适用于在不同屏幕尺寸下调整元素的大小，也适用于单个组件的属性。

假设你设计了一个按钮。它的字体大小为16px，水平填充为16px，垂直填充为 12px：

与前面的例子一样，我们很容易想到应该根据当前字体大小来定义 padding。 这样，如果你想要一个更大或更小的按钮，只需改变字体大小，padding就会自动更新，不是吗？

这样做是可行的--按钮可以放大或缩小，并保持相同的比例。但这是我们真正想
要的吗？

与这些纽扣相比，大号纽扣的衬垫更宽松，而小号纽扣的衬垫则紧得不成比例

在这里，大按钮给人的感觉实际上是更大的按钮，而小按钮给人的感觉实际上是更小的按钮，而不是我们简单地调整了变焦。

放弃一切都需要按比例缩放的想法--给自己独立微调的自由，让设计更容易适应多种环境。

避免模棱两可的间距

当元素组被明确分隔时--通常是通过边框或背景颜色--哪个元素属于哪个组就一
目了然了。

但如果没有明显的分隔线，情况就不一定那么明显了。假如你正在设计一个带有堆叠标签和输入的表单。如果标签下方的边距与输入下方的边距相同，表单组中的元素就不会有明显的“连接”感。

往好的方面说，用户需要付出更多的努力来解释用户界面；往坏的方面说，这意
味着不小心把错误的数据放到了错误的字段中。

解决方法是增加每个表单组之间的空格，这样就能清楚地看到哪个标签属于哪
个输入。

在文章设计中，当章节标题上方空间不足时，也会出现同样的问题：

在项目符号列表中，当项目符号之间的空格与单个项目符号的行高一致时，您需要担心的不仅仅是垂直间距，水平布置的组件也很容易犯这样的错误。

无论何时，当你依靠间距来连接一组元素时，一定要确保该组元素周围的空间大于内部空间--难以理解的界面总是看起来更糟糕。

设计文本

建立类型标度

大多数界面都使用了太多的字体大小。除非团队有一套严格的设计系统，否则
在用户界面的某个地方使用从 10px 到 24px 的所有像素值的情况并不少见。

没有系统地选择字体大小是个坏主意，原因有二：

  1. 这会导致设计中出现恼人的不一致性。
  2. 它会减慢工作流程。
    那么，如何定义类型系统呢？

选择刻度

就像间距和大小一样，线性比例是行不通的。不同字体大小之间的小跳动在比例尺的底部是有用的，但你不想浪费时间在 46px 和 48px 之间为一个大标题做决定。

模块化天平

一种方法是使用比例来计算音阶类型，如 4:5（“大三度”）、2:3（全“五度”），或者是“黄金比例”，即 1:1.618。这通常被称为“模块音阶”。

你可以从一个合理的基础值（16px是常见的，因为它是大多数浏览器的默认字体大小）开始，应用你的比例得到下一个值，然后应用你的比例得到下一个值，如此循环：

这种方法在数学上的纯粹性很诱人，但在实践中却并不完美，原因有以下几点：

  1. 最终得到的是分数值。
    使用 16px 基准和 4:5 比例时，您的缩放比例最终会产生许多与像素不符的尺寸，如 31.25px、39.063px、48.828px 等。浏览器对子像素四舍五入的处理方式略有不同，因此最好尽量避免使用小数尺寸。

如果您确实想使用这种方法，请确保在定义缩放比例时自己对数值进行四舍五入，以避免在不同浏览器中出现偏差一个像素的问题。

  1. 通常需要更多的尺寸。
    如果要为文章等长篇内容定义类型标度，这种方法可以很好地发挥作用， 但对于界面设计来说，使用模块标度获得的跳转往往过于局限。

使用 3:4 的（圆角）字体比例，可以得到 12px、16px、21px 和 28px 等尺寸。虽然从表面上看这并没有太多限制，但在实际使用中，你会希望在 12px 和 16px 之间有一个尺寸，在 16px 和 21px 之间有另一个尺寸。

你可以使用更紧凑的比例，比如 8:9，但此时你只是在尝试选择一个刚好与你已经知道想要的尺寸相匹配的比例。

手工制作的天平

对于界面设计来说，更实用的方法是直接手工取值。这样你就不必担心子像素四舍五入的误差，而且你可以完全控制哪些尺寸存在，而不是把这项工作外包给某个数学公式。

下面是一个比例尺的示例，该比例尺适用于大多数项目，并且与建立间距和尺寸系统中推荐的间距和尺寸比例尺非常吻合。它的限制足以加快你的决策速度，但又不至于让你觉得错过了有用的尺寸。

避免使用 em 单位

在制作字体标尺时，不要使用 em 单位来定义尺寸。由于 em 单位是相对于当前字体大小而言的，因此嵌套元素的计算字体大小通常并不是缩放比例中的实际值。

例如，您定义了这样一个基于 em 的类型标度，如果给一个元素的字体大小设置为1.25em （默认为20px），那么在该元素内部，1em现在就等于20px。也就是说，如果你给其中一个鼓套元素的字体大小设置为.875em，实际计算出的字体大小是17.5px，而不是你的字体比例值 ！

坚持使用 px 或 rem 单位--这是保证你真正坚持系统的唯一方法。

使用好的字体

有成千上万种不同的字体可供选择，分辨好坏是一项令人望而生畏的任务。

培养对所有细节的敏锐洞察力可能需要数年时间。你可能没有那么多时间，所以这里有几个小窍门，你可以马上开始挑选优质字体。

注意安全

对于用户界面设计来说，最安全的选择是相当中性的无衬线字体，比如 Helvetica。

如果你实在不相信自己的品味，一个不错的选择就是依靠系统字体堆栈：这可能不是最雄心勃勃的选择，但至少用户已经习惯看到它。

忽略少于五种重量的字体

这并不总是正确的，但一般来说，有许多不同重量的字体往往比重量较少的字体更精心制作，更注重细节。
许多字体目录会让你根据“样式数”进行筛选，“样式数”是可用权重以及这些权重的斜体变体的组合。

限制可选选项数量的一个好办法是将选项数量增加到 10 个以上（考虑到斜体），特别是在 Google 字体上，85% 的可用选项都被删掉了，只剩下不到 50 种无衬线字体可供选择。

优化可读性

当有人设计一个字体系列时，通常是为了特定的目的。用于标题的字体通常字母间距较窄，小写字母较短（X-高度较小），而用于较小尺寸的字体字母间距较宽，小写字母较高。
请牢记这一点，避免使用 x 高度较短的浓缩字体作为主要用户界面文本。

相信群众的智慧

如果一种字体很受欢迎，那么它很可能是一种好字体。大多数字体目录都会让你按照流行程度进行排序，因此这可以成为限制你的选择的一个好方法。

当你想挑选中性用户界面字体以外的字体时，这一点尤其有用。例如，挑选一款有个性的漂亮衬线字体就很困难。 利用成千上万人的集体决策力，可以让事情变得简单得多。

从关心你的人那里偷东西

检查您最喜欢的一些网站，看看它们使用的是什么字体。现在有很多优秀的设计团队，他们中的很多人都对字体设计有很强的见解 ，他们经常会选择一些很棒的字体，而这些字体可能是你用上面介绍的一些更安全的方法也找不到的。

培养你的直觉

一旦你开始仔细观察设计精良的网站上的字体设计，不久之后你就会很自在地给字体贴上“很棒”或“很糟糕”的标签。

你很快就会成为一个类型势利小人，但上述建议会让你在这段时间里过得更好。

控制生产线长度

在为段落设计样式时，我们很容易犯一个错误，那就是使文字与布局相匹配 ，而不是努力创造最佳的阅读体验。这通常意味着行太长，使文本难以阅读。

为了获得最佳的阅读体验，请将段落宽度控制在每行 45 到 75 个字符之间。在网络上做到这一点的最简单方法是使用 em 单位，它是相对于当前字体大小而言的。20-35em的宽度将使您的段落处于正确的范围内。

如果每行字符数超过 75 个，有时也会奏效，但要注意这是在冒险，如果想稳妥起见，请将字符数控制在 45-75 之间。

处理更广泛的内容

如果将段落文本与图片或其他大型组件混合，即使整体内容区域需要更宽以容纳其他元素，也应限制段落宽度。
在同一内容区域使用不同的宽度，起初可能会有悖直觉，但这样做的结果几乎总是看起来更精致。

基线，非中心

在很多情况下，使用多种字体大小在单行上创建层次是有意义的。
例如，您可能正在设计一张左上角有一个大标题、右上角有一个较小的操作列表的卡片。
当你混合使用这种字体大小时，你可能会本能地将文字垂直居中，以保持平衡：

当不同字体大小之间留有适当的空间时，通常看起来不会很糟糕，不会引起你的注意，但当文字靠得很近时，尴尬的对齐方式就会变得更加明显。

更好的方法是根据基线（即字母所在的假想线）来调整混合字体大小：当你按照基线对齐混合字体大小时，你就利用了眼睛已经感知到的对齐参考。与将两段文字居中并偏移其基线的方法相比，这种方法的效果更简单、更干净。

线高成正比

您可能听说过这样的建议：从可读性的角度来看，行高约为 1.5 是一个很好的起点。虽然这并不一定不是事实，但为文字选择合适的行高要比在所有情况下都使用相同的值复杂一些。

计算线路长度

我们在文本行与行之间添加空格的原因是，当文本换行时，便于读者找到下一行。你是否曾经不小心把同一行文字读了两遍，或者不小心跳过一行？可能是行高太短了。

如果文本行间距过紧，就很容易在页面右侧边缘读完一行文本，然后将视线跳回左侧边缘，却不知道下一行是哪一行。

如果文本行很长，这个问题就会更加严重。你的眼睛要水平跳动越远才能阅读下一行，就越容易迷失方向。

这意味着您的行高和段落宽度应成正比--窄的内容可以使用较短的行高，如 1.5，但宽的内容可能需要高达 2 的行高。

计算字体大小

行的长度并不是选择合适行高的唯一因素，字体大小也有很大影响。

当文字较小时，额外的行间距很重要，因为当文字换行时，它能让你的眼睛更容易找到下一行。

但当文字变大时，你的眼睛就不需要那么多帮助了。这意味着，对于大标题文字，你可能不需要额外的行距，行高为 1 就完全没问题了。

行高和字体大小成反比--小字体使用较高的行高，大字体使用较矮的行高。

并非每个链接都需要颜色

当你在一个没有链接的文本块中加入链接时，重要的是要确保链接突出，看起来可以点击。但是，当你在设计一个几乎所有内容都是链接的界面时，使用一种旨在让链接在段落文本中“突显”出来的处理方法，就会显得非常霸道。

相反，可以用更微妙的方式强调大多数链接，比如使用更重的字体或更深的颜色。

有些链接可能根本不需要默认强调。如果界面中的链接确实是辅助性的，不属于用户在应用程序中的主要路径，可以考虑添加下划线或仅在悬停时改变颜色。

任何想尝试的用户都可以发现它们，但不会与页面上更重要的操作争夺注意力。

考虑可读性

一般来说，文本的对齐方式应与所使用语言的方向一致。对于英语（以及大多数其他语言）来说，这意味着绝大多数文本都应左对齐。不过，其他排列方式也有其用武之地，只是需要有效地加以利用。

不要将长格式文本居中

居中对齐对于标题或简短、独立的文本块来说非常合适。但是，如果内容超过两三行，几乎总是左对齐更好看。

如果有几个文本块需要居中，但其中一个有点太长，最简单的解决方法就是重写内容，使其更短。它不仅能解决对齐问题，还能让你的设计感觉更一致。

数字右对齐

如果您设计的表格中包含数字，请将它们右对齐。当一串数字中的小数点总是在同一个位置时，就更容易一目了然地进行比较 。

连字符对齐文本

对齐文字在印刷品中看起来很不错，在网页上也能很好地体现出更正式的效果，但如果不特别注意，就会在字与字之间造成很多突兀的空隙。

为避免出现这种情况，在对文本进行对齐时，也应启用连字符。在试图模仿印刷品外观的情况下，如在线杂志或报纸，对齐文本效果最佳。

即便如此，左对齐文本也很好用，所以这只是一个偏好问题。

有效使用字母间距

在为文字设计样式时，我们会花很多精力来使文字的重量、颜色和行高恰到好处，但很容易忘记字母间距也是可以调整的。

一般来说，你应该相信字体设计者，不要去管字母间距。不过，在一些常见情
况下，调整间距可以改善设计。

紧缩标题

当有人设计一个字体系列时，他们在设计时都会考虑到一个目的。

Open Sans 等字体系列的设计目的是即使在小尺寸下也能高度易读，因此内置的字母间距要比 Oswald 等为标题设计的字体宽得多。

如果您想在标题或标题中使用字母间距较宽的族，通常可以减少字母间距，以模仿专用标题族的浓缩外观。但要避免反其道而行之--标题字体在小尺寸下很少有好的效果，即使你增加了字母间距也是如此。

提高全大写字母的可读性

大多数字体系列的字母间距都针对普通的“句子大小写”文本进行了优化，即一个大写字母后面主要是小写字母。

小写字母在视觉上有很多变化。n、v和e等字母完全位于字体的x高度内，y 、g和p等字母的下划线在基线以下，而b、f和t等字母的上划线在基线以上。

另一方面，全大写文本就不那么多样化了。由于每个字母的高度相同，使用默认的字母间距往往会导致文本更难阅读，因为字母之间的区别特征较少。

因此，增加全大写文字的字母间距以提高可读性通常是合理的。

使用色彩

摒弃十六进制，采用 HSL

Hex 和 RGB 是网络上最常用的颜色表示格式，但它们并不是最有用的。

使用十六进制或RGB，在视觉上有很多共同点的颜色在代码中看起来却完全不一样。

HSL 通过使用人眼直观感知的属性（色相、饱和度和明度）来表示色彩，从而解决了这一问题。

色相是一种颜色在色轮中的位置--它是一种颜色的属性，即使两种颜色不完全相同，也能让我们将它们识别为“蓝色”。

色相以度为单位，0° 表示红色，120° 表示绿色，240° 表示蓝色。

饱和度是指颜色看起来有多艳丽或鲜艳。0% 的饱和度是灰色（没有颜色），而100% 的饱和度则是鲜艳和强烈。

如果没有饱和度，色相就无关紧要了--当饱和度为 0% 时，旋转色相实际上根本不会改变颜色。

亮度就像它的名字一样--它衡量一种颜色与黑色或白色的接近程度。亮度为 0% 的颜色是纯黑色，亮度为 100% 的颜色是纯白色，亮度为 50% 的颜色是给定色相的纯色。

HSL 与 HSB

不要混淆 HSL 和 HSB - HSL 中的亮度与亮度不同在恒生银行。

在 HSB 中，0% 亮度始终是黑色的，而 100% 亮度只有在饱和度为 0% 时才是白色的。当饱和度为100%时，HSB中的100%亮度与HSL中的100%饱和度和 50%亮度相同。 在设计软件中，HSB比HSL更为常见，但浏览器只能理解HSL，因此如果您要为网络进行设计，HSL应该是您的首选武器。

你需要的颜色比你想象的要多

您是否使用过这种调色板生成器，在其中您可以选择一种起始颜色，然后调整一些选项，最后就会得到您在构建网站时应该使用的五种完美颜色？

这种通过计算来挑选完美配色方案的方法极具诱惑力，但除非你想让自己的网站看起来像这样，否则这种方法用处不大：

您的实际需求

只有五个十六进制代码是无法构建任何东西的。要建造真正的东西，你需要一套更全面的颜色供你选择。

好的调色板可以分为三类。

灰色

文本、背景、面板、表单控件--界面中几乎所有的东西都是灰色的。

你需要的灰色也会比你想象的要多

三到四个色号听起来似乎很多，但过不了多久，你就会希望有比 2 号色号更深一点，但又比 3 号色号更浅一点的灰色。

实际上，你需要有 8-10 种色调可供选择（更多内容请参阅 "预先确定你的色调"）。不要多到让你在 77 号色号和 78 号色号之间浪费时间，但也要足够多， 以确保你不必过于妥协。

真正的黑色看起来会很不自然，所以从深灰色开始，然后逐渐过渡到白色。

主色调

大多数网站都需要一种或两种颜色，用于主要操作、活动导航元素等。这些颜色决定了网站的整体外观--让人联想到 Facebook 的 "蓝色"。就像使用灰色一样，你需要有多种（5-10 种）浅色和深色色调可供选择。

超浅色调可用作警报等内容的有色背景，而深色调则非常适合文字。

强调色

除主色调外，每个网站还需要一些强调色来向用户传达不同的信息。例如，您可能想使用黄色、粉色或茶色等吸引眼球的颜色来突出新功能，您可能还需要用颜色来强调不同的语义状态，比如红色表示确认破坏性操作，黄色为警告信息，或绿色，以突出积极的趋势。虽然这些颜色在整个用户界面中应尽量少用，但也需要多种色调。

如果您要创建的东西需要使用颜色来区分或归类类似元素（如图表上的线条 、日历中的事件或项目上的标签），您可能需要更多的强调色。

总之，一个复杂的用户界面需要多达十种不同的颜色，每种颜色有 5-10种色调 ，这种情况并不少见。

预先确定您的色调

当你需要为调色板中的某种颜色创建更浅或更深的变化时，不要自作聪明地使用 CSS 预处理器函数（如“变亮”或“变暗”）来临时创建色调。这样就会出现 35 种略有不同但看起来都一样的蓝色。

取而代之的是，事先确定一套固定的色调，以便在工作中进行选择。那么，怎样才能搭配出这样的调色板呢？

先选择基色

首先，为您想要创建的色阶选择一个 基色 --中间的颜色，您的浅色和深色色调都是基于这个颜色。

虽然没有真正科学的方法，但对于主色和重点色来说，一个好的经验法则是选择一种适合作为按钮背景的色调。

需要注意的是，这里并没有“从 50% 明度开始”之类的真正规则--每种颜色的表现都有些不同，所以你必须依靠自己的眼睛来判断。

寻找边缘

接下来，选择最深的色调和最浅的色调。这也没有什么科学依据，但考虑一下它们将在哪里使用，并根据实际情况来选择它们，会有所帮助。
最深的色调通常用于文字，而最浅的色调可能用于元素背景的着色。
一个简单的警报组件就是一个很好的例子，它结合了这两种用例，因此可以很好地选择这些颜色。首先选择与底色色调相匹配的颜色，然后调整饱和度和亮度，直到满意为止。

填补空白

有了底色、最深色和最浅色之后，只需填补它们之间的空白即可。

对于大多数项目来说，每种颜色至少需要 5 个色调，如果不想太拘束，可能需要 10 个色调。
9 是一个很好的数字，因为它很容易分割，让填补空白变得更简单。我们把最深的色调称为 900，基本色调称为 500，最浅的色调称为 100。

首先选择色调 700 和 300，也就是位于缝隙中间的那两个。你要让这些色调感觉像是两边色调的完美折衷。

这样，比例尺上就多了四个洞（800、600、400 和 200），您可以用同样的方法来填补它们。

最后，你应该会得到一组相当平衡的颜色，这些颜色提供了足够的选择来满足你的设计想法，而不会让你感觉受到限制。

灰色呢？

对于灰色来说，底色并不那么重要，但除此之外，过程都是一样的。从边缘开始，填补空白，直到得到所需的颜色。

为项目中最深的文字选择一种颜色，从而挑选出最深的灰色；为项目中最浅色的背景选择一种颜色，从而挑选出最浅的灰色。

这不是一门科学

尽管这很诱人，但你不能纯粹依靠数学来制作完美的调色板。

类似上述的系统性方法非常适合你的起步，但不要害怕在必要时做一些小调整。

一旦你开始在设计中使用颜色，几乎不可避免地会想要调整某个色调的饱和度，或者让几个色调变浅或变深。相信你的眼睛，而不是数字。

如果可以的话，尽量避免频繁添加新色调。如果你不努力限制你的调色板，那还不如没有色彩系统。

不要让亮度扼杀饱和度

在 HSL 色彩空间中，当颜色的亮度接近 0% 或 100% 时，饱和度的影响就会减弱--同样的饱和度值，亮度为 50% 时比亮度为 90% 时看起来更艳丽。

这就意味着，如果您不想让给定颜色的浅色和深色色调看起来模糊不清，就需要在亮度离 50% 越远时增加饱和度。

虽然很微妙，但这样的小细节会让效果事半功倍，尤其是在用户界面的大部分区域使用一种颜色时。

但是，如果您的底色饱和度已经很高，该怎么办呢？如果饱和度已经达到 100% ，如何提高饱和度？

利用可感知的亮度优势

您认为这两种颜色中哪一种更浅？

黄色，对吗？事实证明，从 HSL 的角度来看，这两种颜色的“亮度”完全相同：

那么，为什么我们会觉得黄色更亮呢？原来，由于人眼对色彩的感知方式不同，每种色调都有其固有的感知亮度。
将一种颜色的 RGB 分量代入这个公式，就能计算出该颜色的感知亮度：

用 100% 饱和度和 50% 明度对不同色调进行采样，我们可以很好地了解色轮周围不同颜色的明度：

不出所料，黄色的感知亮度高于蓝色。但有趣的是，从最暗的色调到最亮的色调， 感知亮度并不是简单的线性变化，而是存在三个不同的局部最小值（红色、绿色和蓝色）和三个局部最大值（黄色、青色和洋红色）。

通过旋转色调改变亮度

从表面上看，了解色彩无疑是一件有趣的事情。但当你意识到如何在设计中运用这些知识时，事情就变得非常有趣了。

通常，当您想改变颜色的亮度时，您可以调整亮度组件
虽然这样做可以使颜色变浅或变深，但往往会失去一些颜色的强度--颜色看起来更接近白色或黑色，而不仅仅是变浅或变深。

由于不同的色调具有不同的感知亮度，改变颜色亮度的另一种方法就是旋转色
调。
要使颜色变浅，可将色调向最近的亮色调旋转 60°、180° 或 300°。
要使颜色变暗，可将色调向最近的暗色调旋转 - 0°、120° 或 240°。

在尝试为黄色等浅色调制调色板时，这一点非常有用。随着亮度的降低，色调逐渐转向橙色，深色调就会给人温暖而丰富的感觉，而不是沉闷的棕色：当然，您也可以将这些方法结合起来，通过调整色调获得一些亮度，通过调整明度获得一些亮度。虽然这是一种在不影响色彩强度的情况下改变色彩亮度的好方法，但最好还是小剂量使用。色调的旋转角度不要超过 20-30°，否则看起来就会完全不同，而不仅仅是颜色变浅或变深。

灰色不一定是灰色

顾名思义，真正的灰色饱和度为 0% - 它没有任何实际的颜色。
完全没有颜色。
但实际上，很多我们认为是灰色的颜色其实饱和度很高，这种饱和度使一些灰色感觉冷，而另一些灰色感觉暖。

色温

如果你以前买过灯泡，你就不得不在发出淡黄色光的 "暖白 "灯泡和发出淡蓝色光的 "冷白 "灯泡之间做出选择。
在用户界面中使用饱和灰色也有类似的效果。
如果你想让你的灰色感觉凉爽，那就用一点蓝色来饱和它们。为了让灰色更有温暖感，可以在灰色中加入一点黄色或橙色。

为了保持温度的一致性，不要忘记提高浅色和深色色调的饱和度。否则，与亮度接近 50%的灰色相比，这些色调会显得有些暗淡。

你完全可以根据自己的喜好来决定灰阶的饱和度--如果你只想让温度略微升高，就只需要加一点；如果你想让界面向某一方向强烈倾斜，就可以加大饱和度。

无障碍并不一定意味着丑陋

为确保您的设计具有可访问性，《网页内容可访问性指南》（WCAG）建议普通文本（约18Px以下）的对比度至少为4.5:1，较大文本的对比度至少为3:1。

对于典型的浅色背景上的深色文字，满足这一建议非常容易，但当你开始处理彩色文字时，情况就变得棘手多了。

翻转对比度

在彩色背景上使用白色文字时，要达到 4.5:1 的对比度，颜色往往需要很深，这一点会让你大吃一惊。

当这些元素不应该是页面的重点时，这可能会产生层次问题--深色背景会真正吸引用户的注意力。

您可以通过翻转对比度来解决这个问题。与其在深色背景上使用浅色文字，不如在浅色背景上使用深色文字，颜色仍然存在，以帮助支持文字，但它不那么碍眼，也不会干扰页面上的其他操作。

旋转色调

比彩色背景上的白色文字更难的是彩色背景上的彩色文字。如果你想为深色面板中的辅助文字选择颜色，就会遇到这种情况。

如果一开始就使用背景色，然后简单地调整明度和饱和度，你会发现如果不接近纯白色，就很难达到建议的对比度。

您不希望主要文本和次要文本看起来一样，那么您还能做些什么呢？

由于有些颜色比其他颜色更亮，要想在不接近白色的情况下增加对比度，一种方法是将色调旋转到更亮的颜色，如青色、洋红色或黄色。这样既能使文字易于理解，又能保持其丰富多彩。

不要只依赖颜色

色彩是增强信息并使其更容易理解的绝佳方式，但要注意不要依赖它，否则色盲用户将很难理解你的用户界面。

以这些度量卡为例。有了这种设计，红绿色盲的人就不容易分辨出度量衡是变好了还是变坏了：

解决这个问题的一个简单方法是通过其他方式来传达信息，比如添加图标来表示变化是积极的还是消极的。

那像图表那样，每条趋势线都有不同的颜色呢？在这种情况下，可以尝试使用对比色，而不是完全不同的颜色。这样色盲的人更容易分辨出。对他们来说，明暗之间的差别比他们分辨两种不同颜色之间的差别更难。一定要使用色彩来辅助你的设计所表达的内容，而不是将其作为唯一的交流手段。

创造深度

模拟光源

你是否注意过，界面中的某些元素给人一种凸出页面的感觉，而另一些元素则给人一种嵌入背景的感觉？制作这种效果初看起来可能很复杂，但实际上只需要了解一条基本规则。

光从天上来

看看这扇门上的镶板：
尽管您看到的只是一张平面图像，但还是可以很明显地看出门上的面板是凸起的。为什么会这样呢？

注意到面板顶部边缘的颜色更浅吗？这是因为它向天空倾斜，接收到的光线较多。同样，底部边缘较暗，因为它远离天空，接受的光线较少。

只有当面板本身凸起时，这些边缘才有可能朝向那个方向，所以我们的大脑也是这么认为的。

现在来看看这个橱柜的镶板：在这种情况下，很明显面板是嵌入式的，因为顶部有阴影，表明上方的边缘挡住了光线，而底部边缘较浅，表明它向上倾斜。

要在你的设计中创造出同样的深度感，你所需要做的就是模仿现实世界中光线影响事物的方式。

在用户界面中模拟光线

如果你想让某个元素看起来凸起或嵌入，首先要弄清楚你想让该元素具有什么样的轮廓，然后模仿光源如何与该形状相互作用。

凸起部分例如，如果您有一个按钮，您希望它有一种凸出页面的感觉，顶部和底部的边缘完全平整：

因为上边缘和下边缘都是平的，不可能同时看到它们。一般来说，人们的视线会略微向下，因此要想看起来最自然，就应该露出一点上边缘，隐藏下边缘。由于顶端边缘朝上，因此要使其比通常使用顶部边框或略带垂直偏移的嵌入式阴影框。

手动选择较浅的颜色，而不是使用半透明的白色，以获得最佳效果--简单地叠加白色会吸走底层颜色的饱和度。
其次，你需要考虑到凸起的元素会阻挡部分光线到达元素下方的区域。
具体做法是添加一个略微垂直偏移的小暗箱阴影（只希望阴影出现在元素下方）

不要过分追求模糊半径，几个像素就足够了。这些阴影的边缘应该非常锐利--看看墙上插座或窗框底部投下的阴影，就是一个真实的例子。

嵌入式元件

比如说，你正在设计一个“井”组件，它应该给人一种嵌入页面的感觉。稍微向下看，只能看到下唇。由于嘴唇朝向天空，可以使用底部边框或垂直偏移为负值的嵌入式阴影给嘴唇边缘涂上稍浅的颜色：

水井上方的区域应阻挡部分光线到达水井的最顶部，因此应添加一个小的暗色嵌入框阴影，并在垂直方向上略微偏移，以确保光线不会从底部透出。

这种处理方法同样适用于任何可能需要嵌入的元素，例如文本输入和复选框。

不要得意忘形

一旦你了解了如何在界面中模拟光线，就很想花几个小时来修修补补，不断调整，看看能在多大程度上模拟真实世界。

虽然这可能是一种有趣的做法，但在实践中却可能导致界面繁杂而不清晰。从现实世界中借鉴一些视觉线索是增加深度的好方法，但没有必要试图让事物看起来像照片一样逼真。

利用阴影表达海拔高度

阴影不仅仅是一种华而不实的效果--经过深思熟虑的使用，它们可以让你在虚拟 Z 轴上定位元素，从而创造出有意义的深度感。

模糊半径较小的阴影会让人感觉元素只是略微脱离背景，而模糊半径较大的阴影则会让人感觉元素更接近用户：

用户感觉越亲近的东西，就越能吸引他们的注意力。

对于按钮之类的东西，你可能会使用较小的阴影，因为你希望用户注意到它，但又不想让它占据整个页面

中等阴影适用于下拉菜单等需要比用户界面其他部分更高的元素；
大阴影非常适合模式对话框，因为在这种对话框中，你确实需要吸引用户的注意力。

建立高程系统

就像色彩、排版、间距和大小一样，定义一组固定的阴影会加快工作流程，并有助于保持设计的一致性。

你不需要太多不同的阴影，通常五个选择就足够了。

首先定义最小的阴影和最大的阴影，然后在中间填入阴影，阴影的大小呈线性增长：

将阴影与互动相结合

阴影不仅可以静态定位 Z 轴上的元素，还可以在用户与元素交互时提供视觉提示。

例如，您有一个项目列表，用户可以点击并拖动每个项目对其进行排序。当用户点击一个项目时，给它添加一个阴影，会让用户感觉它跳到了列表中其他项目的上方，并让用户清楚地知道他们可以拖动它：

同样，当用户点击按钮时，可以通过切换到较小的阴影，或者完全去掉阴影，让用户感觉按钮是被压入页面的：

以这种有意义的方式使用阴影是一种很好的方法，它可以让我们在选择元素阴影类型的过程中省去很多麻烦。不要考虑阴影本身，而是要考虑元素在 Z 轴上的位置，然后为其分配相应的阴影。

阴影有两个部分

您是否曾经在一个网站上看到一个非常漂亮的阴影，却发现他们实际上使用了两个阴影？
这种疯狂是有方法的，其实很简单，也很有道理。

当你看到有人将两种阴影结合在一起时，他们并不是在随意试验，直到效果看起来不错为止，而是用每种阴影来完成特定的工作。

第一个阴影更大、更柔和，具有相当大的垂直偏移和较大的模糊半径。它模拟的是直接光源在物体背后投下的阴影。 第二个阴影更紧凑、更暗，垂直偏移更小，模糊半径也更小。它模拟的是物体下方的阴影区域，即使环境光也很难照射到该区域。

与使用单一阴影相比，这样使用两个阴影能让你获得更多的控制权--你可以让较大的阴影保持漂亮和微妙，同时还能使阴影更接近元素的边缘，并使其清晰明了。

海拔高度计算

当物体离表面越来越远时，由于环境光线不足而产生的小黑影就会慢慢消失（拿你桌上的东西试试吧）。

因此，如果你要在自己的项目中使用这种双阴影技术，请确保在代表较高海拔的阴影中使用更微妙的阴影。

在海拔最低的地方应该非常明显，而在海拔最高的地方几乎（或完全）看不见。

即使是平面设计也可以有深度

当大多数人谈论 "扁平化设计 "时，他们指的是在设计中不使用阴影、渐变或
任何其他试图模仿现实世界中光线与事物相互作用的效果。

但最有效的扁平化设计仍能传达深度，只是方式不同而已。

用色彩营造深度

一般来说（尤其是相同颜色的色调），浅色物体感觉离我们更近，深色物体感觉离我们更远。

让元素的颜色比背景颜色浅，让人感觉它凸出了页面；如果想让元素感觉像井一样嵌入页面，则让它的颜色比背景颜色深：

这同样适用于非平面设计--色彩只是你工具袋中的另一种表达距离的工具。

使用实体阴影

在平面设计中传达深度的另一种方法是使用垂直偏移的短阴影，且完全没有模糊半径。
这是一种很好的方法，既能让卡片或纽扣稍稍脱离页面，又不失平面美感。

重叠元素创建图层

创造深度的最有效方法之一就是将不同的元素重叠在一起，让人感觉设计有多个层次。
例如，不要将卡片完全包含在另一个元素中，而是将其偏移，使其跨越两个不同背景之间的过渡：
您也可以让一个元素比它的父元素高，这样它的两边就会重叠

重叠元素也可以增加较小组件的深度，例如这个旋转木马上的控件

重叠图像

这种技术对图像也很有效，但没有特殊的考虑到重叠的图像很容易发生冲突。

避免这种情况的一个简单技巧是给图片加上“隐形边框”--与背景颜色相匹配--这样图片之间就会有一定的间隙：
你仍然可以创造出层次的外观，但不会出现难看的冲突。

处理图像

使用好照片

糟糕的照片会毁掉一个设计，即使它的其他方面看起来都很不错。 如果您的设计需要摄影，而您又不是一名出色的摄影师，您有两种选择：

  1. 聘请专业摄影师。
    如果您的项目需要非常特殊的照片，请委托专业人士。拍摄出色的照片不仅要使用昂贵的相机，还要掌握灯光、构图、色彩等技巧，这些都需要多年的积累。

  2. 使用高质量的图片库。
    如果您的需求比较普通，那么有大量的优秀资源可以让您购买到优秀的图片库照片。甚至还有像 Unsplash 这样的网站免费提供精美照片。

无论如何，都不要用占位符图片进行设计，而指望用智能手机拍几张照片，然后再换上去。这永远行不通。

文字需要一致的对比度

有没有试过在大幅英雄图片上加上标题，却发现无论用什么颜色的文字都难以阅读？

这是因为问题不在于文字，而在于图像。

背景图像的问题

照片可能非常动态，有很多非常亮的区域，也有很多非常暗的区域。白色文字在暗部看起来很不错，但在亮部就会丢失。深色文字在浅色区域看起来很棒， 但在深色区域就会丢失。
要解决这个问题，需要减少图像的动态效果，使文字和背景之间的对比更加一致。

添加蒙版

增加文字整体对比度的一种方法是在背景图片上添加半透明覆盖层。黑色叠加可以淡化浅色区域，使浅色文字更突出，而白色叠加可以提亮深色区域，使深色文字更突出。

降低图像对比度

使用叠加时的一个折衷方案是，你是对整个图像进行调亮或调暗，而不仅仅是对有问题的区域进行调亮或调暗。
如果您想要更多的控制权，另一种解决方案是降低图像本身的对比度：

降低对比度会改变图像整体的明暗感觉，因此一定要调整亮度来进行补偿。

为图像着色
帮助文字在图像中脱颖而出的另一种方法是使用单一颜色对图像进行着色。
有些照片编辑软件将此作为一流的功能，但如果你的软件没有，你可以通过三个步骤来创建这种效果：

  1. 降低图像对比度，使其更加平衡。
  2. 消除图像的色彩饱和度，去除任何现有色彩。
  3. 使用 "乘法 "混合模式添加纯色填充。
    这也是让背景图片与现有品牌颜色更搭配的好方法。

添加文字阴影
如果你想在背景图像中保留更多的动态效果，文字阴影是一种仅在最需要的地方增加对比度的好方法。
你希望它看起来更像一个微妙的光晕，而不是真正的阴影，所以使用大的模糊半径，不要添加任何偏移。
降低整体图像对比度仍然是个好主意，但将对比度与文字阴影结合起来，就能减少对比度。

万物皆有预定尺寸

每个人都知道，将位图图像缩放至大于原始尺寸是个坏主意--它们会立即感觉 "模糊 "并失去清晰度。
但这并不是缩放出错的唯一途径，即使你认为自己是在稳妥行事。

不要放大图标

如果你设计的东西需要用到一些大图标（比如着陆页的“功能”部分），你可能会本能地抓起你最喜欢的 SVG 图标集，然后把它们的大小调大，直到它们符合你的需要。

它们毕竟是矢量图像，因此，如果增大尺寸，质量也不会受到影响，不是吗？

虽然矢量图像的质量确实不会因为尺寸的增大而降低，但绘制尺寸为 16-24px 的图标在放大到 3 倍或 4 倍时，看起来永远不会非常专业。它们缺乏细节， 总给人一种不成比例的 "笨重 "感。

如果你只有小图标，可以尝试将它们围在另一个形状内，并给该形状添加背景色。这样可以使实际图标更接近其预期大小，同时仍能填满较大的空间。

不要缩小屏幕截图

假设您想在同一功能页面上添加应用程序的截图。
如果你截取一张全尺寸的屏幕截图，然后将其缩小 70%，最终得到的图像就会在太小的空间里塞进太多的细节。

应用程序中的 16px 字体在截图中变成了 4px 字体，访客的眼球会离屏幕两英寸远，眯成一条缝，费力地辨认文字内容。

如果您想在设计中包含详细的屏幕截图，请在较小的屏幕尺寸下截图（比如您的平板电脑布局），然后保存一张空间大，就不用缩得那么厉害：或者考虑只截取部分截图，这样就可以在更小的空间内显示，而无需缩小比例：

如果你确实需要在狭小的空间内放置整个应用程序的截图，可以尝试绘制简化版的用户界面，去掉细节，用简单的线条代替小文字：

这样既能传达出设计的大局观，又不会让访客试图找出所有细节。

也不要缩小图标
就像绘制成 16px 大小的图标在放大后会显得很笨重一样，绘制成较大尺寸的图标在缩小后也会显得模糊不清。
最极端的例子就是收藏夹，也就是你在浏览器标签页中看到的页面标题旁边的小图标。
如果尝试将 128px 大小的徽标缩小到 favicon 大小，就会变成当浏览器尽力在一个 16 平方英寸的小方格中呈现所有细节时，"砰 "的一声闷响。更好的办法是按照目标尺寸重新绘制一个超级简化版的徽标，这样你就可以控制妥协，而不是由浏览器来决定：

小心用户上传的内容
当你依赖于用户上传的图片时，你就没有时间去微调对比度、仔细调整颜色或裁剪出完美的画面。
虽然在某种程度上你总是受用户的摆布，但你可以做一些事情来确保他们的内容不会完全破坏你的设计。

控制形状和大小
以固有的长宽比显示用户上传的图片确实会影响布局，尤其是在屏幕上同时显示大量图片的情况下。

与其让用户破坏页面结构，不如将图片放在固定的容器中，裁剪掉不合适的图片。现在使用 CSS 很容易做到这一点，只需将图片设置为背景图片，并将background-size属性设置为cover。

防止背景出血
当用户提供的图像的背景颜色与用户界面中的背景颜色相似时，图像和背景就会渗在一起，导致图像失去形状。

与其试图用边框来解决这个问题，不如尝试使用微妙的内框阴影：边框通常会与图像中的颜色产生冲突，而大多数人甚至不会意识到阴影的存在
如果你不喜欢方框阴影带来的轻微 "嵌入 "效果，半透明的内边框也很不错

点睛之笔

为默认设置充电
你不必总是在设计中添加新元素来增加亮点--有很多方法可以通过 "强化 "已有元
素来活跃页面。
例如，如果您的设计包含一个列表，可以尝试用图标代替列表：

在很多情况下，复选标记和箭头都是很好的通用选择，但你也可以根据内容
使用更具体的东西，比如在与安全相关的功能列表中使用挂锁图标：

同样，如果您正在撰写推荐信，可以尝试通过增大尺寸和改变颜色将引语 "
提升 "为视觉元素：

链接是另一种适合特殊样式的选择。你可以做一些简单的事情，比如改变颜色和字体大小，也可以做一些花哨的事情，比如加一条粗粗的彩色自定义下划线，部分覆盖文本：

如果你正在设计一个表单，使用自定义复选框和单选按钮是为设计添加一些
色彩的简单方法：

只需在选定的状态下使用一种自己的品牌颜色，而不是浏览器的默认颜色， 往往就足以让人从感觉乏味到感觉设计精良。

用重点边框增添色彩
如果您不是平面设计师，如何为您的用户界面增添一抹视觉亮点？
有一个简单的小窍门可以带来很大的不同，那就是在界面的某些部分添加色
彩丰富的重点边框，否则就会让人感觉有些平淡无奇。
例如，横跨卡片顶部：
...或突出显示活动导航项目：
或沿着警报信息的侧面：
或作为标题下的简短重音：
甚至横跨整个版面的顶部：
在用户界面上添加一个彩色矩形并不需要任何图形设计才能，而且它可以大大增强 "设计感"。

装饰您的背景
即使你在层次、间距和排版方面做得很好，有时设计还是会让人觉得有点平淡无奇。
在不大幅改变设计的情况下，打破单调乏味的一个好方法就是为一些背景添加一些刺激元素。
更改背景颜色
为背景增添亮点的方法之一就是简单地改变颜色。
这对于强调单个板块以及在整个页面部分之间增加一些区别非常有效。

如果想要更有活力，你甚至可以使用轻微的渐变色：

为了达到最佳效果，应使用相差不超过 30°的两种色调。

使用重复图案
另一种方法是添加微妙的可重复图案，比如Hero.Patterns公司的这款图案

您也不一定要在整个背景上都重复这一点

背景和图案之间的对比度要低，以确保可读性。

添加一个简单的形状或插图
您也可以尝试在特定位置加入一两个单独的图形，而不是装饰整个背景。
简单的几何图形就很好地解决了这个问题：

小块的可重复模式也是如此：

你甚至可以做得更复杂一些，比如一张简化的世界地图：就像全背景图案一样，最好保持较低的对比度，以免干扰内容。

不要忽视空白状态
想象一下，您正在为自己正在开发的应用程序设计一项新功能。
你花了大量时间制作完美逼真的样本数据，挑选用户名和头像，并拼凑出一个漂亮而震撼的屏幕。

您编写了所有代码，并将其部署到生产环境中。但是，当兴奋的用户点击
导航栏中的新项目时，他们会看到这样的内容：

如果你正在设计依赖于用户生成内容的东西，那么空状态应该是优先考虑的事项 ，而不是事后的想法。
尝试加入图片或插图来吸引用户的注意力，并强调行动号召，鼓励用户采取下一步行动：

如果你正在制作的内容有大量的辅助用户界面（如标签或过滤器），可以考虑完全隐藏这些内容。在用户创建内容之前，没有必要展示一堆没有任何作用的操作。

空白状态是用户与新产品或新功能的第一次互动。空闲状态是用户与新产品或新功能的首次互动，应利用空闲状态这一契机，使其变得有趣和令人兴奋--不要满足于平淡和乏味。

减少边框
当你需要在两个元素之间建立分隔时，尽量不要立即使用边框。

虽然边框是区分两个元素的好方法，但它并不是唯一的方法，使用过多的边框会让你的设计感觉繁忙和杂乱。
使用盒影
方框阴影能像边框一样很好地勾勒出元素的轮廓，但它可以更微妙地达到同样的目的，而不会让人分心。

当应用盒状阴影的元素与背景颜色不一致时，这种方法效果最佳。 
使用两种不同的背景颜色
通常只需赋予相邻元素略微不同的背景颜色，就能在它们之间建立区别。

如果您已经在使用不同的背景颜色和边框，请尝试去掉边框；您可能并不需
要它。 
添加额外的间距
还有什么比增加元素之间的间隔更好的方法呢？

在不引入任何新用户界面的情况下，进一步拉开间距是区分元素组的好方法。
换位思考
大多数人对某些组件的外观都有很多先入为主的观念。但是，我们习惯于认为设计某个组件只有一种方法，这并不意味着这是真的。
例如，想象一个下拉菜单。你可能会想象出一个带点阴影的白色方框，里面堆叠着一系列链接：
但谁说下拉菜单一定是一个无聊的链接列表？它只是屏幕上的一个浮动框，你可以对它做任何你想做的事。
将其分成几个部分，使用多栏，添加辅助文字或彩色图标--做一些有趣的事情！
不要只停留在下拉菜单上，比如表格呢？ 
当你想象一个表格时，你可能会想到每列都包含一个特定的数据：
不过，表格并不一定要这样工作--如果一列不需要排序，就没有理由不把它与相关列结合起来，引入一些有趣的层次结构
表格内容也不一定非得是纯文本。如果有必要，可以添加图片，或引入一些颜色来丰富现有数据：
单选按钮怎么样？没有什么比一堆旁边有小圆圈的标签更无聊的了。

如果一组单选按钮是用户界面设计的重要组成部分，那么可以尝试用可选卡片来代替：
不要让现有的观念束缚你的设计--约束是强大的，但有时一点自由正是你将界面提升到一个新水平所需要的。

提升等级

以下是您可以继续磨练自己的技能，并为自己的工具袋添加新工具的两种最佳方法。

寻找你不会做出的决定
每当你偶然发现自己非常喜欢的设计时，都要问问自己：“设计师在这里做了什么我想不到的事吗？”也许是他们在日期选择器上倒置背景颜色的方式；或者他们把按钮放在文本输入中而不是外面的方式；或者像标题使用两种不同的字体颜色这么简单：
注意这些不直观的决定是发现新想法的好方法，你可以将其应用到自己的设计中。

重建您喜爱的界面
注意小细节，让设计看起来更美观的最佳方法
要真正做到精益求精，就必须从头开始重新设计，而不需要偷看开发人员的工具。
当你试图找出为什么你的版本看起来与原版不同时，你会发现一些技巧， 比如 "降低标题的行高"、"为大写文本添加字母间距 "或 "组合多个阴影"， 这些都是你自己发现的。
通过不断仔细研究那些能给你带来灵感的作品，你将会在未来的岁月里不断汲取设计技巧。