微信改版:關于浮窗和返回鍵變更的思考

27 評論 14681 瀏覽 61 收藏 11 分鐘

任何設計層面的改動都是在解決產品中的問題,本文作者主要是看微信團隊是如何來解決了產品中的問題點:浮窗和返回鍵變更。enjoy~

5月23日iOS 用戶可以升級到最新版本微信,Android用戶也可用通過微信的內測文章下載微信測試版。與以往大多數小功能迭代不同,微信這次改動可以說是較大版本更新。

以下為詳細更新點:

  1. 公眾號文章可以以「浮窗」形式存在在界面上;
  2. 朋友圈個人主頁頭部取消了黑色的導航欄,改成透明欄;
  3. 公眾號主頁和文章閱讀頁頂部導航欄改為了白底;
  4. 文章閱讀頁返回鍵由“<”修改為“×”;
  5. 發送圖片、視頻等發送按鈕修改成了文字按鈕;
  6. 朋友圈上滑瀏覽時,頂部導航欄縮??;
  7. ……

任何設計層面的改動都是在解決產品中的問題,我們重點討論第1和第4更新點,看看微信團隊是如何來解決了產品中的問題點。

第1點:公眾號文章可以以「浮窗」形式存在在界面上

首先「浮窗」從表現形式上與Android上的浮動按鈕一致。浮動按鈕material design 規范定義為:浮動按鈕一般是產品中最重要頻率最高的操作,浮動按鈕是為了更便于操作。就像一個圓形的圖標漂浮在界面上,它會在聚焦時改變顏色,在選中時改變空間高度。按下時,它可能會包含更多相關的操作。

而微信此次重新定義了浮動按鈕,「浮窗」沒有點擊狀態,不承載操作,只作為一個文章鏈接。浮窗的樣式也是根據微信公眾號的頭像來決定。小小的「浮窗」卻承載著至關重要的作用。

先從交互層面上分析一下「浮窗」,首先假設一個使用場景,今天自己喜歡的訂閱號推送新的文章,看到一半覺得這篇文章寫的很好,發送給好友看看并且想好友討論一下。

原流程我們得這樣做。(以訂閱號的文章為例)

  1. 一旦關閉文章,必須重新回到訂閱號聊天框中找到該公眾號,重新打開文章。流程繁瑣復雜,不斷重復之前的操作流程。中途關閉文章十次,那就得重新打開十次。(現在在這種碎片化的世界中,很難專注一件事很久,特別是在手機這種移動場景下。很容易就被打斷或者被其他事物吸引走。所以這種頻繁關閉文章,打開文章的操作肯定會頻繁出現。該問題嚴重影響公眾號文章的閱讀完成率。)
  2. 公眾號的使用場景和好友聊天的使用場景是斷開的,沒有鏈接在一起,容易導致頻繁重復操作。

為了解決這個問題,微信團隊使用「浮窗」來作為鏈接公眾號閱讀文章場景和好友聊天場景這兩個使用場景的銜接器。

我們看下更新后的使用流程:

發送朋友后,可以采用浮窗的控件作為文章鏈接。隨時隨地都可以重新打開。不在需要重走一遍打開文章詳情4步的流程。用戶可以通過浮窗自由切換文章與聊天這兩個使用場景。這是用戶在這兩個使用場景中的最大的痛點。那些看文章被中途打斷的用戶,再回來時不需要繁瑣重復操作,只需點下浮窗即可很流暢的打開之前的文章繼續閱讀。場景鏈接連續性提高了,相信文章的閱讀完成率會提高不少。

在頻繁的退出切換的使用場景下,還存在一個爽點Recognition rather than recall(尼爾森十大可用性原則)。就是當用戶退出文章時,再次進入文章時記憶住上次退出的位置而不是讓用戶自己去找上一次退出的位置。(在筆者寫此篇文章時,該功能還未上線。今天再次使用時,發現微信團隊已更新該功能點。)

?從產品層面出發分析,微信三大功能點,通訊,朋友圈,公眾號,都只是線性鏈接,相互之間沒有真正的融合貫穿。產品流程很容易就被中斷。在這碎片化的世界,產品使用流程必須是具有高度連續性。

