來到騰訊已有一年多，在小火箭V2.0上也投入了很多精力，如今版本已上線，我們整理了在小火箭改版過程中的一些經驗與踩過的坑，分享給大家。

本文由騰訊電腦管家視覺負責人曉翔哥推薦，他的訪談：《優設訪談！騰訊電腦管家視覺負責人張曉翔的UI自學之路》

本文由本人與交互設計師Wingst合力完成。

感謝翔哥、Nick、乃哥、S姐、小怡以及DNA設計中心所有童鞋的大力支持！

小火箭是電腦管家在用戶桌面端的加速小工具，能夠快速而輕量地幫助用戶清理電腦內存、加速電腦，廣受用戶好評，改版前的日均使用次數已經超過1億次，已經成為了管家在用戶桌面的重要觸點。

圖1 舊版小火箭桌面控件

但是小火箭現在的設計和功能真的讓所有用戶都滿意嗎？為了尋找改進的方向，我們對平時不使用小火箭的用戶做了一次在線的問卷調研，反饋顯示，目前小火箭的存在感、能力感知、美觀程度均存在些許問題，歸納后，我們將以“差異化”為出發點，解決目前存在的主要問題。

組件打磨

我們從最基本的組件開始，重新打造我們心目中的小火箭。

A. 桌面控件

小火箭作為一個億級產品，用戶的既定習慣十分重要，一個不慎就可能造成出乎意料的狀況，每個細小的改變都應做到盡可能的慎重，我們只有這么一個小小的控件是露在外面的，那么如何在拇指大小的區域做出好的設計？

圖2 小火箭桌面控件定稿（背景為設計過程中的無數飛機稿）

盲目改動會導致用戶的使用習慣產生落差，這是十分危險的，其實小火箭改版的最佳效果是，用戶在使用上不會有什么不同，但又有些不一樣的地方，似乎體驗更好了，動畫更酷了，更快更流暢了，那么我們的目的就達到了。

所以我們開始尋求其他方向，在架構上將控件進行拆分，針對舊版控件的樣式、色彩等細節進行重新優化。之前小火箭控件是純灰度色，幾乎沒有任何色彩傾向，本次改版中加入了微弱的冷色調，與管家大界面在色調上達到統一。

圖3

內存條的漸變色調做了進一步調整，綠黃紅代表三種警示級別，越往上越危險，我們在保持其顏色語義的基礎上增加藍色調，并保持在同一飽和度范圍，向管家11的青春冒險主題進行對齊，同時內存條的漸變色調也與小火箭的品牌色系進行關聯。

B. 火箭造型

在桌面控件設計完成后，我們開始著手對小火箭的核心——火箭的造型進行重新設計。

圖4

目前舊版火箭存在一些優化的空間：

火箭箭體的形態圓潤但缺乏速度感和科技感、結構也比較復雜，LOGO受限于箭體形狀，展示空間非常有限，火箭停留時間很短，加上箭體較復雜使得logo很難看清，而用戶對小火箭的品牌感知主要來源于小火箭箭體和管家LOGO。

針對這些問題，我們為這次火箭優化總結了四個關鍵詞：科技感/極簡/速度感/品牌感知

圖5在開始之前，我們搜索了大量與相關圖片和信息進行參考

圖6

由于火箭本身的形態并不具備太強烈的速度感，所以我們找到了正好可以與它互補的戰斗機的元素。我們最終鎖定了三款飛行器進行形態推演，分別是：世界上有人駕駛的最快飛機（黑鳥）、六倍音速的無人機（黑燕）以及國產經典戰機殲20，它們三個的共同點都是具有極強的速度感。

圖7二維火箭飛機稿

剛開始我們也是把能夠想到的很多造型都做了出來，但是都不是很滿意。而隨著大方向的確定，我們的設計也漸漸簡化，摒棄多余裝飾，強化品牌，但同時為了加強更極致的視覺效果，讓火箭的發射更抓眼球，我們開始嘗試使用新的手段進行設計。

圖8三維火箭飛機稿

在制作后期中我們開始結合三維軟件進行設計，一方面是能夠使火箭視覺效果更加逼真，另一方面也可以為后續火箭造型的周邊產品做準備。最重要的是，我們可以得到任何角度的火箭造型，那么在發射過程上我們就有了更多的想象空間。

圖9

最終，新版火箭的造型就在這樣的背景下產生了，這次我們使用極簡的設計，摒棄一切多余的元素，造型上通過結合火箭與飛機來達到更強的速度感。

火箭在配色上全箭身都使用亮白色，只有LOGO使用管家藍，在短暫的發射過程中更容易被看清，同時由于使用的三維建模，發射的過程中還可以進行自轉。

