從交互角度分析微信改版
本文主要從交互設(shè)計(jì)的角度去分析微信此次的改版變動(dòng),希望能對(duì)大家有啟發(fā)~
前言
就在昨天,微信大版本更新,從6.4.7→7.0,本文從交互角度分析此次微信更新。
一、界面改版
- 整體比以前舒服了許多,之前的灰色腦袋終于去掉了,一下感覺微信變得輕快了許多,整體的視覺美感要高于舊版本。
- 再看圖標(biāo)的變化,主色明度稍有降低,顯得更輕快,但是少了一些穩(wěn)重感。為了平衡穩(wěn)重感及長期使用的舒適感,底部標(biāo)簽、聊天ICON等都有整體加粗,加深。
- 列表整體寬度、聊天消息高度、文字大小、都在加大加寬用戶點(diǎn)擊起來更加舒服。
- 【我】【發(fā)現(xiàn)】面性圖標(biāo)改為線性圖標(biāo),與文字與底部標(biāo)簽一致性高,更利于閱讀。
1. 界面改版總結(jié)
- 優(yōu)點(diǎn):內(nèi)容更加清晰、直觀。整體一致性完整,更加美觀。操作感更強(qiáng),操作更方便。
- 不足:頂部標(biāo)題欄上的按鈕反而縮小了一點(diǎn)點(diǎn),雖然點(diǎn)擊區(qū)域還是很合理,但是因?yàn)槠渌胤秸w的變大,頂部點(diǎn)擊時(shí)的舒適度稍有不足。
整體改版還是很成功的。
二、好看【看一看】
公眾號(hào)文章,下發(fā)本身的“點(diǎn)贊”改成了“好看”
這個(gè)改動(dòng)大家可以簡(jiǎn)單的理解為:對(duì)公眾號(hào)文章多了一種類似于微博的轉(zhuǎn)發(fā)方式。
但是區(qū)別在于,這里是:點(diǎn)贊+轉(zhuǎn)發(fā)=“好看”,然而這個(gè)入口就是“看一看”?!翱础迸c“看”的聯(lián)動(dòng),使人更容易記憶。(其實(shí)和很多APP“我喜歡的、我贊過的”基本類似的功能。)
1. 優(yōu)點(diǎn)
- 增加分發(fā),提高公眾號(hào)內(nèi)容傳播。
- 用戶可以更快的找到自己喜歡的文章,而不是在收藏中尋找查找。
- 可以和朋友產(chǎn)生共鳴,尋找共同喜好,增加粘性。
2. 缺點(diǎn)
- 個(gè)人感覺,點(diǎn)贊的功能還是應(yīng)該保留。可能會(huì)有一部分用戶不希望把自己喜歡的內(nèi)容分享在看一看里面的。同時(shí)點(diǎn)擊“好看”的成本要高于“點(diǎn)贊”,目前還是需要2步操作的:好看→輸入想法→確定。
- 點(diǎn)擊“好看”后的提醒:朋友將在看一看看到;其實(shí)我根本不知道看一看這個(gè)東西。文案改成“朋友將在發(fā)現(xiàn)中的看一看看到”會(huì)更好些。
- 取消點(diǎn)擊好看,還會(huì)給出這個(gè)取消+刪除的提示;相當(dāng)于一個(gè)點(diǎn)擊就把用戶的分享/想法直接刪除掉,個(gè)人感覺非常不友好。
3. “好看”總結(jié)
“好看”功能應(yīng)該是微信探索摸索的一個(gè)功能,目前看來細(xì)節(jié)上可能存在一些不足。
但是這種探索的方式,我們可以吸取一些思路,在一個(gè)功能已經(jīng)非常成熟的APP中,我們?cè)谧鼋换r(shí),應(yīng)該如何尋找一些聯(lián)動(dòng)關(guān)系,以及一些交互方式。做到小改動(dòng),大影響。
三、時(shí)刻視頻
“記錄眼前的世界,給朋友的視頻{冒個(gè)泡},告訴他你來過”這是更新說明中的原話。首先目前來看,這個(gè)【時(shí)刻視頻】是和其它短視頻有區(qū)別的,因?yàn)樵谖⑿胖?,所以不同?/p>
時(shí)刻:多個(gè)每個(gè)存在一天;主要針對(duì)朋友、群聊朋友。
短視頻:多個(gè)永久存在;針對(duì)大眾。
其實(shí)這是一種完全新的方式,也是微信從自身聊天功能的基礎(chǔ)上對(duì)于短視頻的一種探索,在聊天中嵌入短視頻:聊天+短視頻=時(shí)刻。在群聊天頁面,打開時(shí)刻,就感覺在刷抖音,只是少了互動(dòng),可能后期會(huì)增加吧。
- 入口:發(fā)起功能入口在我>拍攝,這個(gè)時(shí)刻相當(dāng)于個(gè)人主頁的頂部背景(能播放視頻背景)所以入口放在這里還是比較合適的。
- 提醒:這個(gè)提醒我覺得就有些粗糙了,并沒有告訴朋友在哪里可以看到。而且發(fā)布完就加了個(gè)背景,然后就沒有了。我覺得這里的指引還是不夠的,只是要告訴用戶在哪里可以看到。
我們看下創(chuàng)建這個(gè)視頻的過程:
1. 添加表情
當(dāng)你點(diǎn)擊一個(gè)表情時(shí),會(huì)在頁面上直接反饋出來,同時(shí)收起選擇浮層。交互方式簡(jiǎn)單粗暴,使用方便。(這里可以用自己的表情包,我覺得是真的很強(qiáng))
2. 添加文字
因?yàn)樘砑游淖峙c表情不同,表情只需要選擇一步。但是文字需要編輯、確認(rèn)2步。這里的處理是加了一個(gè)蒙層,然后在中間輸入內(nèi)容,使用蒙層是為了讓用戶更好的預(yù)知添加后與視頻的結(jié)合效果。
但是如果未輸入文字、直接收起鍵盤,這種情況下,點(diǎn)擊下方的所有按鈕是沒有反饋的。(開始我在這個(gè)頁面懵逼了很久)建議給個(gè)默認(rèn)內(nèi)容,或者對(duì)應(yīng)首次使用給出一些小提醒,避免讓用戶不知所措。
這個(gè)地方竟然還有BUG。BUG。BUG。最下方的“拖動(dòng)到此處刪除”???我還在這里拖了半天,發(fā)現(xiàn)什么都拖不了。
3. 添加音樂
點(diǎn)擊音樂圖標(biāo),自動(dòng)播放音樂,也代表著已經(jīng)自動(dòng)添加。這里存在幾個(gè)節(jié)點(diǎn):用原生/不用原生;用配樂/選擇配樂/不用配樂。
那么問題來了,選擇配樂的指示遠(yuǎn)遠(yuǎn)不夠,開始我并不認(rèn)為是直接把音樂加上了;從視覺上看,左右滑動(dòng)僅僅用于切換,并沒有給出是選中當(dāng)前音樂的信息傳遞。
添加表情右下角有一個(gè)收起的按鈕,添加音樂卻沒有這樣的提示、也沒有完成的按鈕。是點(diǎn)擊上方空白處,收起選擇音樂。(這里并沒有蒙層,如果上方被元素填滿,那用戶會(huì)不會(huì)以為自己要點(diǎn)到其它元素上?)
從流程交互上講:添加音樂和添加表情應(yīng)該保持統(tǒng)一,為什么還弄出兩種截然不同的形式?
4. 添加地址
添加地址與添加文字交互很相似,也和之前聊天發(fā)送地址一致,這里就不截圖說明了。
下面我看下生產(chǎn)好的小視頻。
1. 我的成品
左下角的圈圈對(duì)于剛發(fā)布會(huì)好的我,一直不知道是啥,還點(diǎn)了半天,瞎玩了一會(huì)兒。后來才知道這個(gè)是好友用來點(diǎn)贊的……
2. 群的入口
這個(gè)沒什么說的,點(diǎn)擊之后直接進(jìn)入群成員的時(shí)刻世界里,很有刷抖音的感覺。
3. 朋友圈入口
頭像雙擊直接打開視頻……這個(gè)沒人說,我真不知道,畢竟一般在APP上沒有這種操作
頭像單機(jī)可以打開用戶信息頁,下拉也可以查看小視頻。
4. 時(shí)刻視頻總結(jié)
這可能是微信在探索:聊天+短視頻,一種新的用戶概念。第一版本相對(duì)細(xì)節(jié)處理的不是很恰當(dāng),希望日后可以優(yōu)化。
四、其它細(xì)節(jié)優(yōu)化
1. 強(qiáng)提醒
因?yàn)槲⑿艃?nèi)容多,信息量大,信息垃圾多,為了處理這些信息過多的困擾。從?消息免打擾》消息置頂》強(qiáng)提醒。通過對(duì)應(yīng)不同場(chǎng)景的優(yōu)化,還是非常實(shí)用的。
2. 拍自己表情
這個(gè)功能也很實(shí)用,降低用戶制作表情成本,再也不用小程序、或其他APP去完成了。
3. 支付頁面
支付頁面把銀行卡收起來了,這個(gè)銀行卡的入口本身優(yōu)先級(jí)是很低的,之前擺的那么明顯,是為了微信支付的擴(kuò)張,增加更多綁卡用戶。其實(shí)這個(gè)入口早就應(yīng)該藏深一點(diǎn)兒了,畢竟支付功能的用戶早就已經(jīng)到達(dá)一定量級(jí)了。
其它的相關(guān)細(xì)節(jié)就不展開了。
總結(jié)
我們可以看到微信對(duì)于一些新的交互方式,以及一些形式上的不斷探索,是值得我們學(xué)習(xí)的。本次整體改版還是非常成功的。期待后期微信對(duì)“看一看”“時(shí)刻視頻”這兩個(gè)新的拓展功能,有不一樣的探索。
作者:Booze-kai(包子凱),一個(gè)來自草原的野生交互設(shè)計(jì)師,原華為CCO交互設(shè)計(jì)師,從事過吉利汽車,中廣核的相關(guān)設(shè)計(jì)工作
本文由 @Booze-kai 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自 Unsplash,基于CC0協(xié)議。
這種向抖音靠攏的模式,有沒有考慮過我們的內(nèi)存壓力啊?
個(gè)人主頁短視頻代替圖片,這個(gè)需要花費(fèi)的精心制作要多點(diǎn),最近總在思索為什么短視頻比單純的照片更受歡迎,可能也是人腦的進(jìn)化,接受能力大大增強(qiáng),從靜態(tài)到動(dòng)態(tài)。
時(shí)刻視頻有互動(dòng),長按冒泡可以評(píng)論
只說一句,視覺巨丑,不用找這么多形容詞
同感,真的感覺像是被黑客刷了一次。
需要緯度結(jié)合改點(diǎn)分析,這樣論點(diǎn)強(qiáng)有力
?? 感謝提議!
“整體比以前舒服了許多,之前的灰色腦袋終于去掉了?!?,這里的灰色腦袋是啥
就是之前標(biāo)題欄的灰黑色底部
添加配樂在視覺上的其實(shí)已經(jīng)有選中效果,而且這塊主要是聲音上的交互,我覺得沒有問題。
感謝交流??从脩羧喝绾味ㄎ涣耍绻悄贻p用戶應(yīng)該是可以接受的,但如果是年紀(jì)稍大一些的用戶,這種左右滑動(dòng)的選擇方式還是很難認(rèn)知的。(個(gè)人意見)
【我】那邊的設(shè)計(jì)是不是做了AB,我的是跟原來的一樣,就是顏色改成了白色……
只說一點(diǎn),收起音樂的按鈕如果做了,目的呢?
感謝交流,不是說一定要用按鈕,只是說少了一個(gè)告訴用戶回到上一級(jí)指引。(個(gè)人觀點(diǎn))
說的很全,但是沒有實(shí)際分析到點(diǎn)上…
1000多的閱讀量只有2個(gè)點(diǎn)贊。