就像游戲一樣是一環扣一環的,一直走下去。有時候我們玩游戲一不小心被打斷或者是被迫去做別的事情,再回來時游戲還能很連貫地進行下去,就是因為游戲產品的連續性很連貫,所以我們繼續時毫無阻礙。好的產品連續性一定不能差,如果連續差,當用戶被某些事情打斷時,回來的時候就很難繼續上一個任務了。慢慢地,用戶就會放棄之前的任務。這也是我們在做產品中需要思考的地方。(連續性和沉浸式體驗有著本質的區別,沉浸式體驗講究的是用戶不容易被打斷,不會受到別的事物所干擾。而連續性講究的是即使你在使用我的產品過程中被別的事物所干擾打斷,當你再次回來時,還能流暢的接著上一個未完成的任務。)

小小的「浮窗」卻承載著至關重要的作用:

  1. ?將碎片化的使用場景鏈接起來,可以連貫切換場景。
  2. 保證整個產品的內容模塊的連續性,用戶可以更快的完成他的任務。這也比較符合張小龍之前說的,他希望用戶用完即走。而不是在產品上停留太久,浪費過多不必要的時間。

第4點:文章閱讀頁返回鍵由“<”修改為“×”

雖然只是一個ICON的更換,這里面的含義缺大不相同,“<”代表的是返回,返回是指去了另外一個地方再回到原來的地方,是離開了再回來。

之前打開文章詳情是跳出了文章的場景。點擊返回鍵則回到文章的場景。文章列表和文章詳情都是同一個使用場景。

返回隱喻用戶是離開了當前場景去了另一個場景下,再回到原來的場景下“×”代表的是關閉,通常代表的含義是打開了某某某東西,要關閉它,比如打開了窗戶,打開了門。要關閉窗戶,要關閉門。

所以這里改用“×”,更多的在暗示用戶,你沒有離開文章列表的場景,而是基于該場景下打開了文章詳情。

雖然是一個icon的變化,但是給用戶的感受是完全不同的。一個是離開了當前場景,一個是繼續再當前場景。讓用戶感受到沒有離開當前場景,可以繼續其他的操作,而不是讓用戶感受到去了另外一個陌生的場景下。

可惜的是微信此次更新對于頁面的切換動畫沒有做修改,當你打開文章詳情時,頁面切換依然是從右到左的切換,點擊關閉時也依然是從左到右關閉頁面。和更新前是保持一致的。

當使用“×”表示沒有脫離場景時,頁面切換的動畫,最好是從下往上覆蓋,關閉是從上往下退出。Icon和頁面切換的動畫兩者的配合才能真正打造出沒有脫離當前場景的效果,這樣才能真正給用戶一種隱喻,告訴用戶你沒有離開文章列表的場景。Airbnb的篩選條件也是利用這樣的設計來隱喻用戶,還未脫離當前場景。相信微信團隊后續會做出調整。

總結

重點分析了1、公眾號文章可以以「浮窗」形式存在在界面上;第4點文章閱讀頁返回鍵由“<”修改為“×”。微信此次改版對于用戶連續性操作以及沉浸式體驗是一個提升,但是一些細節有待完善。

有人分析指出微信此次更新是打響了時間保衛戰,希望把用戶留在微信內。而我的觀點恰恰是相反的,從連續性以及沉浸式這兩點看,微信是希望用戶能更快更愉悅地完成任務,也比較符合張小龍的主張,希望用戶用戶即走。

 

