大数据可视化大屏设计经验及案例分享
今天要跟大家分享我一年多设计大数据可视化大屏的经验和观点,下面从UI设计、交互设计、动效设计三个方面来分享。
UI设计
设计大屏一样要谨记要以展示数据为核心,在任何炫酷屌炸天表现都要建立在不影响数据的有效展示上!
拼接大屏:大屏几乎都是拼接屏,UI设计时不用考虑屏幕缝隙影响内容的呈现,内容不会丢失,但有可能影响视觉的表现,例如一个很大的人物图像被缝隙正中“劈成”两半,或者“劈中”了眼睛,看起来很不舒服,所以设计时可以建立缝隙位置的参考线避免类似情况发生。
视觉设计:首先了解需求,整合数据,分析出主要数据次要数据、总量数据细分数据、各数据的维度等等,通过了解这些可以先设计出一个布局模版,也可以在纸上画出来,布局可以在设计过程中随时调整。
交互设计
我把大数据可视化大屏分为两种,一种“纯展示型”另一种“展示+功能型”,具体怎么区分!
纯展示型几乎没有交互,后台录入数据,在大屏上展示就行了。
展示+功能型,例如实时监控数据、采集数据、数据对比功能、云计算数据、分析与预警等等。
这里就着重说一下带有功能型的大屏产品的结构层(信息架构)。一切功能结构都要围绕核心数据主页面来架构,因为大屏展示的核心就是将一些业务的关键指标数据以数据可视化的方式展示出来。
为了让用户感知到一直停留在主页面上,交互上跳转页面能用“关闭”按钮就不用“返回”按钮!
动效设计
什么是过度的动效设计?这个度又该怎么把握?
看下图动效设计过度的一个案例,当你试着去看图表的内容,你的眼球一次一次的被闪动的边框抓走,这就是过度的动效设计!
把握动效设计这个度其实并不难,只要看的舒服不影响数据清晰展示就可以,有数据展示的页面最好动的地方不易过多,如果要多,几个动画就得有节奏的变化,例如一个动画表现的视觉强,另一个就表现稍弱化,有强有弱、有主有次节奏才会舒服,同时动效能结合数据的变化而变化最好,这样就不容易看数据内容被动画抓走眼球。
更多案例演示:http://yuanbaoshuju.com
大数据可视化大屏设计经验及案例分享相关推荐
- 大数据可视化大屏设计经验,教给你!
前言 大数据产业正在用一个超乎我们想象的速度蓬勃发展,大数据时代的来临,越来越多的公司开始意识到数据资源的管理和运用,大数据可视化大屏展示被更多的企业青睐,身为UI设计师的我们,也要紧跟时代的 ...
- 大数据可视化大屏图表设计经验,教给你
前言 自从跟大家分享第一篇<大数据可视化大屏设计经验,教给你!>,很多小伙伴都会问我一些相关的问题,看了小伙伴给我发的视觉稿,整体都还不错,但是发现图表的设计都有一些问题,大家可能对 ...
- 大数据可视化大屏设计经验分享
前言 大数据产业正在用一个超乎我们想象的速度蓬勃发展,大数据时代的来临,越来越多的公司开始意识到数据资源的管理和运用,大数据可视化大屏展示被更多的企业青睐,身为UI设计师的我们,也要紧跟时代的步伐学习 ...
- 2018 infoComm 大数据可视化的交互设计探索(整理) 韩小龙 CEO of Ventuz China
大数据可视化 大数据+设计+交互=大数据可视化 一个边缘学科,跟那个学科都沾边,但都不在各学科里面 什么叫大数据? 大数据指无法在一定的时间范围内用常规软件工具进行捕捉.管理和处理的数据集合,是需要新 ...
- 【博主推荐】大数据可视化大屏(源码下载)
可视化大屏交流学习 提示:本文推荐好的大数据可视化源码,用于学习,用于项目,欢迎大家积极交流.持续更新贴-- 资源目录 可视化大屏交流学习 一. 某公司大数据展示模版2 二.大数据可视化通用素材 三. ...
- Qt制作大数据可视化大屏展示电子看板
Qt制作大数据可视化大屏展示电子看板 解决当前最火的大数据可视化大屏展示,整个项目通过Qt开发,集成了QML/QChart/ECharts及自定义控件等模块,所有的可视化控件都可以集成到其中.可以随意 ...
- 74套大数据可视化大屏模板源码下载
锦鲤已测|74套大数据可视化大屏模板源码下载,直接下载,使用浏览器访问静态页面即可. 最近在做一个市政的项目,用到了大数据可视化界面(装逼,无其他用途) 顺手分享一下给大家吧,有需要可以下载试试.
- (下)Vue+Echarts构建大数据可视化酷屏展示公司品牌实战项目分享(附源码)
回顾 作者用心写作,请动动你可爱的小手点亮大拇指.你的鼓励是作者继续创作的动力- 前端的学习,不能仅仅依靠知识点的学习,实战项目的操作可以帮助我们整理知识点以及提高编程能力,更有助于学习和实践,最重要 ...
- web页面大数据可视化大屏展示案例分享
以下案例,亲测有效 温馨提示:直接运行工程文件夹中的index文件,即可看到大屏. 案例1: 案例二: 案例三: 案例四: 案例五: 案例六: 案例七: 案例八: 案例九: 案例十: 案例十一: 案例 ...
最新文章
- jQuery 文件上传插件:uploadify、swfupload
- BZOJ-2242-计算器-SDOI2011-BSGS
- 数字信号处理学习笔记(二)|快速傅里叶变换
- RabbitMQ消息追踪之Firehose
- javascript中0级DOM和2级DOM事件模型浅析
- java笔试面试经典问题
- pwn和逆向的区别_Pwn之简单patch
- linux关机_3.5 开关机命令及7个运行级别《LINUX-centos7-操作系统入门到精通》
- java与sql心得体会_学习心得
- [Unity 3D] Unity 3D 性能优化(二)
- 深入浅出的讲解傅里叶变换(原文作者 韩昊)
- 牛尔新视点:關於醫學美容相關问答
- 软件测试常见分辨率测试,兼容测试:常见的显示器分辨率
- 关于正月十六工作室更换新LOGO的通知
- 微机原理(FPGA设计CPU理解)
- 关于图文识别功能相关技术的实现
- 让代码看起来更舒服,选择适合的字体。 (转)--我推荐的是:Bitstream Vera Sans Mono
- 权威数据来了,中国到底有多少个程序员?
- FME支持的Autodesk Revit 格式概要
- 云诊所管理系统 云诊所管理软件 诊所管理软件 诊所管理系统