筆者對(duì)微信「浮窗」和「曬圖」功能進(jìn)行了系統(tǒng)的分析并總結(jié)了自己對(duì)功能設(shè)計(jì)上的思考，與大家分享。

前幾天在圖書(shū)館看到一本很有意思的書(shū)——《中老年學(xué)微信》，這是一本專門為中老年用戶打造的微信使用教程。此書(shū)是18年6月出版，按照書(shū)籍正常的出版步驟，這本書(shū)里介紹的操作流程應(yīng)該是微信17年末的版本。

這兩年來(lái)微信并未作出大改版，總的來(lái)說(shuō)這本書(shū)里介紹的方法多數(shù)都還能用。但是我大致翻閱了一下，還是發(fā)現(xiàn)了一些比較有意思的改動(dòng)點(diǎn)，這里我就列舉出來(lái)，大家一起來(lái)分析學(xué)習(xí)。

浮窗

微信是在6.6.7版本新增了浮窗功能，用戶可以將正在閱讀的文章收在浮窗里，想看的時(shí)候可以隨時(shí)打開(kāi)，滿足了“邊閱讀邊聊天”的訴求。

但是用戶不滿足于此，在聊天的時(shí)候，我還要聽(tīng)歌，玩小程序等。

所以微信在7.0.5版本中對(duì)浮窗進(jìn)行了一個(gè)升級(jí)，讓用戶可以進(jìn)行多線程操作。

1. 浮窗的特點(diǎn)

浮窗從樣式上來(lái)說(shuō)，它凌駕于當(dāng)前界面其他元素之上，這個(gè)特性帶來(lái)了兩個(gè)好處：

1. 從感官上距離用戶最近，用戶更容易察覺(jué)，所以適合承載優(yōu)先級(jí)高的信息或者操作；
2. 游離于當(dāng)前頁(yè)面，不會(huì)破壞頁(yè)面結(jié)構(gòu)，設(shè)計(jì)起來(lái)比較靈活；

為了更方便理解，我們來(lái)舉個(gè)例子：經(jīng)常聽(tīng)歌的朋友對(duì)「歌單」應(yīng)該很熟悉，那么歌單頁(yè)需不需要展示底部欄菜單？

我們不要著急打開(kāi)手機(jī)里的XX音樂(lè)app，可以自己先想一下，底部欄菜單的作用是什么？

因?yàn)楦鑶雾?yè)的層級(jí)可能會(huì)很深，底部欄菜單可以供用戶快速的跳轉(zhuǎn)到一級(jí)頁(yè)面。那么是否展示底部欄菜單就主要取決于“用戶對(duì)快速跳轉(zhuǎn)到一級(jí)頁(yè)面的訴求是否足夠的強(qiáng)烈”。

用戶的訴求我們可以通過(guò)頁(yè)面埋點(diǎn)數(shù)據(jù)和用戶調(diào)研獲取，參考了4款競(jìng)品，有兩款產(chǎn)品（網(wǎng)易云 蝦米）在歌單頁(yè)展示了底部欄菜單，而另外兩款（QQ音樂(lè) 酷我音樂(lè)）沒(méi)有展示。

這說(shuō)明各家產(chǎn)品對(duì)用戶的訴求強(qiáng)度并未達(dá)成統(tǒng)一，那些沒(méi)有提供底部欄菜單的產(chǎn)品觀點(diǎn)無(wú)非是以下兩種：

1. 我覺(jué)得讓用戶在歌單頁(yè)一級(jí)一級(jí)的返回就挺好的，符合用戶的認(rèn)知；
2. 用戶可能對(duì)一兩個(gè)一級(jí)頁(yè)面的訴求很高，例如首頁(yè)和我的頁(yè)，如果因?yàn)檫@兩個(gè)功能，就展示整個(gè)底部欄太浪費(fèi)了。

如果是后一種，我們可以考慮使用浮窗作為一級(jí)頁(yè)面的入口。

例如，用戶進(jìn)入一個(gè)活動(dòng)頁(yè)，但是用戶有跳轉(zhuǎn)到首頁(yè)/我的頁(yè)這兩個(gè)一級(jí)頁(yè)面的訴求。

按照常規(guī)思路，一級(jí)活動(dòng)頁(yè)的入口是底部欄菜單，但是直接放底部欄菜單不是最好的方案，因?yàn)槠渌麕讉€(gè)頁(yè)面，用戶的訴求不是很高，也把入口露出會(huì)造成界面空間的浪費(fèi)。