本文由 @火炬 原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來源于網絡

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. “然是一個icon的變化,但是給用戶的感受是完全不同的。一個是離開了當前場景,一個是繼續再當前場景。讓用戶感受到沒有離開當前場景,可以繼續其他的操作,而不是讓用戶感受到去了另外一個陌生的場景下。”
    不好意思,我并沒有感受到更改后給我在用戶體驗上的優化,而是感受到了,如果我公眾號頁面跳轉的層級超過兩級,我沒法返回,只有關閉,并且關閉按鈕還不能進行事件監聽,微信工程師跟交互師能不能解決一下?

    來自浙江 回復
  2. 我也覺得作者在談浮窗這個問題之前似乎完全不知道有文章置頂功能吧,那個流程圖就暴露了啊

    回復
    1. 是的,之前并沒有關注到微信還有文章置頂這個功能,

      來自廣東 回復
  3. 雖然浮窗解決了暫停閱讀的需求,但感覺這不是張小龍的初衷。我更希望的是在閱讀文章時,能夠屏蔽其他所有消息,強迫自己完整地看完一篇文章,不要被中途插入的消息分散注意力…

    回復
    1. 現在這種時間碎片化的時代,讓用戶專心干一件事是很難的。這也算一種用戶習慣,

      來自廣東 回復
    2. 你的這個想法不太現實,有點強迫的味道

      來自廣東 回復
  4. 我想知道5發送圖片,視頻等發送按鈕修改成了文字按鈕,在哪了?求圖!強迫癥?。?!

    回復
    1. 話說我也回去找了半天,是朋友圈發圖片的時候發布改成發表了???灑灑滴搞不清桑
      ???

      回復
  5. 剛剛點擊你的頭像,想看你的更多文章,沒想到只有這一篇,期待你更多的文章。

    來自浙江 回復
    1. 哈哈哈,,,好的,剛開始寫文章會慢一點,在慢慢總結,慢慢沉淀,慢慢發表

      來自廣東 回復
  6. 很細致,贊!

    來自廣東 回復
  7. 為什么避開文章置頂談浮窗,感覺你說了一堆,還花了圖完全沒意義啊

    來自浙江 回復
  8. 可能只是單純的想適應劉海屏手機呢?

    來自廣東 回復
  9. 1. 浮窗功能之前已經有“置頂閱讀”功能了,同樣是記錄最近正在讀的一篇文章,只不過不是以浮窗的形式呈現而是以置頂橫欄(類似電腦微信登錄后的橫欄)呈現。
    2. 私以為兩個功能都是為了解決“暫停閱讀”這一需求產生的,其迭代本質是微信團隊謹慎的迭代理念導致的。先用一個不顯眼的置頂閱讀功能測試解決方案,然后再用一個明顯的浮窗來代替。

    回復
    1. 3. 就我個人認為,浮窗還有值得優化的地方(懸浮按鈕確實有點丑),但是交互設計是對的。ios上使用浮窗只需要左下滑動,丟棄同理。這其實是現實中稍后閱讀的一種仿生,就好像我正在讀報紙被打斷,隨手卷起來稍后再閱讀一樣。它本身不是為了徹底的“稍后閱讀”,也不是一個收藏列表,更多是為了“中斷閱讀”需求設計的。這也是作者分析的內容。

      回復
    2. 給你點個??

      來自廣東 回復
    3. 一開始我也認為浮窗和置頂閱讀是一個,但是不是的。浮窗是真正意義上的把用戶閱讀的需求提到了最高級,正如作者所說,浮窗真正的貫穿了聊天、朋友圈的使用場景。

      來自浙江 回復
  10. 完全不懂浮窗是什么梗,那么大個圓,尷尬癥都犯了,而且點擊去是一個我都不怎么看的鏈接,不曉得有什么用,什么鏈接出現在浮窗里,我就想知道這個邏輯,剛更新就把浮窗隱藏了~

    來自浙江 回復
  11. 很有體會,感謝

    來自廣東 回復
  12. 如果浮窗是解決高頻切換頁面需要的話,何不和小程序一樣在右上角放置浮窗按鈕+菜單按鈕,而不是現在需要在二級菜單才能選擇浮窗

    來自浙江 回復
  13. 改個圖標都會引發產品圈的地震,也只有微信這樣體量的產品能做到啊

    來自四川 回復
    1. 哈哈哈哈哈,,,,是呀。像他們這種體量的產品,任何一個修改的點都會經過反復推敲商榷,不會隨意的修改。就是因為這樣,更值得我們去分析研究他們背后的一些原因啦!去推敲修改點背后的邏輯??纯从袥]有值得自己借鑒學習的地方。

      來自廣東 回復
    2. 嗯嗯

      回復
  14. 666

    來自廣東 回復
  15. 很有體會,感謝

    來自北京 回復
    1. 仔細去研究分析每個產品改動點背后的原因,對自己也是一個很大的提升

      來自廣東 回復