文章

富互联网应用中的3D网页界面研究

2018-12-05张骋

177阅
互联网硬件设施的拓展,富互联网应用将被运用于更多的平台与应用项目。而引入GUI设计后,从三方面都打破了传统平面构成的习惯,是3D时期GUI设计寻求理念革新的路线。

    自从中国电信在北京启动“宽带中国·光网城市”工程,标志着中国互联网进入一个新的时期。伴随着基础互联网硬件设施的拓展,富互联网应用(下文简称RIA,Rich?Internet?Applications)将被运用于更多的互联网平台与应用项目。传统互联网内容基于图片与文字混排的HTML规范。它在互联网高速发展的过去十几年中被证明已经越来越不能满足互联网用户日益成长的体验需求。这一矛盾被美国?Macromedia公司称之为“体验问题”(Experience?Matter)。其应对方式,则是以Macromedia?Flash(2008年因被收购更名为Adobe?Flash)平台为代表的RIA。

1 RIA的现状作

    为RIA领跑人的Flash分别于1996年、1999年和2003年引入了视频、音频、画布标签(2D绘图和动画)三项主要功能,在互联网上通过FlashPlayer插件可以为用户方便快捷地提供在线影视、音乐和动画等多媒体内容。建立于2005年的美国YouTube网站依靠Flash技术为用户提供在线视频,在短短2年中月访客人数突破3000万。数据表明,RIA有着明确且广泛的市场需求和长远的发展空间,它的出现为互联网进入宽带时代的内容展示与用户体验,以及多媒体内容需求提供了良好的解决途径。

2 RIA中的3D技术

    随着RIA市场的开拓,越来越多互联网影音技术平台进入这一领域。如美国微软公司的Silverlight,SUN公司的Java以及HTML5规范等。面对竞争,各种RIA平台将目光投向新技术与新展现形式。其中网页3D内容则是近几年来RIA的重要拓展点,也被视为未来RIA的核心组成部分。

    2011年7月,美国Adobe公司发布旗下RIA浏览器插件Flash?Player?11版本,开始支持GPU(Graphic?Processing?Unit,图形处理器)渲染加速,为互联网平台上实现3D内容展示降低了技术实现成本并提供了软件支持环境。

    在RIA中,网页浏览器环境的互联网内容,可以使用3D技术提供以围绕Z轴延展的、具有景深的、更为丰富的视觉内容。与目前互联网已有的2D多媒体内容相比,3D技术不仅仅可以让诸如3D游戏等内容产品无缝登陆互联网,还可以改变并优化如传统图片文字等内容的展现形式与交互方式,从内容提供和人机交互两方面提升用户的互联网体验。

3 RIA中3D展示内容的界面设计变化

    在3D技术进入互联网应用之前,互联网产品(如基于HTML规范的网站、信箱、社区等)的图形人机界面(下文简称GUI,Graphic?UserInterface)设计基于传统计算机软件的设计逻辑,即“窗像单点界面”(下文简称WIMP,Windows,Icons,Menus,and?a?Pointer)。WIMP中的GUI设计逻辑符合平面设计中构成规律,即点、线与面等视觉符号在一个由X轴和Y轴定位的平面中,其疏密、面积、位置和相互关系通过形成的布局。视觉符号的面积与位置,由于都集中于一个平面上的缘故,只能在X轴与Y轴两个维度上发生变化。在3D技术进入GUI设计前,设计师通常通过调节元素面积大小变化、增添阴影及半透明效果、调整色彩中的色相或饱和度变化等艺术手段,来表现网页布局中视觉元素的层次关系。这种层次关系在平面构成中,通过模拟现实中的人眼对于世界的空间认知,用于划分不同权重视觉元素的主次关系,同时丰富视觉体验。而当3D技术引入GUI设计后,从三方面都打破了传统平面构成的习惯。

    1)Z轴带来的景深。由于在3D场景中存在着Z轴,平面构成中用于模拟Z轴延展的视觉表现工作机制被打破。内容和视觉符号部署在3D场景中后,用户的观看视角只需要在模拟场景中的Z轴上发生纵深变化,所有元素都将产生可识别的视觉差异。因此无需通过复杂的设计即可实现等同甚至超越传统层次关系表现的视觉效果。

    2)观测角度的非单一性。在平面构成中,用户的观看角度呈单一性,展示内容只存在唯一的最佳观看角度(通常为最佳观看距离的正前方)。而在3D场景中,用户可以自由选择观看角度。因而GUI如不能与场景一并发生变化,则无法高度契合地与展示内容匹配。在3D软件Autodesk?Maya中,3D场景中菜单可以依据鼠标右键在不同区域点击,从而触发不同的功能子项。这一设计可以让软件使用者在平面显示器上通过2D交互形式在复杂3D场景环境中进行操作。同时也是一个良好的3D?GUI实现形式。但是行业软件的操作高学习成本,使得这一GUI设计并不能直接应用于一般的内容展示。

    3)网页GUI设计中的尺寸特殊性。与其他3D技术使用领域相比,网页GUI设计在布局尺寸上也有其特殊之处。HTML网页的布局基于左上角0点坐标和中轴线对齐两种形式。而使用其中任何一种对齐方式,网页在不同分辨率环境下,总宽度都无法被确定;在内容多寡不同的页面中,总长度无法确定。而且在RIA环境中,由于目前的多媒体信息需要依靠各类网页浏览器外挂插件来实现其功能。这类插件作为网页浏览器的一个功能组件,其最终视觉尺寸受限于HTML语法下相关参数的可定义范围。加之美术成本等因素,RIA中3D内容的GUI往往较不易与网页其他布局元素契合。

