网页设计十二栅格法 第1篇
一个产品并不是所有的页面都必须应用栅格系统。对于非常规设计，可以根据实际业务场景自行修订。
04
总结
▼
各个大厂的设计体系中都提出了自己的栅格方法，大家可以参考学习。在实际的项目中灵活运用就可以了。另外栅格系统既要从设计侧进行细节思考，也要与前端开发紧密配合，才能更好地保证设计落地。
参考文献：
《Ant Design设计规范》
《TDesign 设计规范》
《ArcoDesign 设计规范》
加老D私人微信，朋友圈更多精彩返回搜狐，查看更多
网页设计十二栅格法 第2篇
文中的例子里，这个六列栅格每栏跨越两个单元列，这使它比三列栅格更有挑战性一些。
它将三列栅格中每一列另外拆分为两列。 六列栅格给设计带来更多选择和机会，让你可以更方便地微调较小的细节。如果你需要设计一个内容非常丰富并且需要存放大量信息的网页，六列栅格是个明智的起点。 但由于它是个更有难度的网格，我不建议在第一个项目就开始使用它。
Wallpaper
The New York Times
组合
设计中，你还可以考虑合并使用不同的栅格。组合也是十二栏栅格作为一个界面辅助系统非常方便的原因。 它能轻松地将三，四和六列的栅格整齐地组合在一起。
Etsy
BBC
Etsy
Etsy
BBC
Etsy
Etsy
Etsy
重点
平衡而简单的布局通常比过于复杂的布局更让人舒适。 对立面是，设计中需要注意不要太过安全，否则设计可能会显得无聊。 为了强调某些内容，可以尝试让它脱离栅格或通过大小来实现突显（例如，通过合并列）。 这样可以有效地引起用户的兴趣并在主要设计元素中形成更好的层次结构。
Etsy
通过让某些特定元素脱离栅格的方式来实现重点的突出，要么会让你的设计非常出彩，但是不够高明的使用则会让设计看起来很笨拙。 Wallpaper在突破四列栅格的表现方面做得非常出色，并且也很有力地强调出了他们希望用户观看的视频。
Wallpaper
form
Wallpaper
但是过多地破坏栅格的节奏会导致布局看起来残破，不完整，或过分强调了太多零碎的内容。因此在使用这个方式的时候需要小心，以免内容不明确，用户无法记住重点信息。
局限性
关于栅格经常出现的问题之一，便是在设计中，什么时候才应该使用栅格，答案是： 所有时候！ 选择栅格永远都是个好决定，因为它们有助于保持设计平衡，层次结构，页面整齐和一致性。
总是有一个争论，认为栅格限制了设计。 栅格虽然会形成限制，但是这种限制是一件好事，因为它实际上可以促进创造力的发生，还能用有建设性的方式指导设计决策。 所以，这样的限制事实上是当你开始一个项目时很好的起点。当你有了外界设计限制时（例如客户提供给你的广告的大小尺寸）时，便同时有了一个栅格来围绕它进行设计。 你对栅格的选择可以也应该要考虑到这些限制。
在下面《华尔街日报》的示例中，可以看到标记绿色的广告尺寸是设计师通过栅格的协助来做的设计决定。
脑图
使用栅格很成功的情况下，它应该也会帮助你构建网站和它包含的各个页面的思维模型。 这同时也意味着同一个网站的各个页面的结构不应完全不同—— 调整每个页面使其有共同点来实现一致性应作为设计计划的一部分。
让我们再来看一些Etsy成功解决此问题的示例。 但是这次，我们集中讨论栅格如何满足其对不同的内容需求，以及在需要的时候如何将它们逐页地混合在一起。 我认为他们在保持某种一致性方面做得非常出色。这种一致性创造了统一的印象，还将页面整齐地绑在一起。这样一来，用户在浏览的时候，全程都有指引，并且也明白对不熟悉的页面应该有什么样期望。 他们的思维导图是健全的，因此不会出现任何结构上的意外来破坏用户体验。
他们为页面创造了一个很好的节奏，加上简洁的重复使用，他们的栅格看起来很优雅大方。
最后的想法
总体而言，系统地规划内容排版是整篇文章主题的关键。 要将各种形式的内容捆绑在一起，一致的栅格是最有效的工具。统一的栅格会建立一个强轴，这个强轴会引导用户的眼睛和动作（例如视觉锚点），将你设计的各个部分绑定在一起并产生凝聚力，建立更牢固的关系。 保持设计的简单！ 让你的设计更易于构建和维护。
网页设计十二栅格法 第3篇
这个栅格的每栏都包含了4列，由于它是一个不对称的网格，因此涉及的方面更多一些，所以使用中，需要用更加聪明的方式在设计中找到平衡点。 像这样的不对称布局通常被认为更活跃，更熟练的技术运用。当然这个说法可以而且应该受到质疑！
Wallpaper
Kickstarter
Kickstarter
Wallpaper
WIRED
网页设计十二栅格法 第4篇
三栏布局的分配更加灵活，包括 4-4-4 布局、3-6-3 布局以及 2-5-3 布局。
1. 4-4-4布局
这种布局方式多用在展示大量图像的网站中，有利于内容的整齐规范。
Unsplash(左)和Dribbble主页(右)都针对缩放图像采用这样的布局设计。
2. 3-6-3布局
这种布局方式多用于处理较长内容页面，或者主内容不需要太多横向空间。
Dribbble 的工作页就采用了 3-6-3 的布局。紫色轮廓显示了内容在网格上的位置，紫色色块表示内容之间的距离，主要内容仍然在中间 6 列。
在不同的设备中，内容的显示也会有差异。
接着使用 Dribbble 的工作页作为例子，下面的截图是 Dribbble 在不同设备上的页面设计。
在平板电脑上(左)原先的三栏变成两栏，左侧的内容消失了；
在移动设备上(中)，右侧栏被隐藏在另一个界面中，只有通过触发按钮才能展开该部分的内容(右)。
3. 2-5-3布局
Facebook 和 Twitter 都采用这种布局，主要内容放在中间区域，用瀑布流的形式展示出来。
我们可能会注意到左侧和右侧的列数不一样。这是因为它们的左侧面板是导航栏，占用的空间少；右侧面板包含生日，精彩集锦，提醒和趋势等杂项，信息量多占用的空间也更宽。
4. 栅格用法解析
不同的页面可能需要不同的网格设置，这取决于产品。所以在 twitter 中，10 列的布局也是有效的，而且不均匀的分布为内容提供了清晰的层级结构。
基本上我们可以按自己喜欢的方式来划分网格，划分时需要认真考虑网站的用途，以及内容的层级关系如何构建。
如果一个网站的主要用途是阅读长篇新闻，或者查看大图片，我们不会使用三栏布局，因为需要使用更多的横向空间。相反，会把导航放在顶部，并使用双栏布局。
粘性布局是指用户滚动页面时，页面上的某些面板会固定在屏幕上，出现粘性定位效果。
Airbnb 网站的右侧栏就有一个粘性面板，它不随着页面的滚动而变化，而是定位在固定区域，方便用户预订住宿。
这些面板可以是带有号召性消息的静态面板，也可以是在更改信息时更新的动态面板。
如果我们希望突出显示用户可以执行的单个操作时，最好使用粘性布局。Airbnb 网站分成了两栏 8-4 的布局，其中右边四列为粘性面板。
设计粘性面板的一个重要准则是必须保持面板长度足够短，使其在所有屏幕上都可见。
网页设计十二栅格法 第5篇
现在回到更具体范围来，我想通过一个非常通用的网格使用方法来帮助你形成你的第一个布局构建体系。十二列栅格是个很好的助手。
Etsy
为什么十二列栅格那么方便？ 对于初学者来说，这个栅格可以同时被作为三，四和六列栅格使用，所以它足够灵活，处理各种不同的内容材料的时候游刃有余。 最重要的是，使用中你可以将它以对称的形式和不对称的形式来使用 -- 这样的可能性为设计提供了很多选择，无论你选择使用传统的，安全的布局还是超出简单对称的动态布局。
让我们看一下使用了这个栅格的高灵活度的几种布局：
网页设计十二栅格法 第6篇
四列网格的主要优点是它很简单，它有很强的平衡界面能力以及可靠性。 这个例子里面每个栅格跨越三个列。 它的缺点是过于对称的特点有时候让它看起来有些无聊。
常见的设计的需求会有一个主要部分排版需要强调的内容，然后一个侧栏来放置次要内容。 在下面的第一个示例中，你可以看到第一列用于品牌宣传，中间两列用于主要内容，而最后一列用于不太需要突出显示的内容。
form
Harvard Design Magazine
Etsy
Wallpaper
marie claire