分享
查看: 1878|回复: 0

[分享] ThingJS之3D开发:如何做颜值高的设计?

[复制链接]

ThingJS之3D开发:如何做颜值高的设计?

发表于 2020-9-10 17:16:07 来自 分享 阅读模式 倒序浏览
zzv_icon1878 zzr_icon0 查看全部

不要把关于设计的这些内容看得太过严肃。ThingJS的3D开发主要还是为了物联网可视化项目落地,颜值高就是硬道理!

世界级设计师Robin Williams认为,复杂的设计原理不那么复杂,凝炼为亲密性、对齐、重复和对比4个基本原则。今天,来跟我了解什么是四大设计基本原则, 并且基于概念来找出自己目前面临的“形象设计”问题,不管是你的邮件还是文档,结果一定会让你刮目相看。

ThingJS平台提供的是3D开发平台,有场景搭建工具,也有3D开发应用,这都离不开设计审美力。因为3D不仅仅实现了图像的立体化,同时加入了动画效果,是对真实世界的仿真,充满更大的想象空间。四大设计基本原则,是基础中的基础。即使是3D动画,也需要模型草图,只有把设计基础打好了,才能够在二维屏幕上实现三维图像的不违和展现。

1-对比

元素要做到截然不同,才能让页面引人注目。具体实现起来,也许要思量一下,这个对比是怎么做到的?因为同样的元素,比如字体,我们都会选择相似的类型,美其名曰过渡和融入。

2-重复

有些视觉要素的重复效果,能够增加条理性和统一性。

3-对齐

每个元素都应该与另一个页面有某种视觉联系。不懂设计的人看页面,会对摆放的位置摸不着头脑,但是对于设计师而言,这是有一定的构图要求,每个元素都不是随意摆放的。

4-亲密性

找到元素之间的相关性,进行归类,在视图上的表现就是靠在一块,形成一个统一的视觉单元,多个单元的组合也不会乱,给人一种清晰的设计结构。好的设计是不存在孤立元素的。

亲密性是四大原则之首,有了逻辑才能够谈更多优化,不然还是混乱的信息。有了组织性,信息才更加易读。同样地,亲密性原则能够帮助你关注空间,了解空间对于表达的重要性。在3D可视化开发中,空间是非常重要的一个概念,因为这是一个仿真的三维世界。每个图层数据都包含不同的元素组合,有了空间,才能让整体具有结构感,读取信息才有了逻辑性。

ThingJS之3D开发:如何做颜值高的设计?ThingJS之3D开发:如何做颜值高的设计?

了解设计的人都知道,如果元素很多,就要进行分类,这里的亲密性原则, 指的就是“将相关的项组织在一起”,先成组,后构图。这里有几个简单的步骤:1、把有关联的元素放在一起,2、在不同单元之间增加空间距离。真正的设计不是把东西都堆上去,而是要把有关联的元素汇合,设计不仅仅是感性的,也是理性的。因为要注意信息之间有逻辑上的关联性,哪些应该强调,哪些不用强调,而且通过元素分组、空白设计来表现。

注意,元素单元保持在3~5个就可以。归类的界限要清楚,不能含糊。

更加直观和准确,是设计的目标,让人们更加方便找到需要的信息,凸显设计的价值。3D和2D一样,都是把数据可视化,更清晰的展示在用户面前,物联网技术部署的最后一公里,就是可视化层面。3D动画有了更多的仿真增强,以前是需要学习3DMAX系统,具备专业的3D建模知识,随着物联网技术的生态扩展,不是一个供应商就能做好一个物联网方案的部署,它需要众多的合作,所以每个合作厂商只要把其中一个方面做到极致,就能够存活。ThingJS是3D可视化开发方面的佼佼者,为了更加快速推动物联网可视化技术,赶上物联网的大众创新浪潮,它利用JS封装3D库,并开发一系列3D地图及园区建模组件,把可视化开发步骤简化成了四步。

在CityBuilder或者CamBuilder场景搭建工具中,可以选择物体属性来内置模型动画,无缝集成到ThingJS平台上,就可以基于内置的模型动画运行JS代码,节省了大量的动效基础开发时间。

以下面的粮仓为例,在CamBuilder中我们可以通过选中该模型,查看模型是否带有动画,例如这个粮仓动画名为‘CloseRoof’和‘OpenRoof’,分别控制粮仓开盖关盖动画。

ThingJS之3D开发:如何做颜值高的设计?

ThingJS使用 playAnimation 接口进行动画播放。

简单播放动画

  1. obj.playAnimation("animation");
复制代码


可以反向播放动画

  1. obj.playAnimation({
  2. name: "animation",
  3. reverse: true//反转数组
  4. });
复制代码


可以循环播放动画,并且可以同 loopType ,来控制循环类型

  1. obj.playAnimation({
  2. name: "open1",
  3. loopType: THING.LoopType.Repeat
  4. });
复制代码


还可以同时播放多个动画;

  1. obj.playAnimation({
  2. name: ["open1", "open2"],
  3. loopType: THING.LoopType.PingPong,
  4. speed: 0.4
  5. });
复制代码


四大设计基础概念请收好,ThingJS的3D开发离不开对设计的高标准。


avatar
游客~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

130700ppkpl8x3t7tt1b1t