Arkk 的笔记
← 全部笔记

Refactoring UI：20 条界面自查规则

创建于 更新于 #设计/体验

对照实际界面逐条检查下面 20 项，发现问题时按对应方法调整。正文依据 Adam Wathan 与 Steve Schoger 的《Refactoring UI》原书及作者公开文章整理，保留原章节的判断、做法与例子，以中文摘要展开。

通用设计原则、交互、动效及验证方法见怎么做得好看。各节标注英文章名和原书页码，便于回查；版本与读取来源见来源。

1. 为设计选一种个性

原书：Choose a personality，第 20–26 页。

界面的个性由具体选择共同形成。银行网站可能希望传达安全、专业，新创产品可能希望显得轻松、有趣。作者从四个方面说明怎样表达这种差异：

  • 字体：衬线字体可以带来经典、优雅的感觉；圆润的无衬线字体更活泼；中性的无衬线字体适合让其他元素承担个性表达。
  • 颜色：作者用蓝色说明熟悉、稳妥的印象，用金色说明精致、昂贵的印象，用粉色说明轻松、有趣的印象。选择时看实际搭配与感受，色彩心理学可帮助理解这种感受。
  • 圆角：小圆角比较中性，大圆角偏活泼，直角偏正式。选择后保持一致，让界面有统一气质。
  • 语言：正式、疏离的措辞与友好、随意的措辞会形成不同感受。文字和字体、颜色一样参与塑造个性。

方向不明确时，观察目标用户常用的网站，判断他们熟悉的表达方式。借鉴其气质，同时保持自己的辨识度。

2. 别着急上色

原书：Detail comes later，第 12–14 页，尤其是 Hold the color。

设计新功能的早期，先解决结构与布局。字体、阴影、图标等细节留到结构清楚后处理。作者介绍了粗记号笔画草图的方法：工具的粗糙程度会限制细节，让注意力集中在布局上。

开始细化时仍可先用灰阶。没有彩色强调可用，就必须靠间距、明暗对比和尺寸建立层级；层级成立后，再用颜色增强表达。

低保真稿用于快速探索和作出决定。决定形成后进入真实界面的实现，让后续调整建立在可使用的结果上。

3. 字号并非万能

原书：Size isn’t everything，第 38–41 页；另见作者公开文章第 1 节。

仅靠字号区分主次，容易让主要内容过大、辅助内容过小。先尝试字重与颜色：重要文字加重后可以保持适中的字号，辅助文字用较柔和的颜色后仍能保持易读的尺寸。

作者建议从少量层级开始：

  • 主要内容用深色，次要内容用灰色，更低层级的信息用更浅的灰色。
  • 正文使用常规字重，例如 400 或 500；需要强调时使用 600 或 700。
  • 小尺寸界面文字优先保持清楚的笔画。低于 400 的细字重更适合大标题，而非日常界面小字。

4. 弱化来凸显重点

原书：Emphasize by de-emphasizing，第 46–47 页；官网目录中的章名为 De-emphasize to emphasize。

重点不突出时，问题可能出在周围元素过于抢眼。与其不断加强目标元素，不如降低与它竞争的元素的视觉重量。

原书用两个不同尺度的例子说明：

  • 导航的当前项已经换了颜色却仍不醒目，可以把未选中项的颜色变柔和。
  • 侧栏与正文争夺注意力时，可以去掉侧栏独立的背景色，让它直接融入页面背景。

5. 非必要不用标签

原书：Labels are a last resort，第 48–52 页；作者公开样章。

这条针对数据展示。把所有信息写成“标签：值”，会让每项内容看起来同样重要，妨碍层级表达。

  • 格式已经说明含义时，直接展示值。 邮箱、电话号码、带货币符号的价格通常能自行说明类型。
  • 上下文已经说明含义时，利用上下文。 员工姓名下方的“客户支持”可以自然表达所属部门。
  • 需要解释时，把说明融进值。 “库存：12”可写成“剩余 12 件”，“卧室：3”可写成“3 间卧室”，作为一个整体安排样式。
  • 需要并列比较时，保留标签并安排主次。 仪表盘上通常突出数据，让标签承担说明作用。
  • 用户按字段查找时，突出标签。 技术规格页的读者可能先找“厚度”，再看“7.6 mm”；此时标签可以比数值略深，数值仍保持清楚。

表单输入的持续可见标签按怎么做得好用处理。

6. 按钮先看主次，再看含义

原书：Semantics are secondary，第 60–62 页；另见作者公开文章第 7 节。

按钮既表达动作含义，也表达动作在当前页面中的重要性。先确定主次，再选择颜色和样式，比只按“积极动作用绿、删除动作用红”更能形成清楚的界面。

  • 主要操作需要醒目，可用高对比的实心背景。
  • 次要操作需要清楚但较弱，可用描边或低对比背景。
  • 更低频的辅助操作需要能被找到，可用类似链接的样式。

