iOS 7中的動態焦點設計思想

發表於2013-09-12

正如我們在大多數雷同的寫字樓中很容易迷失方向,但在很多全新設計的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
<embed>

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

253957405828845568_original

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

 

結語

 

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

相關文章