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！）點擊圖標後，選中狀態的動畫採用彈跳的效果，進一步增加趣味性。
與符號的呼應
現實映射與符號的反覆出現。符號的動畫模擬了火車進入停靠站的方式強調產品的業務（火車）屬性。每個圖標在用戶選中後，都會在圖標中間出現呼嘯而出的火車符號，仿佛能聽到火車到站了的鳴笛聲。
無論是大的頁面改版還是小到圖標設計，每一次的改版優化都是不小的挑戰，不僅要傳達產品的功能，也要注重美感，風格上還要儘量獨樹一幟。品牌性，識別度，趣味性，缺一不可（可太難了😭）
過程是折磨人的，但想要有好的呈現，就需要不斷的思考與打磨（抓耳撓腮😫），總之結果還是令人欣喜的。
最後，感謝你的閱讀，期待我們下次再見（點讚👍收藏❤️轉發⤴️
↓↓↓
留言列表