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

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

一、浮窗簡(jiǎn)介

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

1. 用戶使用場(chǎng)景描述

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

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

2. 查看文章的渠道

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

3. 添加浮窗的兩種方式

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

2）向右滑頁(yè)面時(shí)，將觸點(diǎn)移動(dòng)到屏幕右下角后釋放。

4. 查看浮窗中的文章（兩種場(chǎng)景有差異）

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

向右滑直接查看

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

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

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

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

5. 退出文章詳情

1）退到浮窗

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

2）退到首頁(yè)

向左滑

二、這里面有什么問題？

1. 添加浮窗

1）從彈窗中添加

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

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

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

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

問題點(diǎn)：

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

2）向右滑添加

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

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

問題點(diǎn)：

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

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

2. 查看浮窗頁(yè)面

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

向右滑拉動(dòng)時(shí)，此處有三個(gè)圖標(biāo)變化。

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

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

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

問題點(diǎn)：

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

2）浮窗頁(yè)面

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

問題點(diǎn)：

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

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

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

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

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

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

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

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

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

問題點(diǎn)：

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

這樣做可能的原因：

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

三、解決方案

1. 設(shè)計(jì)原則

• 克制
• 清晰
• 自然

1）克制

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

2）清晰

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

3）自然

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

2. 添加浮窗方案

待解決的問題：

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

1）從彈窗中添加

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

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

2）右滑添加

觸發(fā)條件后：

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

3. 查看浮窗方案

待解決的問題：

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

界面空間示意

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

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

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

6. 查看浮窗

線索

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

7. 文章詳情回退

自然跟隨

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

四、總結(jié)

1. 對(duì)于微信上線方案

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

2. 對(duì)于我的方案

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

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

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

3. 對(duì)于動(dòng)態(tài)設(shè)計(jì)

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

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

總而言之，為了解決某個(gè)問題而制定有目的的動(dòng)態(tài)設(shè)計(jì)。或許這，就是我們需要面對(duì)的第一個(gè)挑戰(zhàn)。

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

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