作為界面體驗(yàn)的重要組成部分，產(chǎn)品界面的動態(tài)設(shè)計也不僅僅是用來增加視覺方面的感官刺激，而更多的是影響用戶對產(chǎn)品的感知和理解。iOS平臺的動態(tài)設(shè)計，從第一代iPhone發(fā)布起即通過產(chǎn)品的動態(tài)表現(xiàn)，體現(xiàn)了界面在X、Y、Z軸之間的空間層級關(guān)系。通過iOS平臺的動態(tài)表現(xiàn)，用戶可以輕松地理解屏幕中所存在的“世界”，以及“我”在這其中所處的位置座標(biāo)。而良好的動態(tài)設(shè)計和表現(xiàn)也是2007年iPhone誕生時，讓用戶和全世界為之驚嘆的原因之一。

　　在iOS 7 beta版本發(fā)布后，我們就開始對新版本進(jìn)行解構(gòu)和研究。作為全世界最受關(guān)注的操作系統(tǒng)平臺，iOS 7對未來產(chǎn)品設(shè)計的影響是不言而喻的，因此這樣的研究學(xué)習(xí)對于產(chǎn)品設(shè)計而言是不無裨益的。在動態(tài)設(shè)計方面，我(eico創(chuàng)意總監(jiān)張卷益)與動態(tài)設(shè)計師白燁飛對已經(jīng)發(fā)布的多個beta版本進(jìn)行了分解和模擬。今天可以看到由beta版到正式發(fā)布的產(chǎn)品中，一種新的動態(tài)設(shè)計思維被加入到iOS 7的平臺，其中主要包括兩個方面：其一為以操作焦點(diǎn)為中心的動態(tài)切換，其二是以“Parallax”結(jié)構(gòu)為基礎(chǔ)的空間速率變化。

操作焦點(diǎn)為中心

在iOS 7的桌面系統(tǒng)及自帶應(yīng)用中，正式采用了被稱為集合視圖轉(zhuǎn)換(UI Collection View Transition Layout)的界面切換效果。此前iOS系統(tǒng)中不同層級間的界面切換，幾乎都是通過單一推箱子式進(jìn)行的。而在iOS 7中的集合視圖轉(zhuǎn)換，大都采用了這種以用戶操作焦點(diǎn)為中心的運(yùn)動方式，其特點(diǎn)為：集合視圖界面的運(yùn)動基準(zhǔn)點(diǎn)或線，不再單一為過去的屏幕中心或邊緣，而是將用戶的操作點(diǎn)或軸，作為界面切換運(yùn)動的基準(zhǔn)點(diǎn)或線。運(yùn)動路徑也從過去固定路徑的運(yùn)動，轉(zhuǎn)變?yōu)楦鶕?jù)操作點(diǎn)和軸進(jìn)行移動的動態(tài)模式。其意義在于進(jìn)一步將用戶的操作與界面切換過渡動態(tài)進(jìn)行銜接，引導(dǎo)用戶在不同界面的切換過程中移動視覺焦點(diǎn)。而在過去的大多數(shù)界面切換動態(tài)中，用戶不得不在每次界面切換完成后，再重新定位自己的視覺焦點(diǎn)。

　　首先可以看到，在桌面層級中，無論是點(diǎn)擊某個圖標(biāo)打開APP的啟動動態(tài)，還是打開APP文件夾的展開效果，都是以用戶的操作點(diǎn)為放大中心進(jìn)行的。然而每個區(qū)域點(diǎn)擊后的效果速率也是不同的，并且這樣的速率規(guī)則貫穿于所有的同類動態(tài)中，后文中會進(jìn)行詳解。

　　同樣的規(guī)則也體現(xiàn)在iOS 7的其他自帶應(yīng)用中。在全新設(shè)計過的日歷中，由年視圖到月視圖的切換動態(tài)，以用戶所點(diǎn)擊的具體日期為中心進(jìn)行動態(tài)放大切換，由月視圖到日視圖的過程，則是以所點(diǎn)擊的日期所在行，進(jìn)行Y軸的縱向提升。

　　在全新的相冊界面中，由年度 > 精選 > 時刻的切換動態(tài)中，照片縮略圖在不同尺寸上的的放大直至全屏查看的效果，其動態(tài)運(yùn)動軌跡也取決于用戶在屏幕上的觸摸點(diǎn)。

　　對于新版Safari的設(shè)計，操作焦點(diǎn)引導(dǎo)的設(shè)計思想主要體現(xiàn)在多窗口選擇的切換方式上。相較舊版本，新版Safari采用縱向?qū)盈B瀏覽窗口的設(shè)計方式，使用立體透視的層疊效果以更好地利用豎向屏幕空間。同時，在點(diǎn)擊選擇窗口至放大的切換效果時，以點(diǎn)擊位置作為基準(zhǔn)線進(jìn)行立體透視運(yùn)動。

　　實(shí)際上，以操作焦點(diǎn)為基準(zhǔn)的動態(tài)運(yùn)動，并不是iOS 7才出現(xiàn)的新鮮產(chǎn)物，包括在如Clear、Evernote等APP以及iOS 5的部分設(shè)計中，早已采用了類似的設(shè)計方式。但對iOS來說，從系統(tǒng)級別開始就全面引入這樣的設(shè)計理念，可以算作其誕生6年以來一次很大的進(jìn)步。

“Parallax”空間速率

以上談到的根據(jù)操作焦點(diǎn)的切換模式，是從運(yùn)動的方位軌跡上來進(jìn)行分解。而對于動態(tài)設(shè)計來說，運(yùn)動速率則是影響用戶感知的另一維度。就像是同樣的音樂曲譜，用不同的節(jié)拍速度進(jìn)行演奏，可能會出現(xiàn)催眠曲和電子舞曲這樣截然不同的效果。

iOS 7的應(yīng)用啟動動態(tài)設(shè)計中，運(yùn)動時間不僅比iOS 6多出了80%，而且在速率曲線上也有了較大的差異。下圖中的X軸代表了動態(tài)運(yùn)動的時長，Y軸則代表了運(yùn)動的速率，可以看出iOS 6的動態(tài)運(yùn)動由開始至結(jié)束過程中，其加速和減速都是較為平均的。而在iOS 7中，應(yīng)用啟動動態(tài)以更高加速度開始，到達(dá)極速后以非常平緩的減速度直至結(jié)束。這樣的運(yùn)動速率給用戶更為舒緩和放松的感受，但對于此前6年的iOS系統(tǒng)用戶來說意味著一次感知習(xí)慣的挑戰(zhàn)。

　　但除了時間和加速度曲線的變化外，iOS 7的動態(tài)速率還包含了一個全新維度，就是與其全新“Parallax”解構(gòu)相呼應(yīng)的空間速率。在WWDC 2013大會上，Apple已經(jīng)介紹了“Parallax”的界面視差空間結(jié)構(gòu)，也在整個系統(tǒng)中加入了許多針對性的設(shè)計要素。而在動態(tài)設(shè)計中，則是通過運(yùn)動速率的特殊計算模式進(jìn)行體現(xiàn)。

　　在模擬視頻中可以看出，雖然iOS 7中大多數(shù)的集合視圖動態(tài)速率曲線是相似的，但是由不同所操作點(diǎn)引發(fā)的界面動態(tài)，其速率曲線間也有著細(xì)微差異。規(guī)律是在同樣的界面動態(tài)時長下，以屏幕中心點(diǎn)作為原點(diǎn)，越靠近屏幕邊緣的操作焦點(diǎn)，越以更高的啟動速度開啟界面動態(tài)過程。

　　這樣差異化的動態(tài)速率方式，相對全部一致化的動態(tài)效果，會給人中心點(diǎn)內(nèi)容離操作者更近，屏幕邊緣離操作者相對較遠(yuǎn)的感覺。通過動態(tài)速率在用戶的感知潛意識中，構(gòu)建出一個界面中的速率空間。這樣的設(shè)計方式常見于一些縱版射擊游戲中，但在界面產(chǎn)品的設(shè)計中確實(shí)不多見。

結(jié)語

通過進(jìn)一步分析和理解，我們可以看到iOS 7設(shè)計團(tuán)隊開始從更多新的維度和深度思考界面產(chǎn)品設(shè)計。全新的iOS系統(tǒng)產(chǎn)品在未來幾年內(nèi)對用戶、產(chǎn)品以及行業(yè)都會帶來不同程度的影響。其中很多改變都讓人感到激動，特別是在許多方面的全新轉(zhuǎn)變，也將過去很多未能實(shí)現(xiàn)的設(shè)計方案變?yōu)楝F(xiàn)實(shí)。對于未來產(chǎn)品而言，在帶來新挑戰(zhàn)的同時，實(shí)際上也提供了全新的想象和施展空間。

文章來源：產(chǎn)品中國