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

Tab bar 設計中，有一個很重要但卻常常會被設計師們遺漏的關鍵點──tab 切換時的 「圖標動畫設計」。如這些 APP 的底部 tab 設計都使用了這一種方式（以下視頻）：

Tab bars圖標動畫的作用

精彩的圖標動畫，對整體的設計具有畫龍點睛的作用，降低 tab 切換時的枯燥感，提升操作的愉悅度和期待感。甚至可以通過 tab 的動畫設計給用戶傳達出整個 APP 設計的品牌及理念。

1. 動靜對比

動態的設計豐富了圖標更多可能性的表達，結合不同的動態效果表達出不同的情緒或情感。而除了情感的表達之外，最基礎的作用在于動態比靜態更加吸引眼球，增加視覺關注度，因此在切換 tab 時具有更強的視覺沖擊力。

2. 柔和與生硬

緩動的動效過渡，相比于無動效的設計，在 tab 切換時整體的視覺感受會更加柔和、輕量。過渡直接的反饋，容易造成生硬而不具美感。

3. 趣味的表達

由于動效的加入，我們在設計 tab 切換時會變得更加多元化，而不是單純的設計一個動作的反饋。在過渡的時間差中，可以進行很多趣味的表達。

3. 情緒代入

圖標結合表情的設計，運用動效的設計，讓整體的情緒感受更加直觀。如下圖案例，默認態與選中態通過前后的差異對比，點擊后出現的表情驚喜，具有不一樣的情緒變化。

Tab bar圖標動畫的基礎類型

動畫的設計是多樣化的，Tab bar 圖標動畫的類型實際上并沒有明確的劃分，這里主要列舉的是自己在日常瀏覽設計網站時的收集，以及個人認為比較常見的一些類型。我們可以基于這些常見類型的設計，對我們的設計進行再升華，從而提高整體設計的質感和趣味。

1. 縮放動畫

點擊后通過一定的比例 「縮放」 反饋，突出 tab 之前的變化，從而強化了 tab 操作的感知，提升對于操作區域的視覺聚焦。結合不同的縮放效果，可以呈現出不同的視覺感知，縮放動畫大致分為線性和彈性兩種類型。

線性縮放

圖標在放大或縮小的過程中，使用了勻速的動畫效果，整體動畫一步到位、干凈利落。整體視覺感知較為柔和。

彈性縮放

帶有彈性縮放的 tab 反饋，讓整體的設計更加具有趣味性，相比線性縮放也更有視覺沖擊力。圖標的運動規則：先從 0 放大到最大（數值根據實際情況設定），然后再回彈至正常大小。

2. 透明度自然過渡

讓 tab 切換之間的過渡更加自然、柔和。相比于純靜態切換只多了一層透明度變化，但卻具有完全不一樣的視覺感受。

3. 位移

位移出現的圖標會產生一定的速度感，但需要控制位移的速度，過快容易忽略中間的運動軌跡，而影響自然過渡的效果。

4. 抖動

通過圖標的左右、上下快速位移或旋轉形成，整體的動畫效果節奏較快，具有一定的速度感。情緒表達上較為俏皮。

左右抖動

點擊后，圖標反饋進行上下快速位移。建議來回位移次數不宜太多，控制在 1-2 次左右，次數太多容易顯得拖沓。

跳動的圖標

點擊切換后，圖標從底部彈起再回到初始位置，整體視覺感受具有跳動的韻律感。

晃動的圖標

旋轉抖動的圖標比上下或左右會更加具有趣味感。設定圖標的中心點或角點為旋轉軸，通過來回晃動而形成的效果。

5. 填充

切換時，默認 tab 由線性向面性的轉變。填充類型的動畫效果整體簡單、直接，直觀地表達出圖標切換前后的對應關系。關鍵點在于處理好線性與面性圖標的細節轉換。

中心填充

使用某種幾何圖形（可以是圓形或其他）通過發散放大的設計方式，結合一定的節奏韻律擴展至填滿整個圖標。

掃描填充

動畫效果從圖標的一側，通過劃動變化至填滿。

6. 畫線-線性軌跡

