大家好,我是易知微的可视化设计师——元宝,这是3.31直播的文字版,整理了直播过程中的关键知识点,同时补充了一些更详细的解说,希望能帮到大家。

首先,这是关于「如何使用EasyV Sass个人版轻松搭建零代码销售可视化看板?」来做可视化设计的直播。

EasyV是什么

用我自己的理解来说,EasyV 是我们公司提供的一款快速设计、搭建、开发可视化&数字孪生应用的平台工具。

EasyV个人版的特点

这是目前提供的三个版本,大家可以到官网详细对比差别。

我在公司内部用的是尊享版,为了直播,我去开了个人版测试账号,使用对比后,我觉得个人版主要的优点有:

  • 虽然有部分组件和大屏文件数量限制,但是真的很便宜
  • 因为目前主要面向非开发人员,特意做了表格形式来编辑静态数据

谁适合使用EasyV个人版

因为我是一个使用EasyV做可视化的设计师,所以,对于正在学习可视化设计的学生或者设计师同行,我可以说——EasyV 确实可以帮助你以较低的成本(经济和时间)来实现可视化交互系统的制作。

EasyV的身影

为了更好的解释 EasyV 的用途,以下是中国地质大学的学生用 EasyV 做的校园地理信息可视化的文章,我看完还挺惊喜的!可能这就是自家产品被别人用起来的快乐吧。

文章链接:
https://mp.weixin.qq.com/s/xQEDePK9uQFPL9Xkb1nSLg

虽然他们用了个人版没有的3D园区组件,但是个人版是我们今年才推出的,产品权益也在不断迭代修改,可能产品那边的同事看到这个组件被个人群体喜欢,没准以后就开放了呢。

从企业层面来看,如果你是在做这类低代码、可视化的平台调研,个人建议是,直接去联系开通更高的版本,这样更利于你对 EasyV 的评估,当然,你也可以先自己买一个月的个人版试试,当作“体验版”~

进入官网,立即免费试用

凭啥要用?

做直播准备的时候,我一直在想一个问题——我应该直播啥,才能吸引到个人用户,换句话说,就是“大家凭啥要选择用 EasyV 来做可视化”。

经过冷静并深刻的思考,我觉得是:用 EasyV 能把可视化做得更美、更快。

这几年的可视化设计是肉眼可见地流行起来了,大家都在学。

但是,因为缺乏学习参考和高效工具,结果往往不太理想。我捞设计师简历的时候,经常看到很多 UI 做得不错的同学,可视化大屏那部分一下子拉垮,简直不像同一个人做的,表现出来的水平差距太大了。

我之前直播的时候,从设计师的视角,拆解过可视化大屏的设计元素:

而 EasyV 确实可以“一站式”地从这几方面,高效地完成「能交互的可视化系统」的制作,更不必说是一个静态页面了。

所以,为了验证自己的观点,我这次演示的题目是「不用任何外部的软件,只用 EasyV 完成下面这个大屏」:

我只用了一上午的时间,就做完了它,这是可以交互的:

当然,这个效果还有很大的优化空间,不过我认为对于这个大屏来说,EasyV能代替 80% 的原始工作流,就已经很nice了。

常规的平面设计部分就不说了,主要是中间的地球,按照常规的设计,大概就需要用到PS、3D建模软件、Ae等等,做出了效果图,还要对接开发小哥进行还原。

PS:“白发老头”的图标,代表的是“也没有压力很大的28岁程序员”的网络梗,这里我想用他表示,EasyV 是可以有效代替前端小哥的开发工作~

关键实操知识点

软件操作之前,是灵感构思,这个毛玻璃质感的思路来自网上的这两张图:

虽然确实受限于自己约定的「不用任何外部软件」的条件,对演示的效果有所取舍,但我想告诉大家的是——可视化设计的灵感,可以来自很多的地方,有很多方式可以表现科技和质感,我们搜集灵感时,不要局限于“可视化屏”之类的关键字,可以扩展到暗色、游戏、仪表盘、车载UI...

以下是一些关键操作摘取,更多的可以查看直播回放~

类似设计软件的面板

如果你用过 Sketch、Figma 一类的UI设计工具,那么可以很轻松了解 EasyV 的功能布局,因为他们很像:

