這樣做對不對? ——對微信交互設(shè)計(jì)的一些建議

4 評論 8559 瀏覽 18 收藏 12 分鐘

本文作者將討論一下微信這款產(chǎn)品的幾個(gè)設(shè)計(jì)點(diǎn)。enjoy~

微信是人們在日常生活中常用的軟件,截至2017年4月,其活躍用戶數(shù)量已有8.89億,公眾號的數(shù)量也已高達(dá)1000萬,對于這樣一個(gè)影響如此巨大、服務(wù)群體如此之多的社交類軟件,其交互設(shè)計(jì)的每一個(gè)細(xì)節(jié)都關(guān)乎著無數(shù)人的使用體驗(yàn),進(jìn)而影響著無數(shù)人的生活質(zhì)量甚至是切身利益。在這里,我們就討論一下微信這款產(chǎn)品的幾個(gè)設(shè)計(jì)點(diǎn)。

1. 微信(電腦版)的公眾號頁面點(diǎn)擊鼠標(biāo)左建后彈出的小窗口

如下圖:

如圖所示,該窗口可被認(rèn)為是公眾號的詳細(xì)介紹頁面,其中值得注意的是,該頁面的右下角設(shè)置了三個(gè)按鈕,分別是發(fā)送名片、查看歷史消息、進(jìn)入公眾號(如下圖所示)。

“發(fā)送名片“按鈕

“查看歷史消息“按鈕

“進(jìn)入公眾號“按鈕

這里,我們討論一下這3個(gè)圖標(biāo)的設(shè)計(jì)樣式:

“發(fā)送名片“按鈕

(1)問題

對于這個(gè)按鈕,由于這個(gè)按鈕的圖標(biāo)樣式是一種不大常用的圖標(biāo)樣式,因此,用戶在見到這個(gè)圖標(biāo)時(shí)往往會(huì)對圖標(biāo)的功能產(chǎn)生疑惑,而嘗試去點(diǎn)擊它又會(huì)浪費(fèi)用戶寶貴的時(shí)間和流量,這會(huì)讓用戶產(chǎn)生煩躁感,降低用戶體驗(yàn)(如下圖)。

(2)改進(jìn)建議

既然這個(gè)按鈕的作用是分享這個(gè)公眾號,而”分享“圖標(biāo)有常用的圖標(biāo)樣式,這樣的話,是不是可以采用常用的”分享“圖標(biāo)樣式(如下圖),同時(shí)也可以把用于提示的字符串由“發(fā)送名片”改為”分享名片”,從而使用戶對圖標(biāo)的功能一目了然,提高使用時(shí)的流暢感。

“分享”圖標(biāo)1

“分享”圖標(biāo)2

“查看歷史消息“按鈕

對于“查看歷史消息“按鈕和“進(jìn)入公眾號“按鈕,似乎也存在這樣的問題,由于用戶之前沒有見過這樣的圖標(biāo),也可能會(huì)產(chǎn)生一些疑惑,在這里也同樣建議修改圖標(biāo)樣式?!安榭礆v史消息“按鈕可選擇改為在瀏覽器上通用的“歷史”圖標(biāo)樣式(如下圖)

通用的“歷史”圖標(biāo)樣式

“進(jìn)入公眾號“按鈕

而“進(jìn)入公眾號“按鈕所采用的類似”聊天“圖標(biāo)的設(shè)計(jì)其實(shí)是能夠給用戶一種進(jìn)入公眾號和公眾號聊天、看公眾號內(nèi)容的體驗(yàn),從這一點(diǎn)上來說這個(gè)設(shè)計(jì)是符合要求的,但在有的時(shí)候,用戶又似乎有可能會(huì)認(rèn)為這個(gè)圖標(biāo)是”聯(lián)系我們“的意思,更何況,用戶一般不會(huì)和公眾號聊天的,采用”聊天”圖標(biāo)可能也有點(diǎn)不太妥當(dāng),建議采用帶有“進(jìn)入”意思的圖標(biāo)(如下圖)。

帶有“進(jìn)入”意思的圖標(biāo)

總結(jié):對于圖標(biāo)的樣式,個(gè)人覺得應(yīng)采用通用型的圖標(biāo)樣式,這樣用戶在使用時(shí)會(huì)有熟悉、流暢的感覺,采用用戶陌生的圖標(biāo)可能會(huì)增加用戶的疑慮感、歧義感和煩躁感。

2. 微信(電腦版)的公眾號頁面的重復(fù)設(shè)計(jì)

問題

還是微信(電腦版)的公眾號頁面,當(dāng)用戶選中一個(gè)公眾號,然后點(diǎn)擊鼠標(biāo)左鍵時(shí),彈出的是這樣的窗口(如下圖):

點(diǎn)擊鼠標(biāo)左鍵時(shí)彈出的窗口

而當(dāng)用戶點(diǎn)擊鼠標(biāo)右鍵時(shí),則彈出這樣的列表(如下圖):

點(diǎn)擊鼠標(biāo)右鍵時(shí)彈出的列表

