編輯導語：微信是一個體量很大的App，任何一項改動都會造成巨大的影響，微信浮窗功能前前后后歷經了多次改版，可見其重要性。本文作者結合自己對動態設計的理解，分析了微信浮窗設計存在的問題，并且給出了相應的解決方案。一起來看看吧！

今天分享一下最近我在使用微信浮窗功能時的一些個人體驗與思考，文中會結合我個人對動態設計的理解，針對微信浮窗設計存在的問題給出解決方案。

一、浮窗簡介

第一節中簡單介紹浮窗的使用場景、使用方式（如何添加與查看），熟悉的同學可以直接跳到第二章：現有的方案有什么問題。

1. 用戶使用場景描述

1）稍后再看型：張三晚上打開某公眾號查看某篇文章，由于文章太長，明天又要搬磚需要早點休息，所以張三決定把文章添加到浮窗等明天上班再看。

2）臨時掛起型：還是張三，在看某篇文章很上頭的時候，突然收到隔壁老王群的紅包，張三為了搶紅包，所以臨時將文章添加到浮窗。

2. 查看文章的渠道

• 剛剛看過
• 公眾號推送或主頁
• 群內、聊天對話、朋友圈

3. 添加浮窗的兩種方式

1）點擊頂部更多，在模態中點擊浮窗圖標。

2）向右滑頁面時，將觸點移動到屏幕右下角后釋放。

4. 查看浮窗中的文章（兩種場景有差異）

1）浮窗中文章【數量等于1】

向右滑直接查看

2）浮窗中文章【數量大于1】

根據文章是否打開，查看方式有所不同。

文章已打開過（向右滑直接查看）

文章未打開過（向右滑后點擊對應文章）

5. 退出文章詳情

1）退到浮窗

向右滑或點擊左上關閉圖標

2）退到首頁

向左滑

二、這里面有什么問題？

1. 添加浮窗

1）從彈窗中添加

我嘗試描述一下此過程中用戶的內心想法，及動態表意：

用戶內心想法：我（張三）要把這篇文章添加到浮窗，然后我等下要找到這篇文章查看。

動態設計敘述：我（微信）已經把這篇文章放在浮窗（通過蒙版動畫，表達已添加），但是我不告訴你浮窗在哪。

如下所示，這里除非你是從剛剛看過中打開文章然后添加，否則你并不清楚微信將此文章保存在何處。（原因是：在3或4級頁面，無法在添加后返回微信首頁）。

問題點：

動態敘事不完整。大多數人使用習慣都是在公眾號，或分享渠道中將文章添加到浮窗，在這類渠道中用戶會困惑，需要思考查看浮窗文章入口在哪？（微信的解決方案是第一次添加后彈窗提示）。

2）向右滑添加

用戶內心想法：張三沒其他想法，同上。

動態設計敘述：我（微信）通過視覺反饋（黑色區域及圖標放大），加上物理反饋（震動），表達現在松手觸發添加到浮窗操作。

問題點：

• 動態敘事不完整：同方式1中所述。

• 不符合用戶預期：當用戶觸發浮窗功能后松手時，按照預期該文章應該給被收入到右下角扇形區域內，而不是直接飛往一個截然相反的左上角（有點像彈弓）。

2. 查看浮窗頁面

1）浮窗入口圖標

向右滑拉動時，此處有三個圖標變化。

打開浮窗圖標：右拉后不透明度100到0。

右拉阻力圖標：類似常用的下拉，這里在右拉感受到震動反饋后松手打開浮窗。

收起浮窗圖標：觸發右拉阻力設定最大值后，此圖標不透明度由0到100。

問題點：

敘事不連貫。打開浮窗圖標與收起浮窗圖標是因果關系，只有打開才有收起，所以在認知上應該是一個東西的不同功能。但這里還是將上面3件事分開表達，在敘事上出現斷點。

2）浮窗頁面

動態設計敘述：向右滑打開一個新空間（浮窗頁面），此空間位于消息頁面左側。

問題點：

空間頁面設計不清晰。現實物理世界中，在辦公室內你現在坐的正對面，也就是Z軸方向可能是電腦屏幕，你的左側可能有本書，右側可能有杯水。你熟悉環境后，就算閉上眼睛也能判斷物體位置。在應用程序中同樣，這是我們創造的一個虛擬環境，我們在環境中通過動態設計表達頁面之間的位置關系。

以如下視頻為例，我們可以看到頁面中元素之間的空間關系，微信頂部導航欄，一會在視圖中固定居中，一會跟隨底部消息向右移動。

當浮窗中只有一篇文章時，向右滾動會直接以文章詳情的方式顯示，此處根據場景預判直接打開文章。

但是，在我的使用過程中發現如下問題：

有時候我右滑是文章詳情，有時候又是浮窗列表。

此處交互邏輯是：在文章數量大于1情況下，根據上次瀏覽時是否關閉文章。如未關閉，下次打開就是文章詳情，反之。

我想表達的是：我記不得上次的操作，所以在下次打開時很容易混亂，我會思考我到底是要左滑還是右滑。

3）已打開的文章回到浮窗列表

動態設計敘述：向右滑時，根據下層浮窗列表中文章縮略圖的位置，將上層文章貼某側屏幕（不跟隨手滑動方向）縮小。此處固定位置縮放表達出：文章頁面是通過點擊下層浮窗中某個縮略圖而來，所以在縮放時進行方向聯想。