以線性圖標或線面圖標中的線運動為主，在設計整套圖標時，運動軌跡需要保持統一（線的初始與結束的位置/方向等）。軌跡不一致，容易導致圖標的一致性被破壞。

局部細節畫線

選擇圖標的關鍵細節或圖標的特征進行畫線設計，增強圖標的特征細節，提高圖標的記憶點。

整體畫線

與局部細節畫線基本一致，差別的點在于表達了不同的視覺感受。整體畫線從視覺感受上會相對更加飽滿。但需要根據圖標的復雜程度而定，圖標過渡復雜，可能容易造成拖沓的動畫效果。

7. 結合容器

結合不同的幾何形作為選中圖標的當前態的背景，在背景上設計出現的動畫效果。既強化了選中當前態，整體的 tab 切換的一致性也較高。

8. 元素介質

設計上結合某種圖形元素作為當前選中態，在切換時通過元素的位移、跳動等方式來達到 tab 切換的動畫效果。

Tab圖標動畫的組合形

除了以上單種類型的動畫方式外，還可以嘗試多種方式結合。通過不同的方式結合可以產生出更多的可能性，讓你的設計更加具有創意和打破常規。

1. 填充+畫線

2. 填充+抖動

3. 彈性縮放+填充

4. 元素介質+抖動

5. 位移+透明度

更多案例（來自dribbble）

總結

tab bar 的圖標動畫最大的作用在于解決切換時的枯燥與單調，我們在設計時除了單純追求動畫的變化及多樣性之外，更多需要思考的是什么樣的動畫更符合我們的設計。

本文的主旨是分享自己日?？吹降囊恍﹦赢嬓Ч?，以及對收集的內容進行的分析。實際的動畫樣式或者效果肯定遠遠不只這些，我們可以通過基礎的方法再結合自己的創意發揮出更多滿足自我設計的表達方式。

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

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

虎牙直播是以游戲直播為主的彈幕式互動直播平臺，累計注冊用戶2億，提供熱門游戲直播、電競賽事直播與游戲賽事直播，手游直播等。

最近虎牙在上市一周年之際，發布了全新的公司級LOGO，也就是為虎牙母公司設計的全新企業品牌形象系統。

新logo的造型結合大寫英文字母“H”和小寫英文“hy”，將其演化為平行空間的兩個45度對稱且平行的立面圖像。

文字logo上由“虎牙”和拼音“huya”兩部分組成，中文“虎”字也進行了筆畫的調整，將虎”與“h”筆畫末端進行了切斜收尾的處理，從而來呼應新logo的平行表現形式。

不同形式組合的新logo效果

在新logo的顏色方面，選用了比較青春具有活力，且明亮的“陽光黃”與“星云紫”。

圖形部分的延展也極具靈活性，靈活的視覺變化使品牌更具多樣性，也同時表現虎牙在數字時代的不同場景中，所呈現的多元化和創新。

圖形延展效果

再來看看，虎牙新logo應用在各種衍生產品的效果。

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

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

圖標——界面設計最重要的元素之一。

菜心經常寫關于圖標的教程和感悟，可見圖標設計在我日常工作中占了很大比重，所以我始終堅信能夠把圖標做好，也是難得的特長之一！

這里拿幾個月前做的第一版小說模塊圖標為例（目前已經改版為2.0，等正式上線后會再次與大家分享），簡單介紹下我的圖標設計思路，大綱如下：

1.風格設定

2.創意腦爆

3.設計執行

 

1.風格設定

在開始構思之前，我們首先需要確定圖標的設計風格，風格可以根據整體產品的設計語言推導，需要符合目標人群的喜好以及產品的屬性定位。

雖然我們是小說模塊，但還是附屬于動漫產品體系之下，前期的種子用戶還是產品原有的動漫人群，所以我將風格鎖定在原有動漫的視覺風格之上，大家可以看下當時動漫標簽欄圖標的樣式：

由此小說模塊圖標與上圖保持一致，設定為“描邊與色塊結合”風格。

2.創意腦爆

鎖定風格之后，就要構思創意了，也就是如何在這樣的風格之下去表達你的內容。

