• 上傳作品
    • 上傳經驗
    • 上傳即刻

您的意見是我們 UI 中國進步的動力!
點擊立即反饋按鈕,發表您的意見!
立即反饋
QQ群反饋
您也可以加入UI中國官方反饋群進行反饋!
群號:302892100
備注:反饋問題後@管理員能讓我們及時了解您的意見

成長值達到300分以上才可以發布喲!~

收集成長值
輸入邀請碼
先看看別人的即刻>

細節篇:底部導航這麽做才有趣!

原創文章 分類: 經驗/觀點 版權:
6342 498 268 14
2019-07-31
82.8
首頁推薦

又到了細節篇的時間啦,這次的主題是底部導航的動效設計,接下來將從:


Image title


以上四方面展開介紹,首先感謝Exia、Maskkk兩位開發小哥哥對本篇的幫助,感謝你們~(^-^)V,話不多說我們馬上開始吧!


一 .底部導航動效的作用


底部導航一直是移動端産品的主要導航方式,它可以方便用戶在不同功能間切換,同時也表明當前所在位置。其樣式有圖標、文字或圖標+文字,切換時可以直接切換也可以加上動效。


Image title


直接切換屬于常規方式,無功無過,圖標的選中與未選中狀態足以區分當前所在位置。但是適合的動效也確實是一個加分項能爲産品增色不少,加入動效主要有以下3個作用:



1.視覺引導,明確操作反饋

相比于靜態物體,動態的物體更容易吸引人們的注意力,爲從A前往B提供視覺線索引導。同時也是爲點擊操作提供的更加清晰明確的反饋。


Image title



2.自然切換, 提升使用體驗

直接切換雖然沒有什麽問題,但深究起來卻是有些生硬,相當于只有現狀——切換完成兩步,也就是只有開始和結束,沒有切換中的狀態。

 

而動效的加入,補全了“切換中”的狀態,讓整個流程完整起來,“現狀——切換中——切換完成”讓切換過程更加自然柔和,提升使用體驗。


Image title



3.增加趣味性,品牌文化輸出的窗口

動效的加入相當于爲設計師又提供了一個發揮的維度,使原本靜止的元素能以更加立體的方式展示,設計過程中可以傳達出更多的信息,是增加趣味性的有效手段。所使用的動效不僅需要符合整個産品的調性更能與品牌結合,也成爲了品牌文化的輸出窗口。

 

如下圖波洞的例子就是與其品牌文化內涵相對應的,除了靜態的圖文,動效過程也承擔起品牌輸出的責任,讓産品的特點更加生動鮮明。


Image title




二.如何選擇適合的動效



現在各種動效效果豐富,如何從衆多效果中,選擇出適合自身産品的,我們可以從三個方面來考慮:


1. 圖標的選中與未選中樣式

首先可以從圖標的選中與未選中的樣式來考慮,從結果倒推思考如何用適合的動效類型切換過去。常見的圖標樣式有以下4種:


Image title


而動效的類型主要則有:縮放、填充、生長、位移、旋轉等,不同的樣式有與它契合的動效類型,比如從線到切換到線適合做生長動畫的效果,而從線到面的樣式切換則可以考慮填充的動效等,文中第三部分“動效的基本類型”中會詳細介紹各種樣式適合的動效類型。



2. 産品的風格定位

再精美的設計也需要與産品本身的風格定位想匹配才能發揮其作用,動效也不例外。加入動效絕不是炫技的堆疊效果,而是應該讓它與産品匹配,讓我們可以有多一個的維度去更立體的诠釋産品。

 

如果産品本身用戶跨度大人數多,風格沉穩,那麽我們在選擇動效的時候,也應該選擇簡單優雅的效果不能太跳脫,比如下圖美團選擇的是一個簡單的緩動縮放效果。


Image title


而叭哒因爲産品面向的是喜歡動漫二次元的年輕人群,普遍喜歡萌和可愛的東西,對于他們來說顔值既正義,好的視覺效果和趣味性更能吸引他們,所以叭哒的整個動效會更加複雜一下,添加了可愛元素,動式上則是彈性效果,顯得活潑俏皮。


Image title


動效給人的感覺是沉穩優雅,還是活潑可愛,其實很大程度上受動式影響,因爲即使是同樣的動效類型,選擇不同的動式也會帶來完全不一樣的視覺感受。所以了解動式的類型可以幫助我們做出更合理的選擇,動式的基本類型可以分爲三種:線性、緩動、彈性。


Image title



線性

線性是勻速運動,整個過程很平穩,毫無波瀾。(呃……看運動曲線也能看出來,就是這種又直又剛的感覺)


Image title



緩動

緩動細分的話也有幾種模式,分別是Ease In、Ease Out和Ease Both。緩動具有節奏感和韻律感,相比于線性的勻速顯得更加優雅生動,是使用較多的類型。


Image title



彈性

