編輯指南：最近微信浮動窗口功能改編后上線了。對此，我們做了一些研究，本文從七個方面逐步分析了分層微信浮窗的相互作用細(xì)節(jié)。

一起來看看吧。

一、浮窗的意義

作為體量如此大的一個App，微信的任何一項改動都影響巨大，更何況是如此重要的一個功能。

那么微信為什么會推出浮窗這個功能？首先要明白它要解決的是什么問題。

這個功能解決了微信作為社交工具常常被吐槽的一個痛點：

用戶在閱讀公眾號文章時，經(jīng)常要為了回復(fù)聊天信息而在聊天頁和文章頁之間來回切換。

特別是在涉及各種內(nèi)部鏈接的多級跳轉(zhuǎn)后，想要再次返回之前閱讀的文章，并不是一件容易的事。

一句話，解決用戶“邊聊天邊看公眾號”的需求。

對微信內(nèi)的兩大重要應(yīng)用場景的連接——即時通訊和公眾號內(nèi)容。

即時通訊本身是一個高頻，碎片化場景。而公眾號的內(nèi)容消費則是一個沉浸式，專注場景，相對垂直的縱深體驗。

二、浮窗的應(yīng)用場景

場景1：用戶看到一篇好看的文章，文章太長了來不及看完，這時他會先加入懸浮窗，回頭慢慢看，相當(dāng)于稍后再看。

對于那些喜歡屯文章看的用戶來說簡直太方便了。

場景2：用戶正在看文章，突然收到朋友發(fā)來的信息，需要及時處理，那么可以把文章加入懸浮窗，等處理完聊天信息再接著看。

有浮窗前vs有浮窗后

某天，你下班回家的路上在地鐵上看訂閱號看得入迷，突然傳來“叮咚”一聲，盡管你萬般不愿意，但還是怕萬一錯過什么重要的信息，于是你退出文章，回到訂閱號列表，再回到消息列表，看了一眼，原來是一個免打擾群里的群主說了一句跟你無關(guān)的話“@所有人”，頓時心中一萬只草泥馬奔騰而過……

于是你再次打開訂閱號列表，找到訂閱號，點擊文章標(biāo)題，加載半天終于加載完了，又一聲“叮咚”，你看了幾行字還是按捺不住內(nèi)心的好奇心，于是又左上角返回返回返回，回到消息界面，一看，向來對你直呼其名的對象發(fā)來一句“親愛的”，你就知道事情沒有那么簡單，于是回復(fù)了幾顆小紅心，等半天對方?jīng)]回復(fù)，你再一次進(jìn)入文章，又一聲“叮咚”，接下來的操作你們都知道了…

而有了浮窗以后，當(dāng)你再收到家里領(lǐng)導(dǎo)的消息后，直接加入浮窗，便可優(yōu)雅的跟領(lǐng)導(dǎo)對話，不會怠慢，豈不是方便多了？

三、舊版浮窗的3個缺點

1. 狗皮膏貼，逼死強迫癥

在加入浮窗后，這個浮窗在微信界面里無處不在，不管你需不需要它。

張小龍在微信十年的演講中說：浮窗其實我挺不喜歡的，它特別像一個狗皮膏藥，占了你的屏幕一個位置，很多朋友看文章看不完，一邊處理消息一邊看，這不是一個好的解決方案。

2. 權(quán)重太高，不匹配其使用頻次

這個浮窗是全局式的，存在于微信的每個界面，通訊錄、私聊頁、朋友圈、搜索、視頻號、個人詳情頁……

在寸土寸金的移動端界面，每一塊地方都是及其寶貴的。僅僅為了解決一個“邊聊天邊看文章”的需求，而設(shè)計了這么一個浮窗，是否權(quán)重太高了？

與其使用頻率并不匹配，可能在大多數(shù)時間里用戶并不需要它，可它就一直在那里。

3. 數(shù)量太少

舊版的浮窗最多只支持5篇文章，這個數(shù)量其實太少了。數(shù)量達(dá)到這個極值后再添加，還會提醒你要先刪除才能再添加，徒增麻煩。這便是數(shù)量少的缺陷。

四、新版浮窗的6個優(yōu)點

1. 數(shù)量增加了20倍

舊版最多只能支持5篇，而新版最多可以支持100篇，這個數(shù)量是足夠的，在達(dá)到這個極值后，新添加的會自動替代之前添加的。

2. 自動清除機制

當(dāng)文章數(shù)量達(dá)到了100的極值后，還可以繼續(xù)增加，不會提示你刪除，而是自動替換，這對于用戶來說是無感的，這才是好的體驗。

彈窗反饋不是產(chǎn)品刷存在感的工具，對于產(chǎn)品設(shè)計來說，讓用戶感覺不到你的存在才是好的設(shè)計。

事無巨細(xì)都要詢問用戶的交互并不友好，深入思考用戶使用場景，處處為用戶考慮，體貼周到。

3. 特殊的空狀態(tài)

對于空狀態(tài)一般的界面會有一個情感化的插畫設(shè)計，而這里并沒有這么做。

當(dāng)把浮窗的最后一篇文章刪掉時列表會關(guān)閉，首頁左上角的“浮窗”按鈕也會消失，并不會刻意聲張自己的存在，把不打擾做到了極致 。

這是微信一貫的調(diào)性了，就像沒有關(guān)注任何訂閱號，首頁就不會有“訂閱號消息”這個入口；若從未使用過小程序發(fā)現(xiàn)界面就不會有小程序這個入口。

