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

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

一、浮窗簡介

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

1. 用戶使用場景描述

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

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

2. 查看文章的渠道

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

3. 添加浮窗的兩種方式

1）點擊頂部更多，在模態(tài)中點擊浮窗圖標(biāo)。

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

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

1）浮窗中文章【數(shù)量等于1】

向右滑直接查看

2）浮窗中文章【數(shù)量大于1】

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

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

文章未打開過（向右滑后點擊對應(yīng)文章）

5. 退出文章詳情

1）退到浮窗

向右滑或點擊左上關(guān)閉圖標(biāo)

2）退到首頁

向左滑

二、這里面有什么問題？

1. 添加浮窗

1）從彈窗中添加

我嘗試描述一下此過程中用戶的內(nèi)心想法，及動態(tài)表意：

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

動態(tài)設(shè)計敘述：我（微信）已經(jīng)把這篇文章放在浮窗（通過蒙版動畫，表達(dá)已添加），但是我不告訴你浮窗在哪。

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

問題點：

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

2）向右滑添加

用戶內(nèi)心想法：張三沒其他想法，同上。

動態(tài)設(shè)計敘述：我（微信）通過視覺反饋（黑色區(qū)域及圖標(biāo)放大），加上物理反饋（震動），表達(dá)現(xiàn)在松手觸發(fā)添加到浮窗操作。

問題點：

• 動態(tài)敘事不完整：同方式1中所述。

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

2. 查看浮窗頁面

1）浮窗入口圖標(biāo)

向右滑拉動時，此處有三個圖標(biāo)變化。

打開浮窗圖標(biāo)：右拉后不透明度100到0。

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

收起浮窗圖標(biāo)：觸發(fā)右拉阻力設(shè)定最大值后，此圖標(biāo)不透明度由0到100。

問題點：

敘事不連貫。打開浮窗圖標(biāo)與收起浮窗圖標(biāo)是因果關(guān)系，只有打開才有收起，所以在認(rèn)知上應(yīng)該是一個東西的不同功能。但這里還是將上面3件事分開表達(dá)，在敘事上出現(xiàn)斷點。

2）浮窗頁面

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

問題點：

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

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

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

但是，在我的使用過程中發(fā)現(xiàn)如下問題：

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

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

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

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

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

問題點：

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

這樣做可能的原因：

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

三、解決方案

1. 設(shè)計原則

• 克制
• 清晰
• 自然

1）克制

數(shù)字產(chǎn)品動態(tài)設(shè)計的重要原則在于有意義，能夠解決用戶的問題，而不是做一些裝飾性的東西。所以，所有的細(xì)節(jié)在添加時，思考如果去掉會不會更好？

2）清晰

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

3）自然

我們處在真實的物理世界，當(dāng)我們參考物理世界構(gòu)建數(shù)字世界時，也應(yīng)當(dāng)遵從基礎(chǔ)的物理學(xué)，如：重力、阻力、弧線…，根據(jù)這些調(diào)整合適的曲線插值、運動路徑、用戶與屏幕對象互動時，物體所呈現(xiàn)的運動方式等…

2. 添加浮窗方案

待解決的問題：

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

1）從彈窗中添加

觸發(fā)對象（浮窗圖標(biāo)）后：

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

2）右滑添加

觸發(fā)條件后：

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

3. 查看浮窗方案

待解決的問題：

清晰的空間界面結(jié)構(gòu)，連貫的敘事方式，順暢的操作體驗。

界面空間示意

5. 浮窗入口圖標(biāo)（兩個空間的共享元素）

單個圖標(biāo)功能轉(zhuǎn)換

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

6. 查看浮窗

線索

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

7. 文章詳情回退

自然跟隨

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

四、總結(jié)

1. 對于微信上線方案

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

2. 對于我的方案

本文本沒有基于大規(guī)模的用戶調(diào)研數(shù)據(jù)，更多的是我自己以一個小白用戶的真實使用體驗出發(fā)，探究其中帶來的疑問。再結(jié)合我對界面動態(tài)設(shè)計的理解，發(fā)現(xiàn)其中的機會，并輸出設(shè)計解決方案。

當(dāng)然方案中還有很多細(xì)節(jié)值得打磨，比如動態(tài)持續(xù)時間如何處理的更好，以避免拖沓。以及是否遺漏場景，在遺漏的場景中方案是否適用。但不管如何，對于我發(fā)現(xiàn)的這些問題，以及我如何思考優(yōu)化的想法得到了表達(dá)。

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

3. 對于動態(tài)設(shè)計

動態(tài)設(shè)計在頭部產(chǎn)品中越來越多的應(yīng)用，給用戶帶來了更多的預(yù)期，當(dāng)然也定義了更高的標(biāo)準(zhǔn)。在將來，我們必定會看到越來越多優(yōu)秀的產(chǎn)品設(shè)計案例。

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

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

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

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