【转】翻转吧,界面!-3D UI概述

虚幻4学习笔记(13)用户UI 交互动画、制作2D UI、制作3D UI B站UP谌嘉诚课程:https://www.bilibili.com/video/BV164411Y732。 阅读详情

随着技术发展,界面越来越简易化,二维的操作难以提供更好的交互体验,因此平面化的操作界面转向3D 空间维度发展,我们又迎来的了新的时代,一场革命性新的交互体验;本次分享,作为3D UI的概述,以下就整体的来了解下3D UI。
图1:如何定义3D

什么是3D

我们首先了解下什么是3D:
一般而言,3D也称为三次元、三维空间;日常生活中可指由长、宽、高、3个维度所构成的空间,而且日常生活中使用“三维空间”一词,常常是指三维的欧几里得空间;3D 这个空间几何概念加上UI人机交互界面这个概念组成新的词汇3D UI  ,那么,什么是3D UI,如何理解3D UI?

图2:各类3D游戏界面,是否3D化就是3DUI?
在电脑中最常见的3D应该就是游戏,但即使是最新的游戏,其中的操作界面是否就是3D UI?

我们先暂时放下这个话题,粗略的看下我们最常见的UI变革,系统UI的变革:

UI的变革

图3:计算机UI从无到有的发展变化

1 最早的计算机系统是没有UI的,他是命令式的操作界面。用户所有的操作都必须依靠键入命令,例如:运行“打开文件夹”这个操作,必须键入命令“CD”,列出文件夹内容则需要键入“Dir”;

2 时间进入1983年,Apple的 Lisa OS ,此时已经引入了鼠标的操作,一切都变得不一样,我们的电脑发生了新奇的变化,不用去记住那些复杂的命令,打开文件夹只需要简单的鼠标点击,就可以进入,并且已经展现出文件夹的内容;

3 时间再次推移,我们看下1997年的 Mac OS System 8 ,这时已经加入不少新的技术,首先画面更精美了,不在只是单色,所有的图标更加物体化,不在只是简单的黑白线条架构起匪夷所思的线框图,所有的命令也更加图形化;

4 进入到2001年的 Mac OS X 图形更加的细致,硬件的升级导致分辨率的不断提升,所见的物体已经更为逼真,我们可以看到更多拟物化的设计,并非传统四四方方的操作界面,我们甚至可以看到垃圾筒的不断塞满,这和你现实中并无二致;

5 点开系统看下现在的系统,我们可以看到不仅仅是图形上的变化,你可以犹如真的在现实中翻页,我们可以用手指放大缩小照片,我们可以翻转它拨弄它。

3D UI的探讨

在技术的革新,界面和交互的不断进化演变,这些越来越3D化的设计和现实的交互体验说明了什么,我们回到3D UI这一话题,我们又能发现这么一个问题:“3D化界面究竟有何意义”带上这个问题我们看下早期的一些3D化界面的效果。

图4:TheSkinsFactory 为 Alienware 定制的WMP 视觉外观

在早期的界面中,只是简单的模仿3D化的效果,换句话来说,我们真正操作和使用还是停留在平面上。就如在黑板上以透视的方法画下一个立体的盒子;这只是看起来效果更好一点而已,如何能更进一步?

单纯的视觉变化只是看上去更好一点,如果要进一步的提升则需要把操作和交互带入进去,现在的设备,如 iphone、ipad、已经不是单纯的在视觉上单纯的拟物,我们可以在设备上进行推拉、移动等物理的方式直接操作内容,在目前的科技中简单的模拟物理环境已经越来越普及;看看以下的设备,他给我们提供了什么:

图5:Microsoft Surface

我们看下这样直接的操作能带来什么好处:
1 直接自然的操作方式,用户可以直接与内容进行互动,关注用户的当前需要完成的任务,在界面中保持最少数量的可见控件,减少用户对内容直接操作时可能出现的干扰。

2  除了与人交互,也可以与实物交互。在虚拟世界和现实世界建立了联系。充分整合发挥现实世界的操作自然等优势与虚拟世界的智能等优势。
回到之前的问题“3D化界面究竟有何意义”,显而易见的,3D技术是模拟现实生活中的物理或自然环境。

拟物化的设计

图6:更多拟物化的界面设计