問題點：

操作不符合預期。當我打開浮窗列表左側某篇文章時，此時我向右滑退回到浮窗列表頁，但文章縮放是固定貼左側屏幕（如上視頻，根據浮窗列表中文章預覽圖靠左還是靠右，表現還不同），就會導致對象行為不符合預期，通俗講：就是不跟手。

這樣做可能的原因：

• 部分公眾號內容中存在svg交互動畫，為了避免手勢誤觸。
• 強化內容方向聯想，即該文章來自該浮窗列表中該文章縮略圖。
• 免去對下層浮窗列表中文章縮略圖進行處理（文章縮略圖打開裝換為文章后，文章縮略圖應該不可見，即占位為空）。

三、解決方案

1. 設計原則

• 克制
• 清晰
• 自然

1）克制

數字產品動態設計的重要原則在于有意義，能夠解決用戶的問題，而不是做一些裝飾性的東西。所以，所有的細節在添加時，思考如果去掉會不會更好？

2）清晰

數字產品動態設計就像講故事，用戶對我們在數字產品中創造的虛構世界是陌生的，用戶需要了解事物的來源，以及下次可以在哪里再次找到它們，提供方向性與清晰的過渡對于幫助用戶構建清晰的產品地圖尤為重要。

3）自然

我們處在真實的物理世界，當我們參考物理世界構建數字世界時，也應當遵從基礎的物理學，如：重力、阻力、弧線…，根據這些調整合適的曲線插值、運動路徑、用戶與屏幕對象互動時，物體所呈現的運動方式等…

2. 添加浮窗方案

待解決的問題：

需要表達清楚一件事：這篇文章添加成功，添加的位置在微信首頁的左上角。

1）從彈窗中添加

觸發對象（浮窗圖標）后：

• 頂部下拉臨時導航欄：提供方向，表達浮窗所在位置。
• 文章縮小并上移：敘述說明，此文章已添加到微信首頁導航欄左側浮窗圖標中。
• 浮窗圖標旋轉：再次強化添加成功后的反饋。

2）右滑添加

觸發條件后：

• 頁面縮小并跟隨手指移動：按照心理預期，頁面移動到下方，當手指移出該區域后，頁面再次釋放。
• 頂部下拉臨時導航欄：實時交互，與觸發條件后縮小的頁面形成關聯關系，表達此時釋放頁面，可能會與臨時導航欄發生某種反應。
• 頁面弧形上移：角落的元素在向上位移時呈弧線，使整個運動更加流暢迅速。
• 浮窗圖標旋轉：強化添加成功后的反饋。

3. 查看浮窗方案

待解決的問題：

清晰的空間界面結構，連貫的敘事方式，順暢的操作體驗。

界面空間示意

5. 浮窗入口圖標（兩個空間的共享元素）

單個圖標功能轉換

將初始狀態、拉動狀態、收起浮窗三件事通過單個圖標功能轉換來連貫表述，同時作為兩個頁面的共享元素，它還有利于建立清晰的操作邏輯，并創建場景連續性（各空間無縫過渡）。

6. 查看浮窗

線索

保留原本的場景預判（將文章打開），但在上下文過渡時提供線索，告知用戶該頁面來源方向。即表明哪里來，到哪里去，以減少認知負荷，從而營造一種良好的空間關系，讓用戶操作路徑更清晰。

7. 文章詳情回退

自然跟隨

在現實世界中，當我們拖動某一物體時，它們受到來自我們的力后，總是與我們相同的方向移動。所以當右滑退出文章時，保持方向一致，使其更自然。

四、總結

1. 對于微信上線方案

作為一個頭部產品，任何一個功能的上線，背后都經歷了嚴格的設計研究。在前期內部也可能會有很多其他方案，想必是在綜合各方面考慮的情況下定了現在的方案。8.0新版浮窗功能至今上線也有1年多，沒有改動或許代表用戶并沒有太多吐槽。

2. 對于我的方案

本文本沒有基于大規模的用戶調研數據，更多的是我自己以一個小白用戶的真實使用體驗出發，探究其中帶來的疑問。再結合我對界面動態設計的理解，發現其中的機會，并輸出設計解決方案。

當然方案中還有很多細節值得打磨，比如動態持續時間如何處理的更好，以避免拖沓。以及是否遺漏場景，在遺漏的場景中方案是否適用。但不管如何，對于我發現的這些問題，以及我如何思考優化的想法得到了表達。

當然，不管我說的多么有理有據，我也只是一個個體。衡量方案的好壞也始終需要以海量目標受眾的反饋為客觀標準（當然也歡迎你評論或私信我，對于此方案的反饋），這也是為了避免自己陷入自以為是的處境。

3. 對于動態設計

動態設計在頭部產品中越來越多的應用，給用戶帶來了更多的預期，當然也定義了更高的標準。在將來，我們必定會看到越來越多優秀的產品設計案例。

或許設計師在設計前期就可以從靜態界面中跳脫出來，開始思考更多解題思路。只是在這個過程中，需要讓團隊、讓利益相關者了解其中帶來的商業與用戶價值。否則動態設計只能被砍掉，或者是放在設計最后，為了看上去好像不錯。

總而言之，為了解決某個問題而制定有目的的動態設計?；蛟S這，就是我們需要面對的第一個挑戰。

本文由 @幺零三 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。