彈性是三種裏面波動最大的一種了,動效尾聲的時候伴隨小幅度的頻繁抖動,俗稱Duang~,效果也是活潑生動,比較俏皮,和年輕化的産品非常搭。


Image title


我們應該根據産品的風格定位來選擇與之相匹配的動式。



3.開發成本&項目排期

除了設計樣式和産品風格定位,我們還應該考慮開發成本和項目排期,設計好效果後可以先和開發人員溝通討論實現方案,如果與排期有沖突,技術有難點的話及時調整,換可行的方案,確保 最後的落地。關于各種實現方案,在文中第四部分還會詳細介紹 。




三.動效的主要類型



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


· 縮放

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


Image title

Image title


除了整體圖標的縮放,還可以調節圖標元素的局部縮放,帶來更加豐富多變的效果。


Image title




· 填充

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


Image title



· 生長

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

Image title


Image title



· 位移

位移是圖標或其中元素的移動效果,比如愛範兒的快訊圖標兩側弧形向外移動和收回,在其它禁止的圖標中可以有效吸引用戶的注意,同時也是模擬信號塔發射的過程,與“快訊”呼應。


Image title


再如輕芒的底色移動,輕芒的底部導航是純文字的樣式,加入底色的位移動畫對于視覺是較強的引導,變化的色彩也減少純文字的單調感。


Image title


需注意圖標整體位移動效應用相對較少,即使使用也需要盡量減少位移的幅度,底部導航是一個固定模塊,而大幅度的位移動效過于跳脫會削減這種固定感,是我們需要盡量規避的。


 

· 旋轉

旋轉動效是切換過程中圖標或其中元素的角度旋轉,與位移相同,旋轉更多的也是針對具體圖標做出的巧妙設計。比如搜狗浏覽器的指南針發現圖標,和百度貼吧消息鈴铛圖標,都使用了旋轉的效果以模擬實物的晃動感覺,符合實物的運動規律讓人覺得親切自然。

Image title


Image title


除了二維的旋轉,還可以考慮三維的旋轉效果,比如轉轉舵式導航中間圖標的動效,融入了品牌IP形象的元素,向左向右的轉頭效果也與品牌“轉轉”的概念貼合,給人留下深刻印象。


Image title



· 點擊

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


Image title


Image title



· 形狀變化

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


Image title


Image title



· 組合

組合的話是融合多種類型的動效,比如美團外賣,是整體縮放與局部生長動效的結合。


Image title


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


Image title



四.動效的交付和開發實現


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


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

設計軟件:Sketch

開發成本:★★★☆☆

 

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


Image title



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使用的話還需要考慮到這一點。


Image title



4.提供Json文件

設計軟件:Sketch、AE

開發成本:★★★☆☆

 

用AE做好動效後,導出Json文件給開發,其優點是還原度高,能節省一定內存,不過也需要注意Json雖然好用,但過多使用會耗設備的性能,尤其對一些低端設備造成較大的負擔,特別是一些較大的動畫,容易造成卡頓,所以json還是比較適合小範圍的動畫。

 

總體來說實現的方法還是挺多的,我們可以先做動效Demo,然後與開發的同學探討選擇出最佳實現方案,確定後再去著手准備交付物。



劃重點



· 底部導航動效能爲用戶提供視覺引導,明確操作反饋,增加趣味性提升使用體驗,也是品牌文化輸出的窗口 。

 

· 選擇動效可以從圖標的選中與未選中樣式,産品的風格定位,開發成本三方面來考慮。

 

· 設計動效的時候需要考慮到不同的圖標樣式有與它契合的動效類型,選擇與之相應的。

 

· 動效的實現可以提供靜態圖片及動效說明,也可以選擇GIF、SVG、Json文件等,各有其優缺點,可以先和開發的同學探討最佳方案,再提供交付物。



  • 收藏

    498人已收藏

焱小玖

806粉絲/34關注

首頁達人小有見解原創小生收藏家lv.2勤學標兵lv.1
私信
細節篇:四步搞定分頁符設計一篇搞定應用市場圖設計(下)
5
Gabe丶

關于動效實現與交付,每次都要去求開發,要做動效,要還原設計稿,心累,不知道是不是所有公司都這樣。 另外,第5種方式其實可以使用webp,色彩不失真,體積還小,安卓端完美支持,但是iOS的WebView不支持,需要第三方庫,處理,緩存,回調,比較麻煩。

精彩!

掃描二維碼
去手機端查看海報

焱小玖

TA已經獲得7枚勳章啦

  • 成就勳章

    • 特別勳章

    • 身份勳章

  • 已擁有

  • 作品

    創造者才是真正的享受者。

  • 經驗

    經驗是一所好學校,可它的學生卻經常曠課。

  • 活躍

    大神都是從圍觀群衆開始的

  • 拓展

    作品、經驗、活躍還不能滿足你?

京ICP備14007358號-1 / 京公網安備11010802014104號 / Powered by 2008-2019 UI.CN

Cw9sdfed

朕收下了