4 依据展示内容与用户视角而变化的RIA 3D内容GUI设计

    基于以上三点RIA中的3D?GUI设计与平面GUI的差异性,前端设计师需在保持GUI工作机制和效果的前提下,有针对地调整和重构适用于网页环境下的3D?GUI布局方式。

    网页3D?GUI由于视觉尺寸的不确定性,传统WIMP布局下的,基于用户“由上至下,由左至右”的信息权重布局实行应被适当打破。GUI布局应形成模块化,沿着用户视角焦点分散分布,以适应不同尺寸网页浏览器下的用户视觉体验。模块化GUI还允许视觉符号脱离布局框架结构,与展示内容进一步结合。在3D环境中,由于活动摄影机位的存在,可随观看视角位置变化而变化的GUI符号元素可以在用户调整观看角度时改变位置,形成美感的构图形式。与展示内容结合的活动式GUI布局元素可以重建内容之间的联系。如网页设计中被大量使用的鼠标悬浮窗口,可以在不同视角下维持“鼠标悬浮——提示信息浮现”,保持悬浮窗口不会遮蔽下层内容,可以解决2D?GUI布局在同一平面无法相互覆盖,必须缩减尺寸或是减少内容的矛盾。

    3D技术能优化展示内容,改变传统GUI设计逻辑。在3D环境中,可以使用立体图形作为图标。立体图标的使用,可以相较于2D图标更为具象地为GUI设计意图所服务。

    在不同的3D?RIA运用中,GUI还可以有差异地使用任何可借助的元素。如Unity3D公司的3D射击游戏《Angry?Robots》中,取消了玩家生命值提示条的GUI,改为用各种警示物颜色变化来告知玩家当前生命值变化。另外用立体眼镜带来立体视野环境,将影视作品的字幕投射在观众的立体视野中,而不覆盖影视作品本身。灵活使用各类元素作为布局组成形式,是3D时期GUI设计寻求理念革新的路线。

5 结束语

    RIA的3D化作为互联网的又一次内容革命,与之相匹配的GUI作为重要因素,更好地直观有效的传达内容。顺应新时期新内容新交互关系新展现形式的GUI设计,需以打破常规平面构成思路为手段,重新构架符合具有空间感和立体感的,模拟用户真实视角的GUI样式。

责任编辑:邓忠帅
本文来源于互联网,e-works本着传播知识、有益学习和研究的目的进行的转载,为网友免费提供,并以尽力标明作者与出处,如有著作权人或出版方提出异议,本站将立即删除。如果您对文章转载有任何疑问请告之我们,以便我们及时纠正。联系方式:editor@e-works.net.cn tel:027-87592219/20/21。
读者评论 (0)
请您登录/注册后再评论