編輯導讀：近日，微信浮窗功能改版後上線。對此，我們做了些許研究，本文就從七個方面層層遞進解析微信浮窗的交互細節。一起來看看吧。

一、浮窗的意義

作為體量如此大的一個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協議。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部