這一步很關鍵，如何讓圖標不普通，大部分因素都就體現在內容表達上（因為風格其實也就那么幾種），我的方法是盡量去發散核心關鍵詞，讓圖標的含義標新立異，舉兩個這次圖標腦暴的例子：

第一個，“人氣”圖標的腦暴路徑：

這里選詞有個小技巧，我會遵循兩個原則，“具象”與“二層”。

首先來說具象：其實很好理解，如果詞匯太抽象，你是很難表達的，比如“流行”這個詞，你是很難表達的，而“火”就很具象，很容易表現。

再來說“二層”：指的就是盡量不要選擇核心關鍵詞延展出來的第一層詞匯，因為這些詞是大家都能想到的，并且用爛的，比如人氣直接延展出來的“火”、“獎杯”等等。（但是如果你的圖標沒有文字提示，需要表意特別明確，建議還是使用第一層延伸詞，可以在風格上做些差異化表現）。

所以在上面兩個原則下，我最后設定人氣圖標使用“愛的手勢”，如下圖：

 

因為看到有些同學把“愛”與“搖滾”的手勢弄混，所以說下它們的區別：

 

希望大家在使用的時候不要搞錯哦！

第二個，“完結”圖標的腦暴路徑：

 

也是通過“具象”與“二層”原則，最后使用了商店掛的打烊門牌這一創意來延展：

 

 

每個關鍵詞的腦暴都會產生很多詞匯，各不相同，我們需要學會篩選，盡量避開過于抽象或者過于普通的詞匯，避開抽象等于具象，可以方便執行；避開普通等于特別，如果所有的設計都是大家用爛的創意，那作品一定會很平庸，以上就是我在腦暴時使用的方法。

 

我們需要讓自己產出的每一套設計至少有一個“特別”出現，不然如何體現自己的價值呢？

 

3.設計執行

這一步就是根據前面得到的靈感圖來進行設計，我們來看下執行對比圖：

 

 

對于執行需要注意的基礎細節，之前有寫過《圖標設計五維自檢法》，有興趣的同學可以看一下，除此之外這里再補充一點——如何讓圖標做到有細節！

 

本次設計總結了三個方法供大家參考：

 

3.1 設計技法的細節

比如給描邊增加短線風格：

再比如線條增加面形色塊的組合：

 

3.2 根據事物本身特征增加細節

比如一個木質門牌的細節：

 

 

3.3 俏皮的那一筆

比如書架上歪著的一本書：

再比如一根線條的破局：

 

當然增加細節的方法有太多種，總的目的就是防止圖標過于簡單、簡陋，希望你也可以有自己的一套秘方來進行設計，大家互相學習。

最后再看下圖標整體的效果吧：

 

附上過程中的一些稿子，哈哈，別嚇到你：

 

對于執行這一塊，別人再怎么說，你不做大量的練習與思考也是無濟于事，這個道理毋庸贅言了。效果圖如下：

 

 

接下來分享的也是這幾個圖標，不過是延伸版，切入的角度會略有不同。

 

這次改版背景很簡單：首頁整體架構調整的同時，主圖標的設計語言改成了面性，而由于時間緊，小說圖標還沒來得及改，所以這次的設計目標就一個，把第一版圖標改成面性的。

 

本來我以為，直接由線性改成填充的形式就可以了，分分鐘搞定，但沒想到改過來的效果是這樣的：

 

于是經過調整又得到這樣的：

 

為什么還是不好看？

我也不知道??！

這種情況就去多找參考，分析分析別人的優秀作品，比如下圖谷歌的圖標：

為什么人家的看起來就那么好看，那么精致？

 

我個人覺得最大原因就是它的透氣感比較好，導致透氣感好的原因在于，它采用了多元素組合的方式，并且使用大量留白與彩色形成對比。

 

在這樣的分析之下，我對圖標進行了重新構思，直接在腦暴階段就重新思考（因為原有圖標是一個元素，很難再拆分成兩個元素來進行組合）。

為了能做到獨特，我最終選用的圖標含義如下（盡量避開用爛的詞匯）：

 

書架：兩本書互相依靠

 

熱門：手捧愛心

 

