微信作為一個(gè)用戶量極大的”超級(jí) App”, 其 Android 客戶端一直沿用 iOS?UI, 在 Android 4.X 時(shí)代, 國(guó)外各大互聯(lián)網(wǎng)廠商紛紛按照 Android Design 重新設(shè)計(jì)自家應(yīng)用時(shí), 騰訊沒(méi)有絲毫這方面的想法, 依然”我行我素”的在 Android 上使用 iOS?UI. 其在 Android 平臺(tái)上的所作所為以及”知乎上某騰訊前設(shè)計(jì)師的一條答案” 其設(shè)計(jì)師的不負(fù)責(zé)任言論對(duì)國(guó)產(chǎn) Android 應(yīng)用產(chǎn)生了極為深遠(yuǎn)的負(fù)面影響.

既然要重新設(shè)計(jì), 那就徹底推倒重來(lái).

試用了一下微信之后, 我決定采用 Drawer 作為導(dǎo)航方式. 微信的導(dǎo)航層級(jí)非常多, 很多重要的功能都被放在二級(jí)或者更多的層級(jí)下, Drawer 的采用顯著的減少進(jìn)入常用功能入口需要的操作次數(shù). 為什么不用 Fixed Tabs? 其實(shí)還是怕上方元素過(guò)多重心不穩(wěn), 而且四個(gè) Tabs 的話會(huì)顯得略微擁擠 (官方建議是三個(gè)或以下… 我是完全不覺(jué)得四個(gè) Tab 擁擠啦).

Action Bar 的顏色是這么來(lái)的: iOS 版的微信更新了一個(gè)新圖標(biāo) (Android 版本似乎也隨后更新了), 我從那個(gè)圖標(biāo)的 iOS?7 版本 (沒(méi)有”水滴高光”) 的頂部和底部各取一個(gè)顏色作為主從色調(diào) (其實(shí)和知乎的 Action Bar 處理思路是一致的).

現(xiàn)在的未讀通知實(shí)在是太 iOS?風(fēng)了, 于是我自己做了個(gè)未讀通知樣式: 列表左側(cè) 4dp 寬的指示條, 頭像變暗 50% 并加上馬賽克風(fēng)格遮罩, 其上顯示未讀計(jì)數(shù).

另外, 語(yǔ)音信息原來(lái)就是單純的顯示 [語(yǔ)音], 讓人感到很無(wú)趣, 我自己做了一個(gè)語(yǔ)音的波形圖案來(lái)代表語(yǔ)音信息. 原來(lái)搜索放在頂部, 但是會(huì)隨列表滾動(dòng)而不是保持在頂部或者做成 Quick Return 樣式, 實(shí)際意義不大. 我用搜索按鈕代替它. 還有, 我加入了一個(gè)表示時(shí)間區(qū)間的旗幟提示條. 并沒(méi)有太大的作用, 有點(diǎn)畫(huà)蛇添足吧…

2. Navigation Drawer & 發(fā)現(xiàn)

?

我注意到對(duì)于很多用戶 (比如說(shuō)我媽和她的同事, 朋友們) 而言, “發(fā)現(xiàn)”分類(lèi)下的三個(gè)功能實(shí)際上都是非常常用的, 而它們現(xiàn)在位于二級(jí)菜單中,不便于導(dǎo)航. 而采取 Drawer 之后, 就可以做到直接從這些功能的頁(yè)面進(jìn)入最近對(duì)話等一級(jí)菜單的功能中. 而且, 這個(gè) Drawer 被設(shè)計(jì)為在二級(jí)頁(yè)面中也能喚出的, 它的采用能再次提升應(yīng)用導(dǎo)航的便利性.