這種情況下，我們可以選擇浮窗作為這兩個(gè)一級(jí)頁(yè)面的入口。

2. 怎么關(guān)閉浮窗

接下來(lái)我們來(lái)說(shuō)說(shuō)浮窗關(guān)閉的問(wèn)題，在浮窗1.0時(shí)期，用戶拖動(dòng)浮窗到頁(yè)面底部可以關(guān)閉浮窗，但是在支持多線程的浮窗2.0時(shí)期，用戶點(diǎn)擊“關(guān)閉”圖標(biāo)關(guān)閉浮窗。

從操作成本角度來(lái)說(shuō)，肯定點(diǎn)擊圖標(biāo)就關(guān)閉更加方便。但是這里我們需要考慮兩個(gè)問(wèn)題：

1. 因?yàn)楦〈拔恢檬强梢砸苿?dòng)的，如果加了關(guān)閉圖標(biāo)，那么用戶擔(dān)心誤觸反而增加了操作成本；
2. 關(guān)閉彈框是否需要操作確認(rèn)。

多數(shù)設(shè)計(jì)師對(duì)于“操作確認(rèn)”的認(rèn)知還停留在對(duì)話框，當(dāng)我們需要用戶確認(rèn)上一步操作，想當(dāng)然的加上一個(gè)對(duì)話框，詢問(wèn)你是否要關(guān)閉浮窗。

這里我們需要強(qiáng)調(diào)一下：操作確認(rèn)≠對(duì)話框。

這里我們需要從頭梳理一下，為什么我們需要用戶確認(rèn)剛才的操作？目的有兩個(gè)：

1. 擔(dān)心用戶在不知情的情況下誤觸了有風(fēng)險(xiǎn)或者不可逆的操作，例如轉(zhuǎn)賬、刪除等。所以需要加一個(gè)“操作確認(rèn)”步驟，告知用戶該操作的結(jié)果；
2. 對(duì)于猶豫不決的用戶，增加確認(rèn)步驟挽留用戶。

簡(jiǎn)單來(lái)說(shuō)，操作確認(rèn)的目的是防止用戶誤操作和挽留用戶。那么微信的滑動(dòng)關(guān)閉的交互方式是否滿足這兩點(diǎn)呢？

我個(gè)人認(rèn)為是滿足的，因?yàn)榕c點(diǎn)擊直接關(guān)閉相比，拖動(dòng)到特定區(qū)域關(guān)閉，用戶誤操作的概率更低。

例如，正常情況下，你點(diǎn)擊“接受”按鈕就可以接聽(tīng)來(lái)電；但當(dāng)手機(jī)鎖屏?xí)r，你需要滑動(dòng)接聽(tīng)來(lái)電。

這是為了避免用戶在不知情的情況下，例如手機(jī)放在口袋里，誤觸接聽(tīng)了來(lái)電。因此，如果我們有意識(shí)的增加一些高風(fēng)險(xiǎn)性或不可逆操作的交互成本，可以極大的降低用戶誤觸的幾率。

至于挽留用戶這點(diǎn)，這點(diǎn)見(jiàn)仁見(jiàn)智。我認(rèn)為真正可以挽留下來(lái)的是那些猶豫不決的用戶，增加交互成本延長(zhǎng)了操作時(shí)間，也延長(zhǎng)了用戶的決策時(shí)間，避免用戶的沖動(dòng)性操作，讓用戶做出更合理的判斷。

對(duì)于那些一開(kāi)始就抱定目標(biāo)的用戶，多加一個(gè)對(duì)話框真的可以挽留住嗎？

3. 單進(jìn)程場(chǎng)景

當(dāng)然不能因?yàn)閷?duì)方是微信，所以我們就需要“強(qiáng)行解釋”它的所有行為。

我們可以有自己的思考，例如：當(dāng)懸浮窗中只有一個(gè)進(jìn)程時(shí)，我們是否可以沿用之前的樣式？用戶點(diǎn)擊可以直接進(jìn)入目標(biāo)頁(yè)，跳過(guò)那個(gè)選擇的步驟，只有一個(gè)也沒(méi)得選啊。

這樣做的確很方便，但是存在一個(gè)問(wèn)題，用戶應(yīng)該如何關(guān)閉懸浮窗？