免費：冰淇淋甜筒（創意來自甜筒經常會有第二份半價，或者買一  送一的活動）

 

完結：黑子手捧完結的牌子

 

 

 

最后的執行效果如下：

 

新版圖標也是利用元素的組合，并且圖標內有大量留白使圖標更加透氣。

 

除了透氣以外，我還在圖標之中融入了一些“有生命感的內容”，比如手，品牌形象，擬人化的書等等：

 

使圖標變更加可愛，有情感，充滿一些故事感。

除此之外，對圖標還增加了一點點的小細節作為小彩蛋：

 

一般我們在做一組東西的時候，都希望能夠有一個主旨貫穿始終，這樣解釋起來更加有說法，有說服力。

 

比如上面這組小說圖標，設計關鍵詞是溫暖，情感，可愛，在這樣的理念下，我將溫暖轉化為陽光作為視覺語言。

 

可是陽光怎么落地呢，我當時能想到的就是高光和投影，本次使用的就是充滿光感的長投影：

 

當然，為了使圖標輕量化，投影不宜過重，起到點睛的作用即可：

除此之外，像前面所說，為了體現可愛的主旨，融入了手，品牌形象等有生命的元素（并且整體圖形都是比較圓潤，避免尖角的出現），這也是貫穿主旨的一條路徑。

 

方法很多，各不相同，其本質目的還是希望大家做設計的時候要有適當的理念貫穿！

 

整個設計過程就差不多這些了，其實花在調整細節的時間還是比較多的，隨便一個圖標有了大方向和思路之后，還是需要不斷的修改修改再修改。

 

 

 

顏色的搭配、五官的間距、元素之間的大小關系等等，都需要不斷的調整，而真正考驗我們的也就在這些細節當中。

 

這里再補充兩個增加可愛度的實用小技巧：

 

1 五官緊湊

一般情況下，縮小五官的間距，可以一定程度上實表情更加可愛，尤其是嘴鼻和眼睛的間距：

 

2 腮紅

 

一般來說，在我的印象中只有可愛的東西才會有腮紅，五大三粗的大老爺們加個腮紅，咦～，不敢想！

 

所以畫可愛的形象或表情時，可以考慮加個腮紅：

不過我這次由于元素太多，所以沒加，大家可以根絕實際情況自行實踐。

 

最后：

看萬卷書，行萬里路！不走，書白看。

看萬篇文，練萬個習！不練，文白看。

 

 

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

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

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

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

https://v.qq.com/x/page/l087071z1ua.html

01 概述 | Overview

QQ 20周年，是互聯網產品長青的一個傳說，也是家喻戶曉企鵝IP形象的成長，同時也代表了鵝廠精神的堅韌與奮進。即便已經陪伴大家20周年，但我們依舊懷揣初心，保持科技改變生活的熱衷。應運而生我們設計了太空企鵝探索科技作為本次20周年的品牌理念，來寓意新的里程碑到來。就像宇航員勇于探索未知宇宙知識一樣，QQ帶著初心不斷保持變革與成長，為用戶提供更具科技力與創新的服務！也寓意鵝廠不斷探索未來與科技向善的愿景！

02 logo設計?Logo Design

我們在設計的第一階段，logo設計，就是圍繞“有趣和科技”來展開發散設計。我們決定從數字“20”開始入手，把QQ和20不斷結合，同時融入宇宙太空元素，寓意QQ不斷的對外探索，從多個維度來看世界，尋找有趣的內容。我們為了貼合“宇宙探索”這風格，為這次展覽設計了專屬徽章，徽章設計沿用了太空的概念，結合星球，星空，宇航員等科幻元素。簡約的幾何形狀和大膽的配色貼合“QQ更好玩”的年輕潮流氣息。

03 概念設計?Concept & Design

1. Space QQ

太空QQ的太空服設計指的是科幻電影如《星際穿越》和《火星救援》中的太空服，我們也將的時尚潮流，2018年以來運動鞋領域最為明顯的趨勢，將 ugly & oversize 的潮流風格注入到運動鞋的設計當中。這種將時尚潮流與太空服相結合的新型運動鞋,使整體設計看起來時尚而風趣。如果沒有它，太空服可能只是一個淺顯的概念。

