间距优于卡片

摘要

作者认为卡片式设计在UI中被严重滥用。卡片虽然利用了"共同区域原则"来组织元素，但会占用额外空间、掩盖内容贫乏、让设计师忽视邻近原则，并增加认知负担。作者主张采用"邻近原则"——递归地保证内部间距不大于外部间距——来替代大多数卡片场景，仅在CTA或复杂交互组件中保留卡片使用。

内容框架与概述

文章开篇引入格式塔心理学的视觉组织理论，重点介绍了两个核心原则：邻近原则（proximity principle）和共同区域原则（common region principle）。邻近原则指出彼此靠近的元素会被感知为整体，而共同区域原则则解释了为何卡片能有效地将元素分组——因为封闭区域天然具有优先级。

随后作者用大量实际案例阐述卡片设计的四大问题：占用额外空间（需要内边距和间隙）、掩盖内容空洞（用视觉装饰填充缺乏实质的信息）、让设计师忽略邻近原则导致层级混乱，以及增加用户的认知负担（需要"潜入"每张卡片查看内容）。每个问题都配有before/after对比图。

文章最后承认卡片在特定场景下的价值，如行动号召（CTA）区块或内部布局复杂的产品卡片。结论强调：在大多数情况下，遵循"内部间距≤外部间距"的递归原则，仅用间距就能实现更好的视觉效果。

核心概念及解读

邻近原则（Proximity Principle）：源自格式塔心理学，指出空间上靠近的元素会被感知为一组。作者将其重新表述为"递归地，内部间距应不大于外部间距"，作为替代卡片的核心设计准则。

共同区域原则（Common Region Principle）：位于同一封闭区域内的元素会被视为一组。这是卡片能够有效组织内容的心理学基础，但作者认为这种"便利性"导致了滥用。

卡片税（Cards Tax）：指使用卡片所付出的代价——额外的空间占用和认知负担。卡片需要内边距和外间距，同时作为新增的视觉元素会产生额外的关系需要用户处理。

数据墨水比（Data-Ink Ratio）：Tufte提出的图表设计原则，主张最大化数据承载的"墨水"比例。作者将其延伸到UI设计：任何视觉元素都需要大脑处理，因此不应浪费在无意义的装饰上。

原文信息

此摘要卡片由 AI 自动生成