网页设计栅格化布局 第1篇
网页版的谷歌日历中有一个固定的顶部导航以及显示日历控件的左侧导航。
Google Keep和Spotify一样，它们都具有固定的通用导航，而且左侧栏都具有粘性。
移动端
在移动体验中，由于菜单项很多，导航项往往会隐藏在汉堡菜单中。
如上图，Slack(左)将导航隐藏在左上角的图标中；移动端的Google Keep(右)将导航隐藏在汉堡键中，还在底部添加了按钮，用来快速创建新的笔记。
良好的可用性不仅取决于外观，还取决于有效性，可扩展性和可转换性：
原文：
网页设计栅格化布局 第2篇
在前面提到过，假如网站的需求是响应式的设计，这时，设计师们肯定肯定先问一下前台他们准备如何实现响应式布局，而不是把设计稿完成后交给他们后YY他们能百分百给你复现你的设计稿。
关于响应式的栅格系统，首先公告一点，当前台乐意并理解CSS原理和框架的构建方式时，可以构建其余样式的网格，比方7、9、11、13等等，甚至各种异形网格，但在绝大多数情况下，更多的前台攻城狮青睐于高（tou）效(lan)，而他们常用的css框架除了Bootstrap(宽480/768/992/1200,12列)，还有一堆叫不出名字的轻量css框架（毕竟栅格系统只是Bootstrap的一部分，假如只是需要一个响应式的css的话，可选的非常多，比方），除此之外，有可能你那可爱的前台攻城狮用的是flexbox实现响应式弹性布局，所以在一切未知确定下来之前，请放下架子，请教一下开发人员，由于尽管不想承认，但这种情况下是前台来指导设计。值得庆幸的是，这种情况在现实中非常少的，（但不排除你接手的是一个二次开发的项目等等之类），确定他们使用哪种框架之后，设计师可以开始自己的工作了。
下面也举个例子，是960gis的。
【960-grid-system栅格化布局】
看完你也许会明白为什么涉及到栅格化布局需要前台来确定了，960gis的css框架给出了三种方案，24列16列12列，设计师要在这个基础上进行设计。一旦需要栅格化布局，意味着设计师自由发挥的空间再次缩减，只有在这三个方案上选一种。这些方案从何而来呢？很简单，你只需向前台索取他使用的框架的psd模板就可，里面参考线都是建好的。而前台肯定会非常乐意帮你这个忙，理由很简单，你按照他使用的框架规范进行设计也是在肯定程度上缩减他的工作量，皆大欢喜。比方下面这张，就是目前最新的Bootstrap4的psd文件的截图。
【Bootstrap4】
设计师也可以自给自足，一般这些css框架库都会提供下载途径。尤其是Bootstrap，作为成熟的框架，很多模板文件可以套用。栅格化布局以使用的css框架库为原则，让前台开发提供给设计师再好不过。
网页设计栅格化布局 第3篇
对于能否采用栅格化设计，采用下面几个案例说明一下：
（企业站之类-以详情几种单一产品为主）
（功能型网站）
（不拘泥形式的设计形式）
针对这三个具备代表性的案例，栅格化设计是没有必要的。理由很简单，栅格的优点也是缺点，规范意味着统一也意味着限制，在以上的案例中，无需用栅格来限制设计师的灵感，毕竟这个社会，还是需要设计感的。
但绝大多数情况下，推荐栅格化设计。尤其是图文混排、版块很多的网站，栅格化设计会让内容杂乱无章的页面呈现清新感。
关于栅格化布局，方案非常多，来看下面几个案例，我们都称之为栅格化设计。
（广义的栅格化系统-无间距的单元格）
（广义的栅格化系统-有间距的单元格）
（广义的栅格化系统-有间距的单元格）
对于不需要考虑页面响应（换句话说，和框架无关）的网页设计，准则可以简化成一句话：“由设计师自由决定”。