如果還是滑動(dòng)到底部關(guān)閉，那么就會(huì)導(dǎo)致單進(jìn)程和多進(jìn)程的情況下，用戶關(guān)閉懸浮窗的交互方式不統(tǒng)一，違背了一致性原則。

總結(jié)來(lái)說(shuō)，沿用之前的樣式，用戶來(lái)的快，去得快，但是違背了一致性。

朋友圈曬圖

朋友圈發(fā)圖片的流程微信最近沒(méi)有做太大改動(dòng)，但是因?yàn)槊刻彀l(fā)朋友圈的用戶量太大了。我覺(jué)得還是很有必要分析一下。

1. 選擇圖片

上傳圖片首先要選擇圖片，圖片選擇界面一般有兩種：一種是以微信為代表的正序排列類，最新的圖片在界面底部；另一種是以微博為代表的倒序排列，最新的圖片在頁(yè)面頂部。

一個(gè)小小的圖片選擇流程為什么要做差異化呢？

首先我們來(lái)說(shuō)微信的正序排列，一般真正想發(fā)朋友圈的圖片很有可能是你剛剛拍攝或者下載的，把最新的圖片放在最底部，方便用戶拇指操作。

但是如果你想發(fā)的圖片是很久之前拍攝或下載，那就需要你手動(dòng)滑動(dòng)界面去搜尋目標(biāo)圖片，自上而下的瀏覽方式用戶對(duì)于信息的獲取效率更高，倒序排列的更加合適。

此外微博這里還做了篩選功能，點(diǎn)擊頂部欄就可以選擇篩選項(xiàng)，為了避免用戶視線在界面頂部（篩選項(xiàng)）到底部（最新的篩選結(jié)果）的大范圍移動(dòng)，這里采用倒序排列更加合適。

總體來(lái)說(shuō)，微信適合用戶發(fā)最新的圖片，發(fā)完即走；而微博更方便用戶精準(zhǔn)的搜尋到自己想要發(fā)的圖片。

2. 編輯/刪除圖片

圖片上傳完成后，進(jìn)入預(yù)發(fā)布階段，用戶對(duì)這個(gè)圖片進(jìn)行哪些操作呢？

1. 自己不夠美，我要重新修一下——編輯功能（微信不支持發(fā)圖前重新編輯圖片）；
2. 這個(gè)照片排序不對(duì)，我要換一下——位置挪動(dòng)功能；
3. 這個(gè)照片不好看，我要?jiǎng)h除——?jiǎng)h除功能。

這里我們主要來(lái)說(shuō)一下刪除功能，微信是拖動(dòng)刪除圖片，跟關(guān)閉浮窗一樣，不再贅述。

QQ和微博都在圖片右上角展示了“刪除”圖標(biāo)，意思很明顯，點(diǎn)擊這個(gè)圖標(biāo)就可以刪除這張圖片。

但是這個(gè)刪除圖標(biāo)是否一直需要呢？

例如，在QQ中，如果用戶中途退出，我們會(huì)詢問(wèn)用戶是否要保存當(dāng)前的圖片，用戶選擇保存。再次進(jìn)來(lái)的時(shí)候，圖片右上角是不會(huì)有“刪除”圖標(biāo)，因?yàn)橹耙呀?jīng)詢問(wèn)過(guò)用戶，既然用戶選擇保存，說(shuō)明用戶不太可能刪除這圖片，可以考慮去掉“刪除”圖標(biāo)。

面向場(chǎng)景，才能對(duì)功能進(jìn)行取舍。

當(dāng)然這并不意味著，用戶不能刪除這張圖片，用戶可以進(jìn)入圖片頁(yè)刪除。

這里有個(gè)交互細(xì)節(jié)也很有意思，微信使用的刪除確認(rèn)彈框是在頁(yè)面底部，而QQ的是在頁(yè)面中間。如果你要確定是否刪除這個(gè)圖片，那么首先你要對(duì)這個(gè)圖片有一個(gè)清晰的認(rèn)識(shí)，將對(duì)話框放在界面中央，遮擋了圖片的主體，會(huì)對(duì)用戶的確認(rèn)過(guò)程造成干擾。

總結(jié)

以上就是我對(duì)微信浮窗和曬圖功能的思考和總結(jié)，如果你有不同的意見(jiàn)或者看法，歡迎留言討論。

#專欄作家#

王M爭(zhēng)（微信公眾號(hào)：王M爭(zhēng)），人人都是經(jīng)理專欄作家，資深互聯(lián)網(wǎng)人。

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

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