小程序的ui框架尺寸

小程序的 UI 设计指南在小程序官方文档中均有介绍，以微信官方设计文档为参照：

1、 小程序布局：小程序的布局主要采用块察大状结构进行布局，优先采用卡片、列表或网格等布局方式；

2、 小程序 UI 调色：小程序的 UI 调色使用典型的灰色调子，较亮的颜色基调使用明度较浅的颜色余巧；

3、小程序 UI 尺寸：败毁竖采用 1080px 宽，720px 高的界面设计尺寸，控件尺寸以 8px 为基准单位，即每个控件的间距需以 8px 设计；

4、 小程序 UI 字号：字体最大尺寸 36px，最小尺寸 24px，中等字体尺寸使用 30px。

间距无处不在，界面中的边距，距离上边，左边，右边，顶部等各种属性。因此作为一名设计师，我们需要数升很好的掌握各种间距规律，通过间距规律很好的组织好内容。

1. 定最小原子单位

这个最小间距规则可以是3的倍数，像蘑菇街、豆瓣一样，如果你希望产品留白比较多，也可以是5的倍数，例如

pinterest、亚马逊等，这个没有绝对的，一切根据你们产品内容丰富程度决定。

2. 确认间距d性

有一个类似调查，就是在用4作为设计原子间距做设计时候，设计师使用最多的间距有哪些?结果很有意思，使用16的占一半，8和32的占一半，所以定义太多间距其实毫无意义，只会带来设计时候的不确定元素。

3. 根据业务场景，定义间距

正如前面所说，过多间距规则，只会带来设计师困惑，徒增界面复杂性，对开发，对设计师都是一种负担，所以我们在定义间距时候，一定要少，要让我们间距原则覆盖到绝大多数场景。可以从

XS，S，M，L，XL 为参考，小，中，大为纬度。

统一简化间距顷毕袜规则，构建一致性界面，所有边距，元素空间都遵循规则时候，对于视觉设计和开发人员来说，都能很好解决一致性和效率问题。

在我们刚开始设计时候，可能会觉得没有真正的好处，但是当项目越来越复杂时候，团队规雀激模越来越大，每天处理各种设计原子和设计分子时候，你会发现，当你使用固定的间距，它会比之前随意的间距规则有更好的效果。

前段时间在设计的过程中，发现自己有个通病，就是在界面中的间距数值使用得多&乱，导致自己在多流程的界面设计中是很痛苦的，因为每一次都要想这里的间距要定多少，效率是很慢的。于是就沉下心来问了导师悔仔和学习了相关的文章，瞬间茅塞顿开。相信有很多与我一样遇到间距不知道如何定义的盆友，希望此文能够帮助到你呀。

01 .

间距的定义

间距是指彼此间相隔的距离。例如不同卡片间的距离、图标到文字的距离等。在UI设计中，间距包括 纵向间距与横向间距 。有意义的间距是能够区分信息层级关系，让用户更好的获取信息内容的。

我们知道间距的种类是非常多的，上边距下边距、内边距外边距，然后一个页面又有非常多的元素，如果我们每一种间距都不同那么就真的会累死自己，也会让开发非常的崩溃。所以关于间距规则的定义我们应遵循以下原则：

1.统一的

2.重复使用的

对于同一种间距类型我们应该使用统一的间距数值，并且不同数值之间应该 遵循倍数关系 ，另外间距规则的 重复使用 才能让间距规则变得有意义。

02 .

间距规则的价值

定间距规则是一件很有价值的事情，无论是对用户还是设计师，甚至整个团队。

对设计师

明确的间距规则能够 减少设计师的思考与决策 ，提升设计效率。在界面设计时，我们只需按照定义好的间距规则直接去使用，不用纠结这里的间距到底使用多少，提高设计效率。

对用户

统一的间距规则能够帮助用户 区分不同的信息层级 ，引导用户快速获取有效的信息，能够给用户侍前明带来良好的用户体验。

对团队

大家都遵循相同的间距规则，可以确保不同设计师产出的界面是间距是 统一的 ，也能减少开发师的工作量， 提老告高整个团队的效率 。

03 .

间距规则如何制定

制定间距规则的方法可以分为以下3步：

1.定义最小原子单位

最小原子单位应该在我们定义栅格系统时就已经定义过了。 最小原子单位可以根据自身产品的定位和内容组织形式来定 。最小原子单位越大，我们产品的留白间距就越大，最小原子单位越小，我们的界面信息越密集。

比如Airbnb界面留白是比较多的，它最小原子单位为8，那么它的间距大小都应该是8的倍数。像淘宝这种需要呈现更多内容的，它的最小原子单位为5。定义好了最小原子单位，那后面我们的 间距规则都应该是最小原子单位的倍数 。

2.明确间距尺寸

我们知道一个界面的间距种类是非常多的，如果我们没有固定的几个间距数值或者可选择的间距数值非常多，设计师也是很难做决策的，所以我们需要明确我们的间距数量，后续设计师从确定的这几个间距中做选择就行了，选择越少，做决策的效率越高。我们可以理解为把间距做成不同的尺寸，在使用过程中选取适合该间距的尺寸即可。

在现实生活中我们买衣服买鞋子也是只有几个固定的尺寸：XS、S、M、L、XL。我们的间距规则也一样，需要我们定义好这几个固定的尺寸，固定的尺寸可以根据实际情况进行灵活的调整，比如可以再添加一个XXS或者XXL都是可行。但我们需要保证我们这几个固定尺寸：

1.是最小原子单位的倍数

2.间距大小是有意义的

间距大小有意义是指 两个尺寸是有明显差异 的，我们在界面中使用该间距是有意义的。比如你的XS为4，S为6这种定义就是毫无意义的，因为4与6的差异不大，没有起到信息层级划分的作用。

比如在Airbnb的设计规范中，它们的间距规则为：

XS：8

S：16

M：24

L：48

XL：64

虽然都是以8位增量，但是Airbnb舍弃了32、40、56这三个数值，定义出了一套有意义的间距规则。

3.重复使用

定义好我们的间距规则后，我们就应该在我们的设计中 去遵循这套间距规则，去重复的使用 ，这样我们的间距规则才是有意义的。

定好了规则就应该遵守。比如卡片之间的间距我使用的最小尺寸8，那后面所以的卡片间距我都应该使用8，就不要出现卡片间距有8，有12这种情况。

总结

在UI设计中我们应该去制定和遵循间距规则，有意义的间距规则能够提高界面的统一性，提升设计效率。关于间距规则的制定方法总结起来分为这三步：

1.明确最小原子单位

2.明确间距尺寸

3.重复使用

当我们在做设计时遇到困扰，或者自己已经发现我们的设计会是一个问题隐患时，我们应该停下来 及时去寻找解决方案 ，及时解决存在的问题， 规避不必要的风险 。就像这次在设计中发现各模块的间距规则非常乱，我应该及时的去统一间距规则，保证后续所有的模块都是使用相同的间距规则，及时与开发沟通，进行间距的调整。不然等到产品正式上线或者开发的功能模块越多，后续整改起来就比较耗时耗资源了。个人的工作与学习总结，欢迎大家多多指教呀~

---