Refactoring UI

# 从零开始

# 从功能开始，而不是从布局开始

• "应用程序 "实际上是一系列功能的集合
  • 在设计出一些功能之前，甚至都不知道需要哪些信息来决定导航应该如何工作
• 与其从外壳开始，不如从实际功能开始

# 细节在后

• 在设计新功能的最初阶段，重要的是不要纠结于字体、阴影、图标等低层次的决定
  • 这些东西最终都会变得重要，但现在并不重要
• 可以试着画草图来忽略细节

# 克制颜色

• 即使已经准备好用更高的保真度来完善一个创意，也要抵制立即引入色彩的诱惑
• 通过灰度设计，迫使不得不使用间距、对比度和大小来完成所有繁重的工作
  • 虽然难度稍高， 但最终的界面会更加清晰， 层次分明，便于日后使用色彩进行强化

# 不要过度投资

• 低保真设计的全部意义在于能够快速行动，以便尽快开始建造实物
• 草图和线框是一次性的
  • 用它们来探索你的想法，并在你做出决定后将它们抛在脑后

# 不要设计太多

要弄清产品中的每个功能应该如何交互，每个边缘情况应该如何看待，真的很难，尤其是在抽象的情况下。如果你仅凭设计工具和想象力就想弄明白这些东西，那就会给自己带来挫败感。

# 循环工作

• 与其事先设计好一切，不如在短周期内完成工作
  • 从设计下一个要构建的功能的简单版本开始
• 一旦你对基本设计感到满意，就把它变成现实
  • 在实际使用的界面中解决设计问题，要比事先设想每一种边缘情况容易得多
• 迭代工作设计，直到没有问题需要解决为止、然后跳回设计模式，开始设计下一个功能
• 不要在抽象的工作中不知所措
  • 尽早构建真实的东西，这样你的想象力就不必承担所有繁重的工作

# 做一个悲观主义者

• 不要在设计中暗示尚未准备好构建的功能
• 设计最小的有用版本，如果某个功能的一部分是 "必需的"，那就稍后再设计
• 先构建简单的版本， 这样就有了依托

# 选择个性

• 每一种设计都有某种个性
  • 一个银行网站可能会试图传达安全和专业的信息，而一个新潮的初创公司可能会有一个让人感觉有趣和好玩的设计
• 从表面上看，赋予设计以特定的个性可能听起来很抽象、很牵强，但其中很多都是由一些坚实、具体的因素决定的

# 字体选择

• 如果想要优雅或经典的外观，不妨在设计中使用衬线字体
• 如果要营造俏皮的效果，可以使用圆角无衬线字体
• 如果想要更朴素的外观，或者想依靠其他元素来体现个性，中性无衬线字体就非常适合

# 颜色

• 蓝色既安全又熟悉--没有人会抱怨蓝色
• 金色可能会说 "昂贵 "和 "精致"
• 粉红色更有趣一些，不那么严肃

# 边界半径

设计中是否将边角修圆以及修圆的程度会对整体感觉产生很大的影响。

• 边界半径较小的设计非常中性，本身并不能传达出太多个性
• 边框半径越大，感觉越俏皮
• 完全没有边界半径则让人感觉严肃或正式得多

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

# 语言

• 使用不那么个人化的语气可能会让人感觉更正式或更专业
• 使用更友好、更随意的语言则会让人感觉网站更友好

# 决定你真正想要什么

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

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

# 限制你的选择

# 预先确定系统

在你需要做出决定的时候，与其从无穷无尽的选择库中手工挑选价值，不如从一组较小的选择开始。

• 不要每次需要挑选新的蓝色色调时都去拿取色器，而是从事先挑选好的 8-10 种色调中进行选择
• 不要一个像素一个像素地调整字体大小，直到看起来完美为止，事先定义一个限制性的字体比例，并以此来决定未来的字体大小

# 通过排除法进行设计

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

• 当你只能选择一系列看起来都明显不同的方案时，挑选最佳方案就变得易如反掌了

# 将一切系统化

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

• 系统需要包括
  • 字体大小
  • 字体重量
  • 行高
  • 颜色
  • 外边距
  • 内边距
  • 宽度
  • 高度
  • 盒子阴影
  • 边框半径
  • 边框宽度
  • 透明度
  • ...
