李平瀟　葉根軍

摘要：擬物化設(shè)計(jì)風(fēng)潮剛過，視差設(shè)計(jì)成為當(dāng)前手機(jī)界面設(shè)計(jì)的新趨勢：本文通過分析視差設(shè)計(jì)和擬物化設(shè)計(jì)的典型特征，論證了視差設(shè)計(jì)也是一種擬物化設(shè)計(jì)?？偨Y(jié)了擬物化視差手機(jī)界面設(shè)計(jì)趨勢的形成原因，以及表現(xiàn)形式。

關(guān)鍵詞：擬物化 視差設(shè)計(jì) 手機(jī)界面設(shè)計(jì)

一、視差設(shè)計(jì)和擬物化設(shè)計(jì)的定義

視差設(shè)計(jì)定義：視差設(shè)計(jì)是指計(jì)算機(jī)圖形用戶界面中多個(gè)視覺元素以不同的速度移動，在二維的界面上形成三維立體的運(yùn)動效果，給觀者帶來更強(qiáng)烈的視覺沖擊力，一般出現(xiàn)在界面切換轉(zhuǎn)場時(shí)。視差設(shè)計(jì)早在1982年，一款名為Moon Patrol的紅白機(jī)游戲上就出現(xiàn)了，歷經(jīng)在電腦界面設(shè)計(jì)20余年不溫不火的發(fā)展，隨著近年來以Iphone為代表的觸屏智能手機(jī)的風(fēng)行，這種設(shè)計(jì)手法又獲得了設(shè)計(jì)師和用戶的青睞。

所謂擬物化設(shè)計(jì)就是在計(jì)算機(jī)圖形用戶界面設(shè)計(jì)中，根據(jù)軟件產(chǎn)品自身特點(diǎn)，通過模擬真實(shí)世界已有的物品，現(xiàn)實(shí)生活中的場景，實(shí)物的質(zhì)感，以及人們的日常行為習(xí)慣等，為用戶營造身臨其境的交互方式，使產(chǎn)品的設(shè)計(jì)更富有品質(zhì)和情感，用戶能夠更快的理解它們的運(yùn)行方式，使用起來也就越簡單。擬物化設(shè)計(jì)最初是出現(xiàn)在模擬類游戲上，逐漸被應(yīng)用在其他軟件界面設(shè)計(jì)中，隨著移動設(shè)備硬件的迅猛發(fā)展，更大的屏幕尺寸和全新的觸摸交互方式讓擬物化設(shè)計(jì)在手機(jī)端也獲得了很大的發(fā)展空間。

二、擬物化的視差設(shè)計(jì)

擬物化設(shè)計(jì)最重要特征是對現(xiàn)實(shí)的模仿和再現(xiàn)，視差設(shè)計(jì)遵循了這一特征。從視差界面的視覺元素構(gòu)成和表現(xiàn)方式進(jìn)行分析可以得到：視差界面視覺元素由背景層和前景層共同構(gòu)成。背景層占據(jù)界面大部分空間，處于界面底部，以圖片形式出現(xiàn)，移動速度慢距離短或者不移動，一般情況下只有一個(gè)視覺元素；前景層位于界面的視覺中心，背景層之上，視覺元素?cái)?shù)量不定（可能是一個(gè)，也可能是多個(gè)），移動速度快距離遠(yuǎn)。視差界面通常是單頁布局，所有視覺元素在一個(gè)超出幾倍屏幕尺寸的頁面上，通過背景層和前景層不同的速度移動，在二維的界面中形成三維的多層次景深。

在現(xiàn)實(shí)生活中，旅客坐在高速運(yùn)行的火車上，通過窗外看到的風(fēng)景和視差界面幾乎是一致的：天空和遠(yuǎn)山幾乎靜止不動；稻田和農(nóng)屋較快的移動；而火車旁的樹木和電桿則飛速地向后退去。在這個(gè)場景中，車窗是屏幕，天空和遠(yuǎn)山是背景層，稻田、農(nóng)屋、樹木和電桿是前景層，通過火車的高速運(yùn)動，旅客從窗口“屏幕”欣賞到有景深的界面。

從這個(gè)例子可以看出，視差界面設(shè)計(jì)完全是現(xiàn)實(shí)生活場景的再現(xiàn)，是一種擬物化設(shè)計(jì)。

三、擬物化的手機(jī)端視差界面設(shè)計(jì)

1.視差界面設(shè)計(jì)在手機(jī)端發(fā)展的優(yōu)勢條件

