2016-12-3 資深UI設計者
如果您想訂閱本博客內容,每天自動發(fā)到您的郵箱中, 請點這里
今天我要分享的是關于加載動畫的知識體系及簡單的制作方法,至于特殊場景總結不全之處,還請批判指正。
大綱如下:
一、加載動畫存在的意義
二、加載動畫的使用場景
三、前段開發(fā)實現動畫的方法
四、工作中輸出加載動畫的方法與步驟
五、制作加載動畫時的注意事項
六、加載動畫的流行趨勢
眾所周知,app服務器在加載數據的時候需要用戶等待一段時間,為了緩解用戶等待過程中的焦慮情緒,設計者可以采用加載動畫的方式來緩解用戶的等待時間,使整個等待過程變得更加友好、流暢。
一個好的加載動畫分為兩個層次,第一個層次是滿足用戶的基本心理預期,緩解等待的焦慮;第二個層次是要給出用戶一定的驚喜,甚至讓用戶對加載動畫抱有期待、好奇的心理。
這里我們暫時先只討論第一個層次的內容,因為這已經能夠滿足大多數app的需求了,至于如何做出讓用戶驚喜的加載動畫(如餓了么、京東的加載動畫),我們可以另外討論。
**
查閱大量關于加載的資料后,發(fā)現很多教程與文章都是從樣式的維度來分類的,今天我們換個維度,從使用場景出發(fā),來打造屬于我們自己的加載動畫設計體系。
加載動畫的常見使用場景一共分為以下5種:
1.下拉刷新加載
2.切換新頁面數據加載
3. 頁面上拉加載
4. 頁面局部加載
5. 啟動頁加載
我們還是一個一個來了解:
1. 下拉刷新加載
下拉刷新可以讓用戶在看到本地數據的同時去重新加載數據,以確保用戶可以看到的內容。
下拉加載一般分為兩種形式:動畫加文字(如今日頭條下拉加載樣式)、純動畫(如網易郵箱)。
如下圖:
2. 切換新頁面數據加載
當切換到新頁面時,常常會有加載數據的時候,這也是加載動畫使用最多的場景,市面上的加載樣式也是多種多樣,如:白屏加載、toast加載、進度條加載、導航欄加載等等。
3. 頁面上拉加載
當一個頁面數據量過大時,服務器不會一次性將內容全部加載,而是加載一部分,只有當用戶向上拉動頁面時,才會加載更多,如下圖:
上拉加載的樣式不會過于復雜,一般采用比較簡單的轉圈動畫來實現。
4. 頁面局部加載
常見的局部加載場景有視頻列表、加載圖片的占位圖等,如下圖:
5. 啟動頁加載
為了緩解用戶啟動app時的等待時間,有些app會將啟動頁設計成一個加載動畫,如京東、百度貼吧等,不僅使等待時間變得有趣,并且增加了品牌記憶,達到了一箭雙雕的效果。
1. 調取系統(tǒng)自帶樣式
系統(tǒng)自帶樣式比較簡單,iOS系統(tǒng)的樣式是一個菊花,安卓系統(tǒng)的是一個轉圈的圓線。
2. 設計師直接提供gif動圖
這種提供gif的方法,一般適用于比較大場景的加載動畫,如啟動頁。
需要注意的是原生系統(tǒng)是不支持gif控件的,iOS需要調取網頁的gif,而安卓需要調取播放器才能實現動動畫的展現,所以如果不是特殊場景,一般不推薦使用gif控件來實現動畫。
3. 前端自己將動畫用代碼寫出來
最常用的一種方式就是讓前端哥哥自己將動畫寫出來,當然這時候你還是要做出一個示范動畫, 并告知動畫的規(guī)則是怎樣的(下文會詳細說明)。
講了這么多內容其實只是讓大家對整個加載動畫的全局有個認知,在執(zhí)行過程中有理有據,避免無從下手的情況出現。換句話說,在了解以上內容后,至少我們知道了某種場景下該做什么,至于怎么做,我用一個下拉刷新的動畫實例來具體講解一下輸出加載動畫的過程。
1. 確定使用場景與實現方法
使用場景:下拉刷新
實現方式:前端代碼實現
2. 設計師制作下拉刷新動畫,并透徹理解動畫機制
動畫如下圖(參考QQ郵箱下拉加載):
制作過程中,我們可以優(yōu)先考慮加入品牌元素在動畫中,如品牌logo、品牌顏色、品牌名稱,這些都可以融入到加載動畫當中。
3. 輸出加載動畫的規(guī)范(如下圖):
首先你需要將動畫本身的規(guī)則寫出來,如我們目前制作的這三個小球,一個循環(huán)內平均有6個關鍵節(jié)點,每個節(jié)點需要0.3秒,也就是循環(huán)一次需要1.8秒,我們將其動作全部分解輸出給開發(fā),并將圓球的大小、顏色等信息注明,這樣開發(fā)看到規(guī)則后就會一目了然,保證動畫的還原度。
然而這僅僅只是做了動畫本身的規(guī)則,我們還需要考慮動畫與頁面間的關系,例如下圖是一個下拉松開手指后,頁面正在加載的狀態(tài),我們不僅要考慮正在加載的狀態(tài),還要考慮其下拉過程中可能會發(fā)生的情況。
總的來說,我們需要標明動畫加載時,動畫與導航欄的間距,與內容區(qū)的間距,且下拉過程中哪個間距是可變的、哪個間距是不可變的等等,甚至還需要考慮可拉動的最大距離是多少,當然拉動時的彈性是系統(tǒng)自帶的,一般不予考慮。
只有將這些內容全部考慮清楚并輸出規(guī)范,才算是一個合格的下拉加載動畫。
這里我舉的例子是動畫中沒有文案的情況,當有文案時,考慮的內容會更多,如:一個下拉過程可能會有“下拉加載”、釋放加載、正在加載這三個狀態(tài),而當加載完成后,還需有反饋狀態(tài)告訴用戶有多少條新的信息,如新聞類的下拉刷新。如下圖:
大家有興趣可以自行了解一下,這里就不予過多解釋了。
1. 不論你的動畫有多好看、多吸引眼球,如果成本太高或者過于復雜都是無法落地的,所以我們要遵循簡單實用的原則來進行設計,不要過度設計。
2. 其實在開發(fā)哥哥那里,他們的時間計算單位是毫秒(1秒等于1000毫秒),也沒有動畫里“幀”的概念,所以如果你能用代碼的語言(毫秒)與開發(fā)哥哥溝通,他會更喜歡你的,萬一是個開發(fā)妹妹,你懂的!
3. 這一條我相信不只是在做加載動畫時需要考慮的,所有的交互視覺場景,都需要考慮這條原則:任何交互動作所導致的狀態(tài)都需要考慮正常狀態(tài)與異常狀態(tài)。拿加載動畫來說,我們需要考慮加載成功的反饋與加載失敗的反饋,并將之注明在輸出規(guī)范中(雖然有些場景的加載的確沒有反饋狀態(tài),但是在考慮全局時,這些都是我們前期必須思考的內容)。
**
對于加載動畫的流行趨勢,不論是交互還是視覺,國外很多主流app都是非常簡潔并且無文字提示的,下面是部分截圖:
所以我大膽預測了一下,以后app的加載動畫都應該遵循越來越簡潔的設計原則,突出內容,去掉無用的、過渡的形式設計。也許無文字提示的加載動畫確實是一個流行趨勢!
以上就是目前階段我對于加載動畫的一些總結與分析,希望能對于你有一點啟發(fā)作用,如果你有不同的見解,歡迎與我一起交流,大家共同進步。
歡迎關注作者的微信公眾號:菜心設計鋪
藍藍設計( m.820esy.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務