• 不必提前定义所有这些东西，只需确保你是以系统为中心的思维方式来进行设计的
  • 在做出新的决定时， 寻找机会引入新的系统，尽量避免两次做出同样的小决定

# 等级就是一切

# 不是所有元素都一样

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

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

# 尺寸并不代表一切

• 过分依赖字体大小来控制层次结构是一个错误--这往往会导致主要内容过大，次要内容过小
  • 与其让字体大小独自承担所有重任， 不如尝试使用字体重量或颜色来完成同样的工作
  • 在辅助文字上使用柔和的颜色而不是小号字体， 既能让人明白文字是次要的，又能降低可读性
• 尽量使用两到三种颜色
  • 深色用于主要内容（如文章标题）
  • 次要内容（如文章发表日期） 的灰色区域
  • 浅灰色用于三级内容（可能是页脚中的版权声明）
• 对于用户界面工作来说，两种字体重量通常就足够
  • 大部分文字使用正常的字体重量（400 或 500，取决于字体）
  • 对于想要强调的文字，可使用较重的字体（600 或 700）时

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

• 在白色背景上，让文字变成浅灰色是一个很好的方法，这是因为我们看到的白底灰效果实际上是对比度降低了
• 让文字更接近背景色才真正有助于创建层次，而不是让文字变成浅灰色
  • 使用白色文字并降低不透明度，确实降低了对比度，但往往会导致文本看起来暗淡、失色，有时甚至是残缺的
    • 在图像或图案上使用这种方法意味着背景会透过文字显示出来
  • 更好的方法是根据背景色手工挑选新的颜色
    • 选择相同色调的颜色，然后调整饱和度和亮度， 直到你觉得合适为止

# 通过取消强调来强调

• 与其进一步强调你想引起注意的元素， 不如想想如何去强调与之竞争的元素

• 如果觉得侧边栏与主内容区域竞争，就不要给它添加背景色，而是让内容直接位于页面背景上

# 标签是最后的手段

• 向用户展示数据（尤其是数据库中的数据）时，很容易陷入使用简单的标签：值格式显示数据的陷阱
  • 这种方法的问题在于，它很难以任何层次来呈现数据；每项数据都受到同等重视

# 您可能根本不需要标签

• 在很多情况下，只要看看格式就能知道数据是什么
• 在不使用标签的情况下展示数据， 就更容易强调重要信息或识别信息，从而使界面更易于使用，同时也更有 "设计感"。

# 合并标签和数值

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

• 如果能将标签和数值合并为一个单元，就更容易在不影响清晰度的情况下为每条数据赋予有意义的样式

# 标签是次要的

• 有时你确实需要一个标签；例如，当你显示多个类似数据时，它们需要易于浏览，比如在仪表板上
  • 在这种情况下，可以添加标签，但将其视为辅助内容。数据本身才是最重要的，标签只是为了清晰起见

  

• 通过缩小标签、降低对比度、使用较轻的字体或三者结合的方式来淡化标签

# 何时强调标签

• 如果你在设计界面时知道用户会寻找，因此，强调标签而不是数据可能更有意义
  • 在信息密集的页面（如产品的技术规格）中，这种情况经常出现
  • 通常只需在标签上使用较深的颜色，在数值上使用稍浅的颜色即可

# 将视觉层次结构与文件层次结构分开

• 默认情况下，网络浏览器会为标题元素分配逐渐变小的字体大小
  • 这对于文章或文档等文档风格的内容很有帮助，但在应用程序用户界面中却会助长一些错误的决定
  • 很容易掉进把标题做得比实际需要更大的陷阱
  • 很多时候，章节标题更像是标签而不是标题--它们是辅助内容，不应该抢走所有的注意力

  

• 更极端的情况是， 出于可访问性的考虑， 你甚至可以在标记中包含章节标题，但在视觉上完全隐藏它们， 因为内容本身就能说明问题
• 不要让你使用的元素影响你选择它的样式--为语义目的选择元素，并根据需要为它们设计样式，以创建最佳的视觉层次

# 平衡重量和对比度

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

# 利用对比度补偿重量

