研究 | 向蘋果學習動效
來自專欄漸變集
4 人贊了文章
OS產品體驗中，交互動效是極其重要的一個板塊。
在交互體驗中有兩個關鍵要素：目的和動作。在APP的體驗里，設計師會更多考慮目的性：因為在APP的設計場景中，核心是讓多個任務在一個APP內流暢統一，設計師要為非常多的任務場景設計。比如我要橫滑返回上級、我要下拉刷新，這些是否是用戶容易理解的任務場景。
但對於OS產品而言，OS是APP的舞台，宏觀而言交互OS設計師需要完成一個相對通用的交互動作設計，一個單一動作或者動效是否體驗優秀就成為相對突出的問題，即動作性。後文重點討論的是交互動效的動作性。
什麼是好的交互動效
之前優化過系統關鍵場景動畫，我們特別專註於「速度」，快就是一切；但似乎光是快又少了點什麼：缺乏「靈魂」而且相對「生硬」。
這個部分始終沒有得到特別理性的歸納。速度快？柔和？靈動？到底如何定義流暢？WWDC2018-803演講給了一個很好的角度，因為手勢已經取代了傳統的IO設備，
傳統的鍵盤按鍵其實給予手指真實的反饋，就是一塊塑料+一個彈簧的反饋；但在人與屏幕直接交互的時代，流暢的觸屏交互就要消除動作的主體與客體的斷裂感。
這裡試著重新理解並且歸納幾條可復用的原則。
蘋果的原則
一. 讓界面保持「高動態」
演講里提到：人的大腦是處在「動態變化」的狀態中，界面「動態」才能保證在交互過程中更為符合人對事物的認知。
- 減少延遲：10ms的延遲對用戶而言都會產生明顯的脫離感，即手指和界面元素是斷裂的；
- 同一個啟動動作觸發多種交互：如果同一個啟動動作只能完成一個目的，就需要用戶建立「動作-目的」這對一一對應的認知記憶；而比如iPhoneX里，home bar上推之後你可以繼續返回桌面，也可以進入多任務；這讓用戶開始動作同時思考目的，而非先決定一個目的再選擇動作，更符合人日常行為的思考習慣；
- 位移而非幀率決定卡頓感：極端例子，高幀率但是一個元素運行了10個屏幕的距離也會也會產生卡頓感，流暢和電影相同，是由於視覺暫留造成的。
二. 「預判」每個動作的目的
這看上去是一句廢話，但徹底貫徹卻很難。因為這裡強調的不是一個宏觀任務的「目的」，比如「下拉」是為了「刷新」；而是微觀動作層面的目的，比如「快速下拉」預期的位移要比「普通下拉」預期的位移更遠，強調的是狹義的「目的地」。
- 輕動作，強反饋：通過計算動作的位置、速度、加速度和力量可以推理出用戶交互的一個預期軌跡，適當放大有利於創造體驗上的輕便感；
- 通過「目的」而非「狀態」給予反饋：演講中例子是FaceTime的小窗口移動；不是通過判斷用戶手指離開屏幕時的位置，而是計算用戶動作預期的軌跡終點，給予最後的位置判斷反饋。白話說我做一個投籃的動作，預期「目的」是籃球在籃筐處，如果籃球仍在投籃手附近就會產生不流暢感，當然這裡涉及到演講第二部分里提及的動量計算；
三. 符合「現實邏輯」就會感受真實
界面的運動符合真實世界物體運動的邏輯，會讓用戶感受更真實，反之則會產生斷裂感。
- 保持界面的空間邏輯：界面向左滑入就應該向右滑出，符合預期且不用學習；
- 保持交互元素的重量感：演講中的例子是滑動照片的速度要比滑動APP（多任務切換）更快；本質上是用於對於不同信息密度的元素處理的效率不同，因而需要不同的處理時間，對應到客體上便是「重量感」；
- 保持交互元素與界面的真實交互邏輯：就像投籃，投籃手動作結束後，籃球保持動量減速運行，並且與籃板（邊界）產生交互後自然反饋，處理界面也應該遵循：一個自然的動作-保持動量運動-優雅地摩擦減速-不知不覺地暫停。
Ending
- 原視頻（英文原聲無中字）屬於必看範疇
Designing Fluid Interfaces - WWDC 2018 - Videos - Apple Developer
- 蘋果偉大之處，可能就在於設計「柜子的貼牆面」，魔鬼隱藏在細節中
- 另共勉一句關於借鑒的思考
Good artist copy，Great artist steal
- 近半年時間很少，專欄爭取持續更新，下篇主題是語言
本文為原創，轉載和打賞無需告知請肆意妄為：），轉載請註明出處
題圖&文中圖片來自：WWDC 2018-803 Designing Fluid Interfaces
推薦閱讀：