iOS 7 中的動態焦點設計及 Parallax 空間動態中的速率曲線分析

「Parallax」空間速率

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

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

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

iOS 7 中的動態焦點設計及 Parallax 空間動態中的速率曲線分析以下是我們的動態設計師對 iOS 7 的全新動態設計進行了高速模擬和分解:

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

iOS 7 中的動態焦點設計及 Parallax 空間動態中的速率曲線分析

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

結語

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

 iOS 7 中的動態焦點設計及 Parallax 空間動態中的速率曲線分析

延伸閱讀:

好壞美醜,開發者眼中的 iOS 7

iOS 7 新功能,甩甩頭就能控制 iPhone 與 iPad 裝置專業設計師告訴你 iOS 7 不為人知的設計細節

iOS 7 Beta 評測:酷炫立體介面、實用功能一次看

ifanr
作者

ifanr依托於中國移動互聯網的發展大潮,用敏銳的觸覺、出色的內容,聚焦 TMT 領域資訊,迅速成為中國最為出色的新銳科技Blog 媒體。

使用 Facebook 留言
Dragon
1.  Dragon (發表於 2013年9月11日 23:25)
一直感覺的出來有所不同。沒想到還可以做如此深度的剖析。
殊不知設計團隊是不是也是這樣在分析該如何設計想要表達出來的感覺。
T
2.  T (發表於 2013年9月12日 02:55)
如果UI設計有大家想的這麼單純那我們就不用這麼辛苦了…
要知道蘋果的動態設計一直都沒有其他廠商比得上
就是因為沒公司肯花這麼多錢管這麼多使用者的感受啊
平凡人的想法當然都是啊我能動能點就好,看起來順不順暢哪有差
╯-__-)╯ ╩╩
王新鹏
3.  王新鹏 (發表於 2022年4月15日 11:22)
原文中的空间速率这个总结的观点:“這樣差異化的動態速率方式,相對全部一致化的動態效果,會給人中心點內容離操作者更近,螢幕邊緣離操作者相對較遠的感覺。”个人认为刚好相反。因为点击屏幕中心icon时的初始速度是0,而屏幕边缘的icon初始运动速度就很快,这样会给人一种点击屏幕边缘icon运动更快的感觉,界面可以更快的展示到眼前,而屏幕中心的icon则会相对较慢的展示。你们也可以再回去看一下那个动画视频(https://www.youtube.com/watch?v=U518th5uqZ0),他们的分析做的很不错,我估计是撰稿的时候笔误了吧。
發表回應
謹慎發言,尊重彼此。按此展開留言規則