Loading設計思路分享

2018-5-21    博博


UI妹兒 2018-05-04 10:44:21

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

Loading設計思路分享

Loading作為一個常見,并且?guī)в信潘缘膭赢嫞呀?jīng)被各路大神表現(xiàn)的淋漓盡至。那么如何在眾優(yōu)秀作品下,做出一個性化的Loading動畫?

Loading設計思路分享

Loading種類:

1.狀態(tài)類(進度條):通常數(shù)據(jù)量很大,客戶端已知加載量,并能根據(jù)當前加載速度計算出何時加載完成。

狀態(tài)型的Loading以進度條類為基準,可以為用戶提供預期時間,多伴隨百分比進度出現(xiàn)。進度條的形式以線性的形式出現(xiàn),已知總量,降低用戶對期待時間的感受。無聊的等待會讓人厭煩,作為一個UI設計師需要關注每一個細節(jié),尤其是用戶的情緒并將引導到加載后的頁面。

By Piotr Adam Kwiatkowski

2.無狀態(tài)類(菊花):通常數(shù)據(jù)量比較小,客戶端無法預知加載量。

Loading設計思路分享

無狀態(tài)類的Loaing以菊花為代表,通常都是一組可以無限循環(huán)播放的動畫。

無狀態(tài)類的Loaing如有需要可以做的特別一些:https://dribbble.com/search?q=loading

我們的App需要一個無狀態(tài)的Loading。

我始終相信設計的直覺很重要,抓住直覺的爆發(fā)點,是一個成熟設計師必備的素質(zhì)。于是先按照最初的想法快速做了一版。

Loading設計思路分享

相信很多人對這個Loaing眼熟,當然,這肯定不是我們要的效果,不過在制作這Loading的時候不斷的推翻自己的想法,時而清醒時而模糊,感覺突然找到了方向但瞬間也可能煙消云散。這種不斷反復的過程中還是收獲了很多。

Loading設計思路分享

既然是無限,循環(huán),表現(xiàn)上就不能過于缺乏趣味,這個度很難把握。形式感上面設計要簡單,又要通過最直接的方法創(chuàng)造空間感,偶然間發(fā)現(xiàn)馬戲團的拋球表演。突然間有了靈感,于是就沿著這個思路開始動手設計:

我嘗試去直接模仿拋棄的運動,但是效果并不是很好,但是從Demo中可以看出,值得很入研究。

為此我們搜索了一下現(xiàn)實中的扔球效果:

Loading設計思路分享

經(jīng)過分析我們得出了第一條小球的運動路經(jīng)是一個無限的符號。

工作路經(jīng)確定后,導入C4D中進行單球運動軌跡測

由于實例中,小球會受到重力以及加速度的影響,并非勻速運動,但在實際Loading制作過程中,為了視覺效果,我們希望小球做勻速運動

發(fā)現(xiàn)問題:小球在中心焦點位置出現(xiàn)明顯卡頓

起初我們認為是速度曲線沒有調(diào)整好所導致的,但我們嘗試幾版后發(fā)現(xiàn)并不是這樣,最后我們發(fā)現(xiàn)導致這個問題的原因是路經(jīng)節(jié)點問題。

Loading設計思路分享

調(diào)整節(jié)點

通過調(diào)整節(jié)點后,不難發(fā)現(xiàn),中心焦點處的卡頓明顯不見了

為了加強透視效果,我們將球的大小和顏色進行了關鍵幀處理,這已處理增加的景深對視覺的沖擊,使得空間感更強了。

看起來怪怪的。。。。。

為了使整個運動規(guī)律更加精準,我們發(fā)現(xiàn)運動的起點距離是關鍵,不懈的追求完美的情況下,總是會有頓悟的時刻,幸運的是找到了問題的所在

三個球勻速運動的情況下,應該保證每相鄰兩個球之間路經(jīng)上的距離是相同的。

藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://sillybuy.com

存檔