• 就像粗体文字一样，图标（尤其是实心图标） 一般都很 "重"，而且覆盖的面积很大
  • 当你把图标放在一些文字旁边时，图标往往会给人突出的感觉
  • 与文字不同， 图标的 "重量 "是无法改变的， 因此要创建平衡，就需要通过其他方式来淡化它
  • 一个简单而有效的方法就是降低图标的对比度， 使其颜色更柔和

  

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

# 利用重量补偿对比度

• 当使用柔和的颜色会使 1px 的细边框等过于微妙，但加深颜色又会使设计感觉刺眼和嘈杂时，这种方法就很有用
  • 增加边框的宽度，让边框更厚重一些，这样既能突出边框， 又不会失去柔和的感觉

# 语义是次要的

• 当用户可以在页面上进行多种操作时，很容易陷入纯粹根据语义来设计这些操作的陷阱
• 语义是按钮设计的重要组成部分，但这并不意味着你可以忘记层次结构
• 页面上的每个操作都处于重要性金字塔的某个位置
  • 大多数页面只有一个真正的主要操作，几个不太重要的次要操作，以及几个很少使用的三级操作
• 在设计这些操作时，必须明确它们在层次结构中的位置
  • 主要操作应显而易见，纯色、高对比度的背景色在这里非常适合
  • 辅助操作应清晰但不突出，大纲样式或对比度较低的背景颜色都是不错的选择
  • 三级操作应易于发现，但不引人注目，将这些操作设计成链接的样式通常是最好的方法

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

# 破坏性行为

• 具有破坏性或高度严重性并不意味着按钮一定要又大又红又粗
  • 如果破坏性操作不是页面上的主要操作，那么最好将其放在二级或三级按钮上处理
• 将其与确认步骤相结合， 其中破坏性操作实际上是主要操作，并在此处使用大红色粗体样式

# 布局和间距

# 开始时留白过多

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

# 应删除空白，而不是增加空白

• 为网页设计时，几乎总是在设计中加入留白元素
  • 如果有些东西看起来太拥挤， 就增加一点边距或填充， 直到看起来好一些
• 要想让某样东西真正看起来很棒，通常需要更多的留白空间
  • 更好的办法是，先给某样东西过多的空间，然后将其移除，直到你对结果满意为止

# 密集的用户界面有其存在价值

• 虽然有很大呼吸空间的界面几乎总是给人更简洁的感觉， 但在某些情况下， 更紧凑的设计肯定是有意义的
• 重要的是要有意识地做出这样的决定，而不仅仅是默认设置

# 建立间距和尺寸系统

一个像素一个像素痛苦地试验任意值， 往好了说会大大降低速度，往坏了说会产生丑陋、不一致的设计。

• 将自己限制在事先定义好的一组有限制的值范围内

# 线性比例尺不起作用

• 创建一个间距和大小系统并不像 "确保所有东西都是 4px 的倍数 "那么简单
• 一个系统要想真正发挥作用，就必须考虑到相对于其他系统的相邻值之间的差值
• 如果您希望您的系统能让您轻松做出尺寸决定，请确保刻度中没有两个值的距离超过 25%

# 确定系统

• 先确定一个合理的基值，然后使用该值的系数和倍数建立一个比例尺
• 16px 是一个很好的开始数字，因为它能很好地分割，而且也是每个主要网络浏览器的默认字体大小
  • 在刻度的小端，数值开始时应该非常密集，随着刻度的升高，间隔会逐渐变大

# 使用系统

• 一旦确定了间距和大小系统，你就会发现设计速度快了很多，尤其是在浏览器中设计时
• 工作流程的改进可能是最大的好处，但你也会开始注意到你的设计中出现了以前没有的微妙的一致性，东西看起来会更整洁一些

# 不必填满整个屏幕

• 有足够的空间并不意味着你需要使用它

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

# 缩小画布

• 如果你很难在大画布上设计出小界面，那就缩小画布
  • 很多时候，当限制条件真实存在时，设计小界面会更容易一些
• 如果您要构建一个响应式网络应用程序， 请尝试从约 400px 的画布开始，先设计移动布局
  • 一旦你有了满意的移动设计，就把它放到更大尺寸的屏幕上，调整在小屏幕上感觉不妥的地方
    • 你可能不需要像你想象的那样做太多改动