因此3D化的界面让我们在使用操作设备上更加的接近现实;随着技术的发展,在虚拟的程序上,有足够的技术模拟现实中存在的物体,包含物体效果;拟物的好处是让用户、操作者对于程序本身的使用减少学习成本和拥有更熟悉良好的体验。3D化的设计并不只是单纯的视觉炫耀,他能让内容更加的贴近生活,未来的生活中,设备只是介质,他让内容、信息直接融入了生活。我们期待着那个时代的来临!

UE4 3DUI及曲面UI实现浅析和拓展 最近在工作中遇见了游戏场景内3Dui和曲面ui的需求,大致看了下ue4 4.27的实现方式,简单来说就是将widget渲染到一个RT上,然后将RT赋给一个动态材质,在场景代理中动态构建一个mesh并使用这个动态材质。 看看实现,首先在beginplay或者component onregister时初始化窗口,这里就用的创建2dui的方式。 void UWidgetComponent::InitWidget() { // Don't do any work if Slate is no... 阅读详情

相关推荐

UE4/5 添加3DUI界面 UMG设计

简单几步快速搭建可交互的3D UI界面,鼠标点击可触发不同控件的功能,兼顾实时性和画面效果。

shanlinhan的博客 4837

为何3D成为未来UI的趋势?沉浸感是2D无法比拟的

它可以为用户带来更加生动、逼真的视觉效果,提供更丰富、多样的交互方式和操作手段,以及更多样的信息展示和表达方式,从而提高用户的使用体验和满意度。例如,可以利用3D技术创建立体的图形、动态的效果和交互式的元素,使用户可以更直观、自然地与网页进行交互,提高用户的参与感和留存率。此外,3D还可以为网页UI和移动UI提供更多样的信息展示和表达方式。综上所述,3D界面相对于2D界面在UI领域具有更加真实、沉浸、多样、灵活的优势,能够提供更加生动、逼真、沉浸的用户体验,从而提高了用户的使用体验和满意度。

2401_82616673的博客 1646

Material UI 卡片翻转动画:3D 效果实现方案

本文的目的是帮助开发者掌握在 Material UI 中实现卡片翻转动画 3D 效果的方法。范围涵盖了从基础概念讲解到实际代码实现,再到应用场景分析等多个方面,让读者全面了解这一技术并能够在自己的项目中运用。本文首先会介绍相关的术语和核心概念,接着阐述核心概念之间的关系,然后给出核心算法原理和具体操作步骤,包括数学模型和公式。之后通过项目实战展示代码的实际应用,再探讨实际应用场景,推荐相关工具和资源,分析未来发展趋势与挑战。最后进行总结并提出思考题,还会在附录中解答常见问题并提供扩展阅读和参考资料。

小白菜的博客 450

UI设计师,再不掌握3D设计,真的混不下去了。

UI设计师也是个高度内卷的行业,以前会设计图标、 界面布局都能混个UI设计师工作,现在你再试一试,如果仅仅会这些,那就没资格当UI设计师了,世易时移,UI设计师也要与时俱进呀。

贝格前端工场的博客 2074

Android开发之Dialog的3D翻转动画实现

Android的动画系统经过多年发展,已经形成了较为完善的体系结构。从最早的补间动画(Tween Animation)到后来的属性动画(Property Animation),再到现在的ConstraintSet和MotionLayout,动画的实现方式越来越灵活、可控性也更强。除了操作标准属性,还可以使用实现自定义属性的动画效果。例如,我们可以通过来动态改变一个自定义 View 的内部属性,如透明度、形状大小等。});除了使用系统提供的插值器,我们还可以通过继承。

weixin_35307279的博客 1161

3D图像处理:动态图片翻转与翻转时间设置

本文还有配套的精品资源,点击获取 简介:3D图片翻转技术是IT行业中的关键应用,用于创造生动的视觉体验,在游戏、虚拟现实、动画和用户界面设计等领域中广泛应用。通过自封装的Java库(JAR文件),开发者能够实现图片在三维空间内的翻转,并且设置翻转动画的持续时间。本课程将探讨如何使用Java编程技术,包括Java 2D API和JavaFX库,实现矩阵变换、图形渲染,以及控制...

weixin_35886636的博客 1261

简单翻转动画演示:打造炫酷用户界面的利器

简单翻转动画演示:打造炫酷用户界面的利器 项目介绍 在现代移动应用和网页设计中,动画效果已经成为提升用户体验不可或缺的一部分。Simple flip animation demo 是一个轻量级的开源项目,专注于提供一个简单易用的翻转动画演示。通过这个项目,开发者可以快速集成翻转动画效果到自己的应用中,无论是用于卡片翻转、图片展示还是其他需要动态效果的场景,都能轻松实现。 项目技术分析 Simple...

