UI界面的设计本质上非常的简单，但是很多新手，以及工作了多年的设计师输出的作品质量都不尽如人意，做出来的作品效果看上去 “不高级”、“不精致”、“没设计感”。

这种情况的核心原因往往不是配图的问题，也不是配色的问题，更不是审美的问题，仅仅是定义UI元素的尺寸、间距做的并不好。

比如我们看下面这些原型，仅仅是置入基本的元素和黑白灰，但看起来是精致的、和谐的、稳定的。

这种感觉我们可以用 “规整” 来形容，即元素模块合适的尺寸，摆在了合适的位置，在不讨论交互、体验的基础上，没办法挑出什么视觉的毛病。

这也是我在UI界面设计的学习中建议大家优先掌握的技能，因为这种基础的尺寸设置和间距控制就是界面的骨架，和人一样，如果骨相不好，就算后再怎么玩穿搭和化妆也救不回来，往往还适得其反，让画面的效果变得更糟糕。

回到我们关注的要点，尺寸和间距上，它们有什么特征和关联。

尺寸就是元素在界面中占据的实际面积，它的长和宽的数值大小。UI的尺寸包含两种模式，一种是固定尺寸，即长宽的数值是固定的不会改变，另一种是自适应尺寸，会根据内容或外部环境调整尺寸。

先抛开自适应的类型，首先关注固定尺寸。固定尺寸的元素可以说是我们一开始学习UI相关规范的关键内容了，比如顶栏、底栏、按钮、文字应该设置多大的尺寸。

只有极少数的元素是有指定数值的，多数元素的尺寸都会有一个合理的设置区间，比如正文是13-16之间，关注按钮的高度在24-32之间，超出了就会显得奇怪，和界面格格不入。

而类似按钮、输入框这类包含多个元素的控件，使用固定数值来定义背景、边框的话，那么内部的元素就会根据背景进行水平或垂直的居中，来确定它所在的位置。

这是个非常入门的概念，学设计的第一天应该就能领略的知识。但真正的问题在于，那些复杂的模块、组件，也能用固定尺寸的模式创建背景，然后再用对齐来摆放里面的元素吗？

这些组件类型五花八门，内容各不相同，在设计前能给出准确的数值，是不现实的。所以我们就会根据内容来决定背景元素尺寸的大小，内容越大，则背景越大。

比如一个通知弹窗，提示文字的字数是不同的，有的一行有的两行有的三行，如果直接设计一个固定高度的卡片那么就会按最大尺寸支持去设计，这样看起来效果就不理想。而主流的做法，就是使用自适应的高度的方法，让卡片的高度跟随内容的高度做适配，不会产生过多不必要的留白。

而在这个模式下，还有个关键的因素，就是对内间距的应用。这里我们要强调，间距也包含两种，一种是内间距，一种外边距，即 CSS 盒模型中的 padding 和 magrin 两种属性。内间距的值是我们一开始制定好的，而组件的自适应尺寸，就是内容+内间距的和。

当然，尺寸也可以通过外边距来确定，比如任何 UI 界面都有对应的画布，如果我们不想做超出画布的设计，那么设计一个组件卡片，它的尺寸就应该是画布尺寸 - 外边距（也可以理解成是画布的内间距）。比如在一个B端界面中，中间的卡片总宽度就是画布宽1440 - 202=1400，一个App 界面中的卡片宽就是 393-162 = 361。