關(guān)于微信浮動(dòng)窗口與返回鍵改版變更的思考

5月23日iOS 用戶可以升級(jí)到最新版本微信,Android用戶也可用通過(guò)微信的內(nèi)測(cè)文章下載微信測(cè)試版锌蓄。

與以往大多數(shù)小功能迭代不同升筏,微信這次改動(dòng)可以說(shuō)是較大版本更新。

以下為詳細(xì)更新點(diǎn):

1. 公眾號(hào)文章可以以「浮窗」形式存在在界面上煤率;

2. 朋友圈個(gè)人主頁(yè)頭部取消了黑色的導(dǎo)航欄仰冠,改成透明欄;

3. 公眾號(hào)主頁(yè)和文章閱讀頁(yè)頂部導(dǎo)航欄改為了白底蝶糯;

4. 文章閱讀頁(yè)返回鍵由“<”修改為“×”洋只;

5. 發(fā)送圖片、視頻等發(fā)送按鈕修改成了文字按鈕昼捍;

6. 朋友圈上滑瀏覽時(shí)识虚,頂部導(dǎo)航欄縮小妒茬;

……

任何設(shè)計(jì)層面的改動(dòng)都是在解決產(chǎn)品中的問題担锤,我們重點(diǎn)討論第1和第4更新點(diǎn),看看微信團(tuán)隊(duì)是如何來(lái)解決了產(chǎn)品中的問題點(diǎn)乍钻。

第1點(diǎn):公眾號(hào)文章可以以「浮窗」形式存在在界面上

首先「浮窗」從表現(xiàn)形式上與Android上的浮動(dòng)按鈕一致肛循。浮動(dòng)按鈕material design 規(guī)范定義為:浮動(dòng)按鈕一般是產(chǎn)品中最重要頻率最高的操作,浮動(dòng)按鈕是為了更便于操作银择。

就像一個(gè)圓形的圖標(biāo)漂浮在界面上多糠,它會(huì)在聚焦時(shí)改變顏色,在選中時(shí)改變空間高度浩考。

按下時(shí)夹孔,它可能會(huì)包含更多相關(guān)的操作。

而微信此次重新定義了浮動(dòng)按鈕,「浮窗」沒有點(diǎn)擊狀態(tài)搭伤,不承載操作只怎,只作為一個(gè)文章鏈接。

浮窗的樣式也是根據(jù)微信公眾號(hào)的頭像來(lái)決定怜俐。小小的「浮窗」卻承載著至關(guān)重要的作用身堡。

先從交互層面上分析一下「浮窗」,首先假設(shè)一個(gè)使用場(chǎng)景佑菩,今天自己喜歡的訂閱號(hào)推送新的文章盾沫,看到一半覺得這篇文章寫的很好,發(fā)送給好友看看并且想好友討論一下殿漠。

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

一旦關(guān)閉文章赴精,必須重新回到訂閱號(hào)聊天框中找到該公眾號(hào),重新打開文章——流程繁瑣復(fù)雜绞幌,不斷重復(fù)之前的操作流程蕾哟。

中途關(guān)閉文章十次,那就得重新打開十次莲蜘。

現(xiàn)在在這種碎片化的世界中谭确,很難專注一件事很久,特別是在手機(jī)這種移動(dòng)場(chǎng)景下票渠。很容易就被打斷或者被其他事物吸引走逐哈。所以這種頻繁關(guān)閉文章,打開文章的操作肯定會(huì)頻繁出現(xiàn)问顷。該問題嚴(yán)重影響公眾號(hào)文章的閱讀完成率昂秃。

公眾號(hào)的使用場(chǎng)景和好友聊天的使用場(chǎng)景是斷開的,沒有鏈接在一起杜窄,容易導(dǎo)致頻繁重復(fù)操作肠骆。

為了解決這個(gè)問題,微信團(tuán)隊(duì)使用「浮窗」來(lái)作為鏈接公眾號(hào)閱讀文章場(chǎng)景和好友聊天場(chǎng)景這兩個(gè)使用場(chǎng)景的銜接器塞耕。

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

發(fā)送朋友后蚀腿,可以采用浮窗的控件作為文章鏈接。隨時(shí)隨地都可以重新打開——不在需要重走一遍打開文章詳情4步的流程扫外,用戶可以通過(guò)浮窗自由切換文章與聊天這兩個(gè)使用場(chǎng)景莉钙。

這是用戶在這兩個(gè)使用場(chǎng)景中的最大的痛點(diǎn)。

那些看文章被中途打斷的用戶筛谚,再回來(lái)時(shí)不需要繁瑣重復(fù)操作磁玉,只需點(diǎn)下浮窗即可很流暢的打開之前的文章繼續(xù)閱讀。

場(chǎng)景鏈接連續(xù)性提高了刻获,相信文章的閱讀完成率會(huì)提高不少。