gitblog_00517的博客 673

ugui 3D UI demo

3D UI 效果,经典款,本文件为unity4.6以上版本的ugui经典案例的一些demo,可下载直接导入unity项目学习和使用。

Android 登录3D翻转动画效果

Android 登录3D翻转动画效果

number_cmd9的博客 1854

Unity UGUI ui上显示3D模型游戏物体

助力快速利用 UGUI 完成 3D 物体在 UI 界面的显示,UnityUi显示3D物体/模型,控制物体旋转,转动全教程-超简单,游戏开发过程中,我们时长会需要把 3D 游戏对象/模型显示在 UI 界面上 例如王者荣耀上的人物选择,可以旋转、交互、控制 例如商城购买时,我们可以旋转人物,看时装效果是否令我们满意 那么我们开发者就需要做到,让UI元素来显示3D模型/游戏对象,供玩家控制使用 教程地址:https://blog.youkuaiyun.com/Chinar优快云/article/details/81058773

基于Unity3D简单UI框架

基于Unity3D和NGUI实现的简单的UI框架,实现内容如下 1.加载,显示,隐藏,关闭页面,根据标示获得相应界面实例 2.提供界面显示隐藏动画接口 3.单独界面层级,Collider,背景管理 4.根据存储的导航信息完成界面导航 5.界面通用对话框管理(多类型Message Box) 6.便于进行需求和功能扩展(比如,在跳出页面之前添加逻辑处理等) 由于package中包含了NGUI3.6.7版本所以比较大~ 介绍文章如下:http://blog.youkuaiyun.com/fredomyan/article/details/46879203

3d翻转 ios_iOS动画特效之立方体翻转

先来看看效果:下面进入正题,是时候展现真正的技术了:首先在控制器里添加一个scrollView,再在scrollView上的对应位置上添加要展示的imageView(立方体视图组),当然也可以放上其它子控制器的view实现更多功能这个随意不是重点//*******添加scrollView*******[self createScrollView];//******创建立方体视图组******[se...

weixin_39614750的博客 535

鱼眼双目测距实战:从OpenCV标定到SGBM匹配的完整流程解析

本文详细解析了鱼眼双目测距的完整流程,从OpenCV标定到SGBM匹配,涵盖标定、校正、匹配和测距四个关键阶段。通过实战经验分享,帮助开发者解决鱼眼镜头强畸变带来的测距挑战,提升测距精度至5%以内。特别适合机器人导航、自动驾驶和VR领域的开发者参考。

weixin_27298377的博客 124

仿IOS界面跳转翻转效果(Kotlin实现)

写在开头 项目中UI设计了一个仿IOS界面跳转3D翻转的效果,尼玛人家系统自带的啊。无奈只好找轮子了,看了看网上全是一个acitivity两个VIew或者两个Fragment的跳转,作为技术人的执着不想那么实现,本来没有关系的两个界面硬生生写在一个activity下不是我想要的。 先看下效果吧,看是不是你想要的,背景大白,您可以设置你想要的默认背景。 实现思路思考 1.本来打算用系...

say_from_wen的博客 1457

VSCode配置C/C++语言环境(小白专用保姆教程)(超细)

VSCode配置C/C++语言环境(小白专用保姆教程)(超细)

ITQWQ的博客 8229

【Ragflow】9.问答为什么比搜索响应慢?从源码角度深入分析

前几天看到有群友提到一个现象:Ragflow的搜索界面的问答速度很快,但聊天界面的问答速度很慢,究竟是什么原因?在深入挖掘源码之后,逐渐发现了问题的答案。

兴趣使然的创作者 2904

3D卡片翻转——rotate实现正反面对切

卡片翻转效果,大概是UI动效里最有"高级感"的一种了。你想想这个场景:用户点击一张卡片,卡片像翻扑克牌一样翻到背面,露出更多信息。再点一下,又翻回正面。整个过程有3D透视感,就像真的在翻转一张实体卡片。在HarmonyOS6 PC端应用里,这种效果特别适合用在名片展示、商品详情、设置面板切换等场景。PC端屏幕大,卡片翻转的3D效果看起来更震撼。坦白讲,我第一次做这个效果的时候觉得挺难的,后来发现核心就是rotate的一个参数——Y轴旋转。搞明白了3D旋转的原理,实现起来其实很直接。

qq_37048082的博客 3014

【pprof】简要学习教程

