UI界面设计如何做到干净整洁

1、减少线条

页面上面线条太多，会让人觉得页面复杂，线条好了，看起来就会清爽干净。

2、合理留白

拉开信息层级 ，合理的留白可以增加产品的品质，也可以让主题更加突出。有些页面上面有很多元素，看上去非常拥挤，如果适当留白，看上去更加清爽。

3、运用卡片整合信息

卡片式设计将信息、图像归类整合到一个方块里，清晰直观又避免页面因为信息多而散乱。卡片的排列方式是按列或者行的方式进行对齐展示，视线沿着横向或者纵向浏览能快速找到想要的信息，此外，这种固定大小的卡片方块也有利于栅格化排版。

4、颜色

颜色避免灰灰显脏的颜色，如背景色我一般喜欢用#f6f6f6，线条色#edede，投影色#e5e5e5，都是偏白的灰色

6、统一间距

6.1字符间距

字符间距一般都是设计工具的默认数值，无需调整。当碰到多行文字需要避开头尾的标点符号时，使用工具中的避头尾功能即可自动调整字间距，如无此功能，则需手动调整，这里并没有所谓的技巧与方法，头尾避开标点符号即可。

6.2文字行高

文字行高一般会设定为字号的1.2～1.5倍，具体值跟字号有很大关系，文字越小，行高就越大。例如，我们可以设定字号32px为中间值（非绝对），小于或等于32的字体、行高为字号的1.5倍，大于32的为1.2倍。

6.4 段间距

部分设计师在设置段间距时习惯性的多敲一次回车键，这种方式并不可取，会造成间距过大、内容脱节。如有需要，一定要手动设置段间距，这里没有固定的数值和规律，视觉舒适即可。个人习惯+4原则或黄金比例 ，比如文字大小是12，那么行间距就是16，依次类推文字是14那么行间距就是18

6.5 组件间距

在同一APP应用中，根据最小基数定义的间隔值数量不易过多，一般在6个左右就能满足绝大多数的设计场景。通常以8px作为基数，以此衍生出8、16、24、32、48、64这6个间距数值，完全能够满足绝大多数的使用场景。当然，针对信息较少的页面也会使用到120、160、200...其他间距数值，例如缺省页、登录页面等，对开发来说，如果清楚间距的使用规律，即便有小的误差，也能自行更正，例如使用8px增量，8、16、24...按倍数规律以此类推，若出现9的间距，开发会更正为8、15则会更正为16，自行多退少补。

6.6 模块间距

从信息层级角度来看，等级权重越高、间距就越大，在现实世界中也是如此，一个物体周围的空间越大，就越容易吸引人们的注意力。 模块间距分为块内间距（同一模块中不同元素或信息组之间的距离）和块外间距（同一个页面中不同模块的之间的距离），为了更好的区分信息层级，块外间距一定会大于块内间距，也能保持块内信息的亲密性。

7、间距的使用技巧及原则

7.1 利用留白强调

很多时候，想让一个元素变的突出，可以用加大字号、修改色值或后加粗等方式进行强调，但这并不是突出信息的唯一方式，当所有元素都变的突出，那就等于什么都不突出了。如果想让界面中的元素不同程度的突出，留白也是一种强调信息的方式，它能引导用户将注意力集中在特定的内容上。

7.2 使用栅格系统

善用栅格系统]通过最小间距值进行递增，让整个界面看起来更协调。栅格系统可以让设计师在元素的亲疏关系上更快作出决策，后续不管是迭代还是更换设计成员，都能保持统计的间距规范。

结语：

如果在处理界面信息层级时，改来改去还是觉得很乱，不防从间距角度出发，或许会有不一样的收获。虽然在刚开始的时候，规范间距带来的效果甚微，但随着团队规模不断扩大、界面数量越来越多、内容越来越复杂时就会发现，所有内容统一间距规范，不管是构建一致性界面视觉效果、还是对开发和设计师来说，既能提升用户体验、还能提高团队的工作效率。