MODULE 03 / LESSON 04
留白、密度与视觉节奏
让信息既不拥挤,也不因为过度留白而难用。
先理解这个概念
留白是内容之间的关系,不是浪费空间。阅读页面需要呼吸感,高频专业工具可能需要更多密度。密度要由任务决定,而非追求统一的“大卡片”。同样的内容可以在不同场景采用不同节奏。
留白承担分组、节奏和聚焦,而不是表示“高级”的固定面积。同样数量的信息,在相邻关系清楚时可以很紧凑;缺少分组时再宽敞也可能混乱。密度需要结合任务:阅读长文需要连续节奏,监控与比较则可能需要同时看到更多信息。
像代码中的空行:太少不易分组,太多打断连续阅读。
记住这三个原则
- 01
先定组间关系,再定局部 padding。
- 02
高密度界面仍需清晰分组与足够点击区域。
- 03
用少数间距值形成重复节奏。
实际设计时,分三步做
- STEP 01
先确定用户是在阅读、比较还是操作,再决定每屏应保留的关键内容,不按截图好看程度盲目增加空白。
- STEP 02
建立组内、组间和章节间三个尺度,让间距差异表达关系。优先统一同类间距,减少零散数值。
- STEP 03
在真实窗口高度中检查:主操作是否被推远,相关信息是否分散到两屏,密集区域是否仍有明确停顿。
一个容易理解的例子
桌面邮件列表每条高度 160px,一屏只能看四封。
摘要适度收敛成紧凑列表,重点邮件仍可展开查看。
浏览与比较任务需要同时看到更多对象。
展开看:从场景到设计决定
账单列表每行加入很大上下留白后,一屏只能看到三笔记录,用户频繁滚动才能比较。可以压缩行内间距,同时保留日期分组之间更大的间隔;金额与名称仍在稳定列中。文章详情则不同,应给段落和章节适当呼吸空间,但标题与其正文应更近,避免标题像属于上一段。留白的作用是解释关系,而不只是降低信息量。
适用边界与取舍
紧凑模式可以提高可见信息量,但不应同时缩小到难以命中的控件。视觉行高与实际交互目标需要一起评估,不能只看静态密度。
把这个原则用一次
先做一个小判断
为阅读页和日志控制台分别选择密度。
再完成一份设计练习
给同一份十条任务清单设计阅读舒适与快速扫描两种密度,保持信息和功能相同。
留白多不自动等于高级。用户为了找信息反复滚动,说明布局成本过高。
继续查阅
本课为原创教学解释。具体平台规则与标准可查阅官方资料。
Apple Human Interface GuidelinesMaterial Design 3