4. 巧妙的動效，創(chuàng)新的交互

看多了各種狂拽酷炫吊炸天的動效后，最終明白要回歸到本源，動效的存在不是為了炫技，而是要服務(wù)于功能設(shè)計。

來看看微信是怎么做的，當(dāng)用戶添加到浮層時，頁面會變成一個圓形然后從導(dǎo)航欄的左上角滑出去。

用動效巧妙的傳達(dá)了入口位置，富有創(chuàng)意又指示明確，每一次加入懸浮窗的動作都是在暗示你懸浮窗的入口位置，堪稱教科書式動效設(shè)計。

這是一個極具創(chuàng)新的交互形態(tài)，從未在其他產(chǎn)品上看到過，一個看似簡單的交互，背后是大量的用戶研究和用戶測試的支撐。

5. 右下角的扇形

在移動端，左右兩邊是單手可觸控的區(qū)域。而右下角剛好跟側(cè)邊右滑返回的手勢相關(guān)聯(lián)。

這里還有一個小細(xì)節(jié)，側(cè)邊右滑到右下角會出現(xiàn)一個小的扇形區(qū)域，移過去扇形區(qū)域會出現(xiàn)放大，產(chǎn)品預(yù)判你可能要加入浮窗。

6. 流暢的操作過程

右滑加入浮窗，右滑返回，右滑呼出浮窗，由于都是相同的手勢，整個流程是很順暢的，用戶在操作過程中并不會遇到太大的麻煩。

五、浮窗不浮，不如“稍后再讀”

微信 8.0 將原本吸附于屏幕邊緣的浮窗，改為了主界面?zhèn)冗呌一M(jìn)入“浮窗”界面。

這種改動雖然解決了“狗皮膏藥”的問題，但卻讓“浮窗”變得有名無實。

畢竟它不再是懸浮在界面上的窗口，而變成了類似“稍后閱讀”的書架。

因此，與其叫“浮窗”不如叫“稍后再讀”。我覺得這跟B站的“稍后再看”類似。

就算是加入了“浮窗”，用戶也有可能不會再去看，但他依然會不斷的重復(fù)這個操作。這源于損失厭惡心理學(xué)：比起得到，用戶更害怕失去。

六、其他解決方案

1. QQ的浮層

當(dāng)用戶在看文章時收到了新消息時，到底要不要馬上回？

這取決于來信息的人或事情的重要性，如果是比較重要緊急的事情，那么必須馬上回復(fù)。

可問題在于當(dāng)前的信息內(nèi)容是未知的，因此無法作出判斷。

當(dāng)你在瀏覽qq空間時，如果來信息了，會直接在當(dāng)前頁面顯示出來個圓圈小浮層，顯示消息條數(shù)。

可以選擇回復(fù)或繼續(xù)當(dāng)前任務(wù)，聊天和看qq空間兩不誤。但是沒有解決未知信息的問題。

2. iOS頂部橫幅

iOS系統(tǒng)，在收到信息后，頂部會出現(xiàn)一個橫幅信息提示，可以看到發(fā)件人和內(nèi)容，你可以選擇下拉回復(fù)或關(guān)閉。

當(dāng)你看到這些內(nèi)容后可以決定要不要回復(fù)，省去了來回切換的繁瑣。

對于一些不重要的消息，完全可以專注于當(dāng)前任務(wù)，稍后回復(fù)。

可新的問題又來了，不斷的短信提醒會打擾到用戶當(dāng)前的沉浸式閱讀體驗。

如何平衡閱讀體驗和信息回復(fù)是個巨大的挑戰(zhàn)。

3. 知乎最近閱讀

很多產(chǎn)品都會有一個叫歷史記錄的功能，自動記錄下用戶的瀏覽記錄。比如知乎的最近閱讀，會自動保存最近3k條閱讀過的文章。

該功能的目的在于方便用戶找回某個曾經(jīng)看過的內(nèi)容。其最大的優(yōu)點在于不需要用戶過多的操心，自動保存。這對微信也是有一定的借鑒意義。

目前的微信的浮窗解方案是否為最完美的解決方案？我看未必，需要用戶觸發(fā)是它的最大缺陷。

上面2、3是一個不錯的方向，可以在此基礎(chǔ)上做適當(dāng)?shù)母倪M(jìn)。

七、番外：知乎浮窗，東施效顰

當(dāng)初，微信推出浮窗功能后，知乎產(chǎn)品經(jīng)理大喜，直接像素級抄襲過來。無論交互、視覺還是動效，也是最多五篇回答，就改了個圖標(biāo)，跟微信的懸浮窗簡直如出一轍。

卻鬧出了東施效顰的笑話，我為什么說它是東施效顰？

首先這兩個產(chǎn)品的定位是完全不一樣，前者是一個社交工具，而知乎是個內(nèi)容平臺，其本身已經(jīng)有一個最近瀏覽的功能，想要找回過去看過的文章也并非難事。

請問這個浮窗的意義何在？

另外，知乎還有“下一個”懸浮圖標(biāo)（我覺得這個功能挺好，方便用戶快速切到下一個回答。），再加上iPhone自帶的狗皮膏藥（輔助觸控），在這巴掌大的屏幕上，聚集了三個狗皮膏藥……

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

題圖來自Unsplash，基于CC0協(xié)議。