大厂为什么喜欢用8x的网格系统设计？

Sponsor

前言：网络系统在海报设计、网页设计中经常会用到，但他们两者运用并不一样，即使是是WEB中也有不同的网络系统，那么今天给大家介绍的8x网络系统在大厂经常被使用在UI设计中，他们为什么喜欢用8x的网络系统呢？使用8点网格系统最强大的部分是在整个设计中推动一致性的能力。来我们一起来学习这个网格设计方法吧！

先来认识下8点网格系统：

如上图，左侧基于8点网格系统设计的组件，右侧是无规则组件。右侧组件相互之间没有一点规律，这就会导致在产品后期，设计越来越复杂，设计师交接痛苦不堪。

为什么我们需要使用8x网格系统呢？主要有以下几个关键的点：

• 提升设计品质感；
• 提高布局统一；
• 提升设计一致性；
• 提高团队之间建立默契等。

但是在国内其实有部分设计师不了解网格或者还不会很好应用自如，如下图没有准确使用网格的做的规范。

我们看到了网格的使用混乱，虽然有遵循8的网格系统，但是应用时候毫无规律。上图设计中使用多种间距，这到后期就会越来越混乱。

来看下基于8点网格搭建的组件：

好的网格基本几个间距即可解决组件设计，且网格之间都是有联系的，使用8点网格系统还有一个核心要点就是：不断重复使用间距

好的网格排版比较有规律整齐。我们选择8点网格系统另外一个重要原因，就在下面这张图：

大多数主流分辨率能被8整除的占比最大。另外一个原因就是当划分网格就会减少小数点出现的频率（使用网格过网格的伙伴应该知道）。

看到这里是不是很想自己也创建一套基于8的网格系统，那如何做呢？

第一步：首先定义一个基础原子单元，这里我们使用8来作为基础。

第二步：基于8我们开始进行增量计算（以8的倍数进行间距定义）,下图基于8来创建的网格间距。

这里有人问，为何会有4和2？这里再补充说明下8点网格系统核心在于，定义的间距能被8整除和8的倍数即可。下面我们根据这组网格间距创建按钮组件演示一下：

继续看下基于8点网格的其他模块化组件布局案例：

因此看完是不是很简单，那么可以把自己产品网格间距这块规范优化下吧！

最后再强调一下：基于8网格系统定义间距，大家需要重复去使用间距，可以看看我列举的案例，基本一个模块组件使用2~3种间距即可搞定。

原创不易，如果对你有点儿帮助，请多多分享本文。

作者 | 功夫UX
来源 | 功夫UX（id：UX-Talk）

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。