Sketch

FUI元素

在 EasyV 中,形状组件、弹性布局组件、闪点、跟踪路径...这类组件可以有效帮助我们完成 FUI 装饰元素的绘制,就是那些框框线线的元素~。强烈推荐弹性布局装饰组件!因为它可以做到拉伸不变形,这样就不用改个尺寸就要重新切图了!有点类似点9切图法:

拉伸不会变形的“弹性布局装饰”组件

预置了很多样式,也可以自定义

不用导SVG,就可以直接实现水平移动的流光!

地球

不用管怎么实现,你只用调节样式,就可以做一个能交互的地球:

丰富的子组件,想加多少层都可以,样式参数也很多

想要突出国家,不用画贴图,直接用区域热力子组件实现,要更改国家,上传不同国家的geojson文件即可:

飞线的样式,提高了很多样式和动画参数,直接调整就好了!飞线制作的难点,在于修改起点终点、生成随机大量的模拟数据,不然一根根画要累死人。

这里,我们可以利用 EasyMap 自动生成批量飞线的数据,替换到数据源里即可:

复制链接至浏览器,立即进入「EasyMap」:map.easyv.cloud/

可以自动生成随机大量的数据

保存CSV文件并上传,就可以改变飞线数量和位置

图表组件

关于图表组件,这里演示下批量复制相似组件的样式,可以有效处理 “领导说所有X轴文字调大点” 一类的重复性需求:

三步批量复制轴线样式

关于图表组件的配色:

关于图表类似色的搭配分享

交互

EasyV 里的交互制作,属于一通百通,遵循「触发动作+条件——被操作对象——执行的行为」的配置路径,用地球镜头切换的交互来说,在触发的选项卡组件上配置交互:

再介绍下多状态容器——动态面板,用来切换内容块的,可以有效管理同一个区域上的不同切换内容,配合选项卡组件,就可以做到点击按钮进行切换:

一个组件,多个状态可切换

好了,关键知识点就介绍到这里,大家可以观看回放查看更多的演示细节。

总结一下~从我的视角来看,EasyV的优点是:

  • EasyV 作为一款工具,它是一个有很多与可视化垂直相关的功能聚合体,基本可以做到一站式完成可视化交互系统的制作,减少多个软件切换的成本;
  • 另一方面,从市场的观察结果来看,大家对我们产出的模板、项目作品的美观度评价还是不错的,大家可以来获取很多灵感,加上组件的自定义参数比较多,可以方便地进行二次修改创作。

作为易知微的内部设计师,我和整个团队一样,希望 EasyV 能帮助更多的人高质高效地做出可视化作品,不用加班~

最后说一个PPT的坑吧。直播的时候,文字超链接点不动。原来!是因为——在PPT里,文字和其他元素打组之后,再导出为PDF,就无法识别超链接了。无语子的逻辑,大家共勉~

易知微-EasyV数字孪生|智慧城市园区工厂水利双碳|三维地图数据可视化大屏

好啦,谢谢大家观看,然后,在招人,在招人,在招人!