采用 Drawer 還有一個(gè)好處就是原來(lái)的”發(fā)現(xiàn)”和”我” Tab 可以被取消掉. 原本的”發(fā)現(xiàn)”和”我” Tab 功能十分雞肋, 實(shí)際上就是兩個(gè)導(dǎo)航樞紐. 所以我選擇將”我” Tab 中的內(nèi)容放進(jìn)頭像旁 Spinner 展開(kāi)后的菜單中 (這些功能比起”發(fā)現(xiàn)”中的功能, 往往更少被使用到), 而”發(fā)現(xiàn)” Tab 下的功能則得到了優(yōu)先級(jí)提升, 可以直接從 Drawer 中訪問(wèn).?還有一點(diǎn)就是, 在我看來(lái), 新增加的”表情商店”比起”我”更適合放在”發(fā)現(xiàn)”下.

另外, 圖標(biāo)也經(jīng)過(guò)了全新設(shè)計(jì). 這次的用色對(duì)于我而言是一個(gè)挑戰(zhàn), 期間也得到了來(lái)自 Suiyoubi 的指導(dǎo).?新的圖標(biāo)采用飽和度和明度都相對(duì)較低的配色, 三個(gè)一級(jí)頁(yè)面的圖標(biāo)采用冷色, 而三個(gè)次級(jí)頁(yè)面采用暖色. 次級(jí)頁(yè)面下我使用淡綠色的背景和綠色的左側(cè)指示條讓這次的 Drawer 不至于顯得很單調(diào).

?

我還做了一個(gè)參照 G+ 4.1 版本的 Drawer, 把朋友圈的個(gè)人題圖放進(jìn) Drawer, 然后去掉了”發(fā)現(xiàn)”下的朋友圈, 改為從題圖進(jìn)入.

3. 通訊錄

?

聯(lián)系人界面我參照了 Android 自帶聯(lián)系人進(jìn)行設(shè)計(jì), 將頭像放大, 同時(shí)給個(gè)性簽名更多空間. iOS?風(fēng)的字母 Index 則用 Android 標(biāo)準(zhǔn)的 Indexed Scrolling 代替. 礙事而且不好用的搜索欄依然移到 Action Bar 中。

4. 對(duì)話界面

第一步

?

(由于我懶得打那么多對(duì)話所以我就用鍵盤(pán)遮住了一半屏幕…)

對(duì)話框的風(fēng)格參照 Hangouts 來(lái)進(jìn)行設(shè)計(jì), 保留了微信原來(lái)的對(duì)話框和頭像的布局. 之所以選擇 Hangouts 是因?yàn)槎绦诺膶?duì)話框太平淡了, 沒(méi)有 Hangouts 這樣的活躍感. 原先微信采用了淺黃色背景, 但是感覺(jué)和主題不是很搭調(diào),我將背景顏色替換成了淡綠色.

第二步

?

觀察了一下微信的對(duì)話框, 發(fā)現(xiàn)原本微信對(duì)話的右邊距大得可怕. 考慮到”對(duì)話”的連貫性, 我不打算采用那么大的邊距, 但是還是適當(dāng)?shù)脑黾恿艘幌逻吘嗟拇笮? 另外還有重選了一套”更多功能”中的圖標(biāo) (因?yàn)楹軕兴噪S便給搞了幾個(gè)). 還有, 為了強(qiáng)調(diào)”右滑返回”, 我給界面左邊緣加入了一個(gè)小把手.

5. 朋友圈

?

設(shè)計(jì)朋友圈頁(yè)面的時(shí)候其實(shí)也沒(méi)有想太多. 朋友圈的最主要目的就是看照片, 贊和評(píng)論. 于是我在排版上借鑒了 Play Music 的藝人題圖呈現(xiàn)形式還有 Google+ 的卡片流, 在信息流里加入更大的照片和頭像, 把”評(píng)論”和”贊”功能直接拉出來(lái) (原來(lái)的話需要先點(diǎn)擊那個(gè)小氣泡再選擇評(píng)論或贊). 另外對(duì)于不能完全顯示的照片, 我借鑒了”Zagat – Play Store” ?的信息流設(shè)計(jì)， 讓發(fā)照片人的頭像第一時(shí)間顯示在時(shí)間軸底部, 而個(gè)人信息和”評(píng)論”, “贊”都浮于照片上方的半透明漸變面板上.

