5个技巧越早会越好【干货】

　　所有的用户们应该都很喜欢一些干净的设计，因为干净的设计让人感觉很舒服，视觉感受也清晰。那么，这就要求设计师们在设计时要根据用户的心理诉求和用户体验进行设计，但是，很多设计师在设计时想的太多，经常会出现细节过多，就会显得累赘，还有的时候也需要用英文装饰，但却只专注到了字体上的选择，而忽略了英文字体的其他细节。下面就和大家分享一下，如何让设计师的作品更加利索干净整洁!

【一. 注意文字的行间距】

　　很多设计师在进行文字编排时，直接使用电脑默认的字距和行距进行排版，花了大量精力在字体和字号大小或者段落形状上做文章，却完全忽略或者不重视字距和行距的再设计，以至于最后总是不得要领，结果不尽人意。汉字是方块字，每个字的占位空间完全一样，所以编排中非常容易出现呆板、沉闷、粗糙的视觉效果，解决这个问题的法宝就是字距和行距的调整。如何让一段文字看起来精致、清晰可辨？不单单是字号大小的问题，而是每一个字、每一行字、每一段文本、每一篇章的上下左右的空间间隔距离是否合理。说到行间距大家都知道，但是具体怎样设定行间距的值很多人就不知道了，一般我常用规则是 +4 ，比如文字大小是12PX，那么行间距就是16，以此类推文字是14，那么行间距就是18。

▲ 上图是原来做的一套规范的字行间距规则，仅供参考。

　　除了+4的规律你也可以运用黄金比例，文字大小X1.414，文字大小X1.618(1.414和1.618是黄金值)取四舍五入，得出以下字体间距规则。

　　很多初级设计师会迷惑的一点是，不知道应该如何判断界面里面用多大的行间距呢?其实道理很简单，就是要看你的内容，如果你的app内容需要很丰富，那你可以行间距小一些让有效的屏幕空间能够展示更多内容，可以运用+4的原则，目前淘宝、天猫其实就是这个原则，如果你想页面内容更加留白大一些，阅读舒服一些，那你就可以运用黄金比例的行间距原则，例如新闻阅读软件，需要大量留白来调整呼吸感!

▲ Yahoo News因为文字内容信息比较多，所以需要页面信息量丰富，那么在行间距上用的类似固定+4的原则，这样页面看起来就会更加清爽。

▲ 相反的Airbnb页面节奏大家感觉更舒服一些，因为它整体的行间距比较大，留白比较舒服，给人很优雅，清爽的感觉，其实他们在很多设计细节上都没有遵循iOS规范，而去打破重组了，比如列表高度，列表的图标大小等都有变化。

【二. 注意文字的字间距】

　　除了行间距，字间距同样很重要，特别是英文页面时候，同样的内容，字间距，和行间距不合适，看起来界面就会相差很多，有的看着很舒服，有的看起来说不出来哪里不对。

▲ 这2个页面，左边:  (字母和字母的字间距: 0 ，行间距：20)；右边: (字母和字母的字间距: 0.2 ，行间距：22)

　　上面左边的页面字母和字母之前距离非常的紧密，段落与段落之间的行间距也很近，由于过于很密集，导致用户阅读起来不够舒服，相反右边通过加大文字的行间距和文字的字间距，使得内容没有那么满，字母和字母之间的间距及行与行之间的间隔都有了一定的空隙，使得整个设计节奏得到了一些舒缓!

　　需要注意的是：不要给太大的字间距，有时候过大也会让读者不舒服。

【三. 要多留白】

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

　　右边的界面，更好的运用了版式技巧，空间感非常好，画面中有足够的空间让元素之间去呼吸也让用户感觉很舒服。

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

▲ Facebook的卡片设计同样也是采用粗的间距来作为信息的区分，让页面看起来更加的层次分明，利索干净。

▲ 同样左侧的页面虽然运用了去线，每个内容和内容直接的间距留白有了，但是信息密集不清晰，右侧的就很清晰，通过头像作为纽带来区分信息，让每行的内容更加清晰可见。

【四. 尽量减少线条】

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

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

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

　　所以在一个设计里面尽可能减少一些多余的线条，让线条最少化，就是让设计师看起来干净的一种很重要的方法，通过间距来分割信息，加强内容和内容之间的距离，这样做，用户也是能够很清晰的区分信息层级。

　　需要注意的是：优先保证内容清晰，如果有些地方一定要用到线条，那么就不能缺少。

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

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

【五. 多使用卡片形式】

▲ 从清晰度层面来说，使用卡片是帮助内容信息反馈的非常好的一种视觉表现形式，同时也能让信息更加的明确。

▲ 卡片化设计形式在移动端表现上能让设计更加干净利落，这也是经常运用到的设计点。

——————————————————总结—————————————————— 

　　这次分享的这几个核心技术点，其实是我们每天在做设计时都会频繁遇见的，需要灵活的多学多用，同时我们每天看到的一些好的设计，记得多去留意分析，为什么别人的设计好，别人设计看起来那么干净清新整洁，要多评判多学习。

　　1、注意行间距，+4原则或黄金比例

　　2、注意字间距: 0.1或0.2勿过大

　　3、减少线条，如非得已使用线

　　4、合理留白，拉开信息层级

　　5、多使用卡片形式，更好整合信息