# 列式思维

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

# 不要勉强

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

# 网格被高估了

• 使用像 12 栏网格这样的系统是简化布局决策的好方法，可以为你的设计带来令人满意的秩序感
  • 不过，尽管网格很有用，但将所有布局决策外包给网格可能弊大于利

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

• 从根本上说，网格系统只是为元素提供基于百分比的流畅宽度，你可以从一组受限的百分比中进行选择
• 把网格系统当作一种信仰的问题在于，在很多情况下，元素的固定宽度比相对宽度更有意义

• 这也适用于组件内部--除非你真的想让它缩放，否则不要使用百分比来调整大小

# 在需要时才缩小元素

• 不要根据网格来确定元素的大小， 而是给它们一个最大宽度， 这样它们就不会太大，只有当屏幕小于最大宽度时才会强制缩小
• 不要成为网格的奴隶--为你的组件提供它们所需的空间，在真正必要之前不要做出任何妥协

# 相对尺寸不能缩放

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

# 元素内部的关系

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

# 避免模棱两可的间距

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

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

# 设计文本

# 建立类型模度

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

• 没有系统地选择字体大小是个坏主意
  • 这会导致设计中出现恼人的不一致性
  • 它会减慢工作流程

# 选择模度

• 就像间距和大小一样， 线性比例是行不通的

# 模块化模度

• 一种方法是使用比例来计算模度类型，如 4:5（"大三度"） 、 2:3（"全五度"），或者是 "黄金比例"，即 1:1.618
• 可以从一个合理的基础值（16px 是常见的），开始，应用你的比例得到下一个值，然后应用你的比例得到下一个值，如此循环
  • 不过在在实践中却并不完美，会有分数值，并且尺寸过于局限

# 自定义模度

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

# 避免使用 em 单位

• 由于 em 单位是相对于当前字体大小而言的，因此嵌套元素的计算字体大小通常并不是缩放比例中的实际值
• 坚持使用 px 或 rem 单位--这是保证你真正坚持系统的唯一方法

# 使用好的字体

# 注意安全

• 对于用户界面设计来说，最安全的选择是相当中性的无衬线字体，比如 Helvetica
• 如果你实在不相信自己的品味，一个不错的选择就是依靠系统字体堆栈

# 忽略少于五种重量的字体

• 一般来说， 有许多不同重量的字体往往比重量较少的字体更精心制作，更注重细节

# 优化可读性

• 避免使用 x 高度较短的浓缩字体作为主要用户界面文本

# 相信群众的智慧

• 如果一种字体很受欢迎， 那么它很可能是一种好字体

# 从关心你的人那里偷东西

• 检查您最喜欢的一些网站，看看它们使用的是什么字体

# 培养你的直觉

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

# 控制你的行长度

• 在为段落设计样式时，我们很容易犯一个错误，那就是使文字与布局相匹配，而不是努力创造最佳的阅读体验
• 为了获得最佳的阅读体验，请将段落宽度控制在每行 45 到 75 个字符之间

# 处理更广泛的内容

• 如果将段落文本与图片或其他大型组件混合， 即使整体内容区域需要更宽以容纳其他元素，也应限制段落宽度

# 基线，非中心

• 在很多情况下，使用多种字体大小在单行上创建层次是有意义的
• 相比垂直居中，更好的方法是根据基线（即字母所在的假想线）来调整混合字体大小

# 行高成正比

# 计算行宽

在文本行与行之间添加空格的原因是， 当文本换行时， 便于读者找到下一行。

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

# 计算字体大小

• 当文字较小时，额外的行间距很重要，因为当文字换行时， 它能让你的眼睛更容易找到下一行
• 当文字变大时，你的眼睛就不需要那么多帮助了
  • 对于大标题文字，你可能不需要额外的行距，行高为 1 就完全没问题了

  

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

# 并非每个链接都需要颜色

• 当你在设计一个几乎所有内容都是链接的界面时， 使用一种旨在让链接在段落文本中 "突显 "出来的处理方法，就会显得非常霸道
• 可以用更微妙的方式强调大多数链接，比如使用更重的字体或更深的颜色
• 有些链接可能根本不需要默认强调
  • 如果界面中的链接确实是辅助性的，不属于用户在应用程序中的主要路径，可以考虑添加下划线或仅在悬停时改变颜色

