大屏“智能设计”升级——美化工具箱上线

本文涉及的产品
数据可视化DataV,5个大屏 1个月
可视分析地图(DataV-Atlas),3 个项目,100M 存储空间
简介: DataV新增一键美化功能,页面修饰、添加标题等工作可以通过工具箱批量完成,大幅度提升页面搭建的效率和质量。

​DataV作为大屏可视化构建工具,提供了丰富的组件和灵活的配置。

BUT……设计者在面对浩如烟海的可选方案时仍然会觉得手足无措,实现起来也费时费力。针对这个问题,DataV在去年推出了马良功能,利用智能化的能力,可以迅速学习和识别手绘草图、信息图表、大屏截图等资料,在DataV中自动生成可配置的可视化应用。详情参见这个贴子:手绘稿如何1秒变身数据大屏?深度学习让人人成为可视化专家

是不是很鹅妹子嘤?但是感觉还缺点什么?
1.png

在设计大屏可视化时,数据的添加、图表的选择、布局的设计和颜色风格的统一,缺一不可。除此之外,还需要添加诸如标题、边框、背景色块等细节辅助加强美感、强化用户认知。马良解决了图表的选择和初步的布局设计,而这次我们推出美化工具箱,专注于完善颜色风格和布局细节。

美化工具箱秉承马良人机智能融合的设计思路,通过自动化、智能化降低用户所需的专业技能,同时还能减少工作量。其核心理念在于,发挥云计算作为基础设施的便捷和优势。

“人工很贵,而机器计算能力很强大”

方法上,我们通过智能化算法结合人机交互技术融合用户意图专业设计

具体来说,我们首先对大屏可视化设计步骤进行抽象概括;以此为指导,解析通过人机交互手段获取的用户设计意图;基于从中得到的关键信息,然后以专业设计模型对其进行重构和补全。
2.png

这样,用户只需要进行部分指定(partial specification)便可以得到完善的设计结果。在用户意图的识别上,我们支持多种人机交互手段,除了常规的WIMP(Window/Icon/Menu/Pointer)模型和嵌入画布的交互外,还支持手绘草图、以图片表达颜色风格等。

那么,我们到底该如何构建一个好看的大屏可视化结果呢?
其实大屏可视化的设计实现就和绘画一样,是个自顶向下、逐步求精的过程。会画画的人都知道,进行绘画时首先需要对整体有所把握,先添置主体,再优化细节就大功告成了!于是我们得到了著名素描教程《怎样画马》。

3.png

我的一个朋友表示,这个第五步太难学了,没有十年的功夫做不好。我表示这个我帮不了你,但是如果你要做的是大屏可视化,那DataV新鲜出炉的美化工具箱可以帮你省掉十年的功夫。整个步骤比画马还简单,只要三步就可以完成:

4.png

这里的颜色设计用到了美化工具箱的智能主题功能,支持上传图片从中提取主色调。整个过程就是这么简单,一切工作都由智能算法自动完成,用户仅需要审阅给出的备选结果,选择最喜欢的一款,让你轻松尝试各种风格的大屏。

美化工具箱配图.jpg

设计理论

实际的大屏可视化设计流程会更加复杂,需要通过不断的迭代将模糊的设计思路提炼成最佳的解决方案。

这个过程可以用英国设计协会(British Design Council)的双钻模型来描述。
6.png

整个过程分为四个阶段,先发散,再集中,再发散,再集中。

第一个发散发现功能
通过尝试各种图表和布局设计的的思路,以其找到最合适当前需求和业务的数据展示方式;而随后通过功能评估进行集中,定义最佳的图表布局设计。

第二个发散优化设计
尝试不同的细节和颜色风格,最终通过设计评估集中为实用又美观的大屏可视化产出。
在整个过程中,最为耗时耗力的就是在菱形最宽部位的方案实现。期间,需要尝试大量的设计思路 ⇨ 在实际可用的结果上进行评估 ⇨ 找出最正确可行的解决方案。
马良和美化工具箱就分别针对两个实现阶段,帮助用户减少工作量,加速设计迭代。

后续工作

未来我们还会进一步提升智能设计的能力,包括多个方面的强化。

首先,加强风格化能力,除了布局、颜色和标题边框等,还要涵盖更多细节;
其次,增加基于数据的智能设计,不光考虑数据中的特征,还包括数据语义,提供人性化的设计体验;
最后,还要增加更多人机交互手段。

敬请期待!

相关文章
|
6月前
|
机器学习/深度学习 API 开发工具
视觉智能平台常见问题之实现卡通效果图如何解决
视觉智能平台是利用机器学习和图像处理技术,提供图像识别、视频分析等智能视觉服务的平台;本合集针对该平台在使用中遇到的常见问题进行了收集和解答,以帮助开发者和企业用户在整合和部署视觉智能解决方案时,能够更快地定位问题并找到有效的解决策略。
147 3
|
搜索推荐 定位技术
百度地图开发mapStyle个性化地图styleJson的配色解决方案
百度地图开发mapStyle个性化地图styleJson的配色解决方案
638 0
|
3月前
|
自动驾驶 数据可视化 前端开发
【Echarts大屏】自动驾驶可视化大屏(附源码一键复制)
【Echarts大屏】自动驾驶可视化大屏(附源码一键复制)
|
3月前
|
数据可视化 前端开发 JavaScript
本来不想分享的,但这套可视化大屏确实不错
本来不想分享的,但这套可视化大屏确实不错
|
6月前
|
数据可视化 Java BI
商业开源MES+源码+送可拖拽式数据大屏
这是一个商业开源的JAVA MES系统,包含源码和本地部署教程。基于Springboot、Vue3和MySQL8,适用于开发学习。功能包括车间数据建模、生产物料控制、计划管理、过程控制、质量管理、库存管理、看板管理、报表分析和基础管理。需JDK11、Tomcat及Maven环境,源码付费获取。
113 0
|
6月前
|
搜索推荐 小程序 定位技术
【社区每周】AMPE新增车机卡片联动功能;支持个性化场景推荐(2022年6月第四期)
【社区每周】AMPE新增车机卡片联动功能;支持个性化场景推荐(2022年6月第四期)
92 0
|
存储 数据可视化 前端开发
低代码可视化拖拽编辑器实现方案
低代码可视化拖拽编辑器实现方案
229 0
|
数据可视化 前端开发
前端可视化大屏适配方案
前端可视化大屏适配方案
前端可视化大屏适配方案
|
前端开发 数据可视化 JavaScript
可视化大屏的几种屏幕适配方案,总有一种是你需要的
假设我们正在开发一个可视化拖拽的搭建平台,可以拖拽生成工作台或可视化大屏,或者直接就是开发一个大屏,首先必须要考虑的一个问题就是页面如何适应屏幕,因为我们在搭建或开发时一般都会基于一个固定的宽高,但是实际的屏幕可能大小不一,接下来我们就尝试几种简单且常见的方案,并简单分析一下利弊。
635 0
|
存储 移动开发 监控
从零开发一款可视化大屏制作平台
几个月前开源的H5页面制作平台H5-Dooring 收到了很多热心的反馈和交流, 顺着笔者之前的规划, 我们又做了一款可视化大屏编辑器V6.Dooring. 接下来笔者就来带大家一起看看我们的方案设计和技术实现.
588 0