危险操作的视觉重量同样取决于位置。删除在普通页面上可能是次要操作；进入确认对话框后，删除成为当前主要决定，此时再使用醒目的红色样式。

7. 从过度留白开始

原书：Start with too much white space，第 66–69 页。

从拥挤布局出发，一点点增加间距，往往只会得到“勉强不挤”的结果。作者建议先给元素明显充裕的空间，再逐渐收紧，直到整体合适。

单独看一个组件时显得偏多的留白，放回完整页面后可能刚好。判断时看整页，而不只盯着某个局部。

紧凑布局也有明确用途。例如仪表盘需要同时呈现大量信息时，可以接受更高密度。密度应来自这样的任务选择。

8. 不必填满屏幕

原书：You don’t have to fill the whole screen，第 76–82 页。

界面和各个区域只使用内容真正需要的宽度。导航占满屏幕，并不要求下面的表单也同样宽。为了占满画布而拉长组件，会增加理解负担。

原书提出两种处理方法：

  • 缩小设计画布：难以在宽屏上设计紧凑界面时，可先在约 400px 的画布上完成移动布局，再放到宽屏上调整小屏曾经作出的妥协。
  • 把内容分成不同职责的列：窄表单放在宽页面中显得失衡时，可将说明文字放到旁侧，保留表单本身合适的宽度。

需要大量空间的内容可以充分利用屏幕。关键是让宽度服务内容。

9. 间距有亲疏

原书：Avoid ambiguous spacing，第 96–99 页。

靠空间表达分组时，组外距离应大于组内距离。所有间距相等，会让元素归属变得模糊。

原书用几种情况说明这个问题：

  • 表单标签与自己的输入框靠近，相邻表单项之间留出更大距离。
  • 文章小标题上方留出足够空间，让它明显属于下方内容。
  • 多行列表项的项间距大于单个列表项的内部行距。
  • 横向排列的组件也通过组内、组外距离表达归属。

10. 缩放不总是等比

原书：Relative sizing doesn’t scale，第 92–95 页。

不同屏幕下，标题、正文和留白需要分别调整。桌面上合理的比例，到了手机上可能失衡。

原书举例：桌面正文为 18px、标题为 45px，标题是正文的 2.5 倍。小屏正文变为 14px 后，继续沿用这个比例会得到 35px 的标题；示例中更合适的标题约为 20–24px。大元素往往需要比小元素缩得更多。

同一组件内部也有这种关系。按钮字号与内边距可以分别调整：大按钮使用更充裕的留白，小按钮更紧凑，才能形成不同尺寸各自合适的比例，而非同一个按钮的缩放版。

11. 行长与行高联动

原书：Keep your line length in check，第 114–116 页；Line-height is proportional，第 122–125 页；作者公开行高样章。

段落宽度首先服务阅读。书中英文排版的建议范围是每行约 45–75 个字符，宽度约 20–35em 可作为起点。内容区为了容纳大图而变宽时，段落仍可保持较窄宽度。

行高同时受行长与字号影响：

  • 行越长，通常需要越充裕的行距。 视线从行尾回到下一行行首的距离越远，越容易读重或漏行。作者用窄栏约 1.5、宽栏可能接近 2 的行高作例子。
  • 字号越小，通常需要越充裕的相对行高。 小字更需要行间空间帮助定位。
  • 大标题可以更紧凑。 多行大标题的字形容易辨认，相对行高可以降到约 1。

12. 基线对齐，不居中

原书：Baseline, not center，第 118–120 页。

一行中混用不同字号时，按文字基线对齐。基线是字母落脚的那条线，也是眼睛自然感知的对齐依据。

例如卡片左边是大标题、右边是较小的操作文字。按各自文本框垂直居中，会让两组文字的基线错开；它们距离越近，这种错位越明显。让它们共用基线，关系会更整齐。

13. 颜色比想象的多

原书：You need more colors than you think，第 142–147 页；色阶建立方法见作者公开文章 Building Your Color Palette。

一组五色配色卡通常不足以支撑真实界面。作者把实际所需颜色分为三类：

  • 灰阶承担文字、背景、面板和表单控件等大部分用途。作者建议准备约 8–10 档，从很深的灰逐步过渡到白色。
  • 主色通常有一到两种，用于主要操作、选中导航等。每种准备约 5–10 档深浅变化：浅色可以做提示背景，深色可以做文字。
  • 强调色用于突出新功能、表达危险或警告、显示积极趋势。图表、日历和分类标签可能需要更多颜色，各自也需要深浅变化。

作者在公开文章中进一步说明了色阶的建立过程：先选适合作按钮背景的中间色，再通过文字和浅色底板确定最深、最浅两端，最后填补中间档位。以九档为例，可先确定 100、500、900，再补 300、700，最后补其余档位。

使用预先定义的有限色阶，可以避免在每个组件里临时生成一串几乎相同的颜色。实际使用后再微调饱和度和明暗，让色阶满足真实组合。

14. 无障碍也能好看

