Web UI设计师须要了解的用栅格化系统指导网页设计

出处：https://www.jianshu.com/p/9838f217f4f6

致敬，，，

-------------------------------------------------------------- 分割线 ----------------------------------------------------------

写在开头：关于网页栅格布局的概念已经无需再进行描述，通常来讲，有经验的web ui 设计师都应该据说并运用过。但网上有些关于栅格化系统的文章讲的很是理论化，又是算法又是模块，并且和响应式布局混在一块儿，让新晋的网页设计师们简直无从下手，因此这里以案例来讲明什么时候采用以及怎么最快的创建栅格化系统。在全部关于UI的文章中，我会反复强调和前端开发人员的沟通，由于他们是你设计方案的执行者，这一点很是重要。

1.把栅格化设计和栅格化布局分开

强调栅格化设计（grid-design）和栅格化布局（css grid）分开描述，是我的理解这彻底属于两个不一样的工做，前者针对网页设计师，然后者针对前端开发人员。栅格化设计是不需考虑页面的响应的基于栅格系统的设计，主要是为了提升网页的规范性。对于一些中规中矩的网站，或者说通常创意型的网站，栅格化设计仍是很是推荐的，尤为是一些规模大周期长，后期须要不断迭代的项目，栅格化设计让网页呈现出专业可信赖感，并有助于后期的维护。而栅格化布局，特指前端攻城狮使用的css框架，来实现页面的响应式布局。

拿到一个网站的设计需求时，先肯定是否是要单独开发移动版网站，由于响应式布局当然兼顾了手机端，但受加载速度、手机浏览器、自由度等等的影响，如综合电商之类页面复杂的网站若是不作单独的移动站，单纯依靠响应式布局，在手机端的表现就是个渣渣，因此，若是会开发移动版网站的话，恭喜设计师，即你须要的只是栅格化设计，也就是广义上的栅格系统，但若是但愿响应式网页取代移动网页，那就须要特殊的栅格系统了。我在后面会分开来介绍。绝大多数的工做流程是设计师把方案交付给前端，前端再考虑实现方法，如今，这种工做流程须要优化一下，即在开始设计前与开发人员的一次深度沟通。提早沟通的好处在于，你了解他们的工做方式，而经过沟通，设计师须要得到的更重要的一点信息是，网站是否是须要作成响应式，这是后面创建栅格系统的关键。

响应式设计只是网页设计的一个折中方案，依赖于项目实际状况进行选择。对于设计师来讲，若是没有必须的要求，可选择广义的栅格系统，并在此基础上自由发挥创意。

2.毫不万能的栅格化系统

对因而否采用栅格化设计，采用下面几个案例说明一下：

1.企业站之类-以介绍几种单一产品为主.png

2.功能型网站.png

3.不拘泥形式的设计形式.jpg

针对这三个具备表明性的案例，栅格化设计是没有必要的。理由很简单，栅格的优势也是缺点，规范意味着统一也意味着限制，在以上的案例中，无需用栅格来限制设计师的灵感，毕竟这个社会，仍是须要设计感的。

但绝大多数状况下，推荐栅格化设计。尤为是图文混排、版块不少的网站，栅格化设计会让内容杂乱无章的页面呈现清爽感。
关于栅格化布局，方案很是多，来看下面几个案例，咱们都称之为栅格化设计。

4.广义的栅格化系统-无间距的单元格.jpg

5.广义的栅格化系统-有间距的单元格.jpg

6.广义的栅格化系统-有间距的单元格.png

对于不须要考虑页面响应（换句话说，和框架无关）的网页设计，原则能够简化成一句话：“由设计师自由决定”。

3.栅格化设计的参数

网上搜索结果最热的960 gird栅格系统从2009年就开始正式推出，但至今，仍然有不少设计师在使用，除了考虑到显示设备的分辨率，还依赖于960 gird的灵活性。因此，对于新晋web ui来讲，采用960 grid 仍然是最佳的方案，不会出彩但也不会出错。若是是考虑到宽屏的设计（须要舍弃一部分分辨率不高的用户），能够把栅格化系统的宽度建为980甚至以上。但没有栅格化设计经验的设计师须要注意，这里说的960是含边距部分，换句话说，在psd文档中，你的内容部分是950px，栅格化版面能够借助一些很是好用的在线工具，好比知名的Grid.Guide，这是12列栅格在内容宽度950下的三种版式规范，你也可使用24列，灵活度更高。

