UI界面设计怎么留白（1）——《野路子设计小讲堂》

同行们！大家好，时隔近一个月我来更新啦！⊙﹏⊙b汗

最近事情多了起来，打乱了分享计划，但仔细回想一下，会发现有好多不重要的事情占有了大部分的时间，接下来会规划好自己的时间，做一个时间管理者。

还是老话，我是《野路子设计小讲堂》的小福，写这篇文章的初衷是分享给刚入行的萌新一些实际工作中的方法，希望能融入你们的工作当中去。

PS：留白这个内容有点多，我拆开来讲方便你消化。

以上介绍，不想看直接略过！———————————————————————————————

刚入行的萌新，在接到UI设计任务的时候，往往对于界面两边留白有一点懵，到底留多少合适呢？有没够相关的规范呢？

先不管留白具体规范，我们留白是为了什么？

创造空间感  画面留白可极大增加画面的空间感，留白越大空间感越强；

突出视觉焦点  用户在快速浏览页面的时候，页面信息满屏都是，毫无焦点，瞬间就会刷过去，并不记得当时看到了什么，无法获得关注；

提高理解能力  常见例子在文字阅读中，段落之间留有一定的空白，并在段落左右也留有空白，给用户一定的时间消化之前阅读到的内容；举个反例自己体会：会员电子协议、保险合约；

呼吸的空间  你可以想象身在节日的火车站、景区，是不是感觉周围很拥挤，呼吸不顺畅，同样用户在阅读界面的时候，如果画面过于拥挤，“填鸭式”的输出内容，阅读非常不顺畅，这个界面就被直接关闭了；

既然是讲给萌新的，下面讲下我所使用的常见规范

【PC端】

整个页面的屏占比60%~75%，这样前端在开发的时候，不同屏幕左右可以直接留白，不至于突然换个大屏幕，直接满屏都是，看的人头大。

有时候网站Banner为了更惹人注意会做通屏，也就是banner宽度占屏幕宽度100%。

独白：80%屏占比，在4K屏上会感觉满脸都是画面和内容，视觉感非常难受。60%~75%之间会好很多，建议60%或70%取整数。Banner这种可以考虑通屏。

【移动端】

如界面需展示信息量大（例如：电商、直播等），以IOS为例左右间距为：12pt；

如果页面以插画为主切偏幼稚方向（儿童、IM及时通讯等），以IOS为例左右间距为：16pt；

PS：pt*2=750设计稿，pt*3=414设计稿。

内心独白：讲真的仔细看其实看不出来什么，毕竟不是所有人都是设计师眼。

使用以上方法足以应对绝大多数工作内容，除非你们领导们另有安排。

下面教你们一个实际工作中的技巧，可以加快工作效率，页面上又没有大量的辅助线。

在PS内，按着“Shift+↑和↓箭头”，按一下实移动10px，单独按“↑和↓箭头”，按一下移动1px。在设置模块间的留白时候尽量以10为基准，这样可加快输出设计稿。

再也不用满屏辅助线了~~

其他文章

iPhone-UI规范篇——野路子设计小讲堂

Androdi-UI规范篇——野路子设计小讲堂

IOS、安卓设计转稿秘籍——如何做到不同平台上相似度95%以上呢？

Powered by Froala Editor