UI界面设计怎么留白

释放双眼,带上耳机,听听看~!

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

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

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

以上介绍,不想看直接略过!———————————————————————————————

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

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

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

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

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

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

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

【PC端】

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

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

UI界面设计怎么留白

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

【移动端】

如界面需展示信息量大(例如:电商、直播等),以IOS为例左右间距为:12pt

如果页面以插画为主切偏幼稚方向(儿童、IM及时通讯等),以IOS为例左右间距为:16pt

PS:pt*2=750设计稿,pt*3=414设计稿。

UI界面设计怎么留白

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

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

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

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

UI界面设计怎么留白

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

人已赞赏
UI设计

如何快速掌握系统图标的设计方法

2020-9-6 0:39:53

平面设计

自带表情包创意咖啡包装设计

2020-6-25 20:22:42

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索