解析 iOS 7 的動態焦點設計思維

本文從設計師的角度解讀 iOS 7 的動態焦點設計思維,並對 iOS 7 全新的動態設計做了模擬和分解,並會製成曲線圖,幫助讀者、設計師們理解其中的設計思維和改變。
評論
評論

本文由 eico design 創意總監張卷益撰寫。從專業設計師的角度,解讀 iOS 7 中的動態焦點設計思維。eico design 的動態設計師們還對 iOS 7 的全新動態設計進行了高速模擬和分解(請參考下方影片),將 Parallax 空間動態中的速率曲線做了分析整理,以幫助設計師和參與產品的人理解其中的設計思維和改變。

正如我們在很多類似的辦公大樓中容易迷路,但是在很多全新設計的購物廣場或古代庭院中卻很容易辨識自己的位置和目的地,優秀的建築室內設計不僅採用指示標誌引導人們,還能夠以空間結構和獨特的「韻律」來讓人們與建築產生空間共鳴。

同樣的,在產品界面的設計中,隨著功能和界面數量級不斷增加,使用者是否理解自己所處的「位置」並且清楚的判斷下一個「十字路口」該怎麼走,是作為產品易用性設計的重要評價標準。換句話說,常常害使用者「迷路」的界面產品具有很大的缺陷。

02

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

03

在 iOS 7 beta 版本發表後,我們就開始對新版本進行解構和研究。作為全世界最受關注的作業系統平台,iOS 7 對未來產品設計的影響不言而喻。

在動態設計方面,我與 eico 動態設計師白燁飛對已經發表的多個 beta 版本做了了分解和模擬。我們可以看到一種新的動態設計思維被加入 iOS 7 的平台,其中主要包括兩個方面:其一是以操作焦點為中心的動態切換,其二是以「Parallax」結構為基礎的空間速率變化。

操作焦點為中心

在 iOS 7 的桌面系統及內建 app 中,正式採用被稱為集合視圖轉換(UI Collection View Transition Layout)的界面切換效果。此前 iOS 系統中不同層級間的界面切換,幾乎都是以單一的平推是式進行。

而在 iOS 7 中的集合視圖轉換,大都採用了這種以使用者操作焦點為中心的運作方式。其特點為:集合視圖界面的運動基準點或線,不再只是過去的螢幕中心或邊緣,而是將使用者的操作點或軸線,作為界面切換運動的基準點或線。運動路徑也從過去固定路徑的運動,轉變為根據操作點和軸進行移動的動態模式。這樣的意義在於,進一步將使用者的操作與界面切換間的過渡動態做銜接,引導使用者在不同界面的切換過程中移動視覺焦點。而在過去大多數界面切換動態中,使用者不得不在每次界面切換完成後,再重新定位自己的視覺焦點。

041

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

051

同樣的規則也適用 iOS 7 其他內建 app。全新設計過的行事曆 app,由年份轉換到月份的切換動態,以使用者所點擊的日期為中心進行動態放大切換,由月份到單一日期的過程,則是以所點擊的日期所在位置,做 Y 軸的縱向提升。

061

在全新的相片 app 界面中,由年份 -> 選集 -> 時刻的切換動態中,照片縮圖在不同尺寸上的放大直到全螢幕的效果,動態運動軌跡取決於使用者在螢幕上的觸控點。

081

新版 Safari 的設計,操作焦點引導的設計思維主要呈現在分頁選擇的切換方式上。相較舊版本,新版 Safari 採用縱向層疊瀏覽頁面的設計方式,使用立體透視的層疊效果,善加利用直立螢幕空間。同時,在點擊選擇頁面至放大的切換效果時,以點擊位置作為基準線進行立體透視運動。

091

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

101

「Parallax(視差)」空間速率

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

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

119

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

122-1

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

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

131

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

結語

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


精選熱門好工作

Data Analyst / Data Scientist

Omlet Arcade 美商歐姆雷特
臺北市.台灣

獎勵 NT$15,000

後端工程師

AsiaYo.com
臺北市.台灣

獎勵 NT$15,000

資深商品開發人員(Sr. Product Development)_台北、上海

科毅研究開發股份有限公司
新北市.台灣

獎勵 NT$15,000

評論