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

随着技术发展,界面越来越简易化,二维的操作难以提供更好的交互体验,因此平面化的操作界面转向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化的设计并不只是单纯的视觉炫耀,他能让内容更加的贴近生活,未来的生活中,设备只是介质,他让内容、信息直接融入了生活。我们期待着那个时代的来临!

来源:http://cdc.tencent.com/?p=3781

时间: 2024-10-22 18:27:08

翻转吧,界面!-3D UI概述的相关文章

背水一战 Windows 10 (2) - UI: 概述, 启动屏幕, 屏幕方向

原文:背水一战 Windows 10 (2) - UI: 概述, 启动屏幕, 屏幕方向 [源码下载] 背水一战 Windows 10 (2) - UI: 概述, 启动屏幕, 屏幕方向 作者:webabcd 介绍背水一战 Windows 10 之 UI UI 设计概述 启动屏幕(闪屏) 屏幕方向 示例1.UI 设计概述UI/Summary.xaml <Page x:Class="Windows10.UI.Summary" xmlns="http://schemas.mic

android 下载 跨界面更新UI

问题描述 android 下载 跨界面更新UI 项目遇到问题,在一个activity中点击下载一堆文件,然后需要在另一个activity中的fragment中的listview中更新正在下载的item的进度. 我是使用广播加异步更新.但总觉得效率有点慢.有更好的方法吗?

Android界面效果UI开发资料汇总(附资料包)_Android

简介: Android界面效果UI开发资料汇总 1. Android_UI开发专题.rar 2. android界面效果全汇总.rar 对于Android平台的资源类android.content.res.Resources可能很多网友比较陌生,一起来看看SDK上是怎么介绍的吧,Contains classes for accessing application resources, such as raw asset files, colors, drawables, media or oth

Android界面效果UI开发资料汇总(附资料包)

简介: Android界面效果UI开发资料汇总 1. Android_UI开发专题.rar 2. android界面效果全汇总.rar 对于Android平台的资源类android.content.res.Resources可能很多网友比较陌生,一起来看看SDK上是怎么介绍的吧,Contains classes for accessing application resources, such as raw asset files, colors, drawables, media or oth

jQuery入门(19) jQuery UI概述

前面介绍了jQuery的基本用法,jQuery UI 是一套 JavaScript 函式库,提供抽象化.可自订主题 的 GUI 控制项与动画效果.基于 jQuery JavaScript 函式库,可用来建构互动式的Web应用. 它的基本功能有: 互动 拖曳(Draggable) – 让元素可以用滑鼠拖曳. 拖放 (Droppable) – 让控制项可以接受其他拖曳进来的元素. 调整大小(Resizable) – 让元素可 以调整大小. 选取(Selectable) – 提供进阶的大量元素选择功能

Domino下定制自己的WEB邮箱登录界面(UI)

我们大家都知道,domino下web邮箱的登录界面是由一个专门的表单来配置的,对于库的详细说明我也不太明白,因为我对domino开发一无所知,目前能只是通过Domino开发工具Desinger简单的对数据库编辑及修改等. 要定制Domino的登录界面,需要在Domino环境中创建domcfg.nsf数据库,创建数据库的时候,需要使用Domino自带的模板,这个模板的名字是:domcfg5.ntf,建立domcfg.nsf数据库之后,在浏览器中打开输入服务器的名称就可以访问简单的web邮箱了,但是

&amp;quot;数据结构翻转课堂&amp;quot;答疑实录——概述

[说明] 本文是<数据结构>翻转课堂在线答疑的实录,由云班课的"答疑/讨论"功能中导出数据整理而成.第一周的答疑,由于不熟悉平台的缘故,没有做到全部答复. [重要提示] 下面的内容,按时间从后往前的顺序提供,请直接到文章末尾,倒着看更顺畅. [课程内容答疑实录] 贺利坚2015-09-14 12:17:00 很多还是需要原来的知识,好多都有些忘记了.... 就是逐渐积累起来的 李宗政2015-09-14 10:57:16 分文件一开始有点蒙,后来在同学的帮助下成功了. 李哲

Windows Phone灵魂诠释:Metro UI界面完全解析

Metro在微软的内部开发名称为" typography-based design language"(基于排版的设计语言).它最早出现在微软电子百科全书95,此后微软又有许多知名产品使用了Metro UI,这包括:Windows媒体中心.Zune播放器等等.该技术已于2010年初(美国)获得Metro UI专利批准(USPTO).Metro UI最新的应用是windows phone 7智能手机系统,并将应用于未来的Windows 8.Office 和 Xbox 360产品中.  

《Unity 3D NGUI 实战教程》一2.5 创建第一个UI

2.5 创建第一个UI Unity 3D NGUI 实战教程 2.5.1 创建一个2D UI 制作UI时,首先我们要创建UI的"根".在Unity顶部NGUI菜单中选择Create,然后选择2D UI,如图2.25所示. 创建完成后,我们能看到图2.26所示的景象,在Scene窗口中,NGUI自动生成了一个名为UI Root的物体,其中带有一个Camera作为子物体. 这个新生成的Camera,是NGUI生成的专门用来渲染UI的相机,当我们生成NGUI的UI Root时,就自动将生成的