必看|仅用半天即可搭建0代码销售可视化看板?EasyV Sass个人版做到了相关推荐

  1. 个推0代码数据可视化实操 | 基于Tableau的中国奥运数据探索

    8月8日,东京奥运会正式落下帷幕.经过17天的激烈角逐,中国代表团在本届奥运会上共斩获38金32银18铜,位居奖牌榜第二,追平了在伦敦奥运会取得的境外参赛最好成绩. 奥运会期间,奖牌榜上的每一次变动都 ...

  2. sqlserver大数据表操作慢_架构师必看!操作日志系统搭建秘技

    ​ 在Java开发中,我们经常会遇到一个棘手的问题:记录用户的操作行为. 某些操作是相对简单的,我们可以逐条记录.但是某些操作行为却很难记录,例如编辑操作.在某一次操作中,用户可能编辑了对象A的几个属 ...

  3. 【程序员必看】如何用Python从0开始创建一个区块链?

    在数字货币盛行的档口,比特币,这币那币到底值不值得信赖呢?也许你像很多人一样感到新奇,想接近它,但只因背后的区块链技术,阻断了向新领域尝试的步伐.不过,对于程序员来说,想真正搞懂比特币,搞懂区块链,可 ...

  4. Python数据可视化 - 使用Python dash搭建交互式地图可视化看板

    1.前言 前几年刚接触Dash库的时候,Dash生态还不太成熟,做些简单的web还行,复杂的.系统性还是得用flask或django来实现.随着这两年dash的不断迭代更新,以及dash大佬feffe ...

  5. 0基础学图论!——图论精讲/详细/新手理解概念必看!

    并不会有更好的阅读体验 特别特别感谢: lmpplmpplmpp大佬牺牲自己宝贵时间,为我没有脾气的耐心讲解. BeyondHeavenBeyondHeavenBeyondHeaven大佬,无偿帮我康 ...

  6. 3月18日云栖精选夜读 | 开发者必看!探秘阿里云Hi购季开发者分会场:海量学习资源0元起!...

    [点击订阅云栖夜读周刊] 开发者分会场致力于帮助开发者学习了解阿里云最新技术,为开发者设计全方位的技术成长与进阶之路. 热点热议 开发者必看!探秘阿里云Hi购季开发者分会场:海量学习资源0元起! 作者 ...

  7. 3月18日云栖精选夜读 | 开发者必看!探秘阿里云Hi购季开发者分会场:海量学习资源0元起!... 1

    [点击订阅云栖夜读周刊] 开发者分会场致力于帮助开发者学习了解阿里云最新技术,为开发者设计全方位的技术成长与进阶之路. 热点热议 开发者必看!探秘阿里云Hi购季开发者分会场:海量学习资源0元起! 作者 ...

  8. php生成随机小数保留一位,php生成0~1随机小数的方法(必看)

    php生成0~1随机小数的方法(必看) Javascript生成0~1随机小数的方法可以调用自带的Math.random(); 例如: document.write(Math.random()); / ...

  9. 假期,推荐豆瓣评分 9.0 以上的 100 部必看电影

    更好的放松,才能更好的学习! 假期余额已经严重不足了,捉紧学习的同时,也总要时间放松一下才行. 所以,有空把那些好看的电影都看了吧! 豆瓣评分 9.0 以上的 100 部电影 ????,马住!!! 1 ...

最新文章

  1. OpenGL在图形管道中调用了什么用户模式图形驱动程序(UMD)?
  2. HALCON示例程序high.hdev使用不同方法提取区域
  3. Asp.Net Core2.0 基于QuartzNet任务管理系统
  4. 1081. Rational Sum (20) -最大公约数
  5. 数据结构排序系列详解之四 快速排序
  6. 计算机组成原理期末无选择题,计算机组成原理期末考试习题及答案精编(70页)-原创力文档...
  7. 手机点餐系统概述_自助点餐、自助收银......在餐饮行业有哪些智慧化场景?
  8. 2021.09.22数字货币小计
  9. Java中od方向是什么意思_od的用法
  10. Opencv中convertTo函数
  11. 【JavaWeb - 网页编程】三 jQuery 类库
  12. 这年头视频编辑软件也开始内卷了,功能这么强居然免费
  13. 如何使用SQL进行模糊查询
  14. 2022最新HTML生成国庆头像网页源码+打开即用
  15. 没有躲过的坑--string中的c_str()陷阱
  16. JSON快速学习入门
  17. 第一周预习:Java三大特性
  18. GPS北斗卫星授时设备(京准)
  19. C# 如何更改程序集名称
  20. 【190416】BS结构的VC++消息发送程序源代码

热门文章

  1. 打包时出现: Unable to prerender all routes
  2. Python入门实例记录
  3. androidApk文件对照表
  4. 在CorelDRAW中如何完成属性的复制
  5. 是该让自己的CSDN博客苏醒了
  6. 2021年电工(中级)试题及解析及电工(中级)证考试
  7. RASNet阅读笔记:Learning Attentions: Residual Attentional Siamese Network for High Performance Online Vis
  8. 高质量作品集PPT模板合集(字体包和作品集封面原始文档)
  9. 开发app价格贵吗?三种app开发方式解析
  10. Nginx全站升级提示,Nginx全站rewrite到指定页面