在頻繁的退出切換的使用場(chǎng)景下,還存在一個(gè)爽點(diǎn)Recognition rather than recall(尼爾森十大可用性原則):當(dāng)用戶退出文章時(shí)蝎毡,再次進(jìn)入文章時(shí)記憶住上次退出的位置而不是讓用戶自己去找上一次退出的位置厚柳。

在筆者寫此篇文章時(shí),該功能還未上線沐兵;今天再次使用時(shí)别垮,發(fā)現(xiàn)微信團(tuán)隊(duì)已更新該功能點(diǎn)。

從產(chǎn)品層面出發(fā)分析扎谎,微信三大功能點(diǎn):通訊碳想、朋友圈、公眾號(hào)毁靶,都只是線性鏈接胧奔,相互之間沒有真正的融合貫穿,產(chǎn)品流程很容易就被中斷预吆。

在這碎片化的世界龙填,產(chǎn)品使用流程必須是具有高度連續(xù)性;就像游戲一樣是一環(huán)扣一環(huán)的拐叉,一直走下去岩遗。

有時(shí)候我們玩游戲一不小心被打斷或者是被迫去做別的事情,再回來(lái)時(shí)游戲還能很連貫地進(jìn)行下去凤瘦,就是因?yàn)橛螒虍a(chǎn)品的連續(xù)性很連貫宿礁,所以我們繼續(xù)時(shí)毫無(wú)阻礙。

好的產(chǎn)品連續(xù)性一定不能差蔬芥,如果連續(xù)差梆靖,當(dāng)用戶被某些事情打斷時(shí),回來(lái)的時(shí)候就很難繼續(xù)上一個(gè)任務(wù)了坝茎。

慢慢地涤姊,用戶就會(huì)放棄之前的任務(wù)。這也是我們?cè)谧霎a(chǎn)品中需要思考的地方嗤放。

連續(xù)性和沉浸式體驗(yàn)有著本質(zhì)的區(qū)別思喊,沉浸式體驗(yàn)講究的是用戶不容易被打斷,不會(huì)受到別的事物所干擾次酌。而連續(xù)性講究的是即使你在使用我的產(chǎn)品過(guò)程中被別的事物所干擾打斷恨课,當(dāng)你再次回來(lái)時(shí),還能流暢的接著上一個(gè)未完成的任務(wù)岳服。

小小的「浮窗」卻承載著至關(guān)重要的作用:

1. 將碎片化的使用場(chǎng)景鏈接起來(lái)剂公,可以連貫切換場(chǎng)景。

2. 保證整個(gè)產(chǎn)品的內(nèi)容模塊的連續(xù)性吊宋,用戶可以更快的完成他的任務(wù)纲辽。這也比較符合張小龍之前說(shuō)的,他希望用戶用完即走。而不是在產(chǎn)品上停留太久拖吼,浪費(fèi)過(guò)多不必要的時(shí)間鳞上。

第4點(diǎn):文章閱讀頁(yè)返回鍵由“<”修改為“×”

雖然只是一個(gè)ICON的更換,這里面的含義缺大不相同吊档,“<”代表的是返回篙议,返回是指去了另外一個(gè)地方再回到原來(lái)的地方,是離開了再回來(lái)怠硼。

之前打開文章詳情是跳出了文章的場(chǎng)景鬼贱。點(diǎn)擊返回鍵則回到文章的場(chǎng)景。

文章列表和文章詳情都是同一個(gè)使用場(chǎng)景香璃。

返回隱喻用戶是離開了當(dāng)前場(chǎng)景去了另一個(gè)場(chǎng)景下这难,再回到原來(lái)的場(chǎng)景下“×”代表的是關(guān)閉,通常代表的含義是打開了某某某東西增显,要關(guān)閉它雁佳。

比如打開了窗戶,打開了門同云;要關(guān)閉窗戶糖权,要關(guān)閉門。

所以這里改用“×”炸站,更多的在暗示用戶星澳,你沒有離開文章列表的場(chǎng)景,而是基于該場(chǎng)景下打開了文章詳情旱易。

雖然是一個(gè)icon的變化禁偎,但是給用戶的感受是完全不同的。一個(gè)是離開了當(dāng)前場(chǎng)景阀坏,一個(gè)是繼續(xù)再當(dāng)前場(chǎng)景如暖。

讓用戶感受到?jīng)]有離開當(dāng)前場(chǎng)景,可以繼續(xù)其他的操作忌堂,而不是讓用戶感受到去了另外一個(gè)陌生的場(chǎng)景下盒至。

可惜的是微信此次更新對(duì)于頁(yè)面的切換動(dòng)畫沒有做修改,當(dāng)你打開文章詳情時(shí)士修,頁(yè)面切換依然是從右到左的切換枷遂,點(diǎn)擊關(guān)閉時(shí)也依然是從左到右關(guān)閉頁(yè)面。和更新前是保持一致的棋嘲。

