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

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

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

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

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

后续工作

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

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

敬请期待!

相关文章
|
8月前
|
XML JSON 算法
C++视角下的Qt按钮:从基础应用到高级定制(一)
C++视角下的Qt按钮:从基础应用到高级定制
544 2
|
8月前
|
安全 前端开发 C++
C++视角下的Qt按钮:从基础应用到高级定制(二)
C++视角下的Qt按钮:从基础应用到高级定制
183 2
|
5月前
|
开发框架 API 开发者
Flutter表单控件深度解析:从基本构建到高级自定义,全方位打造既美观又实用的移动端数据输入体验,让应用交互更上一层楼
【8月更文挑战第31天】在构建美观且功能强大的移动应用时,表单是不可或缺的部分。Flutter 作为热门的跨平台开发框架,提供了丰富的表单控件和 API,使开发者能轻松创建高质量表单。本文通过问题解答形式,深入解读 Flutter 表单控件,并通过具体示例代码展示如何构建优秀的移动应用表单。涵盖创建基本表单、处理表单提交、自定义控件样式、焦点管理和异步验证等内容,适合各水平开发者学习和参考。
139 0
|
7月前
|
UED
带您一步步构建一个具有复杂布局的电商详情页,涵盖页面结构规划、样式设计以及交互效果的实现
【6月更文挑战第14天】构建复杂布局的电商详情页涉及页面结构规划、样式设计和交互效果实现。首先,规划页面结构,包括顶部导航栏、商品图片展示区、商品信息区、用户评价区和相关商品推荐区。接着,进行样式设计,注重色彩搭配、字体选择、布局与间距以及图片处理。例如,使用固定顶部导航栏,轮播图展示商品图片,分块展示商品信息和评价,以及设计相关商品推荐区。最后,实现交互效果,如图片放大、添加到购物车按钮、滚动监听和评论互动,提升用户体验。实际开发时需根据需求和规范进行调整,保证跨设备兼容性。
145 1
|
8月前
|
数据可视化 Java BI
商业开源MES+源码+送可拖拽式数据大屏
这是一个商业开源的JAVA MES系统,包含源码和本地部署教程。基于Springboot、Vue3和MySQL8,适用于开发学习。功能包括车间数据建模、生产物料控制、计划管理、过程控制、质量管理、库存管理、看板管理、报表分析和基础管理。需JDK11、Tomcat及Maven环境,源码付费获取。
137 0
|
8月前
|
设计模式 安全 API
C++视角下的Qt按钮:从基础应用到高级定制(三)
C++视角下的Qt按钮:从基础应用到高级定制
387 0
|
8月前
|
Web App开发 存储 自然语言处理
推荐一款价值几万元的免费开源GPTs导航!还可自定义数据源做成通用导航站!
推荐一款价值几万元的免费开源GPTs导航!还可自定义数据源做成通用导航站!
167 0
|
8月前
|
搜索推荐 小程序 定位技术
【社区每周】AMPE新增车机卡片联动功能;支持个性化场景推荐(2022年6月第四期)
【社区每周】AMPE新增车机卡片联动功能;支持个性化场景推荐(2022年6月第四期)
116 0
|
算法 数据可视化 搜索推荐
如何从0到1搭建图编辑器,打造沉浸编排体验?
如何从0到1搭建图编辑器,打造沉浸编排体验?
202 0
|
数据可视化 前端开发
前端可视化大屏适配方案
前端可视化大屏适配方案
前端可视化大屏适配方案