八月份有机会研究栅格在无线端该如何运用，之后也在部门做了一次小分享，现在整理出文章大家一起来看看，目前栅格无线端的运用其实比较少，例子也挺少的，那作为这次的目标，我就把重点放在无线端来研究分析，也会提及到到栅格的定义及来源。

正文

栅格的基础介绍

通过资料可以看到，在1692年，法国国王路易十四感到法国的印刷水平差强人意，因此命令成立一个管理印刷的皇家特别委员会，目标是设计出科学的、合理的，重视功能性的新字体，委员会由数学家尼古拉斯加宗担任领导，他们以罗马体为基础，采用方格为设计依据，每个字体方格分为64个基本方格单位，每个方格单位再分成36个小格，这样，一个印刷版面就有2304个小格组成，在这个严谨的几何网格网络中设计字体的形状，版面的编排，试验传达功能的效能，这是世界上最早对字体和版面进行科学实验的活动，也是栅格系统最早的雏形。

然后可以在维基百科查到栅格的定义为：栅格设计系统（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。

下图展示为栅格系统在平面中的运用

网页中的栅格系统

栅格在引入到网页设计后，出现了很多CSS网格框架，几乎成了网页设计的标准。目的是让网页布局更合理，信息呈现更加美观易读，风格工整简洁，对前端开发来说，更加灵活与规范，在网页中的定义可以理解为以规则的网格阵列来指导和规范网页中的版面布局以及信息分布，这样做的好处是给予一种规范，令排版者可以较为方便的组织标题、列表、段落、图片等元素，保持版面元素之间的一致性。

下图展示为栅格在网页中的运用

无线端的栅格系统

转移到我们的无线端，目前我们在做设计，大部分时候会跟着感觉走，很容易针对某个点设计，从而忽略了整条大线，或者纠结于某个模块尺寸的大小，那基于界面的栅格可以很大程度上保证设计产出的质量，利用栅格的计算方式，无需再计算尺寸，按照栅格自由布局即可，将大大加快手机设计的布局效率，将焦点集中在细节的设计和图形界面的创意上，还可快速布局成四列图标、三列图标、两列缩略图等基本常规的布局，以及更加自由的布局（如win phone的磁贴），可以兼容现今市场上常规的手机设备尺寸。

以上是栅格的发展历程，及我在研究时对无线端使用好处的一些想法，接下来会说一下如何创建及使用栅格

栅格的计算方式

事实上，Phone版和PC版的栅格，在本质上没有区别，一样的计算方式，无外乎屏幕大小的差别，但是这屏幕大小就有很多细节需要结合手机用户的使用习惯来判断。在设计一个无线端栅格前，首先需要设计一个基准屏幕（可以根据某些具体数据确定），比如我们的目标用户群使用的手机屏幕尺寸占比最多的是iPhone6，即750*1334，即可定位为基准屏幕，通常栅格的计算方式，（m + a）*  n - a = 750 - 2b，    m：栅格宽    a：槽宽    b：留白宽    n：栅格格数

这边列举出三种栅格方式，并加以说明

以上是作为此次研究提出的三种栅格，通过对比分析可以看出，无线端更适用24栅格结合等分式栅格一起来做。

针对无线提出的栅格

在日常设计中，我们经常根据需要制定不同的版式或者划分区块，这个时候我们就可以用到栅格来作为我们的设计依据。我们可以看到，使用栅格系统的设计，非常的有条理性，看上去也很舒服。最重要的是，它给你当前做的页面结构定义了一个标准，利用栅格系统可以更好的驾驭内容，保持一致性，均匀化的布局，这样一致性自然就有了，可以组织不同元素之间的平衡感，让你的设计具有规范感，更好引导用户，让眼睛浏览信息更加愉悦，信息更有条理性，为设计布局提供依据，信息展示适合阅读，方便日后维护、扩展。

当然你也可以打破栅格系统，用更好的布局取而代之，也可从栅格系统中衍生出自己的布局方式。

但对于无线端栅格也有不完美之处，比如内容信息不确定导致高度不确定的页面，在高度层面上就无法做到栅格了，没办法在无线端形成一套有效的设计体系，对新手来说，可能会阻碍创造发挥。

那针对上述，更建议在无线端使用24栅格，因为12栅格对设计师的局限性比较大，灵活性差。不过，具体的情况还需具体的分析与解决，这需要我们在实际的应用中不断的总结经验，不断实践。并且，我们可以衍生出任何一种栅格系统，只要改变m和a的值。

总结

栅格在一定基础上确保了设计结构的组织分明、结构明晰。我们可以通过栅格系统可以更好的打造设计的信息层级，让设计阅读起来更具有韵律感。其次对于用户也是不错的，我们一直在强调设计要注重用户体验，毕竟，用户为你的内容消费，因此你要向他们提供有价值的体验。合理的使用栅格系统会对你大有帮助，不但能保持设计的一致性，还能更好的引导用户。但是栅格系统不意味着循规蹈矩，一味按照网格线来进行布局，就拿响应式设计来说，灵活性是其最大的特点，栅格系统也应如此。最后我认为栅格系统的意义在于更灵活的帮助你有序布局，而不是限制你的设计。

谢谢大家，希望对各位在日后的设计中有所帮助。