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

微信是人們?cè)谌粘Ｉ钪谐Ｓ玫能浖刂?017年4月，其活躍用戶數(shù)量已有8.89億，公眾號(hào)的數(shù)量也已高達(dá)1000萬(wàn)，對(duì)于這樣一個(gè)影響如此巨大、服務(wù)群體如此之多的社交類(lèi)軟件，其交互設(shè)計(jì)的每一個(gè)細(xì)節(jié)都關(guān)乎著無(wú)數(shù)人的使用體驗(yàn)，進(jìn)而影響著無(wú)數(shù)人的生活質(zhì)量甚至是切身利益。在這里，我們就討論一下微信這款產(chǎn)品的幾個(gè)設(shè)計(jì)點(diǎn)。

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

如下圖：

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

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

“查看歷史消息“按鈕

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

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

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

（1）問(wèn)題

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

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

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

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

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

“查看歷史消息“按鈕

對(duì)于“查看歷史消息“按鈕和“進(jìn)入公眾號(hào)“按鈕，似乎也存在這樣的問(wèn)題，由于用戶之前沒(méi)有見(jiàn)過(guò)這樣的圖標(biāo)，也可能會(huì)產(chǎn)生一些疑惑，在這里也同樣建議修改圖標(biāo)樣式。“查看歷史消息“按鈕可選擇改為在瀏覽器上通用的“歷史”圖標(biāo)樣式（如下圖）

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

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

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

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

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

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

問(wèn)題

還是微信（電腦版）的公眾號(hào)頁(yè)面，當(dāng)用戶選中一個(gè)公眾號(hào)，然后點(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)入公眾號(hào)，而點(diǎn)擊鼠標(biāo)右鍵時(shí)彈出的窗口的功能分別是：發(fā)消息、發(fā)送名片和取消關(guān)注，其中，發(fā)送名片=發(fā)送名片，進(jìn)入公眾號(hào)=發(fā)消息，所以功能總共只有4種：發(fā)送名片、查看歷史消息、進(jìn)入公眾號(hào)和取消關(guān)注。

改進(jìn)建議

總共只有4個(gè)功能，可考慮并到一起（如下圖）：

3. 搜索欄

問(wèn)題

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

看到這個(gè)界面，用戶可能會(huì)問(wèn)：

1. 我搜索的范圍是什么？
2. 是下面寫(xiě)的“搜索文章”嗎？
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ò)中公眾號(hào)里相關(guān)文章的。所以建議把上面的輸入框中的提示文字由”搜索“改為”搜索全部本地內(nèi)容：好友/群聊/群成員/群文件/公眾號(hào)內(nèi)容等等“，把下面的”搜一搜“改為”搜索聯(lián)網(wǎng)公眾號(hào)內(nèi)容“。這樣用戶可能就知道這個(gè)搜索是用來(lái)干什么的了。

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

4. 收藏界面

問(wèn)題1：列表項(xiàng)位置

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

收藏界面的列表

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

改進(jìn)建議：

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

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

總結(jié)：

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

問(wèn)題2：拖拽文件至此直接新建收藏（如下圖）

?

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

改進(jìn)建議：

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

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

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

作者：中大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)載。

題圖來(lái)自 Pexels，基于 CC0 協(xié)議