任何設(shè)計(jì)層面的改動(dòng)都是在解決產(chǎn)品中的問題，本文作者主要是看微信團(tuán)隊(duì)是如何來解決了產(chǎn)品中的問題點(diǎn)：浮窗和返回鍵變更。enjoy~

5月23日iOS 用戶可以升級(jí)到最新版本微信，Android用戶也可用通過微信的內(nèi)測(cè)文章下載微信測(cè)試版。與以往大多數(shù)小功能迭代不同，微信這次改動(dòng)可以說是較大版本更新。

以下為詳細(xì)更新點(diǎn)：

1. 公眾號(hào)文章可以以「浮窗」形式存在在界面上；
2. 朋友圈個(gè)人主頁頭部取消了黑色的導(dǎo)航欄，改成透明欄；
3. 公眾號(hào)主頁和文章閱讀頁頂部導(dǎo)航欄改為了白底；
4. 文章閱讀頁返回鍵由“<”修改為“×”；
5. 發(fā)送圖片、視頻等發(fā)送按鈕修改成了文字按鈕；
6. 朋友圈上滑瀏覽時(shí)，頂部導(dǎo)航欄縮??；
7. ……

任何設(shè)計(jì)層面的改動(dòng)都是在解決產(chǎn)品中的問題，我們重點(diǎn)討論第1和第4更新點(diǎn)，看看微信團(tuán)隊(duì)是如何來解決了產(chǎn)品中的問題點(diǎn)。

第1點(diǎn)：公眾號(hào)文章可以以「浮窗」形式存在在界面上

首先「浮窗」從表現(xiàn)形式上與Android上的浮動(dòng)按鈕一致。浮動(dòng)按鈕material design 規(guī)范定義為：浮動(dòng)按鈕一般是產(chǎn)品中最重要頻率最高的操作，浮動(dòng)按鈕是為了更便于操作。就像一個(gè)圓形的圖標(biāo)漂浮在界面上，它會(huì)在聚焦時(shí)改變顏色，在選中時(shí)改變空間高度。按下時(shí)，它可能會(huì)包含更多相關(guān)的操作。

而微信此次重新定義了浮動(dòng)按鈕，「浮窗」沒有點(diǎn)擊狀態(tài)，不承載操作，只作為一個(gè)文章鏈接。浮窗的樣式也是根據(jù)微信公眾號(hào)的頭像來決定。小小的「浮窗」卻承載著至關(guān)重要的作用。

先從交互層面上分析一下「浮窗」，首先假設(shè)一個(gè)使用場(chǎng)景，今天自己喜歡的訂閱號(hào)推送新的文章，看到一半覺得這篇文章寫的很好，發(fā)送給好友看看并且想好友討論一下。

原流程我們得這樣做。（以訂閱號(hào)的文章為例）

1. 一旦關(guān)閉文章，必須重新回到訂閱號(hào)聊天框中找到該公眾號(hào)，重新打開文章。流程繁瑣復(fù)雜，不斷重復(fù)之前的操作流程。中途關(guān)閉文章十次，那就得重新打開十次。（現(xiàn)在在這種碎片化的世界中，很難專注一件事很久，特別是在手機(jī)這種移動(dòng)場(chǎng)景下。很容易就被打斷或者被其他事物吸引走。所以這種頻繁關(guān)閉文章，打開文章的操作肯定會(huì)頻繁出現(xiàn)。該問題嚴(yán)重影響公眾號(hào)文章的閱讀完成率。）
2. 公眾號(hào)的使用場(chǎng)景和好友聊天的使用場(chǎng)景是斷開的，沒有鏈接在一起，容易導(dǎo)致頻繁重復(fù)操作。

為了解決這個(gè)問題，微信團(tuán)隊(duì)使用「浮窗」來作為鏈接公眾號(hào)閱讀文章場(chǎng)景和好友聊天場(chǎng)景這兩個(gè)使用場(chǎng)景的銜接器。

我們看下更新后的使用流程：

發(fā)送朋友后，可以采用浮窗的控件作為文章鏈接。隨時(shí)隨地都可以重新打開。不在需要重走一遍打開文章詳情4步的流程。用戶可以通過浮窗自由切換文章與聊天這兩個(gè)使用場(chǎng)景。這是用戶在這兩個(gè)使用場(chǎng)景中的最大的痛點(diǎn)。那些看文章被中途打斷的用戶，再回來時(shí)不需要繁瑣重復(fù)操作，只需點(diǎn)下浮窗即可很流暢的打開之前的文章繼續(xù)閱讀。場(chǎng)景鏈接連續(xù)性提高了，相信文章的閱讀完成率會(huì)提高不少。

在頻繁的退出切換的使用場(chǎng)景下，還存在一個(gè)爽點(diǎn)Recognition rather than recall（尼爾森十大可用性原則）。就是當(dāng)用戶退出文章時(shí)，再次進(jìn)入文章時(shí)記憶住上次退出的位置而不是讓用戶自己去找上一次退出的位置。（在筆者寫此篇文章時(shí)，該功能還未上線。今天再次使用時(shí)，發(fā)現(xiàn)微信團(tuán)隊(duì)已更新該功能點(diǎn)。）

