MODULE 03 / LESSON 04

留白、密度与视觉节奏

让信息既不拥挤,也不因为过度留白而难用。

12 / 60 课掌握视觉语言含互动实验

先理解这个概念

留白是内容之间的关系,不是浪费空间。阅读页面需要呼吸感,高频专业工具可能需要更多密度。密度要由任务决定,而非追求统一的“大卡片”。同样的内容可以在不同场景采用不同节奏。

留白承担分组、节奏和聚焦,而不是表示“高级”的固定面积。同样数量的信息,在相邻关系清楚时可以很紧凑;缺少分组时再宽敞也可能混乱。密度需要结合任务:阅读长文需要连续节奏,监控与比较则可能需要同时看到更多信息。

用程序员的语言说

像代码中的空行:太少不易分组,太多打断连续阅读。

记住这三个原则

  1. 01

    先定组间关系,再定局部 padding。

  2. 02

    高密度界面仍需清晰分组与足够点击区域。

  3. 03

    用少数间距值形成重复节奏。

实际设计时,分三步做

  1. STEP 01

    先确定用户是在阅读、比较还是操作,再决定每屏应保留的关键内容,不按截图好看程度盲目增加空白。

  2. STEP 02

    建立组内、组间和章节间三个尺度,让间距差异表达关系。优先统一同类间距,减少零散数值。

  3. STEP 03

    在真实窗口高度中检查:主操作是否被推远,相关信息是否分散到两屏,密集区域是否仍有明确停顿。

一个容易理解的例子

BEFORE / 常见问题

桌面邮件列表每条高度 160px,一屏只能看四封。

AFTER / 可以这样改

摘要适度收敛成紧凑列表,重点邮件仍可展开查看。

浏览与比较任务需要同时看到更多对象。

展开看:从场景到设计决定

账单列表每行加入很大上下留白后,一屏只能看到三笔记录,用户频繁滚动才能比较。可以压缩行内间距,同时保留日期分组之间更大的间隔;金额与名称仍在稳定列中。文章详情则不同,应给段落和章节适当呼吸空间,但标题与其正文应更近,避免标题像属于上一段。留白的作用是解释关系,而不只是降低信息量。

适用边界与取舍

紧凑模式可以提高可见信息量,但不应同时缩小到难以命中的控件。视觉行高与实际交互目标需要一起评估,不能只看静态密度。

YOUR TURN

把这个原则用一次

先做一个小判断

为阅读页和日志控制台分别选择密度。

再完成一份设计练习

给同一份十条任务清单设计阅读舒适与快速扫描两种密度,保持信息和功能相同。

容易踩的坑

留白多不自动等于高级。用户为了找信息反复滚动,说明布局成本过高。

继续查阅

本课为原创教学解释。具体平台规则与标准可查阅官方资料。

Apple Human Interface GuidelinesMaterial Design 3