太空QQ創意草圖

運動鞋設計草圖

3D原型

2. QQ X PUPU

本次設定，由兩只企鵝背靠背組成，20周歲的QQ與1周歲的PUPU，鵝廠擁有著各種企鵝IP形象，除了經典的企鵝QQ，還有各種其他特色企鵝，包括PUPU，BabyQ等等，同時PUPU來自外太空也是企鵝FM產品的主形象，經典企鵝QQ攜帶了新生代PUPU共同探索科技太空，寓意企鵝在不斷創新與擁抱新生代相互合力，為年輕用戶提供更具科技力與社交娛樂化的服務。

04 最終設計?Final Design

05 8米QQ模型制作?8m QQ Model 

對于實際生產出這個巨型模型是個大挑戰，我們先利用電腦三維模型生產出8米高的泡沫模型，反復檢查生產的泡沫模型是否和設計模型一致，不斷的打磨調整，待到確定泡沫模后開始翻模工作。

先給泡沫模噴上泥巴水，便于脫模，之后噴上石膏水，并加入麻絲增加石膏的牢固性，待石膏模晾干，把石膏里的泡沫模掏出后開始往里面涂一層泥巴水（便于后面玻璃鋼脫模），然后涂上樹脂和纖維布/氈，干了之后砸爛石膏模，里面的玻璃鋼模型就出來了。

玻璃鋼定型之后給內部焊接鋼鐵骨架，作為加固作用。剛脫模的玻璃鋼是非常粗糙的，于是對玻璃鋼的外觀進行打磨，使得表面光滑和調整細節，打磨完成后開始批灰和上底色，前后三次，為的是填補空隙瑕疵使模型更逼真完整。接著我們便調模型身上的顏色，在不斷嘗試中調出最接近效果圖的顏色，開始逐步上色。

上色完成后再噴保護漆防止褪色，待模型的漆干后清洗整個模型，為貼上專屬貼紙做準備，接著確定貼紙位置并逐一貼上。最后開始搭建安裝，因為在搭建過程中模型會有磨損，搭建完后再做最后的修補工作，最后巨型QQ模型完美地呈現出來。

06 貼紙設計?Sticker Design

配合QQ20周年慶，我們要給8m的巨型QQ模型搭配上了貼紙設計，以slogan “QQ更好玩” 為設計的出發點，希望把有趣好玩的態度注入各個品牌中，為品牌logo嚴肅的視覺帶來玩味感和潮流感。同時配合巨型QQ宇航員的造型，我們在設計貼紙時參考了航天飛機，科幻機器等機械圖案元素，每個品牌的設計方案除了有趣值得玩味外，同時需要貼合宇宙科技探險的風格。

我們針對這個大方向再進行了幾輪細化，選出能代表各個品牌的最終的設計方案，并把貼紙模擬在太空QQ模型上反復測試貼紙最適合的位置，讓貼紙和模型的整體風格可以完美契合。通過各個品牌的logo再設計貼紙和太空QQ的碰撞，把品牌推廣做到最大化。

07 搪膠玩具設計?Figure Design

作為QQ20周年慶的驚喜，我們制作了與巨型太空QQ同款的迷你搪膠玩具，在這次玩具設計上我們加入了小機關，在玩具內部放置了小磁鐵，使得QQ和PUPU可以方便拆卸組合。

同時為其設計了專屬包裝盒，包裝設計從“太空宇宙”的角度出發，以黑色為主基調，圖案印花設計選用了太空QQ來進行設計，把太空QQ模型線體化，配合QQ20周年logo進行設計，利用燙金工藝與醒目的圖形搭配，更有效的展現了QQ年輕化的品牌特點。同時為了減少后期生產制作之間的溝通誤會，我們同期將幾個較重要的角度的包裝3D效果圖快速渲染出來，有著非常直觀的參考對照作用。

08 品牌物料設計?Product Design

1. 海報設計

設計QQ20周年展的宣傳物料，我們采用了最能代表這次展覽的太空QQIP為主體，作為本次展覽的專屬元素，太空QQ貼近科技，同時又具有趣味性和潮流感。我們結合了太空探索的特性，提煉出宇宙元素作為宣傳的內容，讓海報設計具有更多內容可看性和觀賞性。

