小莫
小編:又到了細節篇的時間啦,這次的主題是底部導航的動效設計,上篇我們主要介紹了主要是第一、二部分的內容,有興趣的小伙伴可以通過傳送門直達《四步搞定底部導航動效(上篇)》
今天的下篇開始介紹第三、四部分內容,動效的主要類型與開發實現,首先感謝Exia、Maskkk兩位開發小哥哥對本篇的幫助,感謝你們~(^-^)V,下面正式開始吧。


動效的主要類型

前面我們已經了解了動效的作用和選擇適合動效需要考慮的問題,接下來我們一起來梳理一下動效都有哪些類型,它們各自有什么特點,適合在什么樣的場景使用。

· 縮放

縮放是簡單穩重、包容性好的一種動效形式,不管是哪種樣式的圖標都可以選擇使用縮放動效,同時也是一種較為通用的效果,不需要針對圖標元素進行精巧地定制化設計。說白點就是可以套用,且出來的效果還不錯,既有動式又不會太復雜夸張,對于視覺引導和明確反饋完全夠用,所以它的應用比較廣泛,適合大多數產品,是比較保守不易出錯的一種選擇。
除了整體圖標的縮放,還可以調節圖標元素的局部縮放,帶來更加豐富多變的效果。

 

· 填充

填充動效顧名思義就是顏色的填充,適用于選中后過渡到面性的圖標樣式,可以是局部色塊的填充,也可是填充圖標整體,如從線性→線面或是從面性→面性,這幾種樣式選擇填充效果,切換過程都可以做到自然流暢。若單純只有線性圖標的樣式,圖標面積單薄,不易出效果一般不建議使用。

 

· 生長

前面我們介紹了適合面性圖標的填充動效,而現在要說的生長動效則與之相反,它適合的剛好是圖標的線性部分,是線條從無到有的過程。經常與縮放動效搭配使用,為整個動效加入局部細節亮點,使其更加活潑靈動。

 

· 位移

位移是圖標或其中元素的移動效果,比如愛范兒的快訊圖標兩側弧形向外移動和收回,在其它禁止的圖標中可以有效吸引用戶的注意,同時也是模擬信號塔發射的過程,與“快訊”呼應。
再如輕芒的底色移動,輕芒的底部導航是純文字的樣式,加入底色的位移動畫對于視覺是較強的引導,變化的色彩也減少純文字的單調感。
需注意圖標整體位移動效應用相對較少,即使使用也需要盡量減少位移的幅度,底部導航是一個固定模塊,而大幅度的位移動效過于跳脫會削減這種固定感,是我們需要盡量規避的。

 

· 旋轉

旋轉動效是切換過程中圖標或其中元素的角度旋轉,與位移相同,旋轉更多的也是針對具體圖標做出的巧妙設計。比如搜狗瀏覽器的指南針發現圖標,和百度貼吧消息鈴鐺圖標,都使用了旋轉的效果以模擬實物的晃動感覺,符合實物的運動規律讓人覺得親切自然。
除了二維的旋轉,還可以考慮三維的旋轉效果,比如轉轉舵式導航中間圖標的動效,融入了品牌IP形象的元素,向左向右的轉頭效果也與品牌“轉轉”的概念貼合,給人留下深刻印象。

 

· 點擊

點擊動效是在點擊切換的過程中,在圖標下層為點擊區域添加色塊,以加強點按的效果,讓操作的反饋更加明確。

 

· 形狀變化

形狀變化也是需要針對圖標形狀元素定制化設計的一種,自由度高供設計師發揮的空間大,能產生許多生動有趣的效果。比如貓耳FM的舵式導航中間貓咪打瞌睡的鼻涕泡動效,QQ的消息圖標,每次雙擊都切換不同的表情,成為了給人留下深刻印象的記憶點,為產品增加趣味性。

 

· 組合

組合的話是融合多種類型的動效,比如美團外賣,是整體縮放與局部生長動效的結合。
還有一種是同組圖標采用不同的動效,比如喜馬拉雅的底部導航圖標是從面性→面性的切換,圖標整體沒有統一的動效,但在每個圖標的局部,都針對其特征設計了不同的動態效果。首頁圖標是房子小窗戶從上垂落的位移動效,我聽星型中線條的生長動效,發現指針的旋轉等都是與元素結合的設計,讓原本面→面之間平淡的切換變得各有特色。


動效的交付和開發實現

