詳解 iOS 7 中的動態焦點設計思想 精選

引用本文由eico design 創意總監張卷益撰寫。從專業設計師的角度，解讀剛剛正式發布的iOS 7 中的動態焦點設計思想。 eico design 的動態設計們還對iOS 7 的全新動態設計進行了高速模擬和分解（下方視頻），將Parallax 空間動態中的速率曲線進行了分析整理，以幫助設計師和產品人員更好的理解其中的設計思想和改變。

正如我們在大多數雷同的寫字樓中很容易迷失方向，但在很多全新設計的Shopping Mall 或古代庭院中卻很容易辨識自己的位置和目的地，優秀的建築室內設計不僅採用指示標識對人們進行引導，還能夠通過空間結構以及獨特的“韻律”來讓人們與建築產生空間共鳴。

與之相似的是在產品界面的設計中，隨著功能和界面數量級的不斷增加，用戶是否能理解自己所處的“位置”並且清楚的判斷下一個“十字路口”該如何行進，是作為產品易用性設計的重要評價標準。換句話說，容易使用戶“迷路”的界面產品是具有很大缺陷的。


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


在iOS 7 beta 版本發布後，我們就開始對新版本進行解構和研究。作為全世界最受關注的操作系統平台，iOS 7 對未來產品設計的影響是不言而喻的，因此這樣的研究學習對於產品設計而言是不無裨益的。

在動態設計方面，我與eico 動態設計師白燁飛對已經發布的多個beta 版本進行了分解和模擬。今天可以看到由beta 版到正式發布的產品中，一種新的動態設計思維被加入到iOS 7 的平台，其中主要包括兩個方面：其一為以操作焦點為中心的動態切換，其二是以“Parallax”結構為基礎的空間速率變化。

操作焦點為中心
在iOS 7 的桌面系統及自帶應用中，正式採用了被稱為集合視圖轉換（UI Collection View Transition Layout）的界面切換效果。此前iOS 系統中不同層級間的界面切換，幾乎都是通過單一推箱子式進行的。
而在iOS 7 中的集合視圖轉換，大都採用了這種以用戶操作焦點為中心的運動方式。其特點為：集合視圖界面的運動基準點或線，不再單一為過去的屏幕中心或邊緣，而是將用戶的操作點或軸，作為界面切換運動的基準點或線。運動路徑也從過去固定路徑的運動，轉變為根據操作點和軸進行移動的動態模式。其意義在於進一步將用戶的操作與界面切換過渡動態​​進行銜接，引導用戶在不同界面的切換過程中移動視覺焦點。而在過去的大多數界面切換動態中，用戶不得不在每次界面切換完成後，再重新定位自己的視覺焦點。


首先可以看到，在桌面層級中，無論是點擊某個圖標打開APP 的啟動動態，還是打開APP 文件夾的展開效果，都是以用戶的操作點為放大中心進行的。然而每個區域點擊後的效果速率也是不同的，並且這樣的速率規則貫穿於所有的同類動態中，後文中會進行詳解。

同樣的規則也體現在iOS 7 的其他自帶應用中。在全新設計過的日曆中，由年視圖到月視圖的切換動態，以用戶所點擊的具體日期為中心進行動態放大切換，由月視圖到日視圖的過程，則是以所點擊的日期所在行，進行Y 軸的縱向提升。



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


對於新版Safari 的設計，操作焦點引導的設計思想主要體現在多窗口選擇的切換方式上。相較舊版本，新版Safari 採用縱向層疊瀏覽窗口的設計方式，使用立體透視的層疊效果以更好地利用豎向屏幕空間。同時，在點擊選擇窗口至放大的切換效果時，以點擊位置作為基準線進行立體透視運動。

實際上，以操作焦點為基準的動態運動，並不是iOS 7 才出現的新鮮產物，包括在如Clear、Evernote 等APP 以及iOS 5 的部分設計中，早已採用了類似的設計方式。但對iOS 來說，從系統級別開始就全面引入這樣的設計理念，可以算作其誕生6 年以來一次很大的進步。

“Parallax”空間速率
以上談到的根據操作焦點的切換模式，是從運動的方位軌跡上來進行分解。而對於動態設計來說，運動速率則是影響用戶感知的另一維度。就像是同樣的音樂曲譜，用不同的節拍速度進行演奏，可能會出現催眠曲和電子舞曲這樣截然不同的效果。
iOS 7 的應用啟動動態設計中，運動時間不僅比iOS 6 多出了80%，而且在速率曲線上也有了較大的差異。下圖中的X 軸代表了動態運動的時長，Y 軸則代表了運動的速率，可以看出iOS 6 的動態運動由開始至結束過程中，其加速和減速都是較為平均的。而在iOS 7 中，應用啟動動態以更高加速度開始，到達極速後以非常平緩的減速度直至結束。這樣的運動速率給用戶更為舒緩和放鬆的感受，但對於此前6 年的iOS 系統用戶來說意味著一次感知習慣的挑戰。


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


以下是我們的動態設計師對iOS 7 的全新動態設計進行了高速模擬和分解：

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


這樣差異化的動態速率方式，相對全部一致化的動態效果，會給人中心點內容離操作者更近，屏幕邊緣離操作者相對較遠的感覺。通過動態速率在用戶的感知潛意識中，構建出一個界面中的速率空間。這樣的設計方式常見於一些縱版射擊遊戲中，但在界面產品的設計中確實不多見。

結語
通過進一步分析和理解，我們可以看到iOS 7 設計團隊開始從更多新的維度和深度思考界面產品設計。全新的iOS 系統產品在未來幾年內對用戶、產品以及行業都會帶來不同程度的影響。其中很多改變都讓人感到激動，特別是在許多方面的全新轉變，也將過去很多未能實現的設計方案變為現實。對於未來產品而言，在帶來新挑戰的同時，實際上也提供了全新的想像和施展空間。

資料來源：ifanr