2. T恤設計

配合QQ20周年展，結合宇宙太空元素，并從QQ20周年logo圖形中延展設計出各類代表圖形，正面簡潔直接地顯示出本次主題，把醒目的圖形放置于T恤背后，利用坐標軸和經緯度的信息圖案配合各個抽象化的宇宙元素，增加T恤設計的科技感，更明確地展現了科技向善的愿景。

09 QQ20周年展覽?Exhibition Design

QQ聯合深圳福田星河COCO Park 舉辦了“QQ20周年主題展覽”，展館外形模擬宇宙太空站，以太空白灰色為主調，搭配簡潔的立方體造型，白色燈條勾勒大門，并以QQ20周年專屬徽章做門面，科技未來感撲面而來，就如大型QQ太空站坐落于地球。

展館大門旁的墻上安置了頗具科幻氣息的全息投影裝置，上面展示著QQ在不同時期的形象以及20年關鍵大事記。代表著不同時期的QQ形象用全息投影的方式展現出來，從最開始的胖QQ到現在的新版QQ，讓你一眼了解QQ演變史。中間放著QQ歷屆各個跨界Figure展示，總有一款捕獲你的心！

同時本次展覽還和% Arabica咖啡跨界合作，% Arabica咖啡展臺設計簡潔透氣與QQ20周年展覽風格完美融合。一邊喝美味咖啡，一邊暢游展館，兩全其美。

藍色發光的隧道科幻神秘，一進去馬上感受到了超強的氛圍感，仿佛時光碎片擦肩而過。用QQ掃描墻上的二維碼，立刻生成你的專屬時光隧道“QQ個人軌跡”，各種瞬間涌上心頭。

聯合天天P圖，用13個LED屏組成了“復古頭像畫廊”。走進互動裝置小屋里，往鏡頭前一站，稍作等待后，以你的形象即時合成的13個復古頭像就會出現在面前的13塊屏幕上，體驗即時“變臉”效果。讓自己的頭像和曾經用過的QQ經典頭像合二為一，形成專屬的復刻版頭像海報。

結語

QQ20周年展不僅包含了展館設計，還包含了市場營銷，運營活動，周邊商品等多個設計環節，環環相扣，缺一不可，一起構建了整個QQ20周年展的設計體系；展覽設計了太空企鵝攜帶著新生代PUPU共同探索科技，寓意鵝廠不斷創新探索與科技向善的愿景，為年輕用戶提供更具科技力與社交娛樂化的服務，在打造“QQ更好玩”的路上奮力前行。

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

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

那關于loading動畫相關知識，我覺得對于設計師來說是有必要去了解的，所以我找到了這篇優秀文章，讓大家能夠深入了解loading動畫，透過現象看本質，學以致用。

圖片來源：Domaso

沒有人喜歡等待

在用戶心目中，優秀的應用、工具、網站都應該是制作精良且能快速響應他們需求的產品。

舉一個真實的例子：最近我們新發布了一個用戶評價的應用，第一個版本并不完美，loading延遲在2-3秒。

你猜怎么著？

很多人認為這3秒是一個故障。在實際開發中，你可能要面對龜速的網絡，沒有優化的代碼，操作時間長或數據處理太多等問題。因此，App的運行速度可能沒有用戶預期中的那么快。雖然早期用戶可能會給你的產品第二次機會，但絕大多數人會立即退出它。

除非你的產品界面對用戶的行為提供了明確的即時反饋。剛才發生了什么？是操作錯誤還是在等待服務器的請求？用戶需要等待多長時間才能正常使用這個工具或網站？用戶為什么要等待呢?

讓我們一起深入了解Loading動畫：

1、loading動畫的歷史由來

2、優秀loading動畫所具備的特征

3、細節可以做出精彩

4、簡單處理還是精心制作

loading動畫的歷史由來

對于這種類型的反饋，設計師會使用進度條、loading示意圖、預loading、或旋轉器。它們向用戶解釋什么時間發生了什么或正在loading的過程，以減少用戶的心理焦慮。