我們可以看到,點(diǎn)擊鼠標(biāo)左鍵時(shí)彈出的窗口的功能分別是:發(fā)送名片、查看歷史消息和進(jìn)入公眾號,而點(diǎn)擊鼠標(biāo)右鍵時(shí)彈出的窗口的功能分別是:發(fā)消息、發(fā)送名片和取消關(guān)注,其中,發(fā)送名片=發(fā)送名片,進(jìn)入公眾號=發(fā)消息,所以功能總共只有4種:發(fā)送名片、查看歷史消息、進(jìn)入公眾號和取消關(guān)注。

改進(jìn)建議

總共只有4個(gè)功能,可考慮并到一起(如下圖):

3. 搜索欄

問題

微信(電腦版)里面的搜索欄是一個(gè)很多時(shí)候用戶不知道該如何使用的控件,因?yàn)樗阉鬟@個(gè)功能的范圍太大了,用戶無法確定(如下圖):

看到這個(gè)界面,用戶可能會(huì)問:

  1. 我搜索的范圍是什么?
  2. 是下面寫的“搜索文章”嗎?
  3. 搜到的是 本地已有的內(nèi)容 還是 網(wǎng)上的陌生人、陌生文章也能搜到?
  4. 如果 本地內(nèi)容、聯(lián)網(wǎng)內(nèi)容都能搜索到,那下面的搜索文章是干什么的?
  5. 如果我想新加個(gè)好友的話以后在這里搜嗎?

這個(gè)時(shí)候,用戶可能已經(jīng)不大想用這項(xiàng)功能了,因?yàn)樗麄兏静恢肋@個(gè)“搜索”是干什么的。

(2)改進(jìn)建議

根據(jù)試驗(yàn),該項(xiàng)“搜索”功能可能是搜索本地的好友、群、文章等等內(nèi)容,而下面的”搜一搜“則可能是用于搜索網(wǎng)絡(luò)中公眾號里相關(guān)文章的。所以建議把上面的輸入框中的提示文字由”搜索“改為”搜索全部本地內(nèi)容:好友/群聊/群成員/群文件/公眾號內(nèi)容等等“,把下面的”搜一搜“改為”搜索聯(lián)網(wǎng)公眾號內(nèi)容“。這樣用戶可能就知道這個(gè)搜索是用來干什么的了。

總結(jié):很多時(shí)候,要先交代給用戶這是干什么的。

4. 收藏界面

問題1:列表項(xiàng)位置

在微信的收藏界面,用戶能看到一個(gè)列表(如下圖):

收藏界面的列表

此時(shí),用戶可能會(huì)產(chǎn)生疑問:“全部收藏“指的是收藏的內(nèi)容,可下面的”鏈接“、”相冊“等等的又是指什么呢?

改進(jìn)建議:

?? 其實(shí)這些“鏈接“、”相冊“等等的是指”全部收藏“中的”鏈接“、”相冊“,個(gè)人認(rèn)為,由于這些“鏈接“、”相冊“等等列表項(xiàng)與”全部收藏”平行,所以用戶會(huì)產(chǎn)生一些疑慮,認(rèn)為它們是除了收藏內(nèi)容意外的其他內(nèi)容。個(gè)人建議可以將次級列表項(xiàng)往右側(cè)移動(dòng)幾個(gè)字符的距離,用位置體現(xiàn)主次級的關(guān)系(如下圖)。

用位置體現(xiàn)主次級的關(guān)系

總結(jié):

子列表項(xiàng)最好能往右側(cè)移動(dòng)幾個(gè)字符的距離,使得用戶沒有歧義的看出它們是子列表項(xiàng)。主次,大小等關(guān)系也最好能通過位置、顏色、字體等等體現(xiàn)。

問題2:拖拽文件至此直接新建收藏(如下圖)

?

用戶不太會(huì)注意到這個(gè)功能,可能是因?yàn)樗奶崾疚淖治恢幂^低、字體顏色較暗。另外,“拖拽至此“這個(gè)功能往往需要用一個(gè)“框”去引導(dǎo)用戶,讓他們往框里面拖拽,否則,用戶可能會(huì)不大情愿拖拽,他們甚至都想不到這里還能拖拽。

改進(jìn)建議:

增設(shè)醒目的標(biāo)識(shí)、用一個(gè)“框”來提示用戶拖拽(如下圖)

總結(jié):新功能要明顯、明顯、明顯,最好自己能閃幾下或做成一個(gè)flash.

附加語:騰訊公司的微信是一款非常優(yōu)秀的產(chǎn)品,也是交互設(shè)計(jì)的教科書,本文雖是對微信的建議性文章,但并沒有任何針對性,騰訊公司優(yōu)秀的設(shè)計(jì)能力是業(yè)內(nèi)外一直認(rèn)同的,這一點(diǎn)無可厚非。

 

作者:中大yzh,中大數(shù)據(jù)院,2年用戶體驗(yàn),4年IT技術(shù),從程序員和設(shè)計(jì)人員的角度綜合分析互聯(lián)網(wǎng)產(chǎn)品。

本文由 @中大yzh 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自 Pexels,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 關(guān)于提到的第一問題確實(shí)如分析的那樣,其實(shí)可以在icon上添加一個(gè)tooltip,這樣表達(dá)可以更清晰些!

    來自北京 回復(fù)
  2. 微信有很多交互不太好或者讓人感覺很難受的點(diǎn),但是就是一直沒人去改,真的是皮

    來自廣東 回復(fù)
  3. 贊~\(≧▽≦)/~

    來自廣東 回復(fù)