當(dāng)使用“×”表示沒有脫離場(chǎng)景時(shí)酒唉,頁(yè)面切換的動(dòng)畫,最好是從下往上覆蓋沸移,關(guān)閉是從上往下退出痪伦。

Icon和頁(yè)面切換的動(dòng)畫兩者的配合才能真正打造出沒有脫離當(dāng)前場(chǎng)景的效果侄榴,這樣才能真正給用戶一種隱喻,告訴用戶你沒有離開文章列表的場(chǎng)景网沾。

Airbnb的篩選條件也是利用這樣的設(shè)計(jì)來(lái)隱喻用戶牲蜀,還未脫離當(dāng)前場(chǎng)景——相信微信團(tuán)隊(duì)后續(xù)會(huì)做出調(diào)整。

總結(jié)

重點(diǎn)分析了1绅这、公眾號(hào)文章可以以「浮窗」形式存在在界面上;第4點(diǎn)文章閱讀頁(yè)返回鍵由“<”修改為“×”在辆。微信此次改版對(duì)于用戶連續(xù)性操作以及沉浸式體驗(yàn)是一個(gè)提升证薇,但是一些細(xì)節(jié)有待完善。

有人分析指出微信此次更新是打響了時(shí)間保衛(wèi)戰(zhàn)匆篓,希望把用戶留在微信內(nèi)浑度。

而我的觀點(diǎn)恰恰相反:從連續(xù)性以及沉浸式這兩點(diǎn)看,微信是希望用戶能更快更愉悅地完成任務(wù)鸦概,也比較符合張小龍的主張箩张,希望用戶用戶即走。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末窗市,一起剝皮案震驚了整個(gè)濱河市先慷,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌咨察,老刑警劉巖论熙,帶你破解...
    沈念sama閱讀 217,734評(píng)論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異摄狱,居然都是意外死亡脓诡,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,931評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門媒役,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)祝谚,“玉大人,你說(shuō)我怎么就攤上這事酣衷〗还撸” “怎么了?”我有些...
    開封第一講書人閱讀 164,133評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵鸥诽,是天一觀的道長(zhǎng)商玫。 經(jīng)常有香客問我,道長(zhǎng)牡借,這世上最難降的妖魔是什么拳昌? 我笑而不...
    開封第一講書人閱讀 58,532評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮钠龙,結(jié)果婚禮上炬藤,老公的妹妹穿的比我還像新娘御铃。我一直安慰自己,他們只是感情好沈矿,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,585評(píng)論 6 392
  • 文/花漫 我一把揭開白布上真。 她就那樣靜靜地躺著,像睡著了一般羹膳。 火紅的嫁衣襯著肌膚如雪睡互。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,462評(píng)論 1 302
  • 那天陵像,我揣著相機(jī)與錄音就珠,去河邊找鬼。 笑死醒颖,一個(gè)胖子當(dāng)著我的面吹牛妻怎,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播泞歉,決...
    沈念sama閱讀 40,262評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼逼侦,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了腰耙?” 一聲冷哼從身側(cè)響起榛丢,我...
    開封第一講書人閱讀 39,153評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎挺庞,沒想到半個(gè)月后涕滋,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,587評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡挠阁,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,792評(píng)論 3 336
  • 正文 我和宋清朗相戀三年宾肺,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片侵俗。...
    茶點(diǎn)故事閱讀 39,919評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡锨用,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出隘谣,到底是詐尸還是另有隱情增拥,我是刑警寧澤,帶...
    沈念sama閱讀 35,635評(píng)論 5 345
  • 正文 年R本政府宣布寻歧,位于F島的核電站掌栅,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏码泛。R本人自食惡果不足惜猾封,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,237評(píng)論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望噪珊。 院中可真熱鬧晌缘,春花似錦齐莲、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,855評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至岳枷,卻和暖如春芒填,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背空繁。 一陣腳步聲響...
    開封第一講書人閱讀 32,983評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工氢烘, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人家厌。 一個(gè)月前我還...
    沈念sama閱讀 48,048評(píng)論 3 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像椎工,于是被迫代替她去往敵國(guó)和親饭于。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,864評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,116評(píng)論 25 707
  • 夜 浮笙 風(fēng)透過(guò)窗簾维蒙, 叫我知道它的存在掰吕。 而葉...
    Summer半笙閱讀 171評(píng)論 0 2
  • 每個(gè)人都要對(duì)自我有清晰的認(rèn)識(shí)和判斷,這樣才有利于自我的反思颅痊。在重新認(rèn)識(shí)自我的道路上殖熟,我認(rèn)為我自己是一個(gè)不壞的...
    隔水望伊人閱讀 754評(píng)論 0 51
  • 好煩
    笑曰閱讀 159評(píng)論 0 0