# 考虑可读性

• 一般来说， 文本的对齐方式应与所使用语言的方向一致
  • 对于英语（以及大多数其他语言）来说，这意味着绝大多数文本都应左对齐

# 不要将长格式文本居中

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

• 如果有几个文本块需要居中，但其中一个有点太长，最简单的解决方法就是重写内容，使其更短

# 数字右对齐

• 当一串数字中的小数点总是在同一个位置时， 就更容易一目了然地进行比较

# 连字符对齐文本

p {
  hyphens: auto;
}

# 有效使用字母间距

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

# 紧缩标题

• 如果您想在标题或标题中使用字母间距较宽的族，通常可以减少字母间距，以模仿专用标题族的浓缩外观

.title {
  letter-spacing: -0.05em;
}

# 提高全大写字母的可读性

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

h1 {
  letter-spacing: 0.05em;
}

# 使用色彩

# 放弃十六进制，使用 HSL

• 使用十六进制或 RGB，在视觉上有很多共同点的颜色在代码中看起来却完全不一样
• HSL 通过使用人眼直观感知的属性（色相、 饱和度和明度）来表示色彩，从而解决了这一问题
• 色相（Hue），一种颜色在色轮中的位置，取值范围为 0 到 360 度
  • 0 度是红色， 120 度是绿色， 240 度是蓝色

  

• 饱和度（Saturation），指颜色看起来有多艳丽或鲜艳，取值范围为 0% 到 100%
  • 0% 表示灰色， 100% 表示完全饱和

  

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

  

• 亮度（Lightness），衡量一种颜色与黑色或白色的接近程度，取值范围为 0% 到 100%
  • 0% 表示黑色， 100% 表示白色，50% 表示给定色相的纯色

  

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

# 实际需求

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

• 好的调色板可以分为三类
  • 灰色
    • 文本、背景、面板、表单控件--界面中几乎所有的东西都是灰色的
    • 你需要有 8-10 种色调可供选择
    • 真正的黑色看起来会很不自然，所以从深灰色开始，然后逐渐过渡到白色

    

  • 主色调
    • 大多数网站都需要一种或两种颜色，用于主要操作、活动导航元素等
    • 主色调决定了网站的整体外观
    • 需要有多种（5-10 种） 浅色和深色色调可供选择

    

  • 强调色
    • 每个网站还需要一些强调色来向用户传达不同的信息

# 预先确定您的色调

• 事先确定一套固定的色调，以便在工作中进行选择

# 先选择基色

• 为您想要创建的色阶选择一个基色--中间的颜色，您的浅色和深色色调都是基于这个颜色
  • 对于主色和强调色来说，一个好的经验法则是选择一种适合作为按钮背景的色调

  

# 寻找边缘

• 最深的色调通常用于文字，而最浅的色调可能用于元素背景的着色
• 一个简单的警报组件就是一个很好的例子， 它结合了这两种用例，因此可以很好地选择这些颜色

• 选择与底色色调相匹配的颜色，然后调整饱和度和亮度，直到满意为止

# 填补空白

• 有了底色、最深色和最浅色之后，只需填补它们之间的空白即可
• 对于大多数项目来说，每种颜色至少需要 5 个色调，如果不想太拘束，可能需要 10 个色调
• 9 是一个很好的数字，因为它很容易分割，让填补空白变得更简单
  • 把最深的色调称为 900，基本色调称为 500， 最浅的色调称为 100
  • 逐渐补全，让这些色调感觉像是两边色调的完美折衷

  

# 灰色

• 对于灰色来说，底色并不那么重要，从边缘开始，填补空白，直到得到所需的颜色
  • 为项目中最深的文字选择一种颜色，从而挑选出最深的灰色
  • 为项目中最浅色的背景选择一种颜色， 从而挑选出最浅的灰色

  

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

# 不要让亮度扼杀饱和度

• 在 HSL 色彩空间中，当颜色的亮度接近 0% 或 100% 时，饱和度的影响就会减弱
  • 同样的饱和度值，亮度为 50% 时比亮度为 90% 时看起来更艳丽
  • 如果您不想让给定颜色的浅色和深色色调看起来模糊不清，就需要在亮度离 50% 越远时增加饱和度

  