?從產(chǎn)品層面出發(fā)分析，微信三大功能點(diǎn)，通訊，朋友圈，公眾號(hào)，都只是線性鏈接，相互之間沒有真正的融合貫穿。產(chǎn)品流程很容易就被中斷。在這碎片化的世界，產(chǎn)品使用流程必須是具有高度連續(xù)性。

就像游戲一樣是一環(huán)扣一環(huán)的，一直走下去。有時(shí)候我們玩游戲一不小心被打斷或者是被迫去做別的事情，再回來時(shí)游戲還能很連貫地進(jìn)行下去，就是因?yàn)橛螒虍a(chǎn)品的連續(xù)性很連貫，所以我們繼續(xù)時(shí)毫無阻礙。好的產(chǎn)品連續(xù)性一定不能差，如果連續(xù)差，當(dāng)用戶被某些事情打斷時(shí)，回來的時(shí)候就很難繼續(xù)上一個(gè)任務(wù)了。慢慢地，用戶就會(huì)放棄之前的任務(wù)。這也是我們?cè)谧霎a(chǎn)品中需要思考的地方。（連續(xù)性和沉浸式體驗(yàn)有著本質(zhì)的區(qū)別，沉浸式體驗(yàn)講究的是用戶不容易被打斷，不會(huì)受到別的事物所干擾。而連續(xù)性講究的是即使你在使用我的產(chǎn)品過程中被別的事物所干擾打斷，當(dāng)你再次回來時(shí)，還能流暢的接著上一個(gè)未完成的任務(wù)。）

小小的「浮窗」卻承載著至關(guān)重要的作用：

1. ?將碎片化的使用場(chǎng)景鏈接起來，可以連貫切換場(chǎng)景。
2. 保證整個(gè)產(chǎn)品的內(nèi)容模塊的連續(xù)性，用戶可以更快的完成他的任務(wù)。這也比較符合張小龍之前說的，他希望用戶用完即走。而不是在產(chǎn)品上停留太久，浪費(fèi)過多不必要的時(shí)間。

第4點(diǎn)：文章閱讀頁返回鍵由“<”修改為“×”

雖然只是一個(gè)ICON的更換，這里面的含義缺大不相同，“<”代表的是返回，返回是指去了另外一個(gè)地方再回到原來的地方，是離開了再回來。

之前打開文章詳情是跳出了文章的場(chǎng)景。點(diǎn)擊返回鍵則回到文章的場(chǎng)景。文章列表和文章詳情都是同一個(gè)使用場(chǎng)景。

返回隱喻用戶是離開了當(dāng)前場(chǎng)景去了另一個(gè)場(chǎng)景下，再回到原來的場(chǎng)景下“×”代表的是關(guān)閉，通常代表的含義是打開了某某某東西，要關(guān)閉它，比如打開了窗戶，打開了門。要關(guān)閉窗戶，要關(guān)閉門。

所以這里改用“×”，更多的在暗示用戶，你沒有離開文章列表的場(chǎng)景，而是基于該場(chǎng)景下打開了文章詳情。

雖然是一個(gè)icon的變化，但是給用戶的感受是完全不同的。一個(gè)是離開了當(dāng)前場(chǎng)景，一個(gè)是繼續(xù)再當(dāng)前場(chǎng)景。讓用戶感受到?jīng)]有離開當(dāng)前場(chǎng)景，可以繼續(xù)其他的操作，而不是讓用戶感受到去了另外一個(gè)陌生的場(chǎng)景下。

可惜的是微信此次更新對(duì)于頁面的切換動(dòng)畫沒有做修改，當(dāng)你打開文章詳情時(shí)，頁面切換依然是從右到左的切換，點(diǎn)擊關(guān)閉時(shí)也依然是從左到右關(guān)閉頁面。和更新前是保持一致的。

當(dāng)使用“×”表示沒有脫離場(chǎng)景時(shí)，頁面切換的動(dòng)畫，最好是從下往上覆蓋，關(guān)閉是從上往下退出。Icon和頁面切換的動(dòng)畫兩者的配合才能真正打造出沒有脫離當(dāng)前場(chǎng)景的效果，這樣才能真正給用戶一種隱喻，告訴用戶你沒有離開文章列表的場(chǎng)景。Airbnb的篩選條件也是利用這樣的設(shè)計(jì)來隱喻用戶，還未脫離當(dāng)前場(chǎng)景。相信微信團(tuán)隊(duì)后續(xù)會(huì)做出調(diào)整。

總結(jié)

重點(diǎn)分析了1、公眾號(hào)文章可以以「浮窗」形式存在在界面上；第4點(diǎn)文章閱讀頁返回鍵由“<”修改為“×”。微信此次改版對(duì)于用戶連續(xù)性操作以及沉浸式體驗(yàn)是一個(gè)提升，但是一些細(xì)節(jié)有待完善。

有人分析指出微信此次更新是打響了時(shí)間保衛(wèi)戰(zhàn)，希望把用戶留在微信內(nèi)。而我的觀點(diǎn)恰恰是相反的，從連續(xù)性以及沉浸式這兩點(diǎn)看，微信是希望用戶能更快更愉悅地完成任務(wù)，也比較符合張小龍的主張，希望用戶用戶即走。

本文由 @火炬 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來源于網(wǎng)絡(luò)