OMG！經過我們一段時間不懈的努力努力再努力（斷斷續續的摸魚）。智行新版底部 Tab 圖標以及動效制作完成啦！本文將圍繞智行底部 Tab 圖標改版升級，淺談下智行的圖標設計過程與動效落地。

往期案例回顧：

“圖標”作為一款 App 的重要組成部分，不僅要承載著產品功能，還需要體現產品本身的品牌調性、吸引力和趣味性。

因此我們想要設計一款，融入了產品調性的抽象化符號圖標，強化智行火車票的品牌感，打造記憶點。為此我們瞄準了最高頻出現的底部 Tab 圖標，作為這次改版優化的排頭兵。

1. 現有問題

改版前，我們內部進行了討論，普遍反饋是“平庸、缺乏吸引力、沒有特色”等問題。同時，我們也調研了市面上、設計網站優秀的設計案例，吸取優點幫助我們解決現有的問題。

2. 優秀案例分析

優秀的案例所具備的特點：

1）圖標形狀與品牌符號緊密結合，傳達品牌調性，給人留下深刻印象（馬蜂窩、飛豬等）；

2）圖標色彩明亮鮮艷，視覺沖擊力飽滿，點擊感強（優酷、京東）；

3）圖標的動效上生動有趣，令人印象深刻（閑魚、美團酒店）。

3. 明確方向

基于上述的問題，結合智行品牌屬性，以及對產品的理解，我們明確了此次優化的方向和目的。

1）結合智行 UI 品牌符號，賦予圖標品牌屬性（從智行 logo 與核心業務中提取出的火車頭形象抽象變形得到，運用在智行 app 的界面當中）

2）用色結合時下較流行的風格，更加大膽，使圖標本身更具活力與趣味性；

3）動效上拒絕普通，與大部分 App 產品拉開差距，保持獨特性，增強記憶點。

設計初期我們也遇到了一些困難，比如結合品牌符號的困難度上面，既想要保證圖標的可辨識度，又要強調品牌屬性。

嘗試了線型圖標和面型圖標，各有優缺點，有的無法體現品牌調性，沒有記憶點，有些方案就是不太成熟，無法體現我們之前確立的三個維度的設計目標。

1. 方案優化

總結下初稿方案的問題，優化的核心點就是如何“進一步強化品牌符號”。

品牌符號強化

在初步的方案里，多數的設計思路是在線段的末尾加入品牌符號的火車頭形象，從視覺體量看太小，普通用戶無法注意到變化。所以我們需要轉變思路，由線到面去放大我們的符號。

動效強化

既然品牌符號是對業務線（火車）抽象提取，動效上是不是可以通過現實映射的手段，去模擬火車在現實中出現的場景呢？

試想一下，用戶在點擊圖標后的反饋是一個小火車頭出現在圖標里，一定程度上會讓用戶感覺到驚喜！

記憶強化

在這一點上，我們有一個比較大膽的想法，就是弱化掉選中狀態下圖標的差異性，不再使用各自形態的選中狀態，統一使用品牌符號。通過反復出現的形象，加深用戶的記憶感知，從而強化品牌。

經過案例分析和不斷的修改（改改改改改）設計稿，最終確定了底部 Tab 圖標的視覺風格與定稿，下面帶大家一起看下。

2. 設計特點

極光漸變

選中狀態下，風格上緊跟當下較為流行的高飽和漸變風格，底色采用智行品牌藍色點綴極光青，給人一種科技智能的感覺，這也符合智行 App 這一出行工具類產品的調性。

結合產品調性的品牌符號

圖標選中狀態統一。不再使用各自形態的選中狀態，統一使用和首頁一樣的品牌符號，來強化智行的產品調性；未選狀態下，線型圖標的小短線也是小火車的造型，形成統一的設計語言。

造型圓潤、年輕化

新版圖標優化了平滑圓角以及加大圓角本身，使其圖標更加圓潤，年輕活潑。

3. 動效特點

多彩與靈動

選中圖標，線型圖標漸隱消失，面型圖標跳脫而出，色彩一層層堆疊而出，青色的光暈隨著符號環繞出現。

Q 彈的動畫（是特技的頭發，頭發的特技/duang！duang！）點擊圖標后，選中狀態的動畫采用彈跳的效果，進一步增加趣味性。

與符號的呼應

現實映射與符號的反復出現。符號的動畫模擬了火車進入停靠站的方式強調產品的業務（火車）屬性。每個圖標在用戶選中后，都會在圖標中間出現呼嘯而出的火車符號，仿佛能聽到火車到站了的鳴笛聲。

無論是大的頁面改版還是小到圖標設計，每一次的改版優化都是不小的挑戰，不僅要傳達產品的功能，也要注重美感，風格上還要盡量獨樹一幟。品牌性，識別度，趣味性，缺一不可（可太難了）

過程是折磨人的，但想要有好的呈現，就需要不斷的思考與打磨（抓耳撓腮），總之結果還是令人欣喜的。

最后，感謝你的閱讀，期待我們下次再見（點贊收藏轉發

智行 ZXD 設計團隊，負責智行火車票的用戶體驗創新設計與研究，致力于為用戶打造更智能、更貼心、更有溫度的產品體驗。

歡迎關注作者微信公眾號：「智行ZXD設計中心」