?

?

這是卷動(dòng)后的效果. Action Bar 在卷動(dòng)中顯現(xiàn)。

6. 掃一掃

第一步

?
我和 Suiyoubi 在”掃一掃”界面上下了不少功夫. 在一番討論之后我們達(dá)成共識(shí), 既然是”掃一掃”, 那么相機(jī)界面就應(yīng)該是絕對(duì)中心, 微信本來(lái)就采用了半透明的功能菜單和 Top Bar, 我們干脆把這個(gè)設(shè)計(jì)貫徹到極致, 采用了大膽的漸變透明 Action Bar, 并摒棄了屏幕上的切換功能 (我認(rèn)為大多數(shù)用戶是應(yīng)該不會(huì)頻繁的在這些功能間切換的, 只需要在進(jìn)入是給出選項(xiàng)即可).

第二步

?

后來(lái)我們決定采用更加激進(jìn)的方式, 摒棄選項(xiàng)對(duì)話框, 直接進(jìn)入常用功能 (現(xiàn)在的微信”掃一掃”功能也是一打開(kāi)就默認(rèn)進(jìn)入二維碼掃描), 其他功能則采用 Scrollable Tabs 進(jìn)行切換 (雖然說(shuō)昨天我才說(shuō)過(guò) Scrollalble 的劣勢(shì), 但是一個(gè)東西的價(jià)值不能輕易徹底否定).

Scrollable 比起 Fixed Tabs, 占用的縱向面積更小. 而我們希望這個(gè) Scrollalbe 是可點(diǎn)擊式的, 這樣就不會(huì)離原先的設(shè)計(jì)太遠(yuǎn).修改完成之后, 整體效果比原來(lái)好了不少.

7. 初次啟動(dòng)畫(huà)面 & 登錄畫(huà)面

?

歡迎畫(huà)面的設(shè)計(jì)一定程度上受到了?iOS 7 的影響, 我去掉了原先按鈕的邊框, 將它們變?yōu)?Bottom Borderless 的樣式, 一方面增加了觸摸范圍, 另一方面變得更加美觀.

?

做登陸畫(huà)面的思路和知乎那邊是一致的, 我希望能夠給用戶帶來(lái)視覺(jué)沖擊. 至于那些更新說(shuō)明什么的, 我懶得重畫(huà) (因?yàn)槊看味疾灰粯印?.

我希望做到的效果是, 初次啟動(dòng)畫(huà)面向上平移到預(yù)定位置, 同時(shí)登錄窗從下方浮入, Faded Action Bar 從上方浮入.

8. 主屏圖標(biāo) & 通知欄圖標(biāo)

其實(shí)微信的圖標(biāo)要改起來(lái)也不難, 只要把底座去掉就成了. 我借用了一下?“Android Asset Stuido” 的圖標(biāo)生成工具做了一個(gè)具有一定立體感的圖標(biāo).

至于顯示效果嘛…

?

好吧我承認(rèn)我又偷懶了, 通知欄圖標(biāo)看起來(lái)有種吃撐了的感覺(jué), 不過(guò)大小很好調(diào)整的 (只是我懶得調(diào)整罷了). 但是這效果至少比原來(lái)那個(gè)好一點(diǎn)吧…

總結(jié)

早在半年以前我就想要對(duì)微信進(jìn)行重設(shè)計(jì)了, 但是由于種種原因 (主要還是懶) 沒(méi)著手做事. 現(xiàn)在手頭有了充足的資源, 我對(duì) Android Design 的理解比起半年前也有了明顯的進(jìn)步, 差不多是時(shí)候開(kāi)始補(bǔ)欠下的作業(yè)了.

