如何根据设计目标使用合适的栅格化布局呢？在这里，我们将通过多个案例来研究布局设计，分析它们如何拓展到移动领域。
（全文共计2420字，阅读约需要6分钟）
栅格系统是一种系统地调整设计，建立层级结构和逻辑的方法。许多好的设计都使用了栅格系统，它让设计看起来更统一和协调。在如今多设备环境下，响应式的栅格化布局可以创建更流畅的跨屏幕体验。文章目录：
单栏布局又称全屏布局，是最简单的布局方式，常用于登录页面。在单栏布局中，我们有足够的空间来展示大型图片，以此来增强产品或品牌想要传达的信息。在这样的布局设计中，照片或图形会被拉到前景焦点的位置，给用户留下深刻的印象，所以这是主页、简介页、操作指南或展示新产品的通用布局。下图左侧是WeWork网站的主页，右边是12栅格系统覆盖的状态。
［栅格用法解析］单列布局中的每个元素都可以作为单独的模块，所以易于在移动设备上扩展。在下图Wework登录页面中，就突出显示了栅格系统中的列(粉色)和模块(紫色)。
双栏布局最常见的布局之一。双栏布局有两个优势：首先是保证了文本的宽度在6-8列，防止文本过长不容易阅读；另外就是可以将其他元素折叠在侧栏作为导航或者广告。
Mango Learning (左) 和Discord (中) 都把侧栏放到顶部，因为它们都是导航项；Food and Wine (右)则把侧栏的其他食谱放在主要内容的后面。
三栏布局三栏布局的分配更加灵活，包括4-4-4布局、3-6-3布局以及2-5-3布局。［4-4-4布局］
在不同的设备中，内容的显示也会有差异。接着使用Dribbble的工作页作为例子，下面的截图是Dribbble在不同设备上的页面设计。
在平板电脑上(左)原先的三栏变成两栏，左侧的内容消失了；在移动设备上(中)，右侧栏被隐藏在另一个界面中，只有通过触发按钮才能展开该部分的内容(右)。［2-5-3布局］Facebook和Twitter都采用这种布局，主要内容放在中间区域，用瀑布流的形式展示出来。
如果一个网站的主要用途是阅读长篇新闻，或者查看大图片，我们不会使用三栏布局，因为需要使用更多的横向空间。相反，会把导航放在顶部，并使用双栏布局。
粘性布局
粘性布局是指用户滚动页面时，页面上的某些面板会固定在屏幕上，出现粘性定位效果。Airbnb网站的右侧栏就有一个粘性面板，它不随着页面的滚动而变化，而是定位在固定区域，方便用户预订住宿。
如果我们希望突出显示用户可以执行的单个操作时，最好使用粘性布局。Airbnb网站分成了两栏8-4的布局，其中右边四列为粘性面板。
设计粘性面板的一个重要准则是必须保持面板长度足够短，使其在所有屏幕上都可见。
Web应用
有些站点有固定的导航，这些导航常常固定在屏幕顶部和左侧，这些粘性导航帮助用户在不同的目标之间来回切换。由于这样的设计意味着导航始终存在，因此可以利用它来简化内容。在下图网页版的Spotify中，左侧和底部面板都是固定的。
Slack(左)将导航隐藏在左上角的图标中；移动端的Google Keep(右)将导航隐藏在汉堡键中，还在底部添加了按钮，用来快速创建新的笔记。
总结良好的可用性不仅取决于外观，还取决于有效性，可扩展性和可转换性：1.单栏布局中的元素位置更灵活，更易于在移动端扩展；2.双栏布局在保证文本可读性的同时，侧栏区域有更大的扩展潜力；3.三栏布局分配灵活，但布局方式要取决于产品目标；4.在粘性布局和Web应用中，注意粘性面板和固定导航里的内容要简洁。希望文章能够为你提供帮助原文：https://uxdesign.cc/responsive-grids-and-how-to-actually-use-them-common-ui-layouts-7073293697f8作者：Christie Tang 译者：Clippp
觉得好看就点一下在看吧?
原文链接：http://www.qisoo.cn/zhuti/111015.html，转载和复制请保留此链接。
以上就是关于多案例帮你掌握栅格系统的布局设计滚滚长江东逝水浪花淘尽英雄全部的内容，关注我们，带您了解更多相关内容。
以上就是关于多案例帮你掌握栅格系统的布局设计滚滚长江东逝水浪花淘尽英雄全部的内容，关注我们，带您了解更多相关内容。
