数据可视化-栅格篇

栏目: 数据库 · 发布时间: 4年前

内容简介:此次的可视化项目是建立在鲸准-资管系统的数据基础上,主要是对原始数据进行分类并用图表的方式进行可视化展示和分析。不同客户的电脑终端存在差异化,显示器适配问题就需要着重考虑。栅格系统刚好解决了显示器适配和页面排版布局问题。据统计,用户的主流分辨率主要为 1920、1440 和 1366,个别用户还存在 1280 的显示设备。1440处于中间的位置,为了适配方便,我们以1400的尺寸为基础。

项目背景

此次的可视化项目是建立在鲸准-资管系统的数据基础上,主要是对原始数据进行分类并用图表的方式进行可视化展示和分析。

设计目标

不同客户的电脑终端存在差异化,显示器适配问题就需要着重考虑。栅格系统刚好解决了显示器适配和页面排版布局问题。

布局说明

确定画板尺寸

据统计,用户的主流分辨率主要为 1920、1440 和 1366,个别用户还存在 1280 的显示设备。1440处于中间的位置,为了适配方便,我们以1400的尺寸为基础。

布局选择

网页的布局多种多样,系统布局常见的一种做法是将左边的导航栏固定,对右边的工作区域进行动态缩放。

数据可视化-栅格篇

关于栅格

栅格系统是指,将页面布局划分为等宽的列,然后通过列数的定义来模块化页面布局。这是设计的一个基本原则,在CSS的Bootstrap中采用栅格系统能够更好的进行页面布局。栅格主要由列和水槽组成。

栅格系统最小单位

在UI设计栅格系统中的最小单位就是设计界面的单位基础,界面内的设计元素和排版都是依照这个基础单位建立和布局的。确定网格的基数为10,不仅符合偶数的思路同时能够匹配多数主流的显示设备。

数据可视化-栅格篇

列是栅格系统纵向排布依据,常用的PC端是12列,24列。列数越多纵向排版内容就可以越细致,但是版面内容就会变的更稠密,内容更碎。12等分的栅格系统在流行的前端开发开源 工具 库Bootstrap与Foundation中广泛使用,适用于业务信息分组较少,单个盒子内信息体积较大的中后台页面设计。此次选择12列的布局方式。

数据可视化-栅格篇

水槽

水槽就是列和列的分割间距,水槽越大页面布局间距就越大,水槽越小页面就越紧凑。水槽的宽度按照10的倍数去设定,根据实际情况我,我把水槽的宽度定为20PX。需要强调的是,水槽里不能放置内容。

数据可视化-栅格篇

注意点

内容要在列宽内,不能在放在水槽中,不然影响栅格化的效果。

数据可视化-栅格篇

屏幕安全边距

边距就是栅格之外的屏幕边缘内容,就是指两边的留白区域;这里是不能放置内容的。

数据可视化-栅格篇

栅格演示图

我们为页面中栅格的 Gutter 设定了定值,即浏览器在一定范围扩大或缩小,栅格的 Column 宽度会随之扩大或缩小,但 Gutter 的宽度值固定不变。

数据可视化-栅格篇

栅格化计算

Sketch自带栅格系统设定路径:View-Layout Settings.

(汉化版:工具栏里面显示-布局设置)

数据可视化-栅格篇

栅格化的应用

确定模块比例

以12栅格系统为例,可以被2,3,4,6等分;不等分的情况下可以按照比例划分为1:2、1:3、1:2:1、1:4:1等情况。实际选择哪种,还需要根据实际情况来决定。

数据可视化-栅格篇

基本模块布局

根据产品提供的原型对页面进行栅格设置,建立好栅格系统后,就可以将之前设定好的内容填进去了。此次项目的数据可视化遵循灵活配置的需求,在仪表盘中建立各种样式的数据模块。每种数据模块的长宽都是相同,不会存在大小不一样的情况。

数据可视化-栅格篇

模块拆分

模块按照卡片的形式展示,划分为图表标题区,图表容器区,间隔区。其中图表标题区中又包含icon区;图表容器区细划分为图例区、筛选条件区、图表区以及拖动条区。用户根据实际数据搭配这几块区域是否需要在模块中展示。

数据可视化-栅格篇

真实数据填充

填充真实数据,验证栅格化的实际效果。

数据可视化-栅格篇

栅格在不同布局中的运用

固定网格

在浏览器范围扩大或缩小时,屏幕安全边距扩大或缩小。列宽和水槽宽度保持不变。

在一些传统门户网站中使用的频率比较多,这些网站的web端和移动是分开做的(有的没有移动端)

数据可视化-栅格篇

流动网格

在浏览器范围扩大或缩小时,列宽会随之扩大或缩小。水槽,屏幕安全边距宽度保持不变。

例如,将在桌面计算机、平板电脑和移动电话上查看您的网站。可使用流动网格布局为其中每种设备指定布局。根据在桌面计算机、平板电脑还是手机上显示网站,将使用相应的布局显示网站。

数据可视化-栅格篇

混合网格

1、 左侧导航固定在实际设计当中,还会出现固定网格和混合网格同时存在的情况。鲸准-BI 就是用的这种混合网格。左侧为固定的导航栏,右侧为灵活的栅格部分。即在浏览器范围扩大或缩小时,左侧宽度不会变化,右侧宽度跟随变化。

数据可视化-栅格篇

2、抽屉导航:左侧导航出现的时候,右侧的栅格不会受其影响。

数据可视化-栅格篇

3、悬浮导航:悬浮导航出现时,其他区域不会受其影响。

数据可视化-栅格篇

还有响应式布局、自适应布局、弹性布局,在这就不一一介绍了。给大家一个链接,这里面有5种布局方式的详细介绍。

https://www.cnblogs.com/mm152534/p/9429939.html

参考网站: https://material.io

总结

这次的栅格总结,主要是针对工作中遇到的情况,我查看了许多资料,从中选了适合自己的一些方法。所以,我总结的不可能面面俱到,可能对某些人有用,也许作用不大。第一次写总结,希望大家喜欢。


以上所述就是小编给大家介绍的《数据可视化-栅格篇》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

UX设计之道

UX设计之道

[美] 昴格尔、[美] 钱德勒 / 孙亮 / 人民邮电出版社 / 2010-4 / 35.00元

《UX设计之道:以用户体验为中心的Web设计》可以看作是用户体验设计的核心参考书。无论是Web设计领域的创业者、项目管理者还是用户体验的策划者和实施者,或是有志于Web设计领域的学生,都应该了解《UX设计之道:以用户体验为中心的Web设计》中的知识。 用户是网站的根本,网站要达到自己的商业目标,必须满足目标用户的需求——这就是以用户体验为中心的网站设计。那么,用户需求从何而来?如何将用户需......一起来看看 《UX设计之道》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具