HTML5隐藏栅格,“范”栅格（HTML5 UI栅格研究）

前言

“这里大点，那里小点，再挤一挤……”

“老板，臣妾做不到啊”

“为啥？”

如何专业地答复？

设计并非随心所欲拍脑门定下来的。字体大小、图标风格以及色彩运用，在产品初期就已经过设计推导，随着产品迭代一步步完善，成为现有的设计规范 。这些元素决定了产品的识别性与统一性，不能随意更改。

将隐藏于设计中的栅格提出来研究，会更优说服力

如果将字体图形看作点，那么栅格就是它们之间看不见的线。

依据一定的规律、合理设置基准线是广泛应于设计中的手法，它能帮助我们更有效的进行设计。

在栅格系统中，页面布局更具有秩序性、连续性，能较好地提升整体用户体验。

栅格系统

常见栅格系统有三种：直接分割，等距分割，数学分割。

分割常用比例：1：0.618，1：1，1: √2，1：√3，1：2……

栅格应用

等距分割常应用于WEB页面中

常用的分割方法有12列、24列、36列、60列等。将它们应用在640的H5页面(以下范例皆以640为基准)会发现，列宽度越小，页面分割越灵活，利用率也越高。

手持设备屏幕尺寸小于PC屏幕，想要有更灵活发挥空间，就必须采用列宽较小的栅格。

根据8PX原理，可以将列宽定为8PX，槽宽也为8PX。我们会发现38栏的栅格会导致页面在栅格内只能进行1、2、19、38等分，但是在手机页面中3、4、5、6等分是常见的分割形式。想要在此栅格下进行等分，只有两种处理手法，1如下图，2突破栅格。

微信购物首页应用栅格系统

直接分割应用于H5中

除了文中提到的几种等距分割，大家还可以去尝试不同的分割形式。

针对微信购物的栅格，我采用了10PX宽度的直接分割。直接分割因为去掉了列与槽的概念，所以在分割单元格时会更灵活。换个角度，你可以将它看做是一根根参考线，我们要做的只是将页面元素尽可能的去对齐它们。

不拘泥于栅格

在实际设计过程中，栅格的使用会出现限制条件，这时我们需要对设计进行相应的调整。我们应当明白，栅格只是为设计师提供便捷的辅助工具，而不是限制设计师的工具。

应用栅格系统页面前后对比

微信购物一直采用10PX做为基础单位，但是加入栅格后，还是会发现有很多对齐上的瑕疵。利用栅格来完成对齐，而不是主观的随意移动，这样在设计的过程中就能减少很多不必要的步骤，从而输出稳定的设计作品。

总结

在设计过程中我们需保持三份感性七分理性的心态去思考，感性让我们灵感迸发，理性使我们回归现实,太多的感性会不严谨，太多的理性则显得呆板无力。本文以微信购物为例，介绍了一种栅格化的方式。栅格方式多种多样，深入的去研究它们，你总能从中获得新的知识。