小福野路子设计师
每人每天仅限5票，快给你心仪的作品鼓励的一票。
投票
0.0°
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为基准，这样可加快输出设计稿。
再也不用满屏辅助线了~~
其他文章
IOS、安卓设计转稿秘籍——如何做到不同平台上相似度95%以上呢？
Powered by Froala Editor
全部评论：5条
更多作品
发表评论