-盖群

很多大厂设计师，一直在坚持使用的8点网格系统，是因为...

发布时间：2021/8/13 20:05:35 关注量：1313

作为设计师，无论你是设计UI、平面杂志或者网站等都离不开网格，网格可以轻松帮我们创建有节奏且一致的UI界面。

使用8点网格系统最强大的部分是在整个设计中推动一致性的能力。好了，下面我们正式开始。

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

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

那么为什么我们需要使用8点网格系统呢？

几个关键的点：提升产品设计品质感、布局统一、一致性、团队之间建立默契等。

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

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

好的网格排版比较有规律整齐。

我们选择8点网格系统另外一个重要原因，就在下面这张图：

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

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

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

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

这里有人问，为何会有4和2？这里再补充说明下8点网格系统核心在于，定义的间距能被8整除和8的倍数即可。

下面我们根据这组网格间距创建按钮组件演示一下：

分享到：

更多案例

Address

北京市西城区新外大街28号DRC创意产业基地北京公司
武汉市武昌区星海虹城路鸿玺公馆2号楼1216# 武汉公司

138-8600-1818
( Worktime 09:00-18:00）
非工作时间：138-8600-1818
商务合作邮箱：gq@gaiqun.com
人才招聘邮箱：zp@gaiqun.com
长按复制添加微信号：gaiquncom