# 利用可感知的亮度优势

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

• 人眼对色彩的感知方式不同，每种色调都有其固有的感知亮度
  • 将一种颜色的 RGB 分量代入这个公式， 就能计算出该颜色的感知亮度

  

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

  

# 通过旋转色调改变亮度

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

  

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

  

  • 要使颜色变暗，可将色调向最近的暗色调旋转 - 0°、 120° 或 240°

  

• 在尝试为黄色等浅色调制调色板时，这一点非常有用

• 色调的旋转角度不要超过 20-30°，否则看起来就会完全不同，而不仅仅是颜色变浅或变深

# 灰色不一定是灰色

• 真正的灰色饱和度为 0% - 它没有任何实际的颜色

• 实际上，很多我们认为是灰色的颜色其实饱和度很高
  • 这种饱和度使一些灰色感觉冷，而另一些灰色感觉暖

  

# 色温

• 如果你想让你的灰色感觉凉爽，那就用一点蓝色来饱和它们

• 为了让灰色更有温暖感，可以在灰色中加入一点黄色或橙色

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

为确保您的设计具有可访问性，建议普通文本（约 18px 以下） 的对比度至少为 4.5:1，较大文本的对比度至少为 3:1

# 翻转对比度

• 在彩色背景上使用白色文字时， 要达到 4.5:1 的对比度，颜色往往需要很深，这一点会让你大吃一惊
  • 可以通过翻转对比度来解决这个问题，与其在深色背景上使用浅色文字， 不如在浅色背景上使用深色文字

  

# 旋转色调

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

• 由于有些颜色比其他颜色更亮，要想在不接近白色的情况下增加对比度， 一种方法是将色调旋转到更亮的颜色，如青色、洋红色或黄色

# 不要只依赖颜色

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

• 一个简单方法是通过其他方式来传达信息，比如添加图标来表示变化是积极的还是消极的
• 在无法其他方式介入的情况下，可以尝试使用对比色， 而不是完全不同的颜色

# 创造深度

# 模拟光源

# 光从天上来

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

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

  

  • 嵌入部分

  

# 不要得意忘形

• 不断调整，能在一定程度上模拟真实世界，但在实践中却可能导致界面繁杂而不清晰

# 利用阴影表达深度

• 阴影可以让你在虚拟 Z 轴上定位元素，从而创造出有意义的深度感
  • 模糊半径较小的阴影会让人感觉元素只是略微脱离背景，而模糊半径较大的阴影则会让人感觉元素更接近用户 用户感觉越亲近的东西，就越能吸引他们的注意力
  • 对于按钮之类的东西，你可能会使用较小的阴影，因为你希望用户注意到它，但又不想让它占据整个页面

  

  • 中等阴影适用于下拉菜单等需要比用户界面其他部分更高的元素

  

  • 大阴影非常适合模态对话框

  

# 建立深度系统

• 定义一组固定的阴影会加快工作流程，并有助于保持设计的一致性，通常五个选择就足够
  • 先定义最小的阴影和最大的阴影，然后在中间填入阴影，阴影的大小呈线性增长

  

# 将阴影与互动相结合

• 可以在用户与元素交互时提供视觉提示

# 阴影有两个部分

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

  

# 深度计算

• 当物体离表面越来越远时，由于环境光线不足而产生的小黑影就会慢慢消失
  • 如果你要在自己的项目中使用这种双阴影技术，请确保在代表较高深度的阴影中使用更微妙的阴影
  • 在海拔最低的地方应该非常明显，而在海拔最高的地方几乎（或完全） 看不见

  

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

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

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

# 用色彩营造深度

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

# 使用实体阴影

• 使用垂直偏移的短阴影，且完全没有模糊半径

# 重叠元素创建图层

• 创造深度的最有效方法之一就是将不同的元素重叠在一起，让人感觉设计有多个层次

# 重叠图像

• 考虑到重叠的图像很容易发生冲突，一个简单技巧是给图片加上 "隐形边框"--与背景颜色相匹配--这样图片之间就会有一定的间隙

# 处理图像

# 使用好照片

