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

标签: 视觉设计 3D 操作界面 概述 | 发表时间:2011-04-27 12:26 | 作者:CDCer CHAGALL
出处:http://cdc.tencent.com

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

(本文出自腾讯CDC博客: http://cdc.tencent.com/?p=3781)

相关 [界面 3d ui] 推荐:

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

- 雄杰 - 所有文章 - UCD大社区
随着技术发展,界面越来越简易化,二维的操作难以提供更好的交互体验,因此平面化的操作界面转向3D 空间维度发展,我们又迎来的了新的时代,一场革命性新的交互体验;本次分享,作为3D UI的概述,以下就整体的来了解下3D UI. 一般而言,3D也称为三次元、三维空间;日常生活中可指由长、宽、高、3个维度所构成的空间,而且日常生活中使用“三维空间”一词,常常是指三维的欧几里得空间;3D 这个空间几何概念加上UI人机交互界面这个概念组成新的词汇3D UI  ,那么,什么是3D UI,如何理解3D UI.

[GreaseMonkey] Google Reader UI Tweek - 优化 GR 界面

- 夏天天下 - FeedzShare
来自: sfufoet's blog - FeedzShare  . 发布时间:2011年06月26日,  已有 2 人推荐. 根据 Shawn 的脚本修改的. 最近 GR 改变了代码,只好自己折腾一下. 隐藏 logo、导航栏等等不必要的东西,缩小了列表项目的行距等等. FF 3.6.18 测试通过,FF 5 不行的话,我就没办法了.

UI设计:界面微质感探究

- - 互联网的一些事-关注互联网产品管理,交流产品设计、用户体验心得
  GUI的历史一直都离不开隐喻,而这种设计手段的优劣已经有越来越多的辩论. 那么时至今日,这种设计方法是否已经过时?我们是否有更好的方式. 这些疑惑不禁引发了笔者的思考,因此也就有了下文.   隐喻作为一个主流的设计方式广泛运用在界面设计中,它的历史可以追溯到GUI的创造,经典的例子便是桌面、文件夹、垃圾桶… 这些老生常谈概念.

UI界面设计中的工具,软件,网站等

- 临峰 - 设计之外 - UCD大社区
都是一些UI界面与设计使用的元素,软件,网站等. 内容很丰富,适合网页设计师,用户体验设计师,界面设计师,产品设计师,JS前段开发,手机产品设计,ipad产品设计等使用. Lumzy是一个网站应用和原型界面制作工具. 使用Lumzy,您可以轻松创建UI模型并即时发送到客户电脑中. Lumzy还具有团队协作编辑工具.

5 个界面效果很炫的 JavaScript UI 框架

- paul - 博客园新闻频道
  Web 开发很简单,Web 应用的 UI 开发却很复杂,如果能够利用一些成熟的 UI 框架可以大大的减少开发的复杂度. 本文向你介绍 5 款界面效果很不错的 JS 框架.   ExtJS 主要用来开发RIA富客户端的AJAX应用,主要用于创建前端用户界面,与后台技术无关的前端ajax框架. 因此,可以把ExtJS用在.Net、 Java、Php等各种开发语言开发的应用中.

【界面设计】一组UI元素分享

- - 爱午茶 创意烘培坊
今天午茶分享一组 UI元素. 包括各式各样的按钮,导航条,进度条等. 希望能给从事 UI设计的朋友们一些帮助. 版权所有, 爱午茶 创意烘培坊 如果您喜欢爱午茶,请前往官方站点支持. 【每周站点】IMDB站点UI设计. 【素材】Leopard UI源文件. 【界面设计】Skimmer UI设计欣赏.

推荐两个iOS应用UI界面分享网站

- - 天涯海阁|Web2.0Share
最近在微博上分享了这两个 iOS上UI的分享网站,很受欢迎. 目前移动互联网越来越受关注,移动互联网的从业者应该对于这类网站会很喜欢,这两个网站是很好的研究iOS应用UI设计的素材,推荐给所有移动互联网从业人员. 一、Patterns of Design. Patterns是一个分享ios应用UI界面的网站,专注于分享iOS应用UI界面的细节,按照设计元素进行分类,按照iOS常用功能对各类UI进行分类展示.

10个优秀APP应用界面UI素材

- - 软矿
iOS 7正式版终于发布了,虽然依然是好怕和砖头参杂,但该升级的还是去升级了. 其实就个人想法,iOS 7做得已经够完美了. 随着iOS 7正式版的发布,相信也会引来新的一波APP更新,一方面是应对iOS 7的新特性,另一方面则是要与iOS 7界面风格保持一致. 下面是小编从 365design.me整理出一些比较优秀的APP界面PSD模板,如果你是一名APP UI设计师,希望这些素材对你有所帮助,.

携程移动端 UI 界面性能优化实践

- - IT瘾-geek
作者简介:南志文,携程研发经理,曾负责App整体技术框架的架构研发与实践,现负责酒店业务的迭代更新及App架构、性能优化. 曾先后就职于阿里巴巴、巨人网络. 《程序员》杂志 10 月刊,作者发表了. 《携程移动端架构演进与优化之路》文章第一部分:架构演进. 紧接着,作者基于前文对携程移动端性能优化实践进行了总结.