最后我們來看看設計好動效之后該如何交付和實現。主要有以下四種方式:

1.提供靜態圖及動效說明

設計軟件:Sketch
開發成本:★★★☆☆簡單動效比如縮放,旋轉,位移等,提供JPG或PNG的靜態圖及動效說明,由開發實現動態效果。其優點是效果流暢且體積小。關于動效說明,如果簡單的話可以用圖文表示,復雜的話需要結合動效Demo動態展示效果(可以使用AE、principle、PS、Flinto等制作),說明的時候別忘了附上動式的描述,有時候會忽略這一點。

 

2.提供GIF圖片

設計軟件:Sketch、AE、principle、PS、Flinto等
開發成本:★☆☆☆☆
復雜動效,比如生長、形狀變化,組合變化等,我們可以直接生成GIF圖交給開發,這樣實現起來成本最低,所有的動效由設計內部消化了,對于開發的同學來說點擊只需要替換圖片就可以,很受他們歡迎。

但GIF也不是完全沒有問題,它最主要的問題是文件較大,畫質越清晰的文件則越大,而且響應速度相比其他形式偏慢,如果是復雜一些的圖就需要再畫質和文件大小之間找平衡了。

3.提供SVG圖片及動效說明

設計軟件:Sketch

開發成本:★★★★☆

SVG圖片其實就是用腳本寫好的矢量圖,Sketch可以直接導出SVG格式,所以對于設計師來說是比較方便的。而且SVG是最小最靈活的,可以很好地擴展,同樣的圖形動效SVG比GIF小約95%。而且與JPG或PNG不同,由于是矢量的所以SVG圖片不會失真,可以支持生長、變形等效果的,開發同學能根據我們提供的動效說明用代碼還原實現。

但它也有自身的限制,一是開發成本較高,二是如果需要再web使用,IE瀏覽器是不支持的,如果產品在web使用的話還需要考慮到這一點。

 

4.提供Json文件

設計軟件:Sketch、AE
開發成本:★★★☆☆
用AE做好動效后,導出Json文件給開發,其優點是還原度高,能節省一定內存,不過也需要注意Json雖然好用,但過多使用會耗設備的性能,尤其對一些低端設備造成較大的負擔,特別是一些較大的動畫,容易造成卡頓,所以json還是比較適合小范圍的動畫??傮w來說實現的方法還是挺多的,我們可以先做動效Demo,然后與開發的同學探討選擇出最佳實現方案,確定后再去著手準備交付物。本篇為下篇,想了解上篇底部導航動效的作用及如何選擇適合動效的小伙伴也可以通過傳送門直達哦四步搞定底部導航動效(上篇)》。?


劃重點

設計動效的時候需要考慮到不同的圖標樣式有與它契合的動效類型,選擇與之相應的?!?動效的實現可以提供靜態圖片及動效說明,也可以選擇GIF、SVG、Json文件等,各有其優缺點,可以先和開發的同學探討最佳方案,再提供交付物。

 

原文地址:海鹽社(公眾號)
作者:焱小玖

轉載請注明:學UI網 » 四步搞定底部導航動效(下篇)

登錄收藏
 
你可能喜歡的:
設計向善|QQ群作業策劃故事設計向善|QQ群作業策劃故事
UI 場景中的 Banner 布局樣式探索UI 場景中的 Banner 布局樣式探索
設計進階:設計方案如何被量化驗證?設計進階:設計方案如何被量化驗證?
【AE教程】如何制作簡單的太空旅行MG動畫【AE教程】如何制作簡單的太空旅行MG動畫
Feed流 - 圖片比例設計(二)Feed流 – 圖片比例設計(二)
設計沉思錄 | 如何用感染力提升設計價值設計沉思錄 | 如何用感染力提升設計價值
“個人主頁”設計相關思考“個人主頁”設計相關思考
將迪士尼的10大動畫原理應用于UI動效設計將迪士尼的10大動畫原理應用于UI動效設計
手機端主按鈕應該放在那里?手機端主按鈕應該放在那里?
原創 | IM聊天界面的設計規則原創 | IM聊天界面的設計規則
?
网球比分雷速 湖南快乐十分玩法介绍 下载浙江十一选五走势图 重庆幸运农场是真的吗 3d时时乐 彩票 山西新十一选五最新开奖 上海快三走势图今天10 上证指数行情 山东十一运夺金预测 山西11选五每天多少期 七星彩解梦