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

本文涉及的产品
可视分析地图(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

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

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

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

后续工作

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

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

敬请期待!

相关文章
|
搜索推荐 定位技术
百度地图开发mapStyle个性化地图styleJson的配色解决方案
百度地图开发mapStyle个性化地图styleJson的配色解决方案
666 0
|
5月前
|
监控 数据可视化
甘特图制作软件精选,在线绘制技巧全掌握
甘特图是一种条状图,用于展示项目任务的进度与时间关系。它有助于增强团队协作、合理分配资源、跟踪项目进度。使用Excel或ZohoProjects等工具可绘制甘特图,其中ZohoProjects支持在线创建。绘制步骤包括:登录Zoho Projects并选择项目,点击“工具”菜单下的“甘特图”,添加任务及其详细信息如名称、日期、负责人等,最后检查并保存甘特图。通过这些步骤,项目管理者能有效监控项目进程。
75 8
|
4月前
|
搜索推荐 API 语音技术
FunClip的基础功能问题之使用FunClip进行智能剪辑的问题如何解决
FunClip的基础功能问题之使用FunClip进行智能剪辑的问题如何解决
451 0
|
4月前
|
数据可视化 前端开发 JavaScript
本来不想分享的,但这套可视化大屏确实不错
本来不想分享的,但这套可视化大屏确实不错
|
7月前
|
搜索推荐 小程序 定位技术
【社区每周】AMPE新增车机卡片联动功能;支持个性化场景推荐(2022年6月第四期)
【社区每周】AMPE新增车机卡片联动功能;支持个性化场景推荐(2022年6月第四期)
105 0
|
监控 搜索推荐 数据可视化
漏刻有时垃圾分类回收数据可视化大屏监控源代码百度地图标注及地图个性化处理方案
漏刻有时垃圾分类回收数据可视化大屏监控源代码百度地图标注及地图个性化处理方案
113 0
|
算法 数据可视化 搜索推荐
如何从0到1搭建图编辑器,打造沉浸编排体验?
如何从0到1搭建图编辑器,打造沉浸编排体验?
190 0
|
数据可视化 定位技术 API
10款最佳在线地图软件介绍
10款最佳在线地图软件介绍
1208 0
10款最佳在线地图软件介绍
|
前端开发 数据可视化 JavaScript
可视化大屏的几种屏幕适配方案,总有一种是你需要的
假设我们正在开发一个可视化拖拽的搭建平台,可以拖拽生成工作台或可视化大屏,或者直接就是开发一个大屏,首先必须要考虑的一个问题就是页面如何适应屏幕,因为我们在搭建或开发时一般都会基于一个固定的宽高,但是实际的屏幕可能大小不一,接下来我们就尝试几种简单且常见的方案,并简单分析一下利弊。
659 0
|
存储 移动开发 监控
从零开发一款可视化大屏制作平台
几个月前开源的H5页面制作平台H5-Dooring 收到了很多热心的反馈和交流, 顺着笔者之前的规划, 我们又做了一款可视化大屏编辑器V6.Dooring. 接下来笔者就来带大家一起看看我们的方案设计和技术实现.
596 0