Grid-Guide自动生成的栅格系统方案（宽950-12列）.png

从图中能够看出，这三种方案列宽column width和间距gutter不一样，剩下的工做对于ui设计师来讲就简单了不少，你能够把版式规范的png格式下载下来，做为你网页设计的基础版块，在此基础上进行列的划分。或者只是以这个参数为基础，从新创建参考线（我更推荐这种方式，尤为photoshop cc2017的新建参考线版面，装订线对应Gutter，列宽对应column width）。我简单的拿版式规范作了个页面设计示意图，这就是基于栅格系统设计的优势，在划分列时，有理可依，有据可循。

基于960grid系统的版块划分示意.png

固然，既然是设计师，就能够感性的元素再多一些。好比，你但愿更多的留白，就能够采用间距值较大的栅格版式，只要整个网站保持一个统一的版式便可。下图是当内容宽度为1200时生成的栅格系统，你还能够尝试不少方案，但Max Width的设定并非那么随意，这个取决于网站的定位。

Grid-Guide自动生成的宽1180的栅格系统方案（24列）.png

至于高度和垂直间距，栅格化系统并无统一的准则，设计师能够采用一些黄金分割之类满满的都是设计感之类的值，或者垂直间距与栅格系统的间距相同或是整倍，总之，也须要一个规范指导全站设计。

栅格系统的参数根据项目的实际状况，尽可能创建10的倍数或8的倍数（google material design推荐）。

4.栅格化布局的参数

其实在写这一部分，我是有些心虚的，由于本身并非前端，只是只知其一;不知其二的了解了一点相关的知识，因此有不对的地方，也欢迎提出。在前面提到过，若是网站的需求是响应式的设计，这时，设计师们必定必定先问一下前端他们准备如何实现响应式布局，而不是把设计稿完成后交给他们后YY他们能百分百给你复现你的设计稿。
关于响应式的栅格系统，首先声明一点，当前端乐意并了解CSS原理和框架的构建方式时，能够构建其余样式的网格，好比七、九、十一、13等等，甚至各类异形网格，但在绝大多数状况下，更多的前端攻城狮青睐于高（tou）效(lan)，而他们经常使用的css框架除了Bootstrap(宽480/768/992/1200,12列)，还有一堆叫不出名字的轻量css框架（毕竟栅格系统只是Bootstrap的一部分，若是只是须要一个响应式的css的话，可选的很是多，好比960.gis），除此以外，有可能你那可爱的前端攻城狮用的是flexbox实现响应式弹性布局，因此在一切未知肯定下来以前，请放下架子，请教一下开发人员，由于虽然不想认可，但这种状况下是前端来指导设计。值得庆幸的是，这种状况在现实中很是少的，（但不排除你接手的是一个二次开发的项目等等之类），肯定他们使用哪一种框架以后，设计师能够开始本身的工做了。
下面也举个例子，是960gis的。

960-grid-system栅格化布局_spec.png

看完你也许会明白为何涉及到栅格化布局须要前端来肯定了，960gis的css框架给出了三种方案，24列16列12列，设计师要在这个基础上进行设计。一旦须要栅格化布局，意味着设计师自由发挥的空间再次缩减，只有在这三个方案上选一种。这些方案从何而来呢？很简单，你只要向前端索取他使用的框架的psd模板便可，里面参考线都是建好的。而前端必定会很是乐意帮你这个忙，理由很简单，你按照他使用的框架规范进行设计也是在必定程度上缩减他的工做量，皆大欢喜。好比下面这张，就是目前最新的Bootstrap4的psd文件的截图。

Bootstrap4-psd截图.png

设计师也能够自给自足，通常这些css框架库都会提供下载途径。尤为是Bootstrap，做为成熟的框架，不少模板文件能够套用。

栅格化布局以使用的css框架库为准则，让前端开发提供给设计师再好不过。

做者：泱泱悲秋连接：https://www.jianshu.com/p/9838f217f4f6來源：简书著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。