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
相关文章
|
16天前
|
搜索推荐 开发工具 Android开发
打造个性化Android应用:从设计到实现的旅程
【10月更文挑战第26天】在这个数字时代,拥有一个能够脱颖而出的移动应用是成功的关键。本文将引导您了解如何从概念化阶段出发,通过设计、开发直至发布,一步步构建一个既美观又实用的Android应用。我们将探讨用户体验(UX)设计的重要性,介绍Android开发的核心组件,并通过实际案例展示如何克服开发中的挑战。无论您是初学者还是有经验的开发者,这篇文章都将为您提供宝贵的见解和实用的技巧,帮助您在竞争激烈的应用市场中脱颖而出。
|
3月前
|
C# 机器学习/深度学习 搜索推荐
WPF与机器学习的完美邂逅:手把手教你打造一个具有智能推荐功能的现代桌面应用——从理论到实践的全方位指南,让你的应用瞬间变得高大上且智能无比
【8月更文挑战第31天】本文详细介绍如何在Windows Presentation Foundation(WPF)应用中集成机器学习功能,以开发具备智能化特性的桌面应用。通过使用Microsoft的ML.NET框架,本文演示了从安装NuGet包、准备数据集、训练推荐系统模型到最终将模型集成到WPF应用中的全过程。具体示例代码展示了如何基于用户行为数据训练模型,并实现实时推荐功能。这为WPF开发者提供了宝贵的实践指导。
43 0
|
4月前
|
安全 定位技术 UED
潮玩宇宙大逃杀游戏系统开发规则详细/成熟技术/案例设计
潮玩宇宙大逃杀开发涵盖概念设计、场景地图构建、角色装备规划、大逃杀机制、多人对战、资源管理、进度排名、UI/UX、防作弊与安全,及持续更新维护。需调整细节满足项目需求,强调团队合作、测试优化以保稳定性和趣味性。
|
存储 人工智能 算法
MATIC马蹄链佛萨奇2.0系统源码搭建|现成案例|成熟技术
function _setImplementation(address newImplementation)internal{
|
存储 安全 算法
TechFinger游戏搬砖平台系统开发方案详细丨TechFinger搬砖游戏系统开发案例项目/源码功能/成熟技术
去中心化:以分布式网络为基础结构,对数据进行验证、记账、存储、维护和传输等操作,利用纯数学方法建立节点之间的交互信任关系,进而形成去中心化、可信任的分布式系统;
|
机器人 图形学
3D链游开发稳定版丨3D链游系统开发规则及详细丨3D链游源码部署(人物建模游戏开发)
首先,把Project-Standard Assets-Characters-ThirdPersonCharacter-Animation中的HumanoidIdle和HumanoidRun导入Animator,设置Speed超过一定值时进入HumanoidRun,Speed超过一定值时返回HumanoidIdle。
|
前端开发 安全 vr&ar
提升生产力,7 款好用的原型图工具推荐给你
目前有很多 UI 设计工具可以帮助您设计用户界面,码匠这里分享 7 款好用的原型图工具。
665 0
提升生产力,7 款好用的原型图工具推荐给你
|
算法 前端开发
测试圈相亲平台开发流程(3):架构的初步设计
测试圈相亲平台开发流程(3):架构的初步设计
测试圈相亲平台开发流程(3):架构的初步设计
|
移动开发 数据可视化 信息无障碍