对于UI设计来说，除了创造性之外，合理美观的间距设计是创建良好UI(用户界面)的关键。合适的间距是每个优秀设计中最基本，也是最重要的元素之一。UI间距设计有助于组织信息，同时在设计中设置节奏、结构和层次，这些因素共同作用，有助于设计师在处理间距等元素时有一个合理的方法。先区分元素之间的距离与容器内部的留白，再选择一套能表达信息关系的数值。
需要把间距规则落实到可调整的按钮、列表和卡片时，可结合Pixso 自动布局教程设置对象间距与内边距，再用长文案和窄容器验证规则是否稳健。
1. UI间距设计基本单位
设计师在工作中经常面临各种小细节的调整。这些细节可能看起来并不显眼，但是往往会在不知不觉中影响并改变你的画面美感。因此，设计师必须使用空间系统来维持产品的一致性，并减少设计师花费在沟通和改变UI间距设计上的时间。基本单位允许你在空间系统中创建受支持大小的比例。作为一名设计师，你会遇到4pt、5pt、6pt、8pt或10pt的增量系统。
2. 8像素UI间距设计规则
许多设计系统采用8px及其细分档位来组织间距。8可以被4和2整除，便于建立不同密度的间距档位；但它并不保证所有屏幕缩放和布局计算都没有小数。8px适合作为常用步进之一，图标细节、文字间距等仍可使用2px或4px等更小档位，不必把所有尺寸强行改成8的倍数。
3. UI间距设计元素尺寸
当涉及到一个固定的空间系统时，必须优先考虑实体元素的大小，同时考虑元素之间的关系。按钮和表单这样的UI元素通常以基本单位(8px，16px，24px)为增量来度量。这样做将有助于为你的设计定义一个清晰的结构、层次和节奏。行高与控件高度还要容纳实际文字和可操作区域，不能只用间距倍数推导。
4. UI间距设计填充
想让UI间距设计美观且具有易读性，设计者需要让容器内边距和元素间距各司其职。UI间距设计填充的大小取决于空间系统的规则，同组信息通常靠近，组与组之间留出更明显的距离；不能简单地把“越重要”理解为“间距越大”。所以UI间距设计元素之间的空间，可以有规律地递增或递减，尽可能以基本单元(8，16，24，48)为增量来测量。字号与行高应依据文字用途和阅读需求单独确定，不应直接照搬间距刻度。
商品卡片里的8、16、24，分别解决什么问题？
以一张商品卡片为例：上方是商品图，下方包含名称、规格、价格和“查看详情”按钮。可以先把卡片内边距设为16px，名称与规格之间留8px，文字信息与按钮之间留24px，相邻卡片之间留24px。这里的数值是一组起点，不是全站必须照抄的标准：8px强调名称与规格属于一组，24px将阅读区和操作区分开。
内边距是内容到卡片边界的距离；元素间距是名称、规格等对象之间的距离；组间距是完整信息组之间的距离。把这三种距离都设成同一个值，表面上很整齐，却会丢失信息的亲疏。Carbon 的间距系统也包含2、4、8、12、16等不同档位，用较小增量照顾组件细节，而不是要求所有空隙都只能取8的倍数。
长标题出现后，先让内容长高，不要把文字压小
把“实木收纳柜”替换成“适合小户型玄关的窄款实木收纳柜”，名称可能变成两行。如果卡片仍使用固定文本框高度，第二行就会与规格相撞。此时优先让文本区域和卡片随内容增高，保留名称到规格的8px关系；不要为了对齐邻居，把这张卡片的字号单独缩小。
接着在价格后加一行“安装服务另行计费”。这行说明属于价格组，应靠近价格，而不是紧贴购买动作。再把按钮文字替换成较长表达，观察是否需要允许按钮宽度变化或独占一行。三次变化都使用同一张卡片，可以看清哪里是布局规则不完整，哪里才是数值不合适。
若列表必须保持等高，应先约定标题可显示的行数和查看完整标题的路径，并为最常见的内容组合预留空间。移动端压缩宽度时，可以减少列数或调整外侧留白，不要成比例缩小所有字号与点击区域。
在Pixso中把关系变成可调整的布局
先将名称与规格组成纵向自动布局，设置它们之间的间距；再将图片、文字组、价格组和按钮放入外层纵向自动布局，单独设置外层内边距。这样改变卡片边缘留白时，不会顺手改变名称和规格的关系。Pixso 的自动布局帮助说明了对象间距、独立边距与嵌套布局的分工，可以据此核对项目中的具体设置。
把常用数值及用途写在卡片旁，例如“8：组内信息”“16：容器内边距”“24：主要区域分隔”。团队讨论紧凑版时，就可以判断是减少区域间留白还是改变内容密度，而不是逐个拖动元素直到看起来差不多。关于留白怎样表达信息分组，可以继续阅读界面间距与亲密性原则。
专业设计工具Pixso，助力间距设计
虽然凭直觉随心所欲的设计很方便，但可能会给用户造成不好的体验，所以创建和遵循系统的结构很重要。不过，在实际操作过程中，修改这些UI间距设计元素，并协同其他人参与同一个项目也并不是一件易事。推荐使用设计协作平台 Pixso，和团队一起进行间距的调整和产品交付设计。Pixso，一站式完成原型、设计、交互与交付，为数字化团队协作提效。
-
自动布局一键调节版面，高效搞定排版
拥有强大自动布局功能。多个内容需要整齐排版的情况下，自动布局是一种高效的选择，可以在第一时间实现快速对齐；同时，设置了相应规则的自动布局容器会根据内容和间距重新排列子元素，减少手动调整。
-
实时协作，让所有人聚焦同一个目标
当面对一个复杂的设计项目时，通过链接邀请团队成员，进行多人云端协作设计，实时同步间距、字号、边框、颜色等各种细节。
-
智能UI设计工具，快速上手专业技能
以往的流程往往需要多个工具协作才能达到预期效果。而Pixso自带组件变体、自动布局等专业设计工具，支持UI/UX设计和原型播放，一体化完成高保真产品设计。
-
高保真原型，交互式动画演示
在设计过程中通过可视化原型预览交互效果， 支持添加页面交互和原型播放，模拟产品最终形态，助力团队规避无效投入，快速提升产品核心价值。
-
链接交付，构建清晰直观的工作流
Pixso具备全栈原型、设计、交付能力，团队上游一键发送链接交付，下游成员打开浏览器即可完成审查。支持切图一键导出，设计标注和代码在线生成与交付。
选择一款好用的工具，不仅能为团队增效，更少的UI间距设计修订，以及更快的产品交付，也会带来更好的用户体验，快打开 Pixso 试试吧~