圖10

C. 消息通道

針對舊版消息通道存在的問題與改版的方向做了一些總結。舊版消息通道的形式是通過控件旁邊的小尾巴來承載的，除此之外還有氣泡之類直接加在控件之上的樣式。

圖11改版前消息通道形式

目前消息通道所承載的內容有：加速結果、功能拉動、運營消息、新手引導，以后可能還會變得更多。舊版的單一形式已經無法很好的承載信息了，同時小尾巴這種形式也存在許多問題，展示空間不足，視覺焦點也很分散。

圖12改版前消息通道視覺焦點推移

拿發射結果舉例，在發射后會彈出這樣的消息，告知用戶加速結果與內存的變化。視覺焦點從控件本身轉移到小尾巴，雖然不遠但依然是要經過一次轉移。為此我們將兩者合二為一，在桌面控件之上來顯示發射結果，這樣視覺焦點只需要在控件內轉移即可。

圖13

我們設計了整套的消息通道體系并統一視覺焦點，每個類別承載能力不同，分工也不同。如圖中，我們為兩種發射結果、動能拉動和運營消息分別設計了不同類型的展現形式。

圖14消息通道動效體系

同時我們為消息通道打造了匹配的動效體系——多個動效交疊成階梯式結構組成一個整體，增強整體動畫流暢性與完整度，同時對象之間的階梯關系也可以使注意力得到逐步強化。

圖15發射結果頁Demo

圖16蓄力加速結果頁Demo

功能創新

我們希望通過一些創新功能來增強小火箭的能力感知和深度體驗。

A. 蓄力加速

在之前的調研中，有一部分用戶反饋對小火箭加速效果不明顯。雖然我們有加速能力更強的深度加速功能但入口較深、操作流程較長，為了彌補加速效果感知的問題，我們需要有一個增強用戶對功能感知的加速方式。

圖17

我們使用了蟲洞和子彈時間這兩個相對比較抽象的事物作為突破點。同時為了進一步的強化品牌感知，我們在火箭上也做了一些有趣的設計——一道閃光。

圖18蓄力加速Demo

在最終操作方式的選擇上，我們使用了一個在移動端經常會用到的手勢：長按。

為什么會選擇長按這個手勢？一方面可以認為長按是單擊的升級版操作，另一方面是通過長按來模擬火箭在升空之前的一個準備動作。通過比單擊更強化的這樣一個操作，來觸發更強力的加速操作，聯想起來也更加容易。

B. 高危預警

我們認為小火箭的理想狀態應該是這樣——在你不需要的時候你不會察覺它，在需要的時候它又會主動出現，展現自己的能力。高危預警這個功能就是用來在用戶需要的時候展現能力的：在內存占用超過我們預設的閾值時，小火箭會發出警報，告知用戶內存狀況并提醒用戶發射。

圖19 高危預警Demo

所以在制作高危預警時我們提取了火焰、電流、警報這些危險符號，將桌面控件再次分解，在底部和頂部分別加上了紅色光暈和電流元素，然后我們將它合在一起，在內存占用超過閾值時，就會出現這樣的效果了，通過閃爍的紅色光暈和旋轉流動的電流來體現危險、警示的作用，紅光的閃爍、電流旋轉和本身的流動三段動效呈階梯狀組合在一起，形成一個完整、順暢的動效。

D. 蒸汽錐

我們能否可以給小火箭發射時做一個有趣的彩蛋表現形式，來烘托節日氛圍或者祝用戶生日快樂呢？基于這個方向的思考，聯系火箭本身發射的動作，誕生了蒸汽錐的構想。

圖20蒸汽錐Demo

這又是一個針對火箭發射而設計的功能，蒸汽錐是指當物體突破音障時，在物體周圍的蒸汽不斷堆積，會形成圓錐形的云霧。這里首先是借鑒了這樣一種現象來表現火箭發射的極速感，同時在發射后蒸汽團可以形成一個圖案掉落下來，后續或許可以用這樣一個動作來承載部分情感化運營任務。

結語

這次的項目從開始到正式上線，經歷了半年多的時間，我們也從毫無頭緒地瞎嘗試、亂踩坑，變得懂得從根源出發去思考，如何解決問題，收獲真的很大，非常感謝開發GG們不辭辛苦得對我們動畫效果的真實還原，沒有你們就沒有最終上線時的最佳效果。

「人氣過萬的優秀實戰案例教程」

大眾點評：《大眾點評智慧餐廳LOGO設計全過程總結》

紅包預熱HTML 5：《聊聊刷一刷紅包預熱HTML 5背后的設計過程》

火影游戲HTML 5：《揭秘騰訊火影游戲HTML 5背后的設計故事》

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量160萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com