新闻中心

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

发布时间:2021-03-09 10:32:19 点击量:

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

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

更系统化的理清设计思路

以客观取代主观

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

让信息的呈现整洁有序

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

 

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

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

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

方格本布局

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

f8aff7d8-7eca-11eb-8b86-12bb97331649.png

网格系统基础知识

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

 

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

f97b7ed0-7eca-11eb-8b86-12bb97331649.png

「栏 Columns 与 行 Rows」

 

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

 

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

通用的网格系统例子

图书

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

fa12c0b0-7eca-11eb-8b86-12bb97331649.jpg

 

 

企业 VI(Visual Identity)

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

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

 

 

幻灯片模板

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

 

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

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

 

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

fc50c3fe-7eca-11eb-8b86-12bb97331649.png

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

fc7c5622-7eca-11eb-8b86-12bb97331649.png

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

fca625ce-7eca-11eb-8b86-12bb97331649.png

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

 

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

fd3e7694-7eca-11eb-8b86-12bb97331649.png

BI 软件中的网格布局功能

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

fd7ea0d4-7eca-11eb-8b86-12bb97331649.png

并支持内外边距的设置。

fdbc94a2-7eca-11eb-8b86-12bb97331649.png

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

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

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

总结起来,仪表盘的基本布局要求有:

元素对齐(Alignment)

整体构成矩形(Rectangularity)

优先放置特定元素(Preferential Placement)

fde897a0-7eca-11eb-8b86-12bb97331649.png

(参考:https://userinterfaces.aalto.fi/grids/)

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

明确需求

线框图原型

设计准备:草图,栏,间距,边距,尺寸对齐等

正式的设计

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

九宫格式

卡片式

展开式

九宫格布局

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

 

 

卡片式布局

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

 

 

展开式布局

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

 

 

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

 

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

 

一些思考总结

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

上一篇:2021年1月仪器仪表制造业工业生产者出厂价格指数统计分析

下一篇:返回列表

版权所有 Copyright ©www.aabbgg77.net 2002-2014 技术支持:www.aabbgg77.net