网格系统与仪表盘设计实践分享

网格系统（Grid Systems）来自于设计师在平面设计过程中对于秩序的追求与实践，产生于 20 世纪初期，经过不断的检验和发展，广泛应用于不同的领域。大家接触最多的是各种纸质印刷品，如图书、杂志、海报等。

在约瑟夫-米勒的「平面设计中的网格系统」一书中，作者总结了网格系统的主要优点：

更系统化的理清设计思路

以客观取代主观

理性的去看待创造和制造产品的过程

让信息的呈现整洁有序

将色彩、形式和材料进行结合

进入信息时代后，尤其是互联网的普及，我们的信息获取与内容阅读不再局限于纸质的印刷品，这时对网格系统的应用也产生了新的需求与挑战。不再是大家常见的 A4、B3 这样的纸张尺寸，而是不同的屏幕分辨率，不同的设备，不同的阅读场景（桌面，移动）。相比于纸质的静态尺寸与字体大小，用户在阅读内容时，还可以方便的调整字体大小或通过滑动的方式查看更多的内容。

作为数据可视化领域，主要的排版挑战来自于仪表盘的设计，如何在有限的空间，呈现丰富的图表内容与信息，并需要考虑：内容结构，屏幕尺寸，使用场景等。为了做好这件事，作为数据分析师，我们一般会凭经验或感觉来放置：图表、文字、图表。以及通过和用户的沟通反馈来优化迭代。在这个过程中，如果具备相关的排版布局知识，相信可以进一步的提升仪表盘设计的效率与规范性，即：像设计师一样思考。

所以在接下来的内容里，除了会给大家介绍网格系统的基本知识，还会尝试着结合数据可视化领域的实践与经验，来讲解如何将网格系统/布局的知识应用到仪表盘设计中。

方格本布局

在开始网格系统或布局之前，我们先看一下方格本，喜欢做手账的朋友应该都用过，相比于水平横线的笔记本，方格本多了纵向的线，这样的好处是方便从垂直的方向，对齐和布局，也容易把笔记划分为多个内容区域。方格本的布局容易使用，但也有一些缺点，比如格子的大小是固定的，假设每个格子是 10，我们的内容块是 100 * 80，同时想让内容块的间距为 12 或 16，这时就不方便实现了。

网格系统基础知识

作为页面布局，我们会考虑边距/留白（决定了内容区域的大小），考虑一行放几个内容块会更合适，以及内容块的间距，通过这样的思考顺序，最终决定了整体布局。

这样的排版需求与思考顺序，决定了网格布局的功能与形式。 网格系统的基本元素有：栏/行（Columns/Rows)、间距（Gutters）、边距(Margins)。

「栏 Columns与行 Rows」

「间距 Gutters」决定了内容区域之间的空白，用于区分内容。

「边距 Margins」决定了内容区域与页面边界之间的留白。

通用的网格系统例子

图书

在图书排版时，要考虑装订与阅读翻页，所以版心的位置并不会严格的居中对齐，而是有所变化。

企业VI（Visual Identity）

在企业的 VI 手册里，会定义通用的网格尺寸与应用的场景。

比如在这儿的例子里，就规定了图片的布局规范。

幻灯片模板

作为通用的幻灯片模板，会根据具体的页面类型来提前设计好相应的网格布局。

设计软件中的网格布局功能

假设我们有一个 1920 * 1080的仪表盘页面需要分成 4 栏 3 行，并且左右边距是 80，上下边距是 40，以及页面内的最小网格尺寸是 10。

在 Figma 设计软件里是这样设置的：

基于需求，我们分别添加了 3 个网格样式。 最简单的是 10 size 的 Grid 样式。

纵向是分成 4 列，并指定了左右的 Margin 与列之间的 Gutters。 横向的设置与纵向类似。

如果这是一个顶部 4 个数字指标，下面是 2 个图表的仪表盘需求，基于这儿的网格布局就已经能满足需求了。

如果觉得顶部的指标内容太高，也可以很快的进行调整。

BI 软件中的网格布局功能

在 Tableau 中，同时提供了平铺布局与浮动布局支持。如果是平铺布局，还提供了水平/垂直容器布局，在容器内放置内容时，可以设置均匀分布。这样如果是一行有多个指标，可以随着指标的加入，动态的平均分布/调整宽度。

并支持内外边距的设置。

整体而言，Tableau 对页面布局的支持更全面一些，有更多的尺寸、位置、边距调整的选项。如果时间充裕，是可以进行精细的排版调整的。同时 Tableau 的排版布局功能更接近于网页的内容布局，和设计软件中默认支持的网格系统不同，需要更多的经验技巧才能做好这件事。

商业仪表盘设计中的网格布局

相比于书籍的文字+图片布局，商业仪表盘的内容除了必需的文字+图表外，还会有：自定义参数、导航、图片，筛选器，图例等辅助与功能元素，更接近于应用程序的界面布局。在内容的填充上，商业仪表盘更关注空间利用率，而不会为了艺术效果有大块的留白。

总结起来，仪表盘的基本布局要求有：

元素对齐（Alignment）

整体构成矩形（Rectangularity）

优先放置特定元素（Preferential Placement）

（参考：https://userinterfaces.aalto.fi/grids/）

在建筑设计领域有一句名言「形式服从功能 Form follows function」，作为仪表盘设计也是如此，我们会先从问题的定义与分解开始：

明确需求

线框图原型

设计准备：草图，栏，间距，边距，尺寸对齐等

正式的设计

在线框图原型部分，会先确认仪表盘的布局类型：

九宫格式

卡片式

展开式

九宫格布局

一般用于 KPI 数据的展示，如管理驾驶舱，各个指标的呈现，在水平和垂直均匀分布即可。

卡片式布局

仪表盘内的内容以卡片的形式水平展开，每个卡片内的结构相似。

展开式布局

从整体的大数、到类别的分布，到明细的数据。

相比于前面两种类型，展开式布局会更复杂一些，因为内容元素多，不同位置区域的呈现也有所不同。以蓝色的指标呈现区域为例，如果有更多的指标加入，我们可以进一步均分为 6 个内容块。

甚至可以采用嵌套结构的网格布局，将仪表盘划分为：导航，筛选，指标，图表内容等多个区域，以更灵活的方式来决定与调整仪表盘的内容结构。

一些思考总结

数据分析师的工作是忙碌的，相比于仪表盘的布局呈现，会更关注于：数据的获取与质量，指标的定义，项目的推进等。作为「表哥」「表妹」已经很累了，为什么还要额外的学习这些知识？ 主要的原因有：具备网格布局知识可以帮助我们设计出更精美的仪表盘；发现和总结有效的结构与形式；扩展思路，学会「像设计师一样思考」，从更高的层次思考布局排版，提高设计的可读性和层次结构，提升响应能力。

原文标题：像设计师一样思考，网格系统与仪表盘设计实践干货分享

文章出处：【微信公众号：Tableau社区】欢迎添加关注！文章转载请注明出处。

责任编辑：haq