如何根据设计目标使用合适的网格布局？ 这里，我们将通过多个案例来研究布局分类，并分析如何将其推广到中国联通领域。
网格系统是一种系统地调整设计、建立层次结构和逻辑的方法。 很多好的设计都会使用网格系统，这使得设计看起来更加统一和协调。
在当今的多设备环境中，响应式网格布局可以创建更流畅的跨屏体验。
文章目录：
1、单栏布局
也称为全屏布局，是最简单的布局形式，常用于登录页面。 在单列布局中，我们有足够的空间来显示小图像，以增强产品或品牌想要传达的信息。
在这样的布局设计中，照片或图形会被拉到前台，给用户留下深刻的印象，所以这是主页、介绍页面、操作指南或展示新产品的通用布局。
下图右侧是WeWork网站首页，右侧是12格系统覆盖情况。
1.1 电网使用情况分析
单列布局中的每个元素都可以作为单独的模块，因此很容易在中国联通设备上进行扩展。 在 Wework 登录页面上，网格系统中的列（粉色）和模块（紫色）突出显示。
在页面上，无论是小卡片模块还是大模块，模块之间的宽度都是一致的。 这个例子表明，单列布局的设计也可以以有趣的方式分解页面。
1.2 案例
下图是单列布局的一些示例。 你能尝试分析一下这个网页的网格布局是什么样子的吗？
2.双栏布局
是最常见的布局之一。 两栏布局有两个好处：一是保证文字长度在6-8栏以内，防止文字过长，难以阅读； 二是可以将其他元素折叠到侧边栏中作为导航或广告。
可以用8列作为主内容区域，另外4列作为副内容区域，这样左右两边都是质数，有利于后期的设计和开发。
2.1 案例
这种布局用途广泛，适合网站的内部页面或有大量文本的页面。 例如：Mango Learning 使用右侧边栏导航到不同的章节课程。
Discord 网站的两侧都有一个常见问题列表，并显示当前正在询问的问题。
Food&Wine 在左栏中显示其他食谱，以使读者在网站上停留更长时间。
2.2 移动端
在移动设计中，我们不能直接使用网页的布局。 相反，我们需要根据侧边栏的具体功能来确定内容的层次关系。
如果侧边栏是导航栏或问题栏，则应放在主要内容之前； 如果侧边栏有阅读更多或其他建议，则应将其放置在主要内容旁边。
Mango Learning（左）和Discord（中）都将侧边栏放在底部，因为它们是导航项； 美食与美酒（右）将其他食谱放在主要内容旁边的侧边栏中。
3、三栏布局
三列布局的分布变得更加灵活，包括4-4-4布局、3-6-3布局和2-5-3布局。
4-4-4布局
这种布局形式多用于展示大量图片的网站，有利于内容整齐规范。 Unsplash（左）和 Dribbble 主页（右）都使用这种布局设计来缩放图像。
3-6-3布局
这种布局形式主要用于处理较长内容的页面，或者当主要内容不需要大量水平空间时。
Dribbble 的工作页面采用 3-6-3 布局。 紫色轮廓显示内容在网格上的位置，紫色色块表示内容之间的距离。 主要内容还是在中间6栏。
在不同的设备上，显示的内容会有所不同。
然后使用 Dribbble 工作页面作为反例。 通过下面的截图可以看到：在平板电脑（左）上，原来的三栏变成了两栏，左侧的内容消失了； 在联通设备上（中），右栏隐藏在另一个界面中elementui都是栅格布局，这部分内容只能通过触发按钮（右）来展开。
2-5-3布局
Twitter和Facebook都采用了这种布局，主要内容放置在中间区域，并以瀑布流的形式显示。
我们可能会注意到右侧和左侧的列数是不同的。 这是因为他们的右侧面板是导航栏elementui都是栅格布局，占用的空间更少。 右侧面板包含生日、亮点、提醒和趋势等杂项，信息量较大，占用的空间也较大。
栅格使用分析
根据产品的不同，不同的页面可能需要不同的网格设置。 所以 Twitter 中的 10 栏布局也是有效的，不均匀的分布为内容提供了清晰的层次结构。
基本上我们可以按照自己喜欢的方法来定义网格。 在划分时，我们需要仔细考虑网站的目的以及如何完善内容的层次关系。
如果网站的主要用途是阅读短新闻或查看大图像，我们不会考虑使用三栏布局，因为我们希望使用更多的垂直空间。 相反，请将导航放置在底部并使用两列布局。
4. 粘性布局
粘性布局是指当用户滚动页面时，页面上的各个面板将固定在屏幕上，从而产生粘性定位效果。
Airbnb 网站的左栏有一个粘性面板。 它不会随着页面滚动而变化，而是位于固定区域，方便用户预订住宿。
这些面板可以是带有号召性用语消息的静态面板，也可以是在消息修改时更新的动态面板。
当我们想要突出显示用户可以执行的单个操作时，最好使用粘性布局。 Airbnb 网站分为两栏 8-4 布局，有四栏粘性面板。
设计粘性面板时的一个重要准则是面板的宽度必须保持足够短，以便在所有屏幕上都可见。
5. 网络应用程序
有些网站有固定的导航，通常固定在屏幕的底部和侧面。 这些粘性导航可帮助用户在不同目标之间来回切换。
由于这样的设计意味着导航仍然存在，因此它可以用来简化内容。 在 Spotify 的网络版本中，左侧和顶部面板是固定的。
对于 Web 应用程序设计，粘性导航实际上并不属于网格，因为它仍然锚定在网格之外。 网格里面是需要布局的内容。 当浏览器窗口调整大小时，只有网格中的内容会动态改变大小。
5.1 案例
网页版 Google 日历具有固定的底部导航和显示每月日历控件的侧面导航。
与 Spotify 一样，Google Keep 也有固定的通用导航和粘性侧边栏。
5.2 移动终端
在中国联通的经验中，由于菜单项太多，导航项往往隐藏在披萨菜单中。
如果网页版中有一个底部导航作为整体导航，在联通设备上可能会一直卡在底部或顶部。 为什么是顶部？ 因为它更靠近手，所以更容易触摸和点击。
如上图所示，Slack（左）将导航隐藏在左上角的图标中； 移动端的 Google Keep（右）隐藏了披萨键中的导航，还在顶部添加了快速创建新笔记的按钮。
总结
良好的可用性不仅取决于外形尺寸，还取决于有效性、可扩展性和可转换性：
单列布局中元素的位置更加灵活，更容易在移动端扩展； 双栏布局在保证文字可读性的同时，具有更大的侧栏面积扩展潜力； 三栏布局配置灵活，但布局形式取决于基于产品目标； 在粘性布局和Web应用程序中，注意粘性面板和固定导航中的内容要简洁。
原来的：
