杭州UI设计学习｜间距的属性

1.间距是多少？

间距是指界面元素之间的距离，可以是文本本身、图片、组件、模块之间的间距，也可以是界面两边的安全距离(比如网页宽度为1920px，内容区域为1400px，那么两边的安全距离为260px)。

作为UI设计师，设计界面中的每一个元素都需要兼顾上、下、左、右、相邻元素的属性来合理调整间距，利用间距的规则来组织界面内容，从而保证信息的节奏，给用户一种轻松、矜持的浏览体验。

2.间距的实际功能

间距可以使界面信息更有节奏感，提高内容的可读性，并通过不同的密度说明元素之间的关系，吸引用户的注意力。所以在控制接口间距的时候，一定要有“更真实”的心态。任何改变和调整首先要考虑清楚为什么，能给产品和用户带来什么。做好间距，不能只停留在视觉层面，还要多方面思考。

设计师层面:以标准的方式定义间距，不必每个元素都考虑间距的大小，有效减少决策和思考时间，提高效率。

开发级别:开发可以根据基本间距定义变量。从长远来看，虽然不能细化到像素眼，但间距的倍数只能通过视觉看到。例如，基础间距增加8px。当8px，16px，24px，32px，48px等。均采用，基础间距x1，x2，x3等。都是直接用于开发的，等等。在发展的眼里，肉眼一定看不出1px的区别，但却能分辨出8px的区别。不需要每次都测量，也可以减少误差，高度还原设计效果。

用户层面:有节奏、一致的界面效果，信息的有效传递变得更加容易，用户体验可以得到很大的提升。

3.间距的统一

设计的目的是提高设计师的工作效率，团队之间的高效沟通，保持设计风格的高度统一。同样，间距也是设计规范中非常重要的一部分。作为规范中最小的单元，如果不遵循统一，将直接影响界面的整体布局和版面，信息密度严重影响用户浏览。不仅仅是设计师，还有每次面对同一个模块都需要定义不同距离的开发者。也是破了，没有规律可循。

均匀的间距可以让界面的视觉效果更有节奏感。设计人员在设计一些类似的模块时，可以直接重用组件。即使多人合作完成同一个项目或者更换成员，间距不均的问题也不会造成整个APP的风格混乱。

对于开发来说，如果知道间距的使用规则，即使有小错误，也可以自己改正。例如，使用8px增量，8，16，24...以此类推按照倍数的规律。如果有9的间距，开发会修正到8，15，它会修正到16，你可以自己多补少补。虽然设计师需要小心谨慎，尽量不要做出如此小的出入，但没有什么是绝对的。