起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識解析微信浮窗的交互細節
編輯導讀：近日，微信浮窗功能改版后上線。對此，我們做了些許研究，本文就從七個方面層層遞進解析微信浮窗的交互細節。一起來看看吧。
一、浮窗的意義
作為體量如此大的一個App，微信的任何一項改動都影響巨大，更何況是如此重要的一個功能。
那么微信為什么會推出浮窗這個功能？首先要明白它要解決的是什么問題。
這個功能解決了微信作為社交工具常常被吐槽的一個痛點：
用戶在閱讀公眾號文章時，經常要為了回復聊天信息而在聊天頁和文章頁之間來回切換。
特別是在涉及各種內部鏈接的多級跳轉后，想要再次返回之前閱讀的文章，并不是一件容易的事。
一句話，解決用戶“邊聊天邊看公眾號”的需求。
對微信內的兩大重要應用場景的連接——即時通訊和公眾號內容。
即時通訊本身是一個高頻，碎片化場景。而公眾號的內容消費則是一個沉浸式，專注場景，相對垂直的縱深體驗。
二、浮窗的應用場景
場景1：用戶看到一篇好看的文章，文章太長了來不及看完，這時他會先加入懸浮窗，回頭慢慢看，相當于稍后再看。
對于那些喜歡屯文章看的用戶來說簡直太方便了。
場景2：用戶正在看文章，突然收到朋友發來的信息，需要及時處理，那么可以把文章加入懸浮窗，等處理完聊天信息再接著看。
有浮窗前vs有浮窗后
某天，你下班回家的路上在地鐵上看訂閱號看得入迷，突然傳來“叮咚”一聲，盡管你萬般不愿意，但還是怕萬一錯過什么重要的信息，于是你退出文章，回到訂閱號列表，再回到消息列表，看了一眼，原來是一個免打擾群里的群主說了一句跟你無關的話“@所有人”，頓時心中很不爽……
于是你再次打開訂閱號列表，找到訂閱號，點擊文章標題，加載半天終于加載完了，又一聲“叮咚”，你看了幾行字還是按捺不住內心的好奇心，于是又左上角返回返回返回，回到消息界面，一看，向來對你直呼其名的對象發來一句“親愛的”，你就知道事情沒有那么簡單，于是回復了幾顆小紅心，等半天對方沒回復，你再一次進入文章，又一聲“叮咚”，接下來的操作你們都知道了…
而有了浮窗以后，當你再收到家里領導的消息后，直接加入浮窗，便可優雅的跟領導對話，不會怠慢，豈不是方便多了？
三、舊版浮窗的3個缺點
1. 狗皮膏貼，逼死強迫癥
在加入浮窗后，這個浮窗在微信界面里無處不在，不管你需不需要它。
張小龍在微信十年的演講中說：浮窗其實我挺不喜歡的，它特別像一個狗皮膏藥，占了你的屏幕一個位置，很多朋友看文章看不完，一邊處理消息一邊看，這不是一個好的解決方案。
2. 權重太高，不匹配其使用頻次
這個浮窗是全局式的，存在于微信的每個界面，通訊錄、私聊頁、朋友圈、搜索、視頻號、個人詳情頁……
在寸土寸金的移動端界面，每一塊地方都是及其寶貴的。僅僅為了解決一個“邊聊天邊看文章”的需求，而設計了這么一個浮窗，是否權重太高了？
與其使用頻率并不匹配，可能在大多數時間里用戶并不需要它，可它就一直在那里。
3. 數量太少
舊版的浮窗最多只支持5篇文章，這個數量其實太少了。數量達到這個極值后再添加，還會提醒你要先刪除才能再添加，徒增麻煩。這便是數量少的缺陷。
四、新版浮窗的6個優點
1. 數量增加了20倍
舊版最多只能支持5篇，而新版最多可以支持100篇，這個數量是足夠的，在達到這個極值后，新添加的會自動替代之前添加的。
2. 自動清除機制
當文章數量達到了100的極值后，還可以繼續增加，不會提示你刪除，而是自動替換，這對于用戶來說是無感的，這才是好的體驗。
彈窗反饋不是產品刷存在感的工具，對于產品設計來說，讓用戶感覺不到你的存在才是好的設計。
事無巨細都要詢問用戶的交互并不友好，深入思考用戶使用場景，處處為用戶考慮，體貼周到。
3. 特殊的空狀態
對于空狀態一般的界面會有一個情感化的插畫設計，而這里并沒有這么做。
當把浮窗的最后一篇文章刪掉時列表會關閉，首頁左上角的“浮窗”按鈕也會消失，并不會刻意聲張自己的存在，把不打擾做到了極致 。
這是微信一貫的調性了，就像沒有關注任何訂閱號，首頁就不會有“訂閱號消息”這個入口；若從未使用過小程序發現界面就不會有小程序這個入口。
4. 巧妙的動效，創新的交互
看多了各種狂拽酷炫吊炸天的動效后，最終明白要回歸到本源，動效的存在不是為了炫技，而是要服務于功能設計。
來看看微信是怎么做的，當用戶添加到浮層時，頁面會變成一個圓形然后從導航欄的左上角滑出去。
用動效巧妙的傳達了入口位置，富有創意又指示明確，每一次加入懸浮窗的動作都是在暗示你懸浮窗的入口位置，堪稱教科書式動效設計。
這是一個極具創新的交互形態，從未在其他產品上看到過，一個看似簡單的交互，背后是大量的用戶研究和用戶測試的支撐。
5. 右下角的扇形
在移動端，左右兩邊是單手可觸控的區域。而右下角剛好跟側邊右滑返回的手勢相關聯。
這里還有一個小細節，側邊右滑到右下角會出現一個小的扇形區域，移過去扇形區域會出現放大，產品預判你可能要加入浮窗。
6. 流暢的操作過程
右滑加入浮窗，右滑返回，右滑呼出浮窗，由于都是相同的手勢，整個流程是很順暢的，用戶在操作過程中并不會遇到太大的麻煩。
五、浮窗不浮，不如“稍后再讀”
微信 8.0 將原本吸附于屏幕邊緣的浮窗，改為了主界面側邊右滑進入“浮窗”界面。
這種改動雖然解決了“狗皮膏藥”的問題，但卻讓“浮窗”變得有名無實。
畢竟它不再是懸浮在界面上的窗口，而變成了類似“稍后閱讀”的書架。
因此，與其叫“浮窗”不如叫“稍后再讀”。我覺得這跟B站的“稍后再看”類似。
就算是加入了“浮窗”，用戶也有可能不會再去看，但他依然會不斷的重復這個操作。這源于損失厭惡心理學：比起得到，用戶更害怕失去。
六、其他解決方案
1. QQ的浮層
當用戶在看文章時收到了新消息時，到底要不要馬上回？
這取決于來信息的人或事情的重要性，如果是比較重要緊急的事情，那么必須馬上回復。
可問題在于當前的信息內容是未知的，因此無法作出判斷。
當你在瀏覽qq空間時，如果來信息了，會直接在當前頁面顯示出來個圓圈小浮層，顯示消息條數。
可以選擇回復或繼續當前任務，聊天和看qq空間兩不誤。但是沒有解決未知信息的問題。
2. iOS頂部橫幅
iOS系統，在收到信息后，頂部會出現一個橫幅信息提示，可以看到發件人和內容，你可以選擇下拉回復或關閉。
當你看到這些內容后可以決定要不要回復，省去了來回切換的繁瑣。
對于一些不重要的消息，完全可以專注于當前任務，稍后回復。
可新的問題又來了，不斷的短信提醒會打擾到用戶當前的沉浸式閱讀體驗。
如何平衡閱讀體驗和信息回復是個巨大的挑戰。
3. 知乎最近閱讀
很多產品都會有一個叫歷史記錄的功能，自動記錄下用戶的瀏覽記錄。比如知乎的最近閱讀，會自動保存最近3k條閱讀過的文章。
該功能的目的在于方便用戶找回某個曾經看過的內容。其最大的優點在于不需要用戶過多的操心，自動保存。這對微信也是有一定的借鑒意義。
目前的微信的浮窗解方案是否為最完美的解決方案？我看未必，需要用戶觸發是它的最大缺陷。
上面2、3是一個不錯的方向，可以在此基礎上做適當的改進。
七、番外：知乎浮窗，東施效顰
當初，微信推出浮窗功能后，知乎產品經理大喜，直接像素級抄襲過來。無論交互、視覺還是動效，也是最多五篇回答，就改了個圖標，跟微信的懸浮窗簡直如出一轍。
卻鬧出了東施效顰的笑話，我為什么說它是東施效顰？
首先這兩個產品的定位是完全不一樣，前者是一個社交工具，而知乎是個內容平臺，其本身已經有一個最近瀏覽的功能，想要找回過去看過的文章也并非難事。
請問這個浮窗的意義何在？
另外，知乎還有“下一個”懸浮圖標（我覺得這個功能挺好，方便用戶快速切到下一個回答。），再加上iPhone自帶的狗皮膏藥（輔助觸控），在這巴掌大的屏幕上，聚集了三個狗皮膏藥……
本文由 @?產品汪兒 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自Unsplash，基于CC0協議。
知乎的狗皮膏藥是真的煩人
哈哈哈哈哈哈說知乎那里真的太有道理了，卻是這樣，可以但是沒必要，而且還會損害界面簡潔。qq和iphone的懸窗直接回復也是個可參考的好主意。
這個浮窗我真的喜歡，好方便，原來背后還有這么多道理呢，學到了
微信這種稍后在讀的設計可以說真的非常成功非常好，很方便！
有時候看篇公眾號文章突然來消息的時候這種浮窗真的非常貼心了，還能點回去接著看，確實是抓住心理學了