江苏省江西机械商会 - 机械行业协会服务平台

江苏省江西机械商会 - 机械行业协会服务平台

江苏省江西机械商会是经民政部门批准注册的跨地域社会组织,本商会自创办五年来,已被授予“AAAA”级社会组织称号,现已拥有会员企业200余家,包括:汽车行业、工程机械、机床工具、专用汽车、农业机械、矿山机电、生产服务、模具制造、科研院所、大专院校等。本商会以增进友谊、交流信息、协调关系、发展经济为宗旨,以团结会员单位、促进机械行业健康发展为工作目标,致力于内引外联,已与深圳市机械行业协会、淄博市机械行业商会等协会(商会)建立友好关系。行业商会的使命是:延长产业链,筑就大平台,汇聚行业力量,团结发展共赢;坚持科技创新和管理创新,引领地方装备制造业走向强盛!

菜单导航

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

作者: 江西省机械行业商会 更新时间: 2021年03月11日 07:00:33 游览量: 200

简述:

  网格系统(Grid Systems)来自于设计师在平面设计过程中对于秩序的追求与实践,产生于 20 世纪初期,经过不断的检

网格系统(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 软件中的网格布局功能