老板:今天会议就到这里,需求都清楚了吗?

我:清楚了,这次改版要做成什么风格?

老板:高大上!高大上!

我:N*……%)&B&%#&)|?》


在我们平时的工作中,总会碰见高大上的需求,但是这高大上,在一些人眼里,似乎包含了时间所有的风格,当然啦,也有人说的高大上,是正儿八经的高大上,然后我们应该如何着手设计这样的风格呢,我们看苹果,看严选,看一些奢侈品的网站、app、banner的时候,不难发现,都是简约的风格,给人透露着一种高档的感觉。


除了这种感觉,说细一点,简单干净利落的设计看上去很舒服,阅读内容也很清晰,但是我们很多人做的设计却不那么干净,给别人看的时候,经常得到的评价是不够清爽,边缘不够清晰,设计不够利索,经常页面细节过多很累赘,大大忽略了很多其他的细节,今天就和大家分享一下,如何让你的设计看起来更加利索干净!如何设计出一个简约而不简单的界面。


1.调整行间距


行间距大家都知道,但具体在设计上如何运用很多人都不知道,一般我常用的规则是+4,就是我文字的大小比如是12PX,那么我的行间距就是16,依次类推,文字是14那么行间距就是18PX



上图是我之前设计的一套规范的字行间距规则,供大家参考,除了+4的规律

你也可以运用黄金比例,即文字的大小X1.414  ,文字大小X1.616  (1.414和1.616是黄金值)取四舍五入,得出以下字体间距规则。



很多人肯定要问,那我如何判断我界面里需要用多大的行间距呢?道理很简单,就是看你们的内容,如果你们app内容需要很丰富,你可以行间距小一些,而让屏幕展示更多内容,也可以运用+4的原则,目前淘宝天猫就是这个原则,那么如果你的页面内容需要留白大一些、阅读舒服一些,可以运用黄金比例的行间距,比如新闻阅读软件,需要大量留白来调整呼吸感。


等等,有人问黄金比例不是0.618么

这里给大家科普一下,黄金比例并不只是有0.618、1.618,还有根号2,根号3,还有德国工业的一些经典比例,包括包括黄金比(Golden Ratio)、白银比例(Silver Ratio)、铂金比例(Platinum Ratio)、青铜比例(Bronze Ratio)等等,有兴趣可以这个网站上进行换算:

http://www.shejidaren.com/examples/tools/golden-ratio/index.html


Yahoo news 因为文字内容的信息比较多,所以页面信息量需要更丰富,因此,在行间距上用的类似固定+4的原则,让页面看起来更加清爽。


相反,Airbnb 的页面的节奏感大家感觉会更舒服一些,因为它整体的行间距比较大,留白比较舒服,给人很优雅、清爽的感觉,他们在很多设计细节上都没有遵循iOS的规范,而去打破重组,比如列表高度,列表的图标大小等!当然,行间距是营造整体清爽感觉中的一个很重要的因素。


2.调整字间距

行间距相信大家都能很好的理解,无非掌握一些行间距的规则,那么字间距同样很重要,特别是做英文排版时候,同样的内容,字间距和行间距不合适,看起来界面就会相差很多,有的看着很舒服,有的看起来说不出哪里不对。



这2个页面,左边舒服还是右边看着舒服呢?如果你心中的答案是左边,那么可以离开这个页面了(开个玩笑的),很明显右边的看起来比较舒服,原因就在于:

左边:(字母和字母的字间距:0  行间距20)

右边:(字母和字母的字间距:0.2  行间距22)


上面左边的页面字母和字母之间距离非常的紧密,句子和句子之间的行间距也很近,导致阅读起来虽然很牢固,但是不够舒服,相反右边通过加大行间距和字间距,使得内容没有那么满,字母和字母之间的间距,行与行之间的间隔,使得整个设计节奏得到了一些舒缓。


需要注意的是:不要给太大的字间距,有时候过大也会让阅读者困难和不舒服


3.减少线



同样一个结构,Airbnb 对于商品单元的处理就比 ebay 看起来要干净清爽一些,原因就在于 ebay 上面的线条太多,可能和他们的整体视觉语言有关,线条多了,看起来就没有Airbnb看着清爽干净。



再来看看亚马逊的设计,以及韩国29cm对于细节的处理,同样29cm去除一切线条,让设计更加清爽利索,而亚马逊线条很多,虽然很好的起到来分割信息的作用,但就是不过清爽利落。



同样一个设计,上面采用的线条处理,下面采用的去掉线条用色块来处理,哪个看起来更加干净?当然是下面的!

所以在一个设计里面减少线条,或者让线条最少化,是让UI设计看起来更干净的一个很重要的方法,通过间距来分割信息,加强内容和内容之间的间距,这样做,用户也是可以很清晰的区分信息层级

需要注意的是:优先保证内容清晰,如果有些地方一定要用到线条,就一定要使用它,不能只是为了看起来感觉



在Facebook新版本视觉风格中,我们可以很明显的发现去线条的设计技法,左侧是改版前,右侧是改版后,很明显facebook减少了线的运用。



去掉线条后,整个设计并没有影响层级,相反更加清晰


4.留白



页面的放松和呼吸感在UI中非常重要,在左侧的设计中,元素之间的距离特别小,都挤在一个空间里面,非常的满。

而右边的界面,很好的运用了版式和空间感,有足够的空间让元素之间去呼吸,让用户感觉更舒服。




上面这个案例里面,左边的内容很密集,留白虽然有,但是不明显,右边很聪明的运用了更大的灰色留白来区分内容,所以右侧看起来更加的舒适。



Facebook 的卡片设计也同样采用了粗的间距来区分内容,让页面看起来更加的层次分明,利索干净。



同样,左侧的页面虽然去掉了线条,而且每个内容和内容之间的间距留白有了,但是信息密集不清晰,右侧的就很清晰,通过头像作为起点来区分信息,让每行的内容更加清晰可见。


5.运用卡片



在清晰度层面,使用卡片是帮助区分内容很好的一种视觉形式,同时也让信息更加明确哪块是哪块。



卡片化设计在移动端上更加干净利落,是经常运用到的一些设计点。


又到总结时间:



如果大家对于本篇分享还有不明白困惑,加微信咨询,微信号:uiskys如果你懒的输入那么多字母,那也可以扫描下面的二维码添加!



设计师Sky和于朝蓬,愿每周和你分享最新设计趋势、科学设计方法、品牌插画教程、以及在智能化来临的时代,设计师如何找到自己的定位和价值


文章图片素材均来源于网络,如有侵权请联系删除!公众号内所有文章未经授权一律不得转载,转载前请后台回复【转载】

本篇文章来源于微信公众号: 我们的设计日记