你覺得設計師是從什么時候開始考慮加上這種反饋的？

我很驚訝的看到關于Nielsen Norman的一篇文章，提到響應時間和loading動畫是在1993年（參考1985年的資料）：

如果計算機無法提供快速響應，則應該以百分比的形式向用戶提供持續反饋?！綧yers 1985 論文，“計算機-人機界面百分比進度指標的重要性”】

顯示進度的三個主要優點：向用戶保證系統沒有崩潰且正在處理他們的問題；告訴用戶還需要等待多久時間，讓用戶能騰出時間來做其他的事而不只是干等；甚至可以向用戶提供一些可以閱讀和查看的內容，減少等待的焦慮?！?Jakob Nielsen, on January 1, 1993

自從Web 1.0以來，幾乎每個網站都有loading狀態，用戶可以注意到當頁面內容正在loading時，這些Loading動畫活躍的身影。

在2007年的時候，網站的Loading形式大概是下面這張圖上的樣子：

2007年時的Loading

在那個年代，你可以找到像Firewoks(2007)、Flash (2008) 或者Loading GIF Generator （2009）這樣的工具來做這些 loading動畫。

到了2010年，隨著CSS3的迅猛發展，出現了很多教程教大家如何做CSS3動畫，也能找到大量的loading 動畫預設包。設計師也可以在Ps cs5中做這種loading動畫，這個在10年前是非常流行的。

在那時，Loading動畫更像是web的專屬問題，因為頁面loading確實是一個問題。在2010年的時候，很多Flash網頁都做了一些很有創意的loading動畫：

30個創意Flash loading案例（https://web3mantra.com/2010/09/08/30-creative-flash-preloaders-examples/）

漸漸地，設計師們開始不滿足于簡單的進度條和旋轉Loading，到2014年-2016年的時候，變得更加關注這塊的設計。所以，你能發現更多關于loading教程，免費的Loading設計資源，插件和開源項目。

