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

张骋

摘 要 互联网硬件设施的拓展，富互联网应用将被运用于更多的平台与应用项目。在3D技术进入之前，图形人机界面设计逻辑，是“窗像单点界面”形式。而当3D技术引入GUI设计后，从三方面都打破了传统平面构成的习惯：Z轴带来的景深，观测角度的非单一性，网页GUI设计中的尺寸特殊性。灵活使用各类元素布局组成，是3D时期GUI设计寻求理念革新的路线。

关键词 富互联网应用；人机交互；界面设计

中图分类号 TP37 文献标识码 A 文章编号 2096-0360（2018）19-0031-02

自从中国电信在北京启动“宽带中国·光网城市”工程，标志着中国互联网进入一个新的时期。伴随着基础互联网硬件设施的拓展，富互联网应用（下文简称RIA，Rich Internet Applications）将被运用于更多的互联网平台与应用项目。

传统互联网内容基于图片与文字混排的HTML规范。它在互联网高速发展的过去十几年中被证明已经越来越不能满足互联网用户日益成长的体验需求。这一矛盾被美国 Macromedia公司称之为“体验问题”（Experience Matter）。其应对方式，则是以Macromedia Flash（2008年因被收购更名为Adobe Flash）平台为代表的RIA。

1 RIA的现状

作为RIA领跑人的Flash分别于1996年、1999年和2003年引入了视频、音频、画布标签（2D绘图和动画）三项主要功能，在互联网上通过Flash Player插件可以为用户方便快捷地提供在线影视、音乐和动画等多媒体内容。建立于2005年的美国YouTube网站依靠Flash技术为用户提供在线视频，在短短2年中月访客人数突破3 000万。数据表明，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 User Interface）设计基于传统计算机软件的设计逻辑，即“窗像单点界面”（下文简称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样式。

参考文献

[1]王洁.Flash无客户端网络游戏的设计与实现[D].厦门：厦门大学，2008.

[2]李晓蕙.网页游戏中界面设计的研究和应用[D].上海：上海交通大学，2008.

[3]陈实.基于web-3D的网络虚拟现实中的交互设计[C]//中国自然科学博物馆协会、浙江省現代设计法研究会.全国首届数字（虚拟）科技馆技术与应用学术研讨会论文集.中国自然科学博物馆协会、浙江省现代设计法研究会：2007：6.

[4]王倩.基于Flash网页游戏的研究与设计[D].北京：北京交通大学，2010.

[5]赵静.互联网3D技术的实现方式[J].信息与电脑（理论版），2010（1）：108.