网页设计 » 视觉设计 » 大厂为什么喜欢用8x的网格系统设计?

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

发表于: 视觉设计. 评论
Sponsor

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

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

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

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

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

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

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

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

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

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

大厂为什么喜欢用8x的网络系统设计?
好的网格基本几个间距即可解决组件设计,且网格之间都是有联系的,使用8点网格系统还有一个核心要点就是:不断重复使用间距

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

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

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

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

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

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

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

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

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

大厂为什么喜欢用8x的网络系统设计?
继续看下基于8点网格的其他模块化组件布局案例:

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

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

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

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

作者 | 功夫UX
来源 | 功夫UX(id:UX-Talk)

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:结交更多有才华的设计师?请加入UI设计QQ群,与50000名设计师交流设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }