正如我們?cè)诖蠖鄶?shù)雷同的寫(xiě)字樓中很容易迷失方向，但在很多全新設(shè)計(jì)的Shopping Mall或古代庭院中卻很容易辨識(shí)自己的位置和目的地，優(yōu)秀的建筑室內(nèi)設(shè)計(jì)不僅采用指示標(biāo)識(shí)對(duì)人們進(jìn)行引導(dǎo)，還能夠通過(guò)空間結(jié)構(gòu)以及獨(dú)特的“韻律”來(lái)讓人們與建筑產(chǎn)生空間共鳴。

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

　　在iOS 7 beta版本發(fā)布后，我們就開(kāi)始對(duì)新版本進(jìn)行解構(gòu)和研究。作為全世界最受關(guān)注的操作系統(tǒng)平臺(tái)，iOS 7對(duì)未來(lái)產(chǎn)品設(shè)計(jì)的影響是不言而喻的，因此這樣的研究學(xué)習(xí)對(duì)于產(chǎn)品設(shè)計(jì)而言是不無(wú)裨益的。在動(dòng)態(tài)設(shè)計(jì)方面，我(eico創(chuàng)意總監(jiān)張卷益)與動(dòng)態(tài)設(shè)計(jì)師白燁飛對(duì)已經(jīng)發(fā)布的多個(gè)beta版本進(jìn)行了分解和模擬。今天可以看到由beta版到正式發(fā)布的產(chǎn)品中，一種新的動(dòng)態(tài)設(shè)計(jì)思維被加入到iOS 7的平臺(tái)，其中主要包括兩個(gè)方面：其一為以操作焦點(diǎn)為中心的動(dòng)態(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í)間的界面切換，幾乎都是通過(guò)單一推箱子式進(jìn)行的。而在iOS 7中的集合視圖轉(zhuǎn)換，大都采用了這種以用戶操作焦點(diǎn)為中心的運(yùn)動(dòng)方式，其特點(diǎn)為：集合視圖界面的運(yùn)動(dòng)基準(zhǔn)點(diǎn)或線，不再單一為過(guò)去的屏幕中心或邊緣，而是將用戶的操作點(diǎn)或軸，作為界面切換運(yùn)動(dòng)的基準(zhǔn)點(diǎn)或線。運(yùn)動(dòng)路徑也從過(guò)去固定路徑的運(yùn)動(dòng)，轉(zhuǎn)變?yōu)楦鶕?jù)操作點(diǎn)和軸進(jìn)行移動(dòng)的動(dòng)態(tài)模式。其意義在于進(jìn)一步將用戶的操作與界面切換過(guò)渡動(dòng)態(tài)進(jìn)行銜接，引導(dǎo)用戶在不同界面的切換過(guò)程中移動(dòng)視覺(jué)焦點(diǎn)。而在過(guò)去的大多數(shù)界面切換動(dòng)態(tài)中，用戶不得不在每次界面切換完成后，再重新定位自己的視覺(jué)焦點(diǎn)。

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

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

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

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

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

“Parallax”空間速率

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

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

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

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

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

結(jié)語(yǔ)

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

文章來(lái)源：產(chǎn)品中國(guó)