微信是騰訊公司于 2011 年 1 月 21 日推出的一款跨平臺類 Kik即時通訊軟件。目前已經有逾三億用戶，功能也日趨豐富。
微信作為一個用戶量極大的“超級 App”，其 Android 客戶端一直沿用 iOS UI，在 Android 4.X 時代，國外各大互聯網廠商紛紛按照 Android Design 重新設計自家應用時，騰訊沒有絲毫這方面的想法，依然“我行我素”的在 Android 上使用 iOS UI。其在 Android 平臺上的所作所為以及其設計師的不負責任言論對國產 Android 應用產生了極為深遠的負面影響。
相對基礎扎實的知乎而言，微信這么一個沒有任何設計基礎的應用，我們需要做的是——從頭開始進行設計，沒有半點偷工減料的可能性，容不得半點偷懶的想法。這次我就以微信為例子，講解一下應該如何重做一款“原本就沒有意向遵循 Android Design”的應用，同時希望這個范例能給大家帶來一些參考。
1、最近對話
既然要重新設計，那就徹底推倒重來。
試用了一下微信之后，我決定采用 Drawer 作為導航方式。微信的導航層級非常多，很多重要的功能都被放在二級或者更多的層級下，Drawer 的采用顯著的減少進入常用功能入口需要的操作次數。為什么不用 Fixed Tabs？其實還是怕上方元素過多重心不穩，而且四個 Tabs 的話會顯得略微擁擠 （官方建議是三個或以下，我是完全不覺得四個 Tab 擁擠啦）。
Action Bar 的顏色是這么來的：iOS 版的微信更新了一個新圖標 （Android 版本似乎也隨后更新了），我從那個圖標的 iOS 7 版本 （沒有“水滴高光”） 的頂部和底部各取一個顏色作為主從色調 （其實和知乎的 Action Bar 處理思路是一致的）。
微信的 iOS 新圖標
現在的未讀通知實在是太 iOS 風了，于是我自己做了個未讀通知樣式: 列表左側 4dp 寬的指示條，頭像變暗 50% 并加上馬賽克風格遮罩，其上顯示未讀計數。
另外，語音信息原來就是單純的顯示「語音」，讓人感到很無趣，我自己做了一個語音的波形圖案來代表語音信息。原來搜索放在頂部，但是會隨列表滾動而不是保持在頂部或者做成 Quick Return 樣式，實際意義不大。我用搜索按鈕代替它。還有，我加入了一個表示時間區間的旗幟提示條。并沒有太大的作用，有點畫蛇添足吧……
2、Navigation Drawer & 發現
我注意到對于很多用戶 （比如說我媽和她的同事，朋友們） 而言，“發現”分類下的三個功能實際上都是非常常用的，而它們現在位于二級菜單中，不便于導航。而采取 Drawer 之后，就可以做到直接從這些功能的頁面進入最近對話等一級菜單的功能中。而且，這個 Drawer 被設計為在二級頁面中也能喚出的，它的采用能再次提升應用導航的便利性。
采用 Drawer 還有一個好處就是原來的”發現”和”我” Tab 可以被取消掉。原本的”發現”和”我” Tab 功能十分雞肋，實際上就是兩個導航樞紐 （Navigation Hub）。所以我選擇將“我” Tab 中的內容放進頭像旁 Spinner 展開后的菜單中 （這些功能比起”發現”中的功能，往往更少被使用到），而“發現” Tab 下的功能則得到了優先級提升，可以直接從 Drawer 中訪問。還有一點就是，在我看來，新增加的“表情商店”比起“我”更適合放在“發現”下。
另外，圖標也經過了全新設計。這次的用色對于我而言是一個挑戰，期間也得到了來自 Suiyoubi 的指導。新的圖標采用飽和度和明度都相對較低的配色，三個一級頁面的圖標采用冷色，而三個次級頁面采用暖色。次級頁面下我使用淡綠色的背景和綠色的左側指示條讓這次的 Drawer 不至于顯得很單調。
我還做了一個參照 G+ 4.1 版本的 Drawer，把朋友圈的個人題圖放進 Drawer，然后去掉了”發現”下的朋友圈，改為從題圖進入。
3、通訊錄
聯系人界面我參照了 Android 自帶聯系人進行設計，將頭像放大，同時給個性簽名更多空間。iOS 風的字母 Index 則用 Android 標準的 Indexed Scrolling 代替。礙事而且不好用的搜索欄依然移到 Action Bar 中。
4、對話界面
第一步
（由于懶得打那么多對話所以我就用鍵盤遮住了一半屏幕…）
對話框的風格參照 Hangouts 來進行設計，保留了微信原來的對話框和頭像的布局。之所以選擇 Hangouts 是因為短信的對話框太平淡了，沒有 Hangouts 這樣的活躍感。原先微信采用了淺黃色背景，但是感覺和主題不是很搭調，我將背景顏色替換成了淡綠色。
第二步
觀察了一下微信的對話框，發現原本微信對話的右邊距大得可怕。考慮到“對話”的連貫性，我不打算采用那么大的邊距，但是還是適當的增加了一下邊距的大小。另外還有重選了一套“更多功能”中的圖標 （因為很懶所以隨便給搞了幾個）。還有，為了強調“右滑返回”，我給界面左邊緣加入了一個小把手。
5、朋友圈
設計朋友圈頁面的時候其實也沒有想太多。朋友圈的最主要目的就是看照片，贊和評論。于是我在排版上借鑒了 Play Music 的藝人題圖呈現形式 （Fading Action Bar）還有 Google+ 的卡片流，在信息流里加入更大的照片和頭像，把“評論”和“贊”功能直接拉出來 （原來的話需要先點擊那個小氣泡再選擇評論或贊）。另外對于不能完全顯示的照片，我借鑒了 Zagat的信息流設計，讓發照片人的頭像第一時間顯示在時間軸底部，而個人信息和“評論”，“贊”都浮于照片上方的半透明漸變面板上。這是卷動后的效果。Action Bar 在卷動中顯現。
6、掃一掃
第一步
我和 Suiyoubi 在“掃一掃”界面上下了不少功夫。在一番討論之后我們達成共識，既然是“掃一掃”，那么相機界面就應該是絕對中心，微信本來就采用了半透明的功能菜單和 Top Bar，我們干脆把這個設計貫徹到極致，采用了大膽的漸變透明 Action Bar，并摒棄了屏幕上的切換功能 （我認為大多數用戶是應該不會頻繁的在這些功能間切換的，只需要在進入是給出選項即可）。
第二步
后來我們決定采用更加激進的方式，摒棄選項對話框，直接進入常用功能 （現在的微信”掃一掃”功能也是一打開就默認進入二維碼掃描），其他功能則采用 Scrollable Tabs 進行切換 （雖然說昨天我才說過 Scrollalble 的劣勢，但是一個東西的價值不能輕易徹底否定）。
Scrollable 比起 Fixed Tabs，占用的縱向面積更小。而我們希望這個 Scrollalbe 是可點擊式的，這樣就不會離原先的設計太遠。修改完成之后，整體效果比原來好了不少。
7、初次啟動畫面 & 登錄畫面
歡迎畫面的設計一定程度上受到了 iOS 7 的影響，我去掉了原先按鈕的邊框，將它們變為 Bottom Borderless 的樣式，一方面增加了觸摸范圍，另一方面變得更加美觀。
做登陸畫面的思路和知乎那邊是一致的，我希望能夠給用戶帶來視覺沖擊。至于那些更新說明什么的，我懶得重畫（因為每次都不一樣…）。
我希望做到的效果是，初次啟動畫面向上平移到預定位置，同時登錄窗從下方浮入，Faded Action Bar 從上方浮入。
8、主屏圖標 & 通知欄圖標
其實微信的圖標要改起來也不難，只要把底座去掉就成了。我借用了一下 Android Asset Studio的圖標生成工具做了一個具有一定立體感的圖標。
至于顯示效果嘛…
好吧我承認我又偷懶了，通知欄圖標看起來有種吃撐了的感覺，不過大小很好調整的（只是我懶得調整罷了）。但是這效果至少比原來那個好一點吧…
總結
早在半年以前我就想要對微信進行重設計了，但是由于種種原因 （主要還是懶） 沒著手做事。現在手頭有了充足的資源，我對 Android Design 的理解比起半年前也有了明顯的進步，差不多是時候開始補欠下的作業了。
對微信進行重設計的過程十分痛苦，每個界面都需要從頭到尾重畫，沒有任何能直接利用的資源。但是完全重新設計也有一個好處，就是可以完全不必顧慮應用原本的形態和樣式，自由的發揮。由于是完全從頭設計，做出的改變就不列出了。
這里再多嘴說一說上次的知乎 redesign 發布之后我的一些想法吧。重設計作為我的個人作品，必然是優先體現我的個人風格和 Android Design，而如何更好的彰顯品牌特性這種事情應該交給軟件公司去做，而不是我。比起畫好看的圖標，我更注重這些元素在視覺上的搭配和位置是否正確，會不會起到吸引用戶注意力這方面的事，這也是我和 Suiyoubi 為了 Drawer 中圖標的配色和形狀，擺放等問題討論了一個下午的理由。而畫好看的圖標的任務，請交給美工。
另一方面，我對代碼的實現完全不感興趣，因為同樣一套交互方案，有的開發者能用簡潔漂亮的代碼流暢的實現，有的開發者就要用數倍于前者的代碼量實現，而且實現的效果還很差勁。我可以很負責的說一句，在我設計中出現的所有交互方案和思路，都可以通過現有的代碼理想的實現，就看開發者的水平如何。作為一個文科生，我經常逛 GitHub，對于哪些交互能夠實現有清醒的認識。
這次我沒畫設置頁，因為這個頁面畫出來效果基本會和上次知乎的設置頁效果差不多，我懶得畫 （說到底還是懶的問題嘛！）（不過雖說如此我還是準備了一套綠色調的設置用圖標）…
這次重設計的過程中得到了很多人的幫助，有來自團隊內部成員 Suiyoubi 的用色指導，有來自團隊外部流水姐的各種建議等。相信在大家的幫助下 ADiA 這個欄目會越做越好的。
最后照例是對比圖，不過這次的對比圖沒什么意思（就像是拿一臺長得像 Nexus 4 的 iPhone 和一臺 Nexus 4 對比一樣），權當參考吧。
主屏圖標 & 通知欄圖標
歡迎頁
登錄頁
最近對話
發現 & 導航抽屜
通訊錄
對話
朋友圈
掃一掃