• 聘请专业摄影师
• 使用高质量的图片库

# 文字需要一致的对比度

# 背景图像的问题

• 照片可能非常动态，有很多非常亮的区域，也有很多非常暗的区域

• 要解决这个问题，需要减少图像的动态效果， 使文字和背景之间的对比更加一致

# 添加覆盖层

• 在背景图片上添加半透明覆盖层

# 降低图像对比度

• 对整个图像进行调亮或调暗，而不仅仅是对有问题的区域进行调亮或调暗
  • 降低对比度会改变图像整体的明暗感觉，因此一定要调整亮度来进行补偿

  

# 为图像着色

• 使用单一颜色对图像进行着色

# 添加文字阴影

• 如果你想在背景图像中保留更多的动态效果， 文字阴影是一种仅在最需要的地方增加对比度的好方法
  • 希望它看起来更像一个微妙的光晕，而不是真正的阴影，所以使用大的模糊半径，不要添加任何偏移

  

# 万物皆有预定尺寸

每个人都知道，将位图图像缩放至大于原始尺寸是个坏主意--它们会立即感觉"模糊 "并失去清晰度。

# 不要放大图标

• 虽然矢量图像的质量确实不会因为尺寸的增大而降低，但绘制尺寸为 16-24px 的图标在放大到 3 倍或 4 倍时，看起来永远不会非常专业
• 如果你只有小图标，可以尝试将它们围在另一个形状内，并给该形状添加背景色

# 不要缩小屏幕截图

• 可以在小屏幕截图，空间大，就不用缩得那么厉害
• 考虑只截取部分截图，这样就可以在更小的空间内显示，而无需缩小比例
• 如果你确实需要在狭小的空间内放置整个应用程序的截图，可以尝试绘制简化版的用户界面，去掉细节，用简单的线条代替小文字

# 不要缩小图标

• 绘制成较大尺寸的图标在缩小后也会显得模糊不清
• 更好的办法是按照目标尺寸重新绘制一个超级简化版的徽标

# 小心用户上传的内容

# 控制形状和大小

.img-container {
  background-size: cover;
}

# 防止背景渗出

• 当用户提供的图像的背景颜色与用户界面中的背景颜色相似时，图像和背景就会渗在一起，导致图像失去形状
  • 尝试使用微妙的内框阴影

  

  • 不喜欢框阴影带来的轻微 "嵌入 "效果，半透明的内边框也很不错

  

# 点睛之笔

# 增强默认设置

• 不必总是在设计中添加新元素来增加亮点--有很多方法可以通过 "强化 "已有元素来活跃页面

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

# 用强调边框增添色彩

• 在界面的某些部分添加色彩丰富的重点边框，否则就会让人感觉有些平淡无奇

• 在用户界面上添加一个彩色矩形并不需要任何图形设计才能， 而且它可以大大增强 "设计感"

# 装饰背景

• 在不大幅改变设计的情况下，打破单调乏味的一个好方法就是为一些背景添加一些刺激元素

# 更改背景颜色

• 这对于强调单个板块以及在整个页面部分之间增加一些区别非常有效

• 如果想要更有活力，你甚至可以使用轻微的渐变色
  • 为了达到最佳效果，应使用相差不超过 30° 的两种色调

# 使用重复图案

• 添加微妙的可重复图案

• 沿单边重复设计的图案也很好看

# 添加一个简单的形状或插图

• 可以尝试在特定位置加入一两个单独的图形， 而不是装饰整个背景

# 不要忽视空白状态

• 在用户创建内容之前，没有必要展示一堆没有任何作用的操作

# 减少边框

# 使用盒影

• 方框阴影能像边框一样很好地勾勒出元素的轮廓，但它可以更微妙地达到同样的目的，而不会让人分心

# 使用两种不同的背景颜色

# 添加额外的间距

# 换位思考

大多数人对某些组件的外观都有很多先入为主的观念。但是，我们习惯于认为设计某个组件只有一种方法， 这并不意味着这是真的。

>

>

# 进阶之路

# 寻找你不会做出的决定

# 重建您喜爱的界面

• 通过不断仔细研究那些能 给 你带来灵感的作品，你将会在未来的岁月里不断汲取设计技巧。