UI 设计七大原则之亲密原则

为什么同样是做界面，别人的设计清爽有序，自己的却总像 “堆元素”？​

总觉得界面整洁度全靠 “少放元素”，后来才发现，原来那些看起来清爽、逻辑清晰的界面，核心不是元素少，而是

。

其实

的问题，都出在

亲密原则是 UI 设计七大原则里最基础最重要的界面整理术—— 不用复杂技巧，甚至仅靠调整间距，就能让信息传递效率得以提升，用户一眼看懂核心内容。

亲密原则的底层逻辑是

的

，人类大脑会

地把距离近的物体归为一组，就像幼儿园同一班级的小朋友会自然拉着同伴的手，围成小圈做游戏或排队，不用老师刻意分组，一眼就能看出哪一些孩子是同一个班的，靠 “熟悉的同伴关系 + 班级身份” 形成一个又一个

。

这一点倒是让我很有启发：

就像我们看文章会自然把段落归为一组。

用户看界面也会本能地将距离近的元素判定为一个整体。这让我明白，设计的本质是 “降低用户的认知成本”，而亲密原则就是最直接、最易落地的手段。

反面案例：名片上的信息零散分布，阅读时要找 5 次才能理清信息​

正面案例：把 “单位”，“姓名 + 职位”，“地址 + 电话” 分组靠拢，一眼就能快速抓取关键信息

强关联（必须一组）：比如文字以及其对应的图标​（间距最小）

弱关联（同一模块）：卡片里的 “评价按钮” 和 “点赞按钮”（间距中等）​

无关联（不同模块）：头部banner和底部版权信息（间距最大）

 

设计前就设置基础间距为x（移动端常用 8px/16px，PC 端 12px/24px）：​

可设置为

可设置为

​

可设置为

​

这样的间距层级

，界面也不会显得松散或拥挤。

Step3：分级归类

一般将界面信息分 3 层：页面级模块→模块内分组→组内元素​

每一层的亲密程度一般都要高于上一层，比如：​

「昵称 + 头像 + 发布时间」（组内）→ 「发布者信息组」（模块内）→ 「整个评论区」（页面级），层级越远间距越大

在整个过程中我们可以使用

辅助进行，再

，方便自己的设计让整个界面视觉上更协调，层次上更分明。         

 

总而言之UI 设计不是 “排好看的元素”，而是 “让元素的关系被用户看懂”。亲密原则看似是调整间距，实则是通过空间关系，帮用户快速建立信息层级，让用户不用费脑就能理解界面逻辑。

而且亲密原则

的！把它和对齐，对比等相结合，效果会翻倍。