空间是具体事物的组成部分，是具体事物具有的一般规定。

眼睛可以看到、手可以接触到的具体事物，都是属于处在一定空间位置中的具体事物，都具有空间的具体规定，没有空间规定的具体事物是根本不存在的，因此它确实存在，并时刻影响着设计师在设计过程中执行的每个环节。

因此，本文将详细阐述空间在产品UI设计中的使用方式以及对界面设计的影响作用。

1.周围空间

在UI设计中，我们通过考虑板块与板块的间距，元素与元素之间的放置，来引入空间这一概念。

当元素放在一起时，他们可以视为一个单一元素或者一个群体元素，那么元素之间的距离在某种意义上来说直接影响界面整体的美观度，整齐度，一个合理的空间安排，将会增加可用性并减少产品的认知负担。在移动端产品设计中，我们也可称其微空间。

元素间距过于松散会导致用户视觉混乱，缺乏清晰结构。收紧相关元素之间的间距可以提高连贯性并减少混乱。

空间的存在，使设计中产生留白，这是主要板块或元素之间的负空间，决定设计中的整体美感，不但可以提升视觉美观程度，而且可以很好的指引用户在整个页面的关注程度，元素周围有充足的空间会引起用户视线的停留。

在设计中，我们可以改变板块之间的距离来更清晰的呈现界面的层次结构，有所突出主要内容，提高连贯性，减少混乱，并通过扩展页面上单独元素的数量来引导用户的注意力。

2.占用空间 

与负空间相反的空间我们称之为正面空间或占用空间，在设计中，我们不仅要考虑元素之间的空间，而且要考虑元素本身的大小，通过改变元素的大小可以合理控制页面视觉布局，让其产生层次结构。

无对比，不设计。元素大小的对比是创造有趣设计的一种方式，它往往会让页面提升设计感，也是影响设计好坏平庸差异的因由之一。

布局中有太多不同的视觉可能会让整体杂乱无章，一个有规则设计，是在大约3-4个不同元素或者模块来组成，可能是大标题，段落文本，图像和一组按钮或者链接。

3.内部空间

元素内的空间包含容器的填充（比如：按钮的填充）和文本的间距（比如：字符间距和文本段落），这种空间我们称其为内部空间，主要控制设计的可见性，但是同样也是创造视觉感受的一种方式。

a.字符间距产生的空间

字间距是文本之间的空白，对于可读性而言，太紧或太松都会影响字体之间的空间，注意这里字符间距是字符之间的整体空间（不要与字距混淆），在文字空间排版中，分享一个小技巧：正文文字大小设置为文本大小的150%，可满足于用户的可访问性。

b.按钮填充和描边产生的空间

填充元素和描边元素之间产生的空间，在UI设计中依然很重要，我们可以给按钮填充颜色，可以给主要元素填充颜色，如果在设计中，我们遇到要很多按钮或者元素要展示，通常按钮填充的宽松比较安全，而过于紧密的填充则会使界面显得杂乱无章，难以区分各个元素。

4.总结

设计师可以通过空间的改变来提升界面设计感，间距影响界面的美观程度，希望每一位设计师在UI设计中都可以根据自己的产品来判断要如何控制界面的空间体验，如果这篇文章对你有帮助，那就点个赞，么么踹。

原文地址：

https://medium.com/@bsharman/space-in-ui-design-129eab618bc8

接下来送一波福利给大家。

2018年，UXD一词可谓空前火爆，瞬间成为了大家追捧的新宠。“互联网+”和“物联网”时代兴起，会更加注重用户体验和产品的视觉设计。

而各大互联网公司都急缺这方面的人才，包括腾讯、阿里巴巴、百度，京东等，有的甚至开出40W+的年薪都找不到合适的设计人才，连邀约面试的都寥寥无几，而低端的UI设计师却是满目玲琅，需求过甚。

UXD人才是具备UI设计、交互设计、用户体验设计和设计管理能力的综合性高端人才。

从目前应用领域来看，主要应用于软件、互联网、人工智能，智能家居、游戏和虚拟现实等方面，尤其是在以产品为主导方向的公司，一个高端的UXD设计师占据着不可或缺的重要地位，很多都是合伙人级别。

是不是！是不是！是不是！设计师也可以很牛逼。

鉴于此，推荐一位非常牛逼的UXD导师：范舟。设计领域专家，莱茵教育创始人，中国UXD课程的开创者，被学生称为殿堂级讲师，具备15年设计管理经验。

曾担任多家一线互联网公司的设计总监，被中科院研究所、北京工业大学、浪潮集团、方正国际、三星研究院、湖北美术学院特聘用户体验高级讲师。被视觉中国等主流设计媒体称为UI设计培训第一人。

他现在在做UXD培训，对UXD学习感兴趣的可以加他助理了解，扫一扫下面的二维码添加，注明来自：公众号。可以免费获得2980元VIP课程，这样你就可以创作出高大尚的设计作品！先到先得！以及每周一次的大型线上公开课。

公开课主题列表如下

【1】AI时代，设计师何去何从-做最符合企业胃口的人才

【2】交互设计师修炼指南-用户为产品折服的诀窍

【3】竞品分析的正确姿势-助力产品立足于不败之地 

持续更新

…… 

你可以扫一扫下面的二维码，添加小助手，免费领取

添加小助理，免费领取