原书：Accessible doesn’t have to mean ugly，第 162–165 页。

彩色背景上的文字对比不足时，可以改变对比方式，同时保留界面的层级和色彩。

翻转明暗关系。 为了让白字达到足够对比，背景可能需要压得很深，导致原本次要的提示块变得抢眼。可以换成浅色背景配深色文字，让色彩继续支持内容，降低整块区域的视觉重量。

调整色相。 深色面板里的次要文字，如果只提高明度，可能很快接近白色，与主要文字难以区分。作者建议尝试把色相向更明亮的方向移动，例如青、品红或黄，以保留色彩的方式寻找足够对比。

文本对比度按 W3C WCAG 2.2 的现行定义核对：普通文本至少 4.5:1，大文本至少 3:1；大文本通常指至少 18 CSS pt 的常规字或 14 CSS pt 的粗体字。这里采用 W3C 的字号定义，修正原书把门槛简写为约 18px 的表述。

15. 别只靠颜色

原书：Don’t rely on color alone，第 166–168 页。

颜色用于增强已有信息，信息本身还需要可辨认的表达方式。

原书的指标卡用红、绿表示变差和变好，红绿色觉障碍用户难以分辨。补上表示正向或负向变化的图标后，变化方向就有了另一种线索。

多条趋势线的图表也要考虑区分方式。作者建议关注明暗对比，因为浅与深通常比两个不同色相更容易辨别。让信息在色相难以区分时仍然可读，是这条规则的核心。

16. 强调色边框

原书：Add color with accent borders，第 224–226 页；另见作者公开文章第 6 节。

想给平淡界面增加一点色彩，可以从小面积的强调色线条入手。作者给出的位置包括：

  • 卡片顶部。
  • 当前导航项旁。
  • 提示信息的一侧。
  • 标题下方的一小段线条。
  • 整个页面的顶部。

这些线条通过位置、长度和色彩形成强调。它们让简单界面获得细节，也能承担选中或区域识别的作用。

17. 图上文字先处理背景

原书：Text needs consistent contrast，第 202–206 页。

照片同时存在明亮与昏暗区域时，白字在亮处消失，黑字在暗处消失。问题在背景的明暗变化，处理目标是让文字所在区域获得稳定对比。

原书给出四种可选办法：

  • 叠加半透明遮罩。 黑色遮罩压低亮部，帮助浅色字突出；白色遮罩提亮暗部，帮助深色字突出。
  • 降低图片对比度。 减小图片内部明暗差，再调整整体亮度，补偿图片变亮或变暗的效果。
  • 把图片统一着色。 先降低对比度，再去饱和度，最后用“正片叠底”混合模式叠加纯色，也能让图片更贴合品牌配色。
  • 加柔和的文字阴影。 使用较大模糊半径、零偏移，让它像文字周围的柔光，局部增加对比。与适度降低图片对比度结合，可以保留更多照片细节。

18. 每样东西有适用尺寸

原书：Everything has an intended size，第 208–213 页；小图标部分另见作者公开文章第 5 节。

素材的合适尺寸既取决于像素清晰度，也取决于细节和比例。原书分别讨论了以下情况：

  • 位图放大会失去清晰度，呈现模糊边缘。
  • 小图标放大即使没有像素损失，也可能显得粗重、空洞。为 16–24px 绘制的图标放大三四倍，细节通常不足。可以保持图标合适的大小，用带背景的外层形状填充更大的视觉空间。
  • 整页截图缩小会把大量细节挤进很小区域。可以截取平板等较窄布局，或只截取相关局部，减少缩小幅度。需要小尺寸展示整页概貌时，可绘制简化版本，以线条代替小字。
  • 复杂图标缩小会让细节挤在一起。favicon 应针对目标尺寸重新绘制简化版本，让设计者主动选择保留什么，而不是依赖浏览器自动压缩细节。

19. 慎用边框

原书：Use fewer borders，第 238–241 页；另见作者公开文章第 4 节。

分隔元素时，边框只是其中一种手段。到处添加边框会让界面显得繁忙。作者提出三种替代做法：

  • 阴影可以柔和地界定轮廓，尤其适合元素与背景颜色不同的情况。
  • 背景色差可以区分相邻区域。已有背景差异时，可尝试去掉重复表达边界的线条。
  • 额外间距可以直接拉开分组，无需增加新的视觉元素。

20. 别忽视空状态

原书：Don’t overlook empty states，第 234–236 页。

依赖用户创建内容的产品，新用户首先看到的往往是空状态。只把填满示例数据的页面设计好，会遗漏第一次使用时的体验。

作者建议用图片或插画吸引注意，并强调下一步操作，引导用户开始创建内容。内容尚未产生时，可以隐藏暂时无用的标签页、筛选等辅助控件，让画面集中于开始行动。

把空状态当作吸引新用户的机会，让尚未填入内容的页面本身也有趣、有吸引力。

来源

#设计/体验

Arkk

专题 · 关于