平静、密集的设计
一种品味,而非皮肤。Linear 和 Things 3 是 判断 的参考——如何在不产生噪音的情况下呈现大量信息,以及如何在不变得模糊的情况下保持平静。借用它们的暗色主题、紫色强调色或蓝/绿品牌色,并不等于借用了这种品味。
两个课程包含了大部分价值:
- Linear——密集而不嘈杂。 以克制的层次结构展示密集的工作。
- Things——平静而不示弱。 通过将细节隐藏到它赢得位置时,而不是清空屏幕,来保持主表面的平静。
原则
每条原则都是一条规则及其强制带来的取舍。在构建或评审界面时应用它们。
- 不要为你尚未赢得的注意力而竞争。 边框、分隔符、元数据、非活动标签页、重复图标应后退;主要内容和一个主要操作应无需呐喊即可优先阅读。
- 结构是可感知的,而非可见的。 通过光学对齐、一致的间距韵律、0.5–1px 分隔线、不透明度层级、分组背景和字体来获得层级——而非通过厚重的边框、大阴影、装饰性渐变、饱和面板或图标容器。
- 密集而不杂乱。 紧凑的行,带有可预测的对齐和渐进式细节披露。非指:微小的不可读文本、每行暴露所有控件、或膨胀的内边距冒充“高端”。
- 清晰的平静,而非隐藏的平静。 平静来自清晰的层级和一个明确的下一个动作——而非来自苍白的空白、假装低声的低对比度文本、或用作装饰的空状态。
- 克制的语义色彩。 强调色标记选择、焦点、重要状态以及正向/完成状态——绝非装饰。尊重系统强调色;不要用品牌色重新粉刷一切。“完成绿”是语义提示,而非应用的主色。
字体与动效
- 字体: 除非有强有力的理由,否则使用系统字体;层级来自字号、字重、不透明度和放置。方向:屏幕标题(清晰,不过大)→ 行标题(中等字重)→ 元数据(更小,更低不透明度)→ 状态(紧凑,语义化,不过分徽章化)→ 正文(简短,可读)。
- 动效: 解释连续性或状态变化(创作器出现、选择移动、内联状态更新)。永不装饰。始终尊重减少动效设置。
两个决策测试
- 戏剧性测试: 如果一种处理增加了视觉戏剧性,但没有改善定位、速度、信心或任务完成度——就移除它。
- 平静测试: 如果“平静”使得层级、密度或下一个动作更难阅读——那它就不是平静,而是模糊。收紧它。
自查清单
对照这些检查一个界面。“否”是一个发现,而非偏好:
- 主任务是否在一瞥之下显而易见,无需眼睛搜寻?
- 次要边框是否后退,还是它们在竞争?
- 行/项目是否在可预测的网格和基线上对齐?
- 屏幕是密集的因为它信息丰富——还是稀疏因为内边距膨胀了?
- 颜色在传达状态,还是品牌装饰?
- 你能否删除一条分隔线、阴影、渐变或图标容器,而毫无损失?
深入理解
references/in-practice.md —— 具体的(示意性)数值、扩展的优选/避免列表、以及如何在审核过程中应用这种品味。
并非本技能的职责范围
这是跨平台的品味。平台惯例、控件和架构另有归属:
- Apple (iOS/iPadOS/macOS) UI + HIG + SwiftUI/AppKit + 视觉 QA →
apple-app-design-guidelines。 - 跨平台原生感桌面架构(shell + WebView + IPC) →
native-feel-desktop。
当品味与平台发生冲突时,以平台为准——请参考那些技能。