你所不瞭解的底部導航...
底部導航，是頁面切換的操作按鈕，過去的底部導航，大部分都是白底、圖示、文字。隨著技術、設計、運營的發展，底部導航的視覺發展也開始豐富多彩~
然而設計師靈機一動，開始豐富底部導航的設計，成果出來後，卻發現用不上。所以在設計之前，我們來了解一下，底部設計的規則：
目錄
一、按鈕分析
1、文字+圖示
2、文字
3、圖示
二、技術規則
1、圖示超出原背景高度
2、背景有透明感
3、圖示的不同格式
......
一、按鈕分析
1、文字+圖示
大部分平臺還是遵循現有的扁平風格，而豐富多彩的風格，一般會在各大小節日、週年慶等活動動頻繁出現。
多數情況下，我們常見的底部導航圖示+文字，選中的狀態下，設計師會根據對整體設計風格和自己的理解，給圖示增加一些質感。
2、文字
當抖音火了以後，我們注意到，底部導航直接使用文字作為按鈕，小紅書、美圖秀秀也是同樣展示形式，那...誰先用文字的，我就不知道了。但是，我們能從這3款產品中，可以找到共同點--畫面(圖片、視訊)為主。
找到共同點後，我們發現在使用過程中，會更能關注於閱讀內容，底部導航基本不會影響瀏覽視覺。並且，文字按鈕，也更便於使用者的理解~
大眾點評現有的設計很時尚，很吸引眼球，首頁內容視覺也是以畫面為主，在(各大小螢幕--移動端)瀏覽完功能區和活動區後，視覺很快被底部圖示吸引，所以我使用文字按鈕嘗試一下，底部視覺輕了很多，效果還是很明顯的~
3、圖示
除了獨立文字按鈕，還有獨立圖示的，單圖示按鈕是很少見的，很多圖示並沒有普及到各類使用者群眾去，會造成使用者的認知負擔，不建議使用獨立按鈕。
優靈產品，為何特立獨行?其實從整個產品的結構，和使用者群體分析便能夠理解平臺設計的初衷。該產品結構只有兩個部分，設計內容和我的，該行業使用者是從事APP產品與設計的同學，對圖示理解更容易。
小結
底部導航使用文字+圖示、文字按鈕，是保障的。但是使用文字按鈕也需要考慮到整個頁面的視覺，比如知乎、微博等以文字內容為主的介面，底部導航就需要文字+圖示的形式來綜合一下視覺。
二、技術規則
一到某個節日前半個月到一個月，我就開始著手設計底部導航圖示，但是我又不甘於侷限在48px大小的圖示範圍裡，所以我就按照我的想法設計，再去逐步的向前端人員瞭解技術匹配情況。
1、圖示超出原背景高度
ios、Android的原生圖示和文字都有有預設的數值，而在實際的設計中，幾乎是不用原生的底部控制元件預設值的，底部的按鈕都是可以自定義高度樣式的，背景的高度也可以調整，文字的大小也可以變動。
以下兩個例子，可以看到底部導航圖示超過了背景的高度，這樣的情況，我們該如何定義圖示的設計範圍？
大多數設計師的切圖方式是下圖①，直接切圖示，文字前端寫。②、③圖示與文字組合切也是可以的，這種方式，在未來多樣化設計中，可繪製範圍會更大。上圖愛奇藝的底部按鈕的設計範圍就是③的方式，設計範圍超過背景高度。圖示的高度在技術上是沒有限制的，在合理範圍內即可。
注意：點選效果和未點選效果的設計範圍一定要一樣大，內部圖示尺寸、文字在設計範圍內自定義。
2、背景有透明感
底部透明模糊的樣式，ios原生是可以自帶的，安卓是沒有的。
底部有透明感，會讓使用者感覺內容區域是從頂部到底部的，所以我開始散發我的設計想法，將底部背景設計成幾乎全透明。
當我沾沾自喜拿著設計樣式給前端看的時候，前端告訴我可視內容的設定相當於遮罩，在有頂部狀態列和底部導航欄的時候，內容的可視高度是頂部狀態列的底部到底部導航的頂部距離。可視高度延伸到最底部，是能夠實現我需要的透明看到內容的效果，但是會出現2個明顯的問題：
1、遮擋載入反饋
2、最後一個內容回到底部
我們來看一下不同可視高度內容的動效結果：
使用者在瀏覽內容，手指在螢幕滑動的距離大概在100px-200px(未找到官方研究資料，自己嘗試個大概)，所以右圖的的載入反饋會被底部導航遮擋。
前面有說到微博也是有透明效果，我還是帶著疑問詢問前端，前端的解釋是ios有自帶的這個處理效果，但是內容可視區域還是除去頭部狀態和底部導航距離的。
3、圖示的不同格式
當初在設計底部圖示的時候，我只設定了png的格式，在後來的體驗優化中，團隊決定將底部的靜態圖示處理成動畫圖示，(底部圖示是支援多格式的，但是每一種格式都需要前端新增，但需要技術時間，所以底部導航圖示的格式支援上，一定要提前告訴前端多格式支援，一般支援png、jpg、json即可，後續可以根據發展需要酌情新增，如果只支援json格式，未來圖示的設計將無法新增更多效果)。
後來我們選用了AE+bodymovin外掛匯出的json檔案，製作圖示動畫，使用bodymovin實現動畫是現在非常方便的一種方法，設計師專注動畫製作，最後匯出json檔案給前端，對於前端而言只需要呼叫即可。但是有一個缺點： 設計圖必須是向量，還都必須是獨立的純色矩形格式。不支援任何漸變、投影等附加的視覺樣式。
sketch檔案也可以匯入到AE,下圖是設計中的注意流程(該流程互動設計師整理)。
ofollow,noindex">sketch匯入教程：https://www.jianshu.com/p/269d1b055a10
AI匯入教程：https://jingyan.baidu.com/article/425e69e6040e82be15fc1619.html
那有人會說，直接用GIF、幀動畫、視訊就好了啊！這幾種方式是可以的，但是它們佔用的空間較大，GIF需要為各種螢幕尺寸、解析度做適配，因為 Android 4.0以下沒有提供原生 GIF 的 api 支援，所以這種方案還會遇到相容性問題。
幀動畫佔用空間比GIF還要大，一樣要做多螢幕解析度的適配，不過不會遇到相容性問題。
使用視訊，也是佔用很大空間，而且視訊一般是用來做宣傳片的。很少有用到這種格式。
底部導航圖示一般存在未點選和點選反饋的結果，使用json格式製作AE動畫的時候要注意，未點選和點選反饋的效果的變化是一整個動畫， 未點選狀態在最前面，一直屬於靜態狀態，在運用到底部導航後，點選按鈕觸發動態 ~
學習地址1： https://www.cnblogs.com/zamhown/p/6688369.html
學習地址2： https://www.jianshu.com/p/0ed53cf891ad
小女不才，向各位瀏覽文章的小夥伴們展示我的兩張節日圖示~
