拟物化的手机视差界面设计

摘要：拟物化设计风潮刚过，视差设计成为当前手机界面设计的新趋势：本文通过分析视差设计和拟物化设计的典型特征，论证了视差设计也是一种拟物化设计。总结了拟物化视差手机界面设计趋势的形成原因，以及表现形式。

关键词：拟物化 视差设计 手机界面设计

一、视差设计和拟物化设计的定义

视差设计定义：视差设计是指计算机图形用户界面中多个视觉元素以不同的速度移动，在二维的界面上形成三维立体的运动效果，给观者带来更强烈的视觉冲击力，一般出现在界面切换转场时。视差设计早在1982年，一款名为Moon Patrol的红白机游戏上就出现了，历经在电脑界面设计20余年不温不火的发展，随着近年来以Iphone为代表的触屏智能手机的风行，这种设计手法又获得了设计师和用户的青睐。

所谓拟物化设计就是在计算机图形用户界面设计中，根据软件产品自身特点，通过模拟真实世界已有的物品，现实生活中的场景，实物的质感，以及人们的日常行为习惯等，为用户营造身临其境的交互方式，使产品的设计更富有品质和情感，用户能够更快的理解它们的运行方式，使用起来也就越简单。拟物化设计最初是出现在模拟类游戏上，逐渐被应用在其他软件界面设计中，随着移动设备硬件的迅猛发展，更大的屏幕尺寸和全新的触摸交互方式让拟物化设计在手机端也获得了很大的发展空间。

二、拟物化的视差设计

拟物化设计最重要特征是对现实的模仿和再现，视差设计遵循了这一特征。从视差界面的视觉元素构成和表现方式进行分析可以得到：视差界面视觉元素由背景层和前景层共同构成。背景层占据界面大部分空间，处于界面底部，以图片形式出现，移动速度慢距离短或者不移动，一般情况下只有一个视觉元素；前景层位于界面的视觉中心，背景层之上，视觉元素数量不定（可能是一个，也可能是多个），移动速度快距离远。视差界面通常是单页布局，所有视觉元素在一个超出几倍屏幕尺寸的页面上，通过背景层和前景层不同的速度移动，在二维的界面中形成三维的多层次景深。

在现实生活中，旅客坐在高速运行的火车上，通过窗外看到的风景和视差界面几乎是一致的：天空和远山几乎静止不动；稻田和农屋较快的移动；而火车旁的树木和电杆则飞速地向后退去。在这个场景中，车窗是屏幕，天空和远山是背景层，稻田、农屋、树木和电杆是前景层，通过火车的高速运动，旅客从窗口“屏幕”欣赏到有景深的界面。

从这个例子可以看出，视差界面设计完全是现实生活场景的再现，是一种拟物化设计。

三、拟物化的手机端视差界面设计

1.视差界面设计在手机端发展的优势条件

长久以来，视差界面设计在电脑端一直不温不火，作为一个小众的设计风格存在。归其原因，主要是受界面开发技术和交互方式的限制。自互联网诞生以来，界面开发经历了文本、表格、Flash和CSS四个时期。文本和表格时期，受制于硬件技术、开发语言的限制，这时的界面视觉效果较为简单，以“静”为主，视差设计主要用于游戏界面；进入Flash时期，界面可以呈现更丰富的动画和交互效果，但受制于键鼠交互方式、Flash兼容性和后台管理方式限制，这时的视差设计应用范围有一定扩大，一般应用于Flas和一些小众个性化网页；随着CSS时代的来临，界面更新更加敏捷，且响应速度更快，并且电脑硬件技术和网络带宽不断提高，界面设计正处于由“静”向“动”转变中，这为拟物化的手机视差界面设计发展创造了硬件条件。

2007年，iPhone引领了智能手机革命，创造性地将手机交互方式由按键转变为手指触控，用户对手机的控制绝大多数是通过手指在触摸屏幕表面滑拉和点击完成。很多应用软件界面跳转跟随用户手指运动方向――从屏幕侧边进入切换，这种界面跳转方式恰好和视差界面视觉元素的运动方向吻合。与键鼠操控界面相比，手指触控界面是一种拟物化的交互方式。用户在触控屏幕上滑拉手指的时候，一个交互动作是可以任意停止和返回，手机界面也可以跟随着这个动作作出相应的变化。例如，向左滑拉到的时候手指可以停止不动或者滑拉回右边，这时界面中的前景层和背景层也可以跟随手指的动作向左、停止或向右进行差速运动，这种控制方式和反馈提供了键鼠操控所不能及的体验，增强了用户操控的积极性，这为拟物化的手机视差界面设计发展创造了交互优势。

2.手机视差界面的表现形式

结合以上两个有利因素，视差界面设计在手机端得到了长足发展，用户可以自由地控制界面跳转和内容切换。随着视差设计的不断深入，这种设计方式有了三种不同的表现形式：

1）固定背景层

这种形式出现时间最早，当界面内容切换时，背景层不动，前景层按一定速度移动。这种表现形式一般运用在手机系统桌面、看书软件、设置、聊天窗口等需要用户专注于内容的界面。典型界面是lOs系统桌面，当用户手指左右滑动切换屏幕图标时，背景层不动，屏幕上所有图标形成一个前景层进行左右移动（图1）。

2）同―方向移动的背景层和前景层

在固定背景层表现形式上发展而来，内容切换时，背景层以较慢的速度移动，前景层以较快速度和背景层相同方向移动，所有视觉元素同时移动，同时停止。这种表现形式一般用在系统桌面、聊天窗口、网页等界面。如：Android系统手机桌面，当桌面图标移动时，桌面壁纸以较慢的速度同时移动，使界面内容变化时更加生动（图2）。

3）多方向差速前景层

表现方式最为生动，界面中具有多个前景层视觉元素，且按不同运动方向移动，一般用于营造界面气氛，增加界面生动性。如uc浏览器9.0版欢迎页，背景层不动，前景层有文字、图例和辅助图形三种，按照不同的移动方向和移动速度，用户在切换内容的过程中，文字和图例的慢速移动了解uc浏览器核心卖点，通过辅助图形快速移动感受浏览器畅快的运行速度（图3）。

四、结语

综上所述，拟物化的手机视差界面设计相对于传统界面，在页面跳转和内容切换时能提供更丰富的视觉效果，更生动、高效地传递信息，并增加用户操控的积极性。但在设计时，应避免视觉形式大于内容、前景层视觉元素数量和运动方向过多，繁杂的视差效果反而成为用户阅读信息的障碍。