歡迎光臨
我們一直在努力

從設計層面淺析微信5月23號6.6.7版本改版

文章摘要: 使用者可以通過浮窗自由切換文章與聊天這兩個使用場景微信團隊使用「浮窗」來作為連結公眾號閱讀文章場景和好友聊天場景這兩個使用場景的銜接器

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點文章閱讀頁返回鍵由「<」修改爲「×」。

微信此次改版對於使用者連續性操作以及沉浸式體驗是一個提升,但是一些細節有待完善。有人分析指出微信此次更新是打響了時間保衛戰,希望把使用者留在微信內。而我的觀點恰恰是相反的,從連續性以及沉浸式這兩點看,微信是希望使用者能更快更愉悅地完成任務,也比較符合張小龍的主張,希望使用者使用者即走。

未經允許不得轉載:頭條楓林網 » 從設計層面淺析微信5月23號6.6.7版本改版