對(duì)微信進(jìn)行重設(shè)計(jì)的過(guò)程十分痛苦, 每個(gè)界面都需要從頭到尾重畫(huà), 沒(méi)有任何能直接利用的資源. 但是完全重新設(shè)計(jì)也有一個(gè)好處, 就是可以完全不必顧慮應(yīng)用原本的形態(tài)和樣式, 自由的發(fā)揮. 由于是完全從頭設(shè)計(jì), 做出的改變就不列出了.

這里再多嘴說(shuō)一說(shuō)上次的”Android Design in Action — 以知乎為例”知乎發(fā)布之后我的一些想法吧. 重設(shè)計(jì)作為我的個(gè)人作品, 必然是優(yōu)先體現(xiàn)我的個(gè)人風(fēng)格和 Android Design, 而如何更好的彰顯品牌特性這種事情應(yīng)該交給軟件公司去做, 而不是我. 比起畫(huà)好看的圖標(biāo), 我更注重這些元素在視覺(jué)上的搭配和位置是否正確, 會(huì)不會(huì)起到吸引用戶注意力這方面的事, 這也是我和 Suiyoubi 為了 Drawer 中圖標(biāo)的配色和形狀, 擺放等問(wèn)題討論了一個(gè)下午的理由. 而畫(huà)好看的圖標(biāo)的任務(wù), 請(qǐng)交給美工.

另一方面, 我對(duì)代碼的實(shí)現(xiàn)完全不感興趣, 因?yàn)橥瑯右惶捉换シ桨? 有的開(kāi)發(fā)者能用簡(jiǎn)潔漂亮的代碼流暢的實(shí)現(xiàn), 有的開(kāi)發(fā)者就要用數(shù)倍于前者的代碼量實(shí)現(xiàn), 而且實(shí)現(xiàn)的效果還很差勁. 我可以很負(fù)責(zé)的說(shuō)一句, 在我設(shè)計(jì)中出現(xiàn)的所有交互方案和思路, 都可以通過(guò)現(xiàn)有的代碼理想的實(shí)現(xiàn), 就看開(kāi)發(fā)者的水平如何. 作為一個(gè)文科生, 我經(jīng)常逛 GitHub, 對(duì)于哪些交互能夠?qū)崿F(xiàn)有清醒的認(rèn)識(shí).

這次我沒(méi)畫(huà)設(shè)置頁(yè), 因?yàn)檫@個(gè)頁(yè)面畫(huà)出來(lái)效果基本會(huì)和上次知乎的設(shè)置頁(yè)效果差不多, 我懶得畫(huà) (說(shuō)到底還是懶的問(wèn)題嘛!)(不過(guò)雖說(shuō)如此我還是準(zhǔn)備了一套綠色調(diào)的設(shè)置用圖標(biāo))…

這次重設(shè)計(jì)的過(guò)程中得到了很多人的幫助, 有來(lái)自團(tuán)隊(duì)內(nèi)部成員 Suiyoubi 的用色指導(dǎo), 有來(lái)自團(tuán)隊(duì)外部流水姐的各種建議等. 相信在大家的幫助下 ADiA 這個(gè)欄目會(huì)越做越好的.

最后照例是對(duì)比圖, 不過(guò)這次的對(duì)比圖沒(méi)什么意思 (就像是拿一臺(tái)長(zhǎng)得像 Nexus 4 的 iPhone 和一臺(tái) Nexus 4 對(duì)比一樣), 權(quán)當(dāng)參考吧.

主屏圖標(biāo) & 通知欄圖標(biāo)

歡迎頁(yè)

登錄頁(yè)

最近對(duì)話

發(fā)現(xiàn) & 導(dǎo)航抽屜

通訊錄

對(duì)話

朋友圈

掃一掃

via:http://www.phonekr.com/adia-wechat-visual-redesign/