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

简介: 不要把关于设计的这些内容看得太过严肃。

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

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

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

1-对比

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

2-重复

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

3-对齐

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

4-亲密性

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

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

1.jpg
2.jpg

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

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

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

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

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

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

obj.playAnimation("animation");

• 可以反向播放动画

    name: "animation",
    reverse: true//反转数组
});

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

    name: "open1",
    loopType: THING.LoopType.Repeat
});

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

    name: ["open1", "open2"],
    loopType: THING.LoopType.PingPong,
    speed: 0.4
});

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

相关实践学习
钉钉群中如何接收IoT温控器数据告警通知
本实验主要介绍如何将温控器设备以MQTT协议接入IoT物联网平台,通过云产品流转到函数计算FC,调用钉钉群机器人API,实时推送温湿度消息到钉钉群。
阿里云AIoT物联网开发实战
本课程将由物联网专家带你熟悉阿里云AIoT物联网领域全套云产品,7天轻松搭建基于Arduino的端到端物联网场景应用。 开始学习前,请先开通下方两个云产品,让学习更流畅: IoT物联网平台:https://iot.console.aliyun.com/ LinkWAN物联网络管理平台:https://linkwan.console.aliyun.com/service-open
相关文章
|
7月前
|
设计模式 算法 程序员
代码之美:从功能实现到艺术创作
【7月更文挑战第51天】在编程的世界里,一行行代码不仅仅是冰冷的逻辑与算法的堆砌,它们也能展现出一种独特的美感。本文将探讨如何将技术能力与审美意识相结合,把日常的编程工作变成一种艺术创作的体验。我们将深入理解代码的美学原则,并分享一些提升代码艺术性的实践技巧,旨在启发开发者们从不同的角度审视自己的工作,让编程不仅仅是功能的实现,更是一场享受美的过程。
|
8月前
|
安全 定位技术 UED
潮玩宇宙大逃杀游戏系统开发规则详细/成熟技术/案例设计
潮玩宇宙大逃杀开发涵盖概念设计、场景地图构建、角色装备规划、大逃杀机制、多人对战、资源管理、进度排名、UI/UX、防作弊与安全,及持续更新维护。需调整细节满足项目需求,强调团队合作、测试优化以保稳定性和趣味性。
|
10月前
|
设计模式 算法 开发者
代码之美:在简约中寻求高效
【5月更文挑战第3天】 在软件开发的世界中,代码不仅仅是一种交流工具,更是艺术的表达。本文将探讨如何通过精简和高效的编码实践来提升代码质量,降低维护成本,并最终实现技术与美学的和谐统一。我们将透过实例分析、设计模式的应用以及重构技巧的讨论,揭示编写高质量代码背后的哲学和实用策略。
|
10月前
|
Android开发 开发者 UED
探索安卓应用开发中的UI设计趋势
随着移动应用市场的不断发展和用户需求的变化,安卓应用的UI设计趋势也在不断演进。本文将深入探讨当前安卓应用开发中的UI设计趋势,包括暗黑模式、原生化设计、动效设计等方面的发展趋势,为开发者提供参考和启发。
|
存储 人工智能 算法
MATIC马蹄链佛萨奇2.0系统源码搭建|现成案例|成熟技术
function _setImplementation(address newImplementation)internal{
|
10月前
|
Kubernetes 监控 API
第一章 Kubernetes 简介
第一章 Kubernetes 简介
72 3
|
10月前
|
算法 NoSQL Shell
3. Etcd 基础操作
3. Etcd 基础操作
|
算法 前端开发
测试圈相亲平台开发流程(3):架构的初步设计
测试圈相亲平台开发流程(3):架构的初步设计
测试圈相亲平台开发流程(3):架构的初步设计
|
物联网 开发者
蓝牙模块控制功能数据AT指令|学习笔记
快速学习蓝牙模块控制功能数据AT指令
蓝牙模块控制功能数据AT指令|学习笔记

热门文章

最新文章