從交互角度分析微信改版

17 評(píng)論 20460 瀏覽 91 收藏 11 分鐘

本文主要從交互設(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)

  1. 增加分發(fā),提高公眾號(hào)內(nèi)容傳播。
  2. 用戶可以更快的找到自己喜歡的文章,而不是在收藏中尋找查找。
  3. 可以和朋友產(chǎn)生共鳴,尋找共同喜好,增加粘性。

2. 缺點(diǎn)

  1. 個(gè)人感覺,點(diǎn)贊的功能還是應(yīng)該保留。可能會(huì)有一部分用戶不希望把自己喜歡的內(nèi)容分享在看一看里面的。同時(shí)點(diǎn)擊“好看”的成本要高于“點(diǎn)贊”,目前還是需要2步操作的:好看→輸入想法→確定。
  2. 點(diǎn)擊“好看”后的提醒:朋友將在看一看看到;其實(shí)我根本不知道看一看這個(gè)東西。文案改成“朋友將在發(fā)現(xiàn)中的看一看看到”會(huì)更好些。
  3. 取消點(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)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 這種向抖音靠攏的模式,有沒有考慮過我們的內(nèi)存壓力啊?

    來自北京 回復(fù)
  2. 個(gè)人主頁短視頻代替圖片,這個(gè)需要花費(fèi)的精心制作要多點(diǎn),最近總在思索為什么短視頻比單純的照片更受歡迎,可能也是人腦的進(jìn)化,接受能力大大增強(qiáng),從靜態(tài)到動(dòng)態(tài)。

    來自廣東 回復(fù)
  3. 時(shí)刻視頻有互動(dòng),長按冒泡可以評(píng)論

    回復(fù)
  4. 只說一句,視覺巨丑,不用找這么多形容詞

    來自浙江 回復(fù)
    1. 同感,真的感覺像是被黑客刷了一次。

      來自北京 回復(fù)
  5. 需要緯度結(jié)合改點(diǎn)分析,這樣論點(diǎn)強(qiáng)有力

    回復(fù)
    1. ?? 感謝提議!

      來自廣東 回復(fù)
  6. “整體比以前舒服了許多,之前的灰色腦袋終于去掉了?!?,這里的灰色腦袋是啥

    來自北京 回復(fù)
    1. 就是之前標(biāo)題欄的灰黑色底部

      來自廣東 回復(fù)
  7. 添加配樂在視覺上的其實(shí)已經(jīng)有選中效果,而且這塊主要是聲音上的交互,我覺得沒有問題。

    回復(fù)
    1. 感謝交流??从脩羧喝绾味ㄎ涣耍绻悄贻p用戶應(yīng)該是可以接受的,但如果是年紀(jì)稍大一些的用戶,這種左右滑動(dòng)的選擇方式還是很難認(rèn)知的。(個(gè)人意見)

      來自廣東 回復(fù)
  8. 【我】那邊的設(shè)計(jì)是不是做了AB,我的是跟原來的一樣,就是顏色改成了白色……

    回復(fù)
  9. 只說一點(diǎn),收起音樂的按鈕如果做了,目的呢?

    來自北京 回復(fù)
    1. 感謝交流,不是說一定要用按鈕,只是說少了一個(gè)告訴用戶回到上一級(jí)指引。(個(gè)人觀點(diǎn))

      來自廣東 回復(fù)
  10. 說的很全,但是沒有實(shí)際分析到點(diǎn)上…

    來自北京 回復(fù)
  11. 1000多的閱讀量只有2個(gè)點(diǎn)贊。

    來自浙江 回復(fù)