iOS 7UI視覺動態設計思考

瀏覽: 人氣

Posted on 13 9 月, 2013 by A-MO

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





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

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

在iOS 7 beta版本發布後,我們就開始對新版本進行解構和研究。作為全世界最受關注的操作系統平台,iOS 7對未來產品設計的影響是不言而喻的,因此這樣的研究學習對於產品設計而言是不無裨益的。在動態設計方面,我(eico創意總監張卷益)與動態設計師白燁飛對已經發布的多個beta版本進行了分解和模擬。今天可以看到由beta版到正式發布的產品中,一種新的動態設計思維被加入到iOS 7的平台,其中主要包括兩個方面:其一為以操作焦點為中心的動態切換,其二是以“Parallax”結構為基礎的空間速率變化。

操作焦點為中心

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

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

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

253955255337881600_original

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

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

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

“Parallax”空間速率

以上談到的根據操作焦點的切換模式,是從運動的方位軌跡上來進行分解。而對於動態設計來說,運動速率則是影響用戶感知的另一維度。就像是同樣的音樂曲譜,用不同的節拍速度進行演奏,可能會出現催眠曲和電子舞曲這樣截然不同的效果。

iOS 7的應用啟動動態設計中,運動時間不僅比iOS 6多出了80%,而且在速率曲線上也有了較大的差異。下圖中的X軸代表了動態運動的時長,Y軸則代表了運動的速率,可以看出iOS 6的動態運動由開始至結束過程中,其加速和減速都是較為平均的。而在iOS 7中,應用啟動動態以更高加速度開始,到達極速後以非常平緩的減速度直至結束。這樣的運動速率給用戶更為舒緩和放鬆的感受,但對於此前6年的iOS系統用戶來說意味著一次感知習慣的挑戰。
253955950661210112_original

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

::__IHACKLOG_REMOTE_IMAGE_AUTODOWN_BLOCK__::11play_big

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

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



A-MO麥冬溪