基本介绍 pprof 是在做性能优化前的性能分析工具。 安装: go get -u github.com/google/pprof 分析工具 go tool pprof 是命令行指令,用于分析 Profiling 数据,源数据可以是 http 地址,也可以是已经 dump 下当 profile 文件;查看模式可以命令行交互模式,也可以是浏览器模式(-http 参数)。 两种应用 服务型应用 _ "net/http/pprof" 包,专用于采集 web 服务 运行数据的分析。即在运行的服务中通过 API .

码农印象 885

CSS3实现3D旋转动画卡片翻转效果

今天我们要探讨的是如何利用CSS3的3D变换功能来实现一个动态的卡片翻转效果。希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。我们将创建一个可以翻转的卡片,当鼠标悬停在卡片上时,卡片会翻转180度。当屏幕宽度小于或等于768像素时,卡片的宽度变为100%,高度自动调整,以适应不同设备的显示需求。一个做过前端开发的产品经理,经历过睿智产品的折磨导致脱发之后,励志要翻身农奴把歌唱,,我们可以模拟光线照射在卡片上的效果,使其看起来更立体。

一个做过前端开发的产品经理,经历过睿智产品的折磨导致脱发之后,励志要翻身"农奴"把歌唱,一边打入敌人内部一边持续提升自己,为我们广大开发同胞谋福祉,坚决抵制睿智产品折磨我们码农兄弟! 2706

set_output_delay的本质

set_output_delay的本质

qq_33300585的博客 3390

Ubuntu升级遇到grub-efi-amd64-signed安装失败?3步搞定这个烦人错误

本文深度解析Ubuntu系统升级时grub-efi-amd64-signed安装失败并提示“cannot find EFI directory”错误的根本原因。该错误通常由EFI系统分区挂载异常、BIOS/UEFI引导模式不匹配或dpkg包状态死锁导致。文章提供了三步精准修复流程:首先检查并修复ESP分区挂载,其次处理dpkg依赖问题,最后针对传统BIOS系统提供适配方案,帮助用户安全彻底地解决这一常见升级难题。

r7s8t的博客 398

20个现代Web UI组件原型完全指南:打造专业级用户界面

在当今Web开发领域,创建吸引人且功能丰富的用户界面是提升用户体验的关键。GitHub加速计划的ui-element-samples项目提供了一个全面的UI组件原型集合,帮助开发者快速构建现代Web应用。本文将详细介绍这个项目的核心价值、使用方法以及精选的UI组件示例,让你轻松掌握专业级UI开发技巧。 ## 项目概述:现代Web UI组件的宝库 ui-element-samples是一个基于原

gitblog_01182的博客 350

Parasoft C++Test软件单元测试_操作指南

本文主要为使用C++TEST进行单元测试的流程性操作讲解,后续文章将以专题形式进行详细讲解,以及用一些被测函数作为示例进行实例讲解。

文章主要涉及嵌入式软件开发、测试、项目管理等,欢迎交流,共同进步。 1576

u3d中ui图片怎么旋转_UI设计:使用CSS3 3D旋转创建Cool OS X翻转效果

CSS3规范中有两种类型的转换,即2D和3D。 在之前的文章中,我们讨论了CSS3 Transform 2D 。 因此,这次,我们将研究3D空间中的变换元素,特别是在本文中,我们还将创建OSX翻转效果 。 单击下面的“查看演示”以查看最终结果。 观看演示 3D旋转语法 3D空间中的旋转基本上类似于我们之前讨论的2D。 要垂直旋转元素,我们可以用这种方式编写它。 -webki...

cune1359的博客 843

ADS电路仿真方法综述:原理与应用

在射频与微波电路设计中,精确的仿真技术是验证性能的关键。ADS(Advanced Design System)作为行业标准工具,集成了多种仿真方法,适用于不同场景。本文将系统解析瞬态分析、谐波平衡(HB)、交流分析(AC)、直流分析(DC)、S参数、大信号SP(LSSP)及包络分析的原理、实现机制与应用场景。

u014344410的博客 482

win10 跳过U8环境检测的IE WebControls.rar

win10 安装u8的时候 提示IE WebControls 不通过,这个工具可以欺骗u8的检查。 跳过U8环境检测的IE WebControls。提示导入失败后,重新检测通过。

3d翻转面

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ perspe

weixin_50736511的博客 285

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

上一篇: 【转】iPhone QQmusic设计实录
下一篇: [转]【绝对精彩】iPhone网页设计欣赏与最佳实践
yyyy1985
博客等级 码龄20年 22粉丝 52原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值