前言

dddd

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

“老板,臣妾做不到啊”

“为啥?”

 “范”栅格(HTML5 UI栅格研究)

如何专业地答复?

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

“范”栅格(HTML5 UI栅格研究)

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

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

“范”栅格(HTML5 UI栅格研究)

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

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

“范”栅格(HTML5 UI栅格研究)

“范”栅格(HTML5 UI栅格研究)

“范”栅格(HTML5 UI栅格研究)

栅格系统

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

“范”栅格(HTML5 UI栅格研究)

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

 “范”栅格(HTML5 UI栅格研究)

栅格应用

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

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

“范”栅格(HTML5 UI栅格研究)

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

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

“范”栅格(HTML5 UI栅格研究)

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

直接分割应用于H5中

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

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

“范”栅格(HTML5 UI栅格研究)

不拘泥于栅格

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

“范”栅格(HTML5 UI栅格研究)

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

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

“范”栅格(HTML5 UI栅格研究)

总结

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