<em id="09ttv"></em>
    <sup id="09ttv"><pre id="09ttv"></pre></sup>
    <dd id="09ttv"></dd>

        • Loading設計思路分享

          2018-5-21    博博


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

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          Loading設計思路分享

          Loading作為一個常見,并且帶有排他性的動畫,已經被各路大神表現的淋漓盡至。那么如何在眾優秀作品下,做出一個性化的Loading動畫?

          Loading設計思路分享

          Loading種類:

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

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

          By Piotr Adam Kwiatkowski

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

          Loading設計思路分享

          無狀態類的Loaing以菊花為代表,通常都是一組可以無限循環播放的動畫。

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

          我們的App需要一個無狀態的Loading。

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

          Loading設計思路分享

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

          Loading設計思路分享

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

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

          為此我們搜索了一下現實中的扔球效果:

          Loading設計思路分享

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

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

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

          發現問題:小球在中心焦點位置出現明顯卡頓

          起初我們認為是速度曲線沒有調整好所導致的,但我們嘗試幾版后發現并不是這樣,最后我們發現導致這個問題的原因是路經節點問題。

          Loading設計思路分享

          調整節點

          通過調整節點后,不難發現,中心焦點處的卡頓明顯不見了

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

          看起來怪怪的。。。。。

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

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

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

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.sdgs6788.com

          存檔

          久久久久亚洲AV综合波多野结衣| 国产免费久久精品99re丫y| 亚洲午夜久久久久久久久电影网| 人人妻久久人人澡人人爽人人精品| 热99RE久久精品这里都是精品免费 | 国产精品VIDEOSSEX久久发布 | 久久综合狠狠色综合伊人| 91精品国产色综久久| 狠狠色丁香久久婷婷综合| 久久丫精品国产亚洲av不卡 | 久久久久亚洲av综合波多野结衣| 国产精品免费久久久久影院| 日日狠狠久久偷偷色综合96蜜桃| 久久久久久人妻无码| 久久综合鬼色88久久精品综合自在自线噜噜| 久久中文字幕人妻熟av女| 狠色狠色狠狠色综合久久| 97精品久久天干天天天按摩| 中文字幕日本人妻久久久免费| 亚洲精品国产成人99久久| 久久婷婷五月综合色高清| 日批日出水久久亚洲精品tv| 91性高湖久久久久| 久久99精品久久久久久久不卡| 久久综合九色综合网站| 无码8090精品久久一区| 久久国产精品99久久久久久老狼| 精品久久久久久中文字幕大豆网| 精品久久久久久无码免费| 久久亚洲精品无码观看不卡| 办公室久久精品| 久久亚洲国产中v天仙www| 久久国产免费观看精品| 国产亚洲欧美精品久久久| 国内精品久久久久影院一蜜桃| 久久久久国产精品嫩草影院| 久久婷婷五月综合97色直播| 精品国产乱码久久久久久人妻 | 久久久久国产一区二区| 久久亚洲国产精品成人AV秋霞 | 久久夜色精品国产噜噜麻豆|