2016年出現的Material Design loading(http://www.qooqee.com/news/muse-preloader-widget-tips)

設計趨勢和方法已經發生了變化，但向用戶提供有效反饋的原則依然需要遵循。

優秀loading動畫所具備的特征

在一個完美的世界里，loading動畫應該：

盡可能少的顯示給用戶

如果你的工具或網站工作的足夠快，那就是非常完美的?；蛘咧辽僖沟盟鼈兊乃俣确嫌脩舻念A期，顯示好看的loading動畫只是一個緩兵之計，等待太久了一樣會惹惱用戶。所以，首先應該是解決內容的loading問題。

給出具體時間

它可以是一條簡單的文本信息，告知大致的等待時間，也可以是可視化的圖形來表示?？偣采蟼髁硕嗌傥募?？更新需要多少分鐘？已經進行到了什么階段？這些體驗上的設計細節都可以給用戶預期并減少焦慮。

宇航員數據loadingby Cream M.

告訴用戶為什么需要等待

一些應用的loading過程，通常讓用戶不大容易理解。一個好的Loading動畫，應該要告知用戶等待的原因以及等待的背后軟件正在做什么：

文件獲取動畫 by Vinoth

讓我們說回我的案例，那個反饋工具軟件。當我們的等待時間超過1秒時，我們決定給這段等待時間增加一段解釋。動畫說明應用目前正在處理截圖資源，這清晰的表明，我們的工具沒有崩潰，它只是正在處理請求：

好的loading動畫

讓等待的過程不那么讓人無聊

可以放一個有趣的動畫來吸引人，讓用戶的眼睛始終保持忙碌。

動畫來源：Alex Kunchevsky

減少用戶等待時間的心理感知

這與上面提到的一點非常相關，如果你在等待的過程中發現了一些能夠吸引用戶注意力的東西，那么感覺上時間就會過得更快。它可以是一個引人注目的色彩搭配，有趣的想法，或者是一個什么特別的東西。

蛋糕loading by Pierre Kleinhouse

透傳公司品牌形象

如果用戶在用你的應用或者網站時會有一段等待時間，為什么不機智的利用好這段時間呢？我不建議僅僅只是為了做loading而做一個loading動畫或者去在動畫里使用一些心理學技巧。我覺得最好是將品牌的聲音融入整個Loading動畫中，讓它成為一個非常重要的設計細節：

BCG的車票應用動畫 by Antonin

細節可以做出精彩

雖然有些人可能會認為Loading只是一個很小的UI細節，但它其實也有許多類型和變化。一般來說，我把loading動畫分為幾類，進度條，無限循環的loading圖和骨架圖。

進度條

當可以明確loading時間時使用，進度條可以通過數字或視覺化的形式來表現。

有數字進度的，有時也稱為百分比指示符。他們可以簡單直接，也可以很有創意，需要對你的用戶業務表達更有效：

一個app loading頁 by Nguyen Tran

你也可以找到有趣的進度條和循環動畫結合的loading圖。

Loading動畫by Dragonlady

進度條背后的主要思想是顯示一個操作將花費多長時間以及目前所處的狀態。根據UI需求的不同，進度條也可以是線性的，沒有百分比的形式。

想想Gmail，它沒有顯示進度百分比，但是用戶同樣可以感覺到加載的進度。下面是兩個簡單而又創意的例子：

Gamil loading和一個創意loading動畫 by  Allen Zhang

無限loading動畫

當loading的時間是未知的時候來使用，它可以是默認的旋轉圖，也可以是一些創意動畫，顯示應用正在做一些事情。

計算loading圖標 by Hoang Nguyen

創意性loading動畫一樣可以與業務緊密相關，并幫助支持品牌發聲。請思考下那些應用會使用這種loading動畫？

LittlePin Spinner by Daniel Sofinet

無限循環動畫要求用戶在上傳或執行某些操作時等待，但不要求具體需要多久時間，它們可能會非常簡單或非常有創意。

Loading cat by domaso. So cute!

Infinity by Eszter Balogh. 看起來非常有趣，但是你并不想他們永遠不停下來。

如你所見，如今的loading動畫不僅僅只是一個系統狀態的UI元素。

骨架動畫

骨架動畫展示了loading頁面的變化過程，你可以把它理解為開始是一些頁面占位圖，逐步加載上一些可見的圖片，文本和其他內容。

這個詞最早出現在Luke Wroblewski 的文章中，Luke建議使用骨架動畫來獲得更好的loading體驗。這個想法得到了其他設計師的支持，并在Facebook、Linkedln、YouTube, Google Drive 等用戶界面中得到了應用。

舉個栗子，如果你使用的是網頁設計工具Figma，你會在頁面頂部看到一個進度條，同時還在逐步loadingUI：首先你會看到占位符，然后才是可用數據：

Figma UI

簡單處理還是精心制作

除了這篇文章中所展示的一些優秀案例和Dribbble上的設計概念，在目前大多數應用中，你可能能看到還是一個默認的Loading。

有一段時間，簡單的Loading被大眾所推崇，因為他們對于性能的影響最?。ㄓ绕涫菍τ趙eb）。使用默認的或開源的loading要容易的多，不需要設計師和開發花心思來設計和實現它。

如果你正在開發MVP或者項目的第一個版本，那么使用簡單的或者開源的loading動畫更符合邏輯。在這個階段，即使把loading動畫做的再怎么有創意，也并不會對你的產品有多么大的幫助，如果它不能解決真正的需求。

一些簡單的loading動畫案例

有趣的是，在2016-2019年，我們可以看到非常多精心的loading動畫。注重細節，日益成熟的設計公司，更好的科技環境，更方便的設計工具，這些都使得loading動畫變得更加富有創造性。如果你瀏覽Dribbble，能找到非常多超贊的Loading動畫，所以這也成了展現自己設計能力的一種方式。

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

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

藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

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

我們每天都在設計圖標，并且保持這樣的狀態超過15年。身為設計師，想必你已經閱讀過很多關于圖標設計的文章，但是今天的文章不一樣，今天我們的文章不會花費很長時間來單獨介紹某一個圖標的設計，而是設計任何一套圖標應當遵循的基本流程，以及一定要注意的8個關鍵的注意事項，你可以將這些東西帶入到一些現成的案例當中去驗證。

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