精华内容
下载资源
问答
  • 2019-07-30 14:10:44

    案例一:智慧决策供应链总控平台
    在这里插入图片描述
    1.项目介绍

      项目通过制作全过程可视化界看板,跟踪物资数据。智慧决策中心管理人员可根据指标监控数据,深入分析业务管理情况,为智慧决策提供全面依据。协助企业构建简洁实用的大数据工作生态,让企业实现用数据说话、用数据决策管理、用数据开源节流。
    

    2.核心功能

    ☑ 构建物资采购全过程可视化大屏。

    ☑ 跟踪各节点的物资流转情况,对异常情况触发相关预警推送。

    ☑ 控制台可根据监控数据,深入分析各节点异常情况,及时调整物资采购供应策略和供应计划。

    案例二:基建智能监控管理平台
    在这里插入图片描述
    在这里插入图片描述
    1.项目介绍

      本项目通过搭建实时监管系统(图像、人、车、进度、风险、质量等方面),及时预警各类隐患,同时利用移动管理软件在线查看现场视频、查询安全、质量落实情况和项目进度情况,提升现场精细化管理程度。
    

    2.核心功能

    ☑ 视频监控:变电站和线路工程现场监控画面大屏实时显示、远程操控。

    ☑ 人车管控:项目关键人员、施工人员、安保人员的考勤或定位;各类车辆进出统计和定位管理。

    ☑ 风险管控:根据制定的风险等级计划,实现预警提醒。与其他信息联动分析风险等级变更等。

    ☑ 进度管控:大屏展示全年项目进度计划安排,根据进展情况预警提醒,并与其他信息联动报警。

    ☑ 时间管理:根据安全、质量、进度、造价、技术、信息等工作要求,实现数据共享统计分析及预警。

    案例三:核电大数据
    在这里插入图片描述
    1.项目介绍

      本项目以“博微易数大数据分析平台”为支撑,构建核电数据仓库,并借助易数可视化分析及展现技术,实现支撑别国投资评估和市场竞争环境分析的“大数据展现系统”和“大数据分析系统”。
    

    2.核心功能

    ☑ 数据融合与分析:通过多渠道采集全球49个国家核电数据,建设”核电数据仓库“,对外提供核电数据服务接口;多维度集中分析各个国家的主要经济运行情况、重点核电项目规划情况等内容,消除核电数据孤岛。

    ☑ 可视化大屏展示:基于”易数Max“建设大数据展现系统。对收集统计指标进行展示,并将数据生成图表分析结果,直观展现能源资源情况、电力生产及消费等关键监测对象的变化趋势。

    ☑ 分析报告生成与导出:基于“易数report”,构建大数据分析系统。定制专业的核电报告模板:海外投资评估模板、竞争环境分析模板,将目标数据上传后,即可一键生成分析报告。

    更多相关内容
  • 展示中国新冠疫情数据,建立时间序列模型分析预测未来30天新增,通过flask,echarts进行大屏展示
  • 基于python实现实时获取国内疫情数据,大屏数据可视化报表展示项目源码。 文件内容如下: 1.sql脚本导入 2.spider.py爬取数据存入/更新数据库信息 3.app.py主启动程序 内附代码注释,日常学习,期末作业,高校毕业...
  • Echarts -百度开源可视化库2. Mapv - 百度地理信息可视化开源库3. 蚂蚁AntV4. Amcharts - 矢量地图定制下载5. D3.js - 数据驱动的文档6. billboard.js - 简易界面的可交互图表库7. FusionCharts二. 设计辅助工具1. ...


    了解一些技术开源库,一方面可以参照其图表案例,了解各类不同图表的展示方式;另一方面是为了保证自己设计的可实现度,不然再炫酷的设计效果最终如果因为技术开发能力无法实现也是徒劳的。

    一.技术开源库

    1. Echarts -百度开源可视化库

    https://echarts.baidu.com/

    这是一个使用JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器。4.0版本还提供了对微信小程序的适配。DataV中的一些组件也是依赖Echarts生成的。

    Echarts提供的图表很多样化,几乎包含常用的、不常用的各类图表样式。且提供有可交互组件,可以对数据进行多维度数据筛取、视图缩放、展示细节等交互操作。
    在这里插入图片描述

    2. Mapv - 百度地理信息可视化开源库

    https://mapv.baidu.com/

    用以展示大量地理信息点、线、面的数据。创建需先上传地理信息数据,再设置地图样式后,即可下载保存。目前仅开放Beta版本。
    在这里插入图片描述

    3. 蚂蚁AntV

    https://antv.alipay.com/zh-cn/index.html

    蚂蚁金服的Ant Design作为设计师应该都是较为熟悉的。AntV是蚂蚁Ant系列下的一个数据可视化解决方案。分为G2、G6、F2、L7不同产品,分别对应不同的特性需求。

    在这里插入图片描述

    4. Amcharts - 矢量地图定制下载

    http://pixelmap.amcharts.com/#

    这个网站可以用来绘制地图。有些特殊情况下,开发可能需要自己绘制地图。如果开发自己使用canvas绘制,难度较大。这个网址提供了地图svg、HTML以及image的下载。
    在这里插入图片描述

    5. D3.js - 数据驱动的文档

    https://d3js.org/

    D3js 是一个基于数据来操作文档的JavaScript 库,适宜用来建造各类可视化图表。支持大型数据集和交互与动画的动态行为。
    在这里插入图片描述

    6. billboard.js - 简易界面的可交互图表库

    https://naver.github.io/billboard.js/

    这是一个基于D3 V4+的JavaScript的图表库。可以对数据进行视图缩放、展示细节等交互操作。
    在这里插入图片描述

    7. FusionCharts

    https://www.fusioncharts.com/

    FusionCharts提供了100多个交互式图表和2,000多个数据驱动的地图,对不同平台都可兼容。同时提供了前端和后端各类框架及代码语言的插件来方便开发快速入门。不过这款是收费的,根据不同的使用环境定价不同。
    在这里插入图片描述

    二. 设计辅助工具

    1. Kitchen - 蚂蚁金服官方插件

    http://kitchen.alipay.com/

    这是一个sketch的插件工具。主要功能如下图。
    在这里插入图片描述

    Iconfont 图标库我比较常用,可以直接在sketch中搜索拖拽,不用再去打开网页查找了。其次数据填充也比较常用,自动填充时间地址城市等挺方便的。sketch也有自带的功能,但毕竟自带的填充都是英文,想要中文的需要自己编写填充文档,相对还是比较麻烦。其他是像智能排版、色板等功能,我用的不多,还是以sketch自带功能为主。

    另外,与可视化设计相关的就是里面的图表生成器了。不过Kitchen当前只有一些常规的图表,不过胜在简洁明了,很适合在此基础上进行二次设计。该插件还是蚂蚁Ant系列的官方插件,可以自动配置符合Ant Design 规范的组件,配合公司采用的Ant系列的框架,会方便不少。
    在这里插入图片描述

    2. FusionCool - 阿里Fusion Design开源中后台UI解决方案辅助工具

    https://fusion.design/tool

    这也是一个sketch的插件工具。分为图标、图表、组件、模块和模板五大功能区。

    Fusion Design作为一个开源中后台解决方案,和Ant Design有一定类似,但也有所差别。Ant Design 是一套组件库, Fusion Design 更像是一个组件库生成工厂。

    直接下载安装FusionCool的话,打开sketch看到的将是一个默认组件库,图表部分的种类样式比Kitchen多了不少。而更厉害的是,你可以在Fusion Design上基于官方库编辑改造成属于你自己的设计系统,发布主题后获得新的主题包,此时你在FusionCool中就可以看到专属于你的主题包了,在sketch中完成设计后,开发使用Iceworks安装你的主题库就可以直接编码实现你的设计。
    在这里插入图片描述

    3. Map Generator - 快速地图生成填充

    https://github.com/eddiesigner/sketch-map-generator

    这是一款基于谷歌地图的自动填充的Sketch插件,输入地址后就可以自动生成不同风格样式的地图,个人比较喜欢第三款灰色的。
    在这里插入图片描述

    4. Amcharts - 矢量地图定制下载

    http://pixelmap.amcharts.com/#

    这个网站上面提过,但其实设计师用来获取矢量地图也很好用,选择地图样式和地区之后,右下方即可以下载SVG、HTML、Image格式的图,十分方便。点击“Generate Ppxel Map”还可以转化为像素圆点形式的地图。

    如果需要省份的地图,网站上无法直接下载,但可以要先下载中国svg地图,然后再打开svg选择自己需要的省份模块就可以了。

    另外,在使用地图的时候,要注意正确用图,规范用图。要有国家版图意识,符合测绘法。

    标准地图可以参考国家自然资源局提供的标准地图服务,服务网址:http://bzdt.ch.mnr.gov.cn/index.html

    5. Chart - 图表插件

    https://github.com/pavelkuligin/chart

    这个插件是收费的,每年10美元,但是你可以去找那啥啥的(我知道你懂)。优势在于可以在Sketch中创建包含随机、表格或者JSON数据的图表。图表样式也是非常的丰富了。
    在这里插入图片描述

    展开全文
  • 数据可视化大屏课程设计大作业echarts特种设备综合监管数据可视化大屏源码数据可视化大屏课程设计大作业echarts特种设备综合监管数据可视化大屏源码数据可视化大屏课程设计大作业echarts特种设备综合监管数据可视化...
  • 说起数据可视化设计,如今绝对是热门的设计之一,而真正懂数据可视化设计设计师却不多,随着大数据产业的蓬勃发展,很多企业都开始应用数据可视化。很多UI设计师突然会接到公司数据可视化设计的需求,如果不了解...

    ❤️ 现在关注【前端修罗场】,后台回复【666】,即可获取【免费的优质学习资料】~

    说起数据可视化设计,如今绝对是热门的设计之一,而真正懂数据可视化设计的设计师却不多,随着大数据产业的蓬勃发展,很多企业都开始应用数据可视化。很多UI设计师突然会接到公司数据可视化设计的需求,如果不了解数据可视化的设计,那么肯定是一头雾水,不知从何入手。

    什么是数据可视化?

    数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息。简而言之就是把枯燥无味的数据,通过图形化设计表现,达到一种更加精准和高效的数据分析和表达。

    下面要跟大家分享的是,我经手的一个真实数据可视化大屏项目改版,接下来会分享给大家一套全面的数据可视化技法,包括科学的运用图表、运用色彩、把控数据层级以及视觉层级,达到美学形式与功能需要齐头并进。

    案例解析

    首先看下线上旧版的设计,分析存在的问题。(长屏需要横屏观看)

    在这里插入图片描述

    问题
    
    • 1、左侧大面积文字导致视觉不平衡,且密集

    • 2、整体用色暗淡,图表用色没有规则

    • 3、图表运用不恰当,不能有效传达数据信息

    • 4、缺标题,数据信息优先级排列不恰当

    结合这些问题作出了改版,(长屏需要横屏观看)
    在这里插入图片描述

    因为是改版所以能够看到线上真实的数据信息,这样旧版的数据呈现就能给到重要的设计参考价值,例如能够知道TOP10热门关键字大概是几个字,在设计图表时就会依据字数的长短来参考设计,也可以知道是否有极端数据,从而运用更适合的图表呈现等等。

    下面依次对照新改的版本,解决旧版出现的问题。

    问题一:
    

    1、左侧大面积文字导致视觉不平衡,且密集
    在这里插入图片描述
    在这里插入图片描述

    注解:

    由于左半部分有大篇幅的文字,视觉上会显得密集,容易视觉疲劳右半部分大面积的色块图表使得整个界面视觉上不平衡

    解决方案就是在把文字用排行榜图形分开,放到文字中间部分,这样就丰富了只有文字的单调设计,整体视觉较为平衡和谐,并且这样还能够突出强调重要数据信息。

    问题二:
    

    2、整体用色暗淡,图表用色没有规则
    在这里插入图片描述

    注解:

    提取旧版的颜色,色彩很暗淡,对于深色背景来说,这样的配色方式并不会有好的视觉表现。

    暗色背景通常用高饱和高明度的颜色,对比暗色背景更能聚焦视觉,突出数据可视化的表现亮丽的色彩能够让数据可视化设计的更加绚丽

    数据可视化大屏设计慎用大面积的渐变色,小面积可尝试一般大屏都是拼接屏,品牌不一样色差会表现不一,所以初稿出来后可以先去大屏上看下效果

    在这里插入图片描述

    注解:

    图表用色没有规则,上图三个图表都表现 “正面” “中立” “负面” 三个维度数据信息,但在**用色上没有一个统一的规则**,例如三个图表中黄色分别代表不同的维度信息,这样就无法建立观者的认知。

    在这里插入图片描述

    “负面”有警示的作用,运用红色调较为合理“中立”色彩情绪上适合黄色调,黄色会给人中性的感受,例如马路上的等待的黄灯,例如一片树叶从绿色到黄色再到枯萎灰色,给人一种过程中的中立情绪感受等,“正面”就是给人积极的一面,所以绿色或者主题色蓝色都是很恰当的。

    问题三:
    

    3、图表运用不恰当,不能有效传达数据信息

    在这里插入图片描述

    注解:

    同一个界面中左侧文字TOP10属性类似的“核心媒体TOP10”展示形式最好能有共性。旧版运用了柱状图并不恰当,尤其是标题字数过多时候并不推荐使用柱状图文字倾斜的展示方式,改版后加上相同的排行榜图标,数据直接展示出来,TOP10的效果会更好。
    在这里插入图片描述

    注解:

    数据需要对比分析,显然这个玫瑰图表并不能很好的说明对比,每个维度大小排列没有规律,实际数据分布不均匀,导致没有对比的效果,改版后突出总的数据,用条形图从大到小依次排列各维度数据,数据上有对比,视觉上更有主次

    在这里插入图片描述

    注解:

    首先是旧版用色不恰当,最严重的问题是图表上没有任何数据,因为展示型的大屏,很少有交互行为,这样的设计是不可取的不能让观者去猜百分比数据数据可视化就要用图表数据的形式展示出来最直接的信息,除非是展示趋势并不是准确的数据

    在这里插入图片描述

    注解:

    旧版用的条形堆积图,其实更适合百分比数据的对比呈现一个维度下面有若干个子项,比较适合分组柱状图(新改版为分组柱状图)或者分组条形图更为恰当。
    在这里插入图片描述

    注解:

    旧版色彩搭配不和谐,趋势图需要突出趋势线,而不是体现数据的面积红框注释不够直接尤其在颜色过多时,更不好分辨各个颜色指向的维度,新版的设计则能够准确指出各个维度的趋势线。

    问题四:
    

    4、缺标题,数据信息优先级排列不恰当
    在这里插入图片描述

    注解:

    新闻的标题跟转发数才是观者关注的,而来源和时间就是次要关注信息,所以视觉上要为观者分出层级,这样不仅能够使观者看着更舒适,视觉上也很有层次,不杂乱。

    旧版标题、来源、时间、转发数、都是相对于内容居中的状态,这种排版是不符合表格排版规则的,简单的做法就是文字左对齐,数字右对齐,数字右对齐能够更快速识别数据量大小,跟其他数据的对比,文字左对齐则是根据人从左到右的阅读习惯。

    在这里插入图片描述

    注解:

    设计数据可视化大屏时一定要考虑用户浏览数据的优先级的构架,例如要遵循先总后分,先具体后抽象的逻辑,上图旧版把趋势放到了页面的第一视觉位置,就有点宣兵夺主了,根据先具体后抽象,改版后具体数据放到第一视觉位置,趋势信息排后

    旧版大屏没有标题,我是谁?我在干什么?我要去哪里?所以标题务必得有

    总结:

    说了这么多设计要点,新手可能还是不知道设计的切入点在哪里,所以总结一个数据可视化设计分三步走法。

    1. 第一步:了解数据要表达的本质。

    拿到一组数据,先分析主次,这组数据要表达什么?展示数据,还是对比数据,或是实时监控数据,从而确定展示的优先级

    1. 第二步:确定使用图表。

    通过了解数据要表达的本质后,选择适合他的图表,这时候就需要打开几个开源的图表网站找图表,记住你的图表用的是网站的哪一个,开发如果找不到就丢给他网址。

    网站有:Fusion Design、蚂蚁数据可视化-AntV、ECharts Examples、Highcharts…等。

    1. 第三步:整体效果调整

    功能性的数据展示都没问题,还要看下整体效果,例如用了过于多的柱状图,可能就会影响了整体的美感,图表尽可能多样性数据表达信息就要用不同的图表展示

    最后

    数据可视化设计核心就是,通过美学设计形式把数据精准和高效的分析和表达。

    ❤️ 现在关注【前端修罗场】,后台回复【666】,即可获取【免费的优质学习资料】~

    展开全文
  • 数据可视化大屏设计尺寸怎么定?

    千次阅读 2020-12-24 18:57:15
    大屏可视化的设计尺寸定义,一直是很多设计师苦恼的一件事,很多时候大屏...大屏的类别及成像我们设计可视化大屏通常可以分为两类:一类是拼接屏,由46-55寸的液晶显示屏拼接而成,有一定的缝隙;一类是LED屏无缝隙...

    大屏可视化的设计尺寸定义,一直是很多设计师苦恼的一件事,很多时候大屏出现的问题,都是因为对设计尺寸没有一个正确的认识导致。

    比如大屏内容呈现不全、拉伸、压缩、字号小的看不见等等,出现这样的问题就会浪费时间调整返工,今天我就带大家来认认真真的讨论一下大屏的设计尺寸。

    大屏的类别及成像

    我们设计的可视化大屏通常可以分为两类:一类是拼接屏,由46-55寸的液晶显示屏拼接而成,有一定的缝隙;

    一类是LED屏无缝隙,是由成千上万个LED灯构成像素点,发光像素点之间的距离是LED显示屏的规格,用P值表示,P值越小成像越优秀细腻,对大屏类别的了解,有助于计算设计尺寸及比例。

    大屏成像原理几乎都是投屏,也就是把电脑屏幕通过有线信号投放到大屏上,电脑上呈现什么内容,大屏上就会呈现什么内容。

    在电脑上的交互操作大屏会同步进行,这就是投屏,看下图所示,电脑上风景图投放到大屏上显示。

    虽然投屏的原理没问题,但这样的展示换成可视化页面就会有问题,不知道你会不会发现,后面我们揭晓。

    总结:

    本章节只需要记住一句话“电脑上呈现什么内容,大屏上就会呈现什么内容”,所以电脑上出现滚条是绝对不可以的。

    大屏和电脑同比例设计

    首先要强调一点,不可以以大屏的分辨率定义设计稿尺寸,当大屏的比例和电脑屏幕的比例一样时,要结合电脑屏幕的分辨率来定设计稿尺寸。

    比如电脑屏幕分辨率为1920*1080,那设计稿就可以是这个尺寸,当电脑屏幕是3840*2160(4K)屏时,可以用1920~3840*1080~2160同等比例任意数值。

    当电脑是4k分辨率时,虽然设计稿用1920*1080的设计尺寸也可以实现,但最终在大屏的呈现画面清晰度不够高。

    原因是开发人员用1920*1080适配了4k分辨率,这本身就是同比放大关系,再加上投放中的画质损失就会更明显,不过基本上也是可以接受的范围内。

    虽然画质影响不大,但优先级上更推荐电脑本身的分辨率3840*2160作为设计稿尺寸,这样1比1的呈现最能保证画面质量。

    前端开发上只需要按尺寸固定写即可,下图为4k设计稿,中间的图像能相对更清晰。

    4k设计稿(图片来源51WORLD)

    大分辨率的设计尺寸还有个优势就是可以呈现更多的内容,同时在设计上的字号也要相对更大,比如1920上面16px字号,3840最好也能做到两倍左右的放大。

    当然也完全可以用1920*1080设计尺寸设计,最后导出4k尺寸,也就是2倍图,包括切图也是导出2倍图。

    总结:

    当大屏电脑比例一致,电脑屏幕分辨率为1920*1080时,设计稿为电脑分辨率尺寸大小;

    分辨率为3840*2160时设计稿优先级是3840*2160、1920*1080、之间同比例数值,当小于电脑分辨率时开发方式要适应屏幕大小。

    大屏和电脑不同比例设计

    说完同比例的大屏电脑设计,接下来说不同比例的情况,一般的问题都出在了不同比例的设计上。

    当大屏和电脑屏幕是不同比例时,牢记一点,一定要保证大屏的展示是正常的,这是必须的。

    分享一个反例,看下图,投屏电脑是由两块16:9的屏幕组成的32:9比例的显示屏,大屏大概是20:9的比例。

    现在大屏的内容呈现是压瘪状,尤其饼图已经成椭圆形,问题不再开发,而是设计。

    反面案例

    原因是设计师的设计尺寸按32:9设计,在电脑上呈现1:1没有任何问题,投放到大屏上比例压到20:9,因为投放关系页面上所有的元素都会呈现压瘪状态。

    所以开篇图片投放案例,问题也出在不同比例的投放上,大屏上的图片被拉伸变形,视觉上不会太明显,但是可视化图表的呈现就会很难受,比如饼图被压瘪或拉伸。

    改正的方法就是按大屏的比例设计,保证大屏的正常呈现,电脑上差点无关紧要。

    本案例中两台显示器组成32:9的屏幕投放并非是最优的方案,接下来用一个案例来详细解析。

    案例解析

    一个4*7的拼接大屏,分比率13440*4320,比例为28:9,如何给配置最合适的电脑比例屏幕投屏?

    其实能找到28:9的最佳,但据我了解比较困难,我也咨询很多这方面的公司,没有定制显示器比例的服务。

    所以就要找最接近的这个比例的显示器,在某电商平台查了个遍,最常见的有以下比例显示器:

    1、16:9(1920*1080)

    2、16:9(3840*2160)3、16:10(1920*1200)4、21:9(3440*1440)

    其实根据我们上面的结论,UI设计中大屏可视化设计尺寸指南大分辨率的电脑显示器扩展性更强,所以首先考虑4k大分辨率显示器,但16:9与28:9相差过大,如下图所示:

    这样的一个压缩程度在操作会存在一些问题,例如有交互的大屏,很小的按钮就会被压的很瘪,导致点击的精准度下降,影响操作体验。

    下图所示,用两个屏幕组合成一个屏幕称为32:9的比例,这样是较为接近28:9,所以最为合适。

    虽然两个16:10的显示器比例为29:9最为接近,但分辨率过低,没有很强的扩展性。

    所以前一章节分享的反例,20:9的大屏用16:9的显示器更为合适,因为16:9更接近大屏的比例。

    虽然理论上了我们可以找到最优的方案,但现实工作中不一样,例如某个事业单位一直都是16:9电脑屏投放28:9的大屏,你非说人家这样不行,得加个显示器,没必要!

    我们身为设计师出于对产品的负责,可以提出建议,但不要去争论,因为影响不是很大,我们把大屏的完美呈现保证好才是最终目的。

    总结:

    1、要以大屏的比例去定义设计稿,保证大屏完美呈现

    2、4k分辨率电脑,优先使用大分辨率作为设计稿

    3、使用最接近大屏分辨率的电脑屏幕比例投放

    大屏设计稿分辨率的计算

    拼接的每块小屏一般是16:9的高清屏,设计尺寸可以把上下高度设定为1080px或更大的高度,我们以1080px为例,宽高按照拼接屏的数量比例算出设计尺寸。

    例如3乘5的一块大屏幕,高度3块屏设为1080,每块高就是360,360除9乘16等640,640就是一块屏幕的长度,640乘5块屏=3200最后得出设计稿尺寸就是:高1080px乘宽3200px

    重要知识点解析

    下面要讲的非常重要,就是大屏的字号使用问题,因为字号返工是一件非常恐怖的事(经验之谈),可能需要改样式,甚至重新设计都不为过。

    我们都知道大屏的开发本身就是基于web端,网页中最小字号为12px,但这个字号在大屏中会显的很小。

    因为大屏本身很大,观者需要站在较远地方才能看全貌,所以在字号上最好能相对大一点。

    当然也是针对重要信息的文字,一些图表刻度尺的数值,装饰性的文字,小一些没有关系。

    当大屏的比例较大时,字号也应该相应加大,看下图:

    当大屏比例更宽时,观者就需要站在更靠后的位置,近大远小,字号和有些小元素需要相应加大,当然这需要根据实际场景而定。

    我一直认为大屏设计,设计师需要去现场查看使用场景,考察观看位置,定义字号大小的运用;

    考察室内环境,当室内的光线较强或较弱,需要用不同的颜色明度饱和度去尝试;

    清楚了解大屏偏色情况,不同的品牌呈现的色调往往也是不一样的,这样最终才能营造一个相对舒适的大屏使用环境。

    总结:

    1、大屏设计字号要相对使用大字号

    2、当大屏比例更大时,要相应的调整字号

    3、设计师对大屏的本身和使用环境考察

    大屏的分屏设计

    分屏是大屏很常见的展示方式,分屏方式一般有两种,一种是通过平板电脑软件控制分屏,在可视化的呈现领域中很少用到。

    平板电脑软件控制大屏分屏

    另一种方式与我们设计相关,是通过多个信号源控制大屏分屏,一个信号源连接一台电脑,所以在设计时,一台电脑的显示器就是一个设计稿。

    这种情况通常出现在非常宽的大屏上,太宽的大屏就不太适用于多个电脑屏幕组成投屏,如下图由6个信号源组成的大屏。

    总结:

    每个信号源对应一张设计稿,n个信号源就是n张设计稿。

    大屏的设计是一个新兴的设计学科,它同于APP设计,都需要考虑使用场景,不同于网页设计,需要结合它独有的特征,定义设计流程及规范。

    最后,相信认真看完以上文章的你,对大屏的设计尺寸会有一个更深刻的认识,并且当遇到类似问题,也能够迎刃而解。因此,您现在已经了解了与UI设计师的工作相关的主要技能。如果您想了解更多信息,请给我点个关注,我之后还会发包含有关在该领域工作的更多相关文章。

    展开全文
  • 大数据深蓝色科技风可视化大屏设计 高端科技数据可视化企业后台数据图表 黑色炫酷大数据可视化科技大数据页面 后台系统大屏展示数据可视化UI界面 互联网大数据平台可视化大屏 科技感大数据可视化展示UI界面 科技感...
  • 该源码为Vue前端可视化大屏项目,需要nodejs和npm等环境支持,需提前下载好环境
  • 课程设计大作业可视化大屏项目-外卖业务数据可视化大屏源码,课程设计大作业可视化大屏项目-外卖业务数据可视化大屏源码,课程设计大作业可视化大屏项目-外卖业务数据可视化大屏源码,课程设计大作业可视化大屏项目-...
  • 第一套数据可视化大屏模板作品,也是我们目前发布的所有作品中制作成本最高的一套。虽然目前市面上数据可视化大屏的作品已经有不少了,其中也不乏一些有亮点和特色的作品,但是这个主题依然有很多挖掘和探索的空间。...
  • 大数据可视化模板、模板框架、动态控件、可视化大数据原型、监控平台、图表元件库、数据看板、驾驶舱、统计图表、大数据驾驶舱、大屏展示、智慧安防、党建、旅游、运输、医疗、校园、工业园区环境监测看板原型 ...
  • 基于HTML与python的数据大屏可视化设计与实现
  • 7套数据可视化源码和8套数据可视化大屏图片+自定义的部分border+css,非常酷炫
  • PSD,大屏可视化源文件,适合设计师快速实现设计稿,内容精细,快速提高工作效率,设计师面试优秀资源
  • 5款可视化大屏系统纯静态页面,html5,echarts
  • QT可视化大屏看板,已经编译成功,可以直接运行
  • 上次小亿和大家一起探讨过大屏可视化设计思路——《大屏可视化重头戏!你不看我不看,怎么会做好看》整篇文章从抽取关键指标、确定排版布局、定义配色风格、动画效果设计四个方面教大家如何设计一张酷炫的大屏。 ...
  • 数据可视化大屏有什么作用?在一些大型企业中,每天都会产生很多数据内容,有的时候为了直观体现数据的变化会采用大屏展示。下面为大家介绍数据可视化使用场景和四个常见的操作方法,一起来了解下吧。 数据的变化,...
  • AxureUX数据可视化大屏模板及通用组件库(设计组件) Axure9
  • 浅谈数据可视化大屏设计方法

    千次阅读 2021-10-09 13:17:48
    数据可视化通过大屏幕,动态的展示等方法将冰冷的数据重新鲜活的展现在大家面前,近些年来受展会,统计,汇报等等场景的青睐。 什么是数据可视化 首先我们分解一下数据可视化中包括的单元。可以分为数据、可视化两...
  • 基于Vue3.0的“数据可视化大屏设计与编辑器源码 使用方法: 1. 下载该项目到本地, 2. 安装依赖 // yarn run install npm run install 3. 运行预览 // yarn run build npm run build 本项目为个人项目, 主要使用 ...
  • 本文档适用于UI设计师、产品经理和前端开发人员, 介绍了可视化大屏设计的原则和相关设计规范,实践得出的内容,非常具有学习和操作价值。
  • 使用python,echarts,flask实现数据可视化大屏,本地数据。 含有课程设计论文29页,6000字。 可修改省份,数据。 根据搜索展示某城市某商品的数据可视化展示。搜索框,地图,相关地市滚动窗口,饼图,雷达图,条形图...
  • 基于Echarts的数据可视化大屏系统设计分享

    千次阅读 多人点赞 2021-08-25 13:47:15
    很近没有认真写文章了,都是遇到一些问题简单记录一下才被迫发表博客,这次准备把之前做的几套可视化分析大屏系统总结并分享出来,但暂时不开源(因为都是一些毕业设计,其中包括了论文以及各种资料)。 这次介绍的...
  • python 疫情数据可视化

    2020-12-21 12:29:47
    json数据转 csv import json import time import csv file = open('DXYArea-TimeSeries.json','r',encoding='utf-8') infos = json.load(file) with open('data.csv','a',newline='') as f: writer = csv....
  • 万众期待的京东11.11全球热爱季落下帷幕,巅峰狂欢中,多少人的购物车在这一天成为了GDP野马,创造的商业价值年年翻新,节节拔高,这背后的数据和流量,让消费者和企业更加直观、明确地捕捉到...
  • 视觉数据可视化 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
  • 大屏数据可视化设计指南

    万次阅读 多人点赞 2019-01-03 14:25:31
    把相对复杂、抽象的数据通过可视的方式以人们更易理解的形式展示出来的一系列手段叫做数据可视化数据可视化是为了更形象地表达数据内在的信息和规律,促进数据信息的传播和应用。 在当前新技术支持下,数据可视化...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,155
精华内容 3,262
关键字:

数据可视化大屏设计