我是一个小白，在此记录自己在UI设计中需要注意的一些坑，方便以后翻阅回忆来时的艰辛，总结的不好不要勿喷，只是一个自我的记录。

自己在临摹很多的界面后，才慢慢的意识到，这样的复制性行动意义何在？如果在工作中，给你一需求，如何从开始最基本开始去实现？各个元素之间排版布局，又该如何去设置？（我知道工作中都会有规范文档）但是如果没有，要你自己去设置？该如何去做，那些知识点，你需要开始就掌握好，并去结合产品的调性去设置合适的排版布局，如何做？思考的点还有很多，我只记录在设计一个界面开始要去掌握的基本概念，对于产品调性，做一点简单的思考。

网格基础概念：

想让你的界面够精致，那么界面的布局就不得不去了解，以及各元素空间间距，一个好的界面需要有规律性的布局排版，这是一个基本原则。网格布局一般在pc端是12列，移动端一般为6列。

列

在界面中屏幕的预留间距非常重要，在很多的小白临摹中就不太会去注意这个。界面中的行可以根据你的元素大小合理去设置。屏幕间距不能放置任何的元素，水槽里面也尽量不要放内容，除非和内容模块组合使用，内容尽量的放在一个模块内。

水槽越小，视觉张力就越大，水槽越大，视觉张力越小。

屏幕间距—— 组合区域可以放banner

小结：界面一般为6列，内容区域（UI设计元素、内容）一般都设置在里面内容模块和组合模块，水槽和屏幕边距不能放内容，保存留白（城墙）。

网格的最低标准：

任何东西都有一个基本元素，即最低的标准，在网格中也是一样的，我们得现有一个最小的单位，才能去推导出整个网格来。常见的单位有3px（淘宝，天猫，蘑菇街等电商平台，他们种类多，想体现卖品视觉冲击力就只能让其间距小），4px（funcy），5px（京东金融，亚马逊），设置最小单位都是要根据产品的调性去设置的，现在很多的设计都在采用大留白，给人一简洁明了大气，单位普遍在5px和6px，很受会有7px的，太多的留白，显得缺少内容 。

定边距和水槽大小：如果我们把最小的单位设置成5px，左右间距设置的成20，水槽设置成10，注意一定要是5的倍速。公式如下：

375屏幕宽度-两边边距40-水槽10x5个➗6=47.5。那么内容区大小就47.5（这里就不跟图设置一样的屏幕边距数值了，以防误导屏幕边距设置必须和水槽一样）

保证每个设计元素都在我们框架内

横向的间距虽然可以忽略，但是为了设计间距的统一，还是利用到一些科学装逼的数列：费波那契数列（黄金分割数列）

装逼数列 横排具体设置案例

费波那契数列只是一个参考，也可以在其中加入自己的规范，但是一定要按照费波那契速列的最小单位去改变，并结合自身产品的定位，调性去改变。

网格系的删格化定好了，那么接下来考虑的就是各个组件之间的间距了，这对于界面的是否统一是非常重要的，不要小看间距的设置，其中也包括按钮中，文字与上下左右的间距，确保各种元素之间都是有序的，都是遵循一种规律，这种设计不仅方便自己设计，也能方便程序员工作，减少他们鸡毛小时都来烦你，更能给用户提供统一协调的视觉。

那么就需要去定一个最小的单位，前面的删格化已经定了最小的单位，完全可以用上的，但是也是可以改变的，不是什么都是按部就班，也是需要有自己的看法的。利用好装逼数列，并去设置合适的规范。比如你设置的最小单位是5，那么按钮中文字距离边框上下左右就可以是5的倍速去变化，比如亚马逊、京东、Pinterest等。

最小单位设置

最小单位设置好，接下来就是确定间距之间的弹性。

在此需要注意不要过多的去设置间距数量，这只会给你带来困惑和界面的复杂性，7个以下符合费波那契数列就可以了，这个需要根据你产品的定位和调性去设置。

总结：

统一间距规则，有利用构建统一，一致性的界面，所有的边距，元素之间都规律可循，对于我们设计，还是切图标注给到程序员都是能解决效率问题的。在我们刚开始设计时候，可能会觉得没有真正的好处，但是当项目越来越复杂时候，团队规模越来越大，每天处理各种设计细节时候，你会发现，当你使用固定的间距，它会比之前随意的间距规则有更好的效果。

做设计真的就是不断的挖坑，填各种坑，总结的不是很好，莫笑我，只是想不断的去填坑，记录自己来时的路而已。

参考：skys的公众号：我们的设计日记。强烈推荐，干货满满。