快好知 kuaihz

聊聊微信「浮窗」和「曬圖」的交互設計

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

這兩年來微信并未作出大改版,總的來說這本書里介紹的方法多數都還能用。但是我大致翻閱了一下,還是發現了一些比較有意思的改動點,這里我就列舉出來,大家一起來分析學習。

浮窗

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

但是用戶不滿足于此,在聊天的時候,我還要聽歌,玩小程序等。

所以微信在7.0.5版本中對浮窗進行了一個升級,讓用戶可以進行多線程操作。

1. 浮窗的特點

浮窗從樣式上來說,它凌駕于當前界面其他元素之上,這個特性帶來了兩個好處:

從感官上距離用戶最近,用戶更容易察覺,所以適合承載優先級高的信息或者操作;

游離于當前頁面,不會破壞頁面結構,設計起來比較靈活;

為了更方便理解,我們來舉個例子:經常聽歌的朋友對「歌單」應該很熟悉,那么歌單頁需不需要展示底部欄菜單?

我們不要著急打開手機里的XX音樂app,可以自己先想一下,底部欄菜單的作用是什么?

因為歌單頁的層級可能會很深,底部欄菜單可以供用戶快速的跳轉到一級頁面。那么是否展示底部欄菜單就主要取決于“用戶對快速跳轉到一級頁面的訴求是否足夠的強烈”。

用戶的訴求我們可以通過頁面埋點數據和用戶調研獲取,參考了4款競品,有兩款產品(網易云 蝦米)在歌單頁展示了底部欄菜單,而另外兩款(QQ音樂 酷我音樂)沒有展示。

這說明各家產品對用戶的訴求強度并未達成統一,那些沒有提供底部欄菜單的產品觀點無非是以下兩種:

我覺得讓用戶在歌單頁一級一級的返回就挺好的,符合用戶的認知;

用戶可能對一兩個一級頁面的訴求很高,例如首頁和我的頁,如果因為這兩個功能,就展示整個底部欄太浪費了。

如果是后一種,我們可以考慮使用浮窗作為一級頁面的入口。

例如,用戶進入一個活動頁,但是用戶有跳轉到首頁/我的頁這兩個一級頁面的訴求。

按照常規思路,一級活動頁的入口是底部欄菜單,但是直接放底部欄菜單不是最好的方案,因為其他幾個頁面,用戶的訴求不是很高,也把入口露出會造成界面空間的浪費。

這種情況下,我們可以選擇浮窗作為這兩個一級頁面的入口。

2. 怎么關閉浮窗

接下來我們來說說浮窗關閉的問題,在浮窗1.0時期,用戶拖動浮窗到頁面底部可以關閉浮窗,但是在支持多線程的浮窗2.0時期,用戶點擊“關閉”圖標關閉浮窗。

從操作成本角度來說,肯定點擊圖標就關閉更加方便。但是這里我們需要考慮兩個問題:

因為浮窗位置是可以移動的,如果加了關閉圖標,那么用戶擔心誤觸反而增加了操作成本;

關閉彈框是否需要操作確認。

多數設計師對于“操作確認”的認知還停留在對話框,當我們需要用戶確認上一步操作,想當然的加上一個對話框,詢問你是否要關閉浮窗。

這里我們需要強調一下:操作確認≠對話框。

這里我們需要從頭梳理一下,為什么我們需要用戶確認剛才的操作?目的有兩個:

擔心用戶在不知情的情況下誤觸了有風險或者不可逆的操作,例如轉賬、刪除等。所以需要加一個“操作確認”步驟,告知用戶該操作的結果;

對于猶豫不決的用戶,增加確認步驟挽留用戶。

簡單來說,操作確認的目的是防止用戶誤操作和挽留用戶。那么微信的滑動關閉的交互方式是否滿足這兩點呢?

我個人認為是滿足的,因為與點擊直接關閉相比,拖動到特定區域關閉,用戶誤操作的概率更低。

例如,正常情況下,你點擊“接受”按鈕就可以接聽來電;但當手機鎖屏時,你需要滑動接聽來電。

這是為了避免用戶在不知情的情況下,例如手機放在口袋里,誤觸接聽了來電。因此,如果我們有意識的增加一些高風險性或不可逆操作的交互成本,可以極大的降低用戶誤觸的幾率。

至于挽留用戶這點,這點見仁見智。我認為真正可以挽留下來的是那些猶豫不決的用戶,增加交互成本延長了操作時間,也延長了用戶的決策時間,避免用戶的沖動性操作,讓用戶做出更合理的判斷。

對于那些一開始就抱定目標的用戶,多加一個對話框真的可以挽留住嗎?

3. 單進程場景

當然不能因為對方是微信,所以我們就需要“強行解釋”它的所有行為。

我們可以有自己的思考,例如:當懸浮窗中只有一個進程時,我們是否可以沿用之前的樣式?用戶點擊可以直接進入目標頁,跳過那個選擇的步驟,只有一個也沒得選啊。

這樣做的確很方便,但是存在一個問題,用戶應該如何關閉懸浮窗?

如果還是滑動到底部關閉,那么就會導致單進程和多進程的情況下,用戶關閉懸浮窗的交互方式不統一,違背了一致性原則。

總結來說,沿用之前的樣式,用戶來的快,去得快,但是違背了一致性。

朋友圈曬圖

朋友圈發圖片的流程微信最近沒有做太大改動,但是因為每天發朋友圈的用戶量太大了。我覺得還是很有必要分析一下。

1. 選擇圖片

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

一個小小的圖片選擇流程為什么要做差異化呢?

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

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

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

總體來說,微信適合用戶發最新的圖片,發完即走;而微博更方便用戶精準的搜尋到自己想要發的圖片。

2. 編輯/刪除圖片

圖片上傳完成后,進入預發布階段,用戶對這個圖片進行哪些操作呢?

自己不夠美,我要重新修一下——編輯功能(微信不支持發圖前重新編輯圖片);

這個照片排序不對,我要換一下——位置挪動功能;

這個照片不好看,我要刪除——刪除功能。

這里我們主要來說一下刪除功能,微信是拖動刪除圖片,跟關閉浮窗一樣,不再贅述。

QQ和微博都在圖片右上角展示了“刪除”圖標,意思很明顯,點擊這個圖標就可以刪除這張圖片。

但是這個刪除圖標是否一直需要呢?

例如,在QQ中,如果用戶中途退出,我們會詢問用戶是否要保存當前的圖片,用戶選擇保存。再次進來的時候,圖片右上角是不會有“刪除”圖標,因為之前已經詢問過用戶,既然用戶選擇保存,說明用戶不太可能刪除這圖片,可以考慮去掉“刪除”圖標。

面向場景,才能對功能進行取舍。

當然這并不意味著,用戶不能刪除這張圖片,用戶可以進入圖片頁刪除。

這里有個交互細節也很有意思,微信使用的刪除確認彈框是在頁面底部,而QQ的是在頁面中間。如果你要確定是否刪除這個圖片,那么首先你要對這個圖片有一個清晰的認識,將對話框放在界面中央,遮擋了圖片的主體,會對用戶的確認過程造成干擾。

總結

以上就是我對微信浮窗和曬圖功能的思考和總結,如果你有不同的意見或者看法,歡迎留言討論。

本站資源來自互聯網,僅供學習,如有侵權,請通知刪除,敬請諒解!
搜索建議:曬圖  曬圖詞條  交互  交互詞條  聊聊  聊聊詞條  設計  設計詞條  
日韩不遮挡毛片免费,欧美一级黄深夜影院,黄片av啊啊啊不要啊,色色色色永久视频平台