長久以來，視差界面設(shè)計(jì)在電腦端一直不溫不火，作為一個(gè)小眾的設(shè)計(jì)風(fēng)格存在。歸其原因，主要是受界面開發(fā)技術(shù)和交互方式的限制。自互聯(lián)網(wǎng)誕生以來，界面開發(fā)經(jīng)歷了文本、表格、Flash和CSS四個(gè)時(shí)期。文本和表格時(shí)期，受制于硬件技術(shù)、開發(fā)語言的限制，這時(shí)的界面視覺效果較為簡單，以“靜”為主，視差設(shè)計(jì)主要用于游戲界面；進(jìn)入Flash時(shí)期，界面可以呈現(xiàn)更豐富的動畫和交互效果，但受制于鍵鼠交互方式、Flash兼容性和后臺管理方式限制，這時(shí)的視差設(shè)計(jì)應(yīng)用范圍有一定擴(kuò)大，一般應(yīng)用于Flash動畫和一些小眾個(gè)性化網(wǎng)頁；隨著CSS時(shí)代的來臨，界面更新更加敏捷，且響應(yīng)速度更快，并且電腦硬件技術(shù)和網(wǎng)絡(luò)帶寬不斷提高，界面設(shè)計(jì)正處于由“靜”向“動”轉(zhuǎn)變中，這為擬物化的手機(jī)視差界面設(shè)計(jì)發(fā)展創(chuàng)造了硬件條件。

2007年，iPhone引領(lǐng)了智能手機(jī)革命，創(chuàng)造性地將手機(jī)交互方式由按鍵轉(zhuǎn)變?yōu)槭种赣|控，用戶對手機(jī)的控制絕大多數(shù)是通過手指在觸摸屏幕表面滑拉和點(diǎn)擊完成。很多應(yīng)用軟件界面跳轉(zhuǎn)跟隨用戶手指運(yùn)動方向——從屏幕側(cè)邊進(jìn)入切換，這種界面跳轉(zhuǎn)方式恰好和視差界面視覺元素的運(yùn)動方向吻合。與鍵鼠操控界面相比，手指觸控界面是一種擬物化的交互方式。用戶在觸控屏幕上滑拉手指的時(shí)候，一個(gè)交互動作是可以任意停止和返回，手機(jī)界面也可以跟隨著這個(gè)動作作出相應(yīng)的變化。例如，向左滑拉到的時(shí)候手指可以停止不動或者滑拉回右邊，這時(shí)界面中的前景層和背景層也可以跟隨手指的動作向左、停止或向右進(jìn)行差速運(yùn)動，這種控制方式和反饋提供了鍵鼠操控所不能及的體驗(yàn)，增強(qiáng)了用戶操控的積極性，這為擬物化的手機(jī)視差界面設(shè)計(jì)發(fā)展創(chuàng)造了交互優(yōu)勢。

2.手機(jī)視差界面的表現(xiàn)形式

結(jié)合以上兩個(gè)有利因素，視差界面設(shè)計(jì)在手機(jī)端得到了長足發(fā)展，用戶可以自由地控制界面跳轉(zhuǎn)和內(nèi)容切換。隨著視差設(shè)計(jì)的不斷深入，這種設(shè)計(jì)方式有了三種不同的表現(xiàn)形式：

1）固定背景層

這種形式出現(xiàn)時(shí)間最早，當(dāng)界面內(nèi)容切換時(shí)，背景層不動，前景層按一定速度移動。這種表現(xiàn)形式一般運(yùn)用在手機(jī)系統(tǒng)桌面、看書軟件、設(shè)置、聊天窗口等需要用戶專注于內(nèi)容的界面。典型界面是lOs系統(tǒng)桌面，當(dāng)用戶手指左右滑動切換屏幕圖標(biāo)時(shí)，背景層不動，屏幕上所有圖標(biāo)形成一個(gè)前景層進(jìn)行左右移動（圖1）。

2）同—方向移動的背景層和前景層

在固定背景層表現(xiàn)形式上發(fā)展而來，內(nèi)容切換時(shí)，背景層以較慢的速度移動，前景層以較快速度和背景層相同方向移動，所有視覺元素同時(shí)移動，同時(shí)停止。這種表現(xiàn)形式一般用在系統(tǒng)桌面、聊天窗口、網(wǎng)頁等界面。如：Android系統(tǒng)手機(jī)桌面，當(dāng)桌面圖標(biāo)移動時(shí)，桌面壁紙以較慢的速度同時(shí)移動，使界面內(nèi)容變化時(shí)更加生動（圖2）。

3）多方向差速前景層

表現(xiàn)方式最為生動，界面中具有多個(gè)前景層視覺元素，且按不同運(yùn)動方向移動，一般用于營造界面氣氛，增加界面生動性。如uc瀏覽器9.0版歡迎頁，背景層不動，前景層有文字、圖例和輔助圖形三種，按照不同的移動方向和移動速度，用戶在切換內(nèi)容的過程中，文字和圖例的慢速移動了解uc瀏覽器核心賣點(diǎn)，通過輔助圖形快速移動感受瀏覽器暢快的運(yùn)行速度（圖3）。

四、結(jié)語

綜上所述，擬物化的手機(jī)視差界面設(shè)計(jì)相對于傳統(tǒng)界面，在頁面跳轉(zhuǎn)和內(nèi)容切換時(shí)能提供更豐富的視覺效果，更生動、高效地傳遞信息，并增加用戶操控的積極性。但在設(shè)計(jì)時(shí)，應(yīng)避免視覺形式大于內(nèi)容、前景層視覺元素?cái)?shù)量和運(yùn)動方向過多，繁雜的視差效果反而成為用戶閱讀信息的障礙。