网页栅格系统到底应该怎么用

相信很多设计师跟我一样对栅格系统早有耳闻，却始终捉摸不透该怎么用，但是我们怎么能被这点小困难打倒呢~，Follow me！栅格系统英文为“grid systems”，又叫“网格系统”，运用固定的格子设计版面布局，其风格工整简洁，具有逻辑性。栅格系统最早由平面设计发展而来，现在普遍用于平面、网页、移动端设计。本篇只讲述网页栅格在PC和移动端的用法。

概要

一、栅格系统的必要性

二、栅格系统的基本概念

三、栅格系统的分类及计算公式

四、栅格系统在响应式布局中的应用

五、网页栅格系统的使用步骤

一、网页栅格系统的必要性

更专业

使设计有迹可循，具有逻辑性，同时也更规范，减少设计中的尺寸计算和无效尝试，设计师可以将更多的精力放在设计本身。

更高效

统一设计规范，减少决策时间，使沟通更高效。

布局更方便

特别是对响应式布局，能够使不同设备上呈现的界面更具统一性。

二、栅格系统的基本概念

基本组成:

  1. 栅格总宽度（W）
  2. 列（a）
  3. 水槽（i）
  4. 外边距（M）

栅格总宽度(W)

栅格总宽度就是设计内容的宽度，一般来说网页的顶部和侧边导航、背景装饰元素、通栏banner和底栏（footer）可以不受栅格总宽度限制。

列(a)

栅格的单位，它们构成了内容宽度。最常用的12列、24列。列的宽度一般会计算得出，或直接自定义，首先要确定的是列的数目。

水槽(i)

水槽是列与列之间的间隔，水槽宽度越小内容越紧凑；越大留白越多，页面更有呼吸感，但水槽宽度不能比列宽大，否则不利于内容的展示。水槽内不可以放内容，不然的话使用栅格还有什么意义。

外边距(M)

是内容宽度之外的留白部分，会随着设备的宽度不同而变化。外边距一般有个安全距离，可以按照水槽宽度的（常用0.5、1.0、1.5、2.0）倍数来计算。

三、栅格系统的分类和计算公式

a、有边距的栅格：适合已知要设计的内容宽度（即W已知）

b、无边距的栅格：适合已知要适配的网页尺寸，使用最接近网页内容尺寸的栅格系统。

c、直接等分的网格：已知要设计的内容宽度和列宽及列的数目

四、栅格系统在响应式布局中的应用

栅格系统应用于响应式布局，有三种类型：

  1. 固定网格布局；
  2. 流动网格布局；
  3. 混合网格

在此之前有个断点的概念，需要了解一下

断点：是具有特定布局要求的预定屏幕尺寸的范围。在给定的断点范围内，布局会根据屏幕大小和方向进行调整。超出范围则相当于达到某个临界点，界面布局会发生变化。

a、固定网格布局

固定网格，列宽和水槽宽不会改变，只是改变列的数目，当窗口缩放时，排版布局不会发生任何改变，只有当达到一个临界值（开发那边设置好的固定的值），界面才会发生改变。在此之前界面排版都是不变的，就像一部分被切掉了。

b、流动网格布局

内容宽度会随着窗口的缩放而发生改变，例如图片会缩小，文本会换行。水槽的宽度不一定是固定的，可以随着页面宽度变化。

c、混合网格

即固定网格和流动网格组合的形式，常用于后台系统设计、工具型界面设计等。

例如上面的后台管理系统（dashboard）侧边栏是固定网格，右侧内容是流动网格。水槽宽度保持不变。

五、栅格系统的使用步骤

  1. 确定内容的总宽度W（常用的1180px、1190px、1200px、1400px）
  2. 确定栅格数目n（如果你的网页结构相对简单，则n=12即可，如果网页结构比较复杂或者具有排版的不确定性，则用n=24。）
  3. 确定水槽的宽度i（水槽宽度常用的6、8、10、15、20px）
  4. 在sketch/ps里设置上面的参数即可得到一套栅格系统

Sketch非常方便，在「视图」-「画布」-「布局设置」即可得到如下界面设置栅格系统（中文和英文对照）

