上面顯示的界面使用了一個內置的效果來從空白狀態過渡到信息填充的屏幕。通過每個元素單獨的動畫,它迫使用戶在其動畫出現在屏幕上時一次只關注一個元素。內置的一步一步類型的動畫讓設計師可以調整用戶使用過程中每一秒的的視覺焦點。這也比簡單沒有任何動畫地顯示這個界面或者一次對整個界面進行動畫要更加有視覺吸引力。這種類型動畫不好的一個方面是它展示界面和信息給用戶花費了太多時間。這會引起反感,特別是當它一次次地發生的時候。動畫時間和遲緩感知會在之后進行討論。
這是一個很好的關于動畫如何讓用戶適應并幫助他們理解app背后更大的邏輯模型的例子。當動畫漸出主界面以及動畫漸入地圖時保持圖標不動讓地圖圖標看起來像兩個面板之間的視覺支點。當用戶點擊地圖圖標時,地圖會承接上一頁,之前的界面收縮到背后但依然可見。用戶不會覺得他們在移動時迷失在應用之中并且能夠理解主要特性是如何工作的。
Facebook Paper中所有的過渡和新展現的信息都使用了很多2D和3D動畫效果。在第一個面板中,當點擊地球圖標時,Notifacations表單會從圖標下方滑出,給用戶一種它總是折起在地球圖標下方,等待被顯示的印象。還有,通過圖標,它加強了一種特定的心理模型給用戶,暗示這個額外的界面總是可以通過地球圖標獲取,無論他們在應用的那個地方。
在第三個面板中,當你從底部滾動視圖中滑出一塊占據整個屏幕的內容時,它會滑到當前內容的頂部來提醒用戶他們可以通過一次簡單的點擊回到他們之前的地方。當整個界面淡出并且文章詳細視圖淡入時,用戶可能忘記他們之前在app中的位置,所以Paper的多種過渡總是用來在用戶的腦中定位導航流。
Paper使用了非常棒的動畫框架Pop,Facebook將其發布為開源工程供所有開發者來使用。我們之后會深入研究Pop。
在這個概念下Apple手環的動畫,你可以看到每個界面之間的過渡都是流動性的,并且物體在內物體出現在界面上之前移出。每個物體移動得好像被之前運動中的物體拖出了屏幕。因為顯示區域太小了,并且在水平方向上,使用動作來建立用戶對app的心理模型非常重要。這里你可以看到音樂控件在時鐘的左邊并且在其下方是更改歌曲的功能區。在時鐘的右邊是一系列的app。所以即使在屏幕的左邊沒有任何導航線索(比如返回按鈕),過渡動畫也給了你關于產品及其界面的整體信息結構的感覺。
查看完整合集:https://github.com/Cloudox/Motion-Design-for-iOS