功能性的動畫微妙,清晰,邏輯清楚,能夠減輕用戶認知負擔,建立更好的人機交互體驗。而且,它還可以賦予界面生命力。
動畫通過改變切分元素,改變它們的形狀和大小賦予頁面活力。你應該利用功能性動畫來讓切換變得更加流暢自然,把切換更加合理,幫助用戶理解內容層次。
成功的動畫設計應該具備以下幾個特質:
1.響應式的
視覺反饋在界面設計中非常重要,因為對于用戶來說這符合他們的心理預期。在現實生活中,按鈕,開關都是會給出相應反饋的,這是他們所期待的事物運行的模式。
用戶界面應該快速準確地響應用戶輸入,并且展示新頁面或者新元素和觸發(fā)它們的元素之間的關系。
2.關聯的
將引起變化的按鈕或元件與變化之后的界面聯系起來。這種關聯背后的邏輯是為了讓用戶能夠更好地理解頁面布局上發(fā)生的變化以及變化的原因。
下面是兩種菜單呼出動畫。在第一個例子中,菜單的出現離觸發(fā)按鈕很遠,打破了這種關聯關系。
在第二個例子中,菜單從按鈕的右上角彈出,直接與觸發(fā)點聯系起來了。
另一個例子是,按鈕在點擊之后發(fā)生了功能變化?!安シ拧卑粹o點擊之后變成“暫?!本褪且粋€很常見的例子,這種變化讓用戶很容易理解兩個功能之間的關聯性:點擊“播放”功能之后“暫停”功能啟用。但這種切換必須是連續(xù)的才有意義。
3.自然的
避免突然的切換。任何一個動畫都應該是自然的。在物理世界中,一個物體的加速和減速是受它的質量和表面摩擦力影響。同樣,開始或停止在界面上也不會自動發(fā)生,而是需要某種力量去推動。
下面這個例子中,用戶點擊了列表中的一個項目來放大查看它的詳細信息。在展開的過程中,小卡片通過一個弧線運動到它的目的地,在上升的過程中,慢慢減速直到停下來,這個交互過程是自然的。
4.有目的的
動畫的特殊性決定它通常都是交互過程中的焦點,沒有任何靜態(tài)的圖片或者文字可以跟它媲美。一個好的動畫可以幫助用戶順暢地銜接到下一個頁面。
在用戶無法判斷下一步將發(fā)生什么的時候,動畫可以很好地緩解這個盲區(qū),至少可以指出即將發(fā)生事情的方向,讓用戶覺得新內容的出現不至于那么突兀。
Mac系統(tǒng)在最小化窗口的時候用了“神奇效果”的動畫,把窗口的兩種狀態(tài)很好地銜接在一起。
另一個很好的例子是父頁面和子頁面之間的切換。當用戶選擇列表或者卡片中的一個項目放大查看它的詳細信息的時候,讓用戶可以保留父頁面的情況下查看子頁面信息。
5.快速的
當頁面元素在不同位置之間移動或者切換自身狀態(tài)的時候,變化的速度要足夠快,讓用戶感覺不到等待,但是也要足夠慢讓用戶完全理解。所以這個時間尺度要把握好。
不能讓動畫速度過慢導致一些不必要的延遲。
動畫速度要快讓用戶感覺不到等待。
讓切換時間縮短,因為用戶會經??吹竭@些切換。保證切換動畫時間在300ms以下。
6.清晰的
切換動畫不宜在同一個APP中做太多,因為當很多元素都在界面上移動的時候用戶會暈。
切換動畫應該要清晰,簡單,連續(xù)。切換動畫的原則就是“少即是多”。我們應該聚焦于切換動畫對用戶來說的實際意義來設計。
總結
綜上所述,動畫不是隨機的,每一個動畫背后都應該有特定的目的。不管你的APP事趣味型的,游戲型的,還是嚴肅的,使用動畫的時候都請注意以上幾個原則,它可以幫助你提供一個清晰快速流暢的用戶體驗。
用心設計,對每一個細節(jié)都保持敏銳是你取得成功的關鍵。