Ps中「视图」-「新建参考线版面」，虽然没有Sketch那么方便，但依然能够很方便设置出栅格系统，如图。

本文总结

  1. 栅格系统组成：总宽度（W）、列（a）、水槽（i）、外边距（M）
  2. 计算公式：有边距网格：W=（a+i）*n；无边距网格：W=（a+i）*n-i；确定总宽度，确定列宽和数目直接等分
  3. 响应式布局三种类型：固定网格布局；流动网格布局；混合网格
  4. 栅格使用三步骤：第一步确定总宽度（W），第二步确定栅格的数目（n），③第三步确定水槽宽度（i）

其他的一些小技巧：

  1. 网页中常用100px栅格，也就是列宽与水槽的常见组合（90+10、80+20、70+30、85+15）px
  2. 网页中图片推荐使用常用比例（21:9、16:10、16:9、7:5、4:3、1:1）
  3. 栅格不是固定死的，可以自定义符合当前项目的栅格系统。

推荐一个智能生成栅格系统的网站：

有了这个省去了很多计算的过程，可以直接下载下来png格式，放到软件里面直接拉参考线，就有了一套网格系统，是不是很方便。

UI设计进阶（公众号）

作者：阿倩

赞 (0)

相关推荐

  • 栅格系统基础六要素

    小编:栅格系统在UI设计中起着非常重要的作用,它是以规则的网格阵列来指导和规范设计中的版面布局以及信息分布.使得信息呈现更加美观易读,更具可用性.本篇是关于栅格系统的基础讲解,非常感谢作者@菜心设计铺 ...

  • 栅格系统及其在后台设计中的应用—后台设计经验总结01

    关于栅格系统文章不少,但鲜有专门针对栅格系统在后台设计中相关应用的文章.本文希望抛砖引玉,能引起更多同行的交流与讨论 栅格系统的目的 栅格系统在页面排版布局.尺寸设定方面给了设计者直观的参考,它让页面 ...

  • 安卓系统和ios系统到底有什么不同？

    说起Android系统和ios系统,这可是无人不知无人不晓.小编就来向大家简单的介绍一下这两个系统吧!Android是一种基于Linux的自由及开源的操作系统,主要使用于移动设备,如智能手机和平板电脑 ...

  • 怎么取消电脑微信中打开网页是系统默认浏览器的设置

    怎么取消电脑微信中打开网页是系统默认浏览器的设置

    有的小伙伴在使用电脑版微信软件时,每次在微信中打开网页,打开的都是系统默认的浏览器,因此想要取消该设置,如何取消设置呢?小编就来为大家介绍一下吧.具体如下:1. 第一步,双击或者右击打开微信软件.2. ...

  • 网页设计中的分割法则（设计师必须知道的网页栅格）

    网页栅格,很多人都不太懂是什么意思,也从来没有考虑过,新手设计师也许都没有听说过,今天我们就来看看这篇通俗易懂的教程,让你看完就学会,一定要弄明白是什么意思,怎么用!太重要啦~! 赶紧开始吧,迫不及待 ...

  • 一篇文章让你学会栅格系统

    到底什么是栅格?到底栅格要怎么样用?到底为什么要用栅格?浏览了大量的文章,看完之后依旧是云里雾里.梳理成图文分享给大家. 站酷 作者:夏叙

  • 栅格系统大全【干货下载】

    适用于iOS,Android和Bootstrap的庞大网格系统库.使用此套件轻松启动项目.全套栅格系统资料都有,大家可以下载全套文件,好好研究. 提取码: 6gyb 来源:https://grid.k ...

  • Bootstrap 栅格系统的使用方法

    Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.我们可以利用栅格系统很好的前端页面的布局,大大提高编写页面的效 ...

  • 如何打开win7系统网页? win7系统网页打不开的解决办法

    如何打开win7系统网页? win7系统网页打不开的解决办法. win7系统网页打不开怎么回事 第一种解决方式:大家可以尝试将现有的浏览器卸载掉,然后重新安装,或者是将目前的浏览器进行升级,升级到最新 ...