在談到用戶體驗(yàn)時(shí)，如果每個(gè)人都能說兩句話，那么用戶體驗(yàn)到底是什么呢？筆者將從本文中的交互體驗(yàn)出發(fā)，從微信及QQ的交互比較中談?wù)勎覍?duì)用戶體驗(yàn)的理解。

既然要說用戶體驗(yàn)?zāi)敲吹谝徊轿覀兙蛻?yīng)該明確用戶到底是誰，才能談?dòng)脩趔w驗(yàn)，畢竟世界上沒有哪一款產(chǎn)品是能給所有用戶帶來合心意的體驗(yàn)的，所以我們首先要明確用戶體驗(yàn)的主體——目標(biāo)用戶。

在明確了用戶體驗(yàn)主體之后，我們第二步就需要進(jìn)一步了解用戶體驗(yàn)的客體，即用戶將會(huì)與誰進(jìn)行交互。用戶的交互肯定具有一定的流程，所以第三步就涉及到交互的流程問題。

所以本文將會(huì)按照上面的思路通過對(duì)比微信和QQ的目標(biāo)用戶、用戶交互所涉及的對(duì)象、交互流程來談?dòng)脩趔w驗(yàn)。

一、目標(biāo)用戶對(duì)比

微信和QQ作為騰訊旗下兩款國(guó)民級(jí)即時(shí)通訊應(yīng)用，雖然在核心功能與業(yè)務(wù)上有著極高的重合度但是在交互層面卻存在這諸多差異，各自帶來的用戶體驗(yàn)也是不同的。按照分析用戶體驗(yàn)流程的第一步，我們需要明確的是微信和QQ各自的目標(biāo)用戶畫像，了解到用戶體驗(yàn)到底是誰的體驗(yàn)。

微信（左）QQ（右）活躍用戶年齡分布對(duì)比

微信（左）QQ（右）活躍用戶性別分布對(duì)比

源自TalkingData的數(shù)據(jù)顯示，微信和QQ的用戶年齡分布情況基本一致，在性別分布上，QQ的女性用戶占比稍高于男性用戶占比，而微信恰好相反，但基本上二者的用戶畫像差別不大。其中原因應(yīng)該是微信QQ同時(shí)作為兩款國(guó)民級(jí)應(yīng)用，所以在用戶細(xì)分上不會(huì)有太大的差異。

既然同作為兩款國(guó)民級(jí)的即時(shí)通訊工具，還擁有基本一致的用戶畫像，就可以判斷出兩款應(yīng)用的用戶需求基本是一致的。雖然兩款應(yīng)用的用戶畫像基本一致，但是從產(chǎn)品層面上來看我們依然能看出二者的差別，微信相比于QQ顯得更穩(wěn)重而中規(guī)中矩，而QQ相較于微信則更顯年輕化。

這是兩款即時(shí)通訊工具在產(chǎn)品層面上給我們帶來最直觀差別，正式因?yàn)楫a(chǎn)品策略的差異才使得在交互上存在著兩套迥異的產(chǎn)品邏輯。

二、交互所涉及的對(duì)象

在我們明確了目標(biāo)用戶以后，我們需要做的第二步是明確與用戶產(chǎn)生交互的對(duì)象。

在互聯(lián)網(wǎng)產(chǎn)品中，用戶的交互可以分為用戶與界面的交互（UX）、用戶與內(nèi)容的交互（CX）、用戶與其他用戶的交互（PX）、用戶與品牌的交互（BX）四大類。這四種交互類型的關(guān)系是UX是CX、PX、BX的基礎(chǔ)，通常情況下CX是PX基礎(chǔ)，UX、CX、PX共同構(gòu)成了BX的基礎(chǔ)，四者的關(guān)系是一個(gè)金字塔型的關(guān)系。

四種交互類型的金字塔關(guān)系

不過值得說明的是，雖然四者存在著金字塔的層級(jí)關(guān)系，但并不是所有的應(yīng)用都會(huì)涉及到這四種交互類型，同時(shí)也并不意味著沒有了中間某一層，上面的層次就不復(fù)存在。就拿此次對(duì)比的微信和QQ來說，PX并不是以CX為基礎(chǔ)，而是直接在UX的基礎(chǔ)上建立起來，雖然微信和QQ包含有CX，但在這里PX和CX的關(guān)系就不再是PX以CX為基礎(chǔ)，二者應(yīng)該同處于金字塔的第二層。

以CX為基礎(chǔ)產(chǎn)生的PX多存在于新聞資訊類和社區(qū)社交類應(yīng)用中，因?yàn)椴⒎撬袘?yīng)用都會(huì)涉及到四類交互，所以需要進(jìn)行分析判斷微信和QQ具體具備哪幾種交互類型。

• UX：所有的應(yīng)用都涉及到人機(jī)交互，所以微信和QQ都涉及到UX。
• CX：在微信中，用戶可以查看公眾號(hào)消息，屬于內(nèi)容消費(fèi)的范疇，所以在微信中涉及到CX；在QQ中的看點(diǎn)、興趣部落都屬于內(nèi)容消費(fèi)的范疇，所以QQ也涉及到CX。
• PX：微信作為一款即時(shí)通訊工具，核心業(yè)務(wù)就是連接起人與人，所以涉及到PX，主要體現(xiàn)在聊天、群聊和朋友圈；QQ同樣作為即時(shí)通訊工具自然也涉及到PX，主要體現(xiàn)在聊天、群聊、QQ空間、擴(kuò)列之上。
• BX：微信除了即時(shí)通訊和公眾號(hào)，還有微信支付和小程序等共同構(gòu)建起的龐大生態(tài)圈是時(shí)微信的重要護(hù)城河，也是用戶與微信背后的騰訊這一品牌進(jìn)行交互的多個(gè)場(chǎng)景維度。QQ在即時(shí)通訊以外的個(gè)性裝扮、會(huì)員等多種年輕化、個(gè)性化的玩法也是用戶與騰訊品牌的多種交互場(chǎng)景維度。

綜上，微信和QQ在用戶交互中包含的UX、CX、PX、BX四種類型。

微信、QQ的交互類型金字塔關(guān)系

參考文章鏈接：

三、交互的流程

交互的流程可以劃分為操作前、操作中、操作后三個(gè)流程，各個(gè)流程的要求是操作前要信息明確、操作中要反饋及時(shí)、操作后要進(jìn)行操作返回。

1. 操作前信息明確

即要求界面的組件擺放、信息指示能給用戶帶來一目了然的感覺，讓用戶能輕易的理解到產(chǎn)品設(shè)計(jì)者的意圖，方便用戶進(jìn)行有效便捷的操作。要想做到信息明確可以從指示明確、減少疑惑、狀態(tài)可見這三個(gè)方面出發(fā)。

（1）指示明確

就如同我們?nèi)粘Ｉ钪杏龅降闹嘎放埔粯樱梢酝ㄟ^簡(jiǎn)單的箭頭和文字即可給路人帶來明確的指示目標(biāo)，體現(xiàn)在手機(jī)應(yīng)用中的例子如TIM的聊天界面中，屏幕左上方是返回按鈕，按照通常的用戶習(xí)慣，對(duì)于這個(gè)“<”符號(hào)，大家基本都知道是返回的意思。與此同時(shí)在返回符旁還加了“消息”兩個(gè)字，讓用戶更清晰的知道將會(huì)返回到什么地方——消息界面。

TIM聊天界面

（2）減少疑惑

即在界面中用清晰明了的圖標(biāo)或簡(jiǎn)短的文字即可讓用戶直接意會(huì)到界面的功能含義，這要求在界面設(shè)計(jì)中圖標(biāo)的選擇盡量建立在用戶已有的日常習(xí)慣之上，避免不必要的創(chuàng)新。

如消息界面的入口按鈕一般都使用鈴鐺或喇叭的圖標(biāo)，一來是因?yàn)檫@與現(xiàn)實(shí)生活產(chǎn)生聯(lián)系，當(dāng)出現(xiàn)廣播式消息時(shí)會(huì)通過大喇叭的形式傳播，或出現(xiàn)鈴聲響的情況所以用喇叭或鈴鐺產(chǎn)生聯(lián)想。二來是因?yàn)槟壳按蠖鄶?shù)應(yīng)用都這么做，已經(jīng)形成了固定的用戶習(xí)慣。所以用這些聯(lián)系真實(shí)世界的圖標(biāo)能有效地減少疑惑。

（3）狀態(tài)可見

是指用戶在開始操作之前就能預(yù)知到操作的結(jié)果，讓用戶對(duì)即將開始的超多有整體的感知，以便省去多余的反復(fù)試錯(cuò)過程。例如很多新聞資訊類應(yīng)用在新聞詳情頁，在屏幕側(cè)邊會(huì)有進(jìn)度條，顯示用戶的閱讀進(jìn)度，也能給用戶對(duì)文章體量有整體感知。

另外還有一個(gè)例子就是因?yàn)槟壳笆袌?chǎng)上的應(yīng)用體量變大的原因，加載時(shí)間漸漸變長(zhǎng)，在加載完成之前，界面會(huì)先顯示即將現(xiàn)實(shí)的界面結(jié)構(gòu)，讓用戶提前了解界面的結(jié)構(gòu)情況。

美團(tuán)外賣小程序加載界面

在微信和QQ中涉及到UX、CX、PX、BX四類交互內(nèi)容，而在交互流程方面，涉及的主要是UX方面的比較，所以從交互流程上一一比較二者的交互差異，以比較UX為主，CX、PX、BX的比較暫不在此討論范圍之內(nèi)。

因?yàn)槲⑿藕蚎Q的體量較大，所以要比較微信和QQ的交互差異，本文主要選取了兩大核心功能進(jìn)行比較，分別是即時(shí)通訊和個(gè)人動(dòng)態(tài)，“個(gè)人動(dòng)態(tài)”體現(xiàn)在微信則是朋友圈、體現(xiàn)在QQ則是QQ空間。

首先來看即時(shí)通訊功能，即時(shí)通訊主要有好友列表、消息界面、聊天界面三部分組成。

1）通訊錄：

• 微信的通訊錄以列表形式展現(xiàn)，聯(lián)系人按照首字母排序，群聊有單獨(dú)的入口，且必須是加入通訊錄的群聊才會(huì)在這里顯示，用標(biāo)簽的形式形成好友分組。
• QQ的聯(lián)系人界面以頂部tab和列表的形式展現(xiàn)好友信息，群聊中顯示所有已加入的群聊。同時(shí)還比微信多了一個(gè)手機(jī)通訊錄的好友列表。

小結(jié)：

指示明確方面，微信用圖標(biāo)加文字展現(xiàn)群聊等二級(jí)界面入口、QQ以文字進(jìn)行展示，兩種顯現(xiàn)方式并無孰優(yōu)孰劣之分，都達(dá)到了指示明確的效果。

減少疑惑方面依然如此。

狀態(tài)可見方面二者整體結(jié)構(gòu)都比較清晰，QQ的好友列表結(jié)合了首字母排列和分組排列，可能是受到歷史原因的影響，因?yàn)楹糜逊纸M的聯(lián)系人排列方式一直存在，后期加入的首字母排列多少受到微信的影響，所以兩款應(yīng)有都有互相借鑒的地方。

前文提到的進(jìn)度條的例子，在微信中沒有進(jìn)度條、而在QQ中有進(jìn)度條，產(chǎn)生這樣的差異原因可能是二者在社交關(guān)系上的定位不同導(dǎo)致的，微信相比于QQ關(guān)系的沉淀要更加封閉，QQ受到早年的影響使得用戶列表中有大量的陌生人，所以QQ好友相對(duì)微信好友要更多，所以加上進(jìn)度條讓用戶對(duì)好友數(shù)量有個(gè)大概的感知。

2）消息界面：

消息界面二者的交互差異體現(xiàn)在小細(xì)節(jié)之上。

• 差異一：信息角標(biāo)位置，微信的信息角標(biāo)出現(xiàn)在好友頭像上，并顯示新消息數(shù)量，QQ信息角標(biāo)出現(xiàn)在右側(cè)，同樣顯示信息數(shù)量。
• 差異二：免打擾的信息提示差異，微信中免打擾的信息會(huì)以紅點(diǎn)角標(biāo)提示，新信息數(shù)量提示出現(xiàn)在最新內(nèi)容的小字前，QQ則會(huì)把信息角標(biāo)變成淡藍(lán)色，并顯示新信息數(shù)量。
• 差異三：有無進(jìn)度條，當(dāng)滑動(dòng)信息界面時(shí)，微信無進(jìn)度條，而QQ有。原因可能跟前面說的一樣，考慮到QQ好友關(guān)系相對(duì)微信更開放，加之服務(wù)號(hào)、騰訊新聞、看點(diǎn)日?qǐng)?bào)等其他系統(tǒng)消息一并在此顯示，加上進(jìn)度條可以讓用戶有個(gè)整體把握。

3）聊天界面：

在與好友的聊天界面我們發(fā)現(xiàn)微信和QQ的差別較大，我們從上往下可將微信分為微1、微2、微3共三個(gè)部分，QQ可分為Q1、Q2、Q3、Q4。

在第一欄中，Q1比微1多了一個(gè)通話按鈕，QQ把通話的入口比微信放的更明顯的原因可能語其年輕化的定位有關(guān)系，為了迎合更年輕化的設(shè)計(jì)，把通話按鈕放置在最明顯的位置，更能吸引用戶使用通話這一更靈活有趣的功能。

而微信定位是方便快捷，張小龍就說過微信就是一個(gè)用戶用完就走的工具，所以當(dāng)用戶與好友聯(lián)系時(shí)，發(fā)圖文或發(fā)語音即可，所以把發(fā)語音的按鈕直接放在了微3的位置。當(dāng)年微信也是依靠直接發(fā)語音的功能優(yōu)勢(shì)起家，這還與歷史原因有關(guān)，而把音視頻通話放在了“+”按鈕的抽屜中，還兼顧了頁面簡(jiǎn)潔性，照顧到廣大用戶的體驗(yàn)。QQ把紅包、圖片、拍照等多樣的玩法都直接放在了Q4的位置，與語音通話放在Q1的原因一樣，同樣是為了年輕化的產(chǎn)品定位服務(wù)。

在群聊聊天界面值的比較的是群資料界面，微信群聊中沒有QQ群聊中的群文件、相冊(cè)、簽到、投票等功能，要實(shí)現(xiàn)這些協(xié)作功能則是通過小程序?qū)崿F(xiàn)，保證了微信的簡(jiǎn)潔性。造成這樣的差異皆是各自定位使然。

比較完了即時(shí)通訊之后就是比較朋友圈和QQ空間的交互差異。

朋友圈和QQ空間本質(zhì)上是一東西，都是用戶記錄個(gè)人生活，并把記錄的信息向好友公布的信息窗口，但是二者在交互上卻存在著諸多差異，筆者將從外在的界面到內(nèi)在的交互邏輯逐步深入進(jìn)行比較。

• 差異一：微信比QQ界面更簡(jiǎn)潔，微信作為一款單純的社交工具，只需要展現(xiàn)動(dòng)態(tài)中的信息即可，而QQ還包含了各種個(gè)性裝扮掛件、訪客信息顯示，充分體現(xiàn)了娛樂元素。
• 差異二：互動(dòng)的可見范圍，微信是共同好友方可見點(diǎn)贊、評(píng)論等互動(dòng)內(nèi)容，而QQ則是可見所有互動(dòng)內(nèi)容，背后體現(xiàn)的社交關(guān)系鏈邏輯一個(gè)是封閉式一個(gè)則是半開放半封閉式。
• 差異三：發(fā)布內(nèi)容的差異，微信更鼓勵(lì)用戶發(fā)表圖片和短視頻，要想發(fā)純文字的朋友圈需要長(zhǎng)按發(fā)布的相機(jī)按鈕才可發(fā)布純文字朋友圈，這個(gè)入口較難找，大多數(shù)人甚至需要上網(wǎng)搜索才知道如何發(fā)純文字朋友圈，微信這么做的原因可能是希望用戶分享更多圖片、視頻這樣較吸引人的內(nèi)容，營(yíng)造體驗(yàn)更佳的“刷圈”體驗(yàn)。在QQ中用戶要發(fā)布一條動(dòng)態(tài)還特意彈出一個(gè)抽屜，讓用戶選擇發(fā)布的內(nèi)容類型，玩法更為多樣，娛樂性更強(qiáng)。

• 差異四：管理個(gè)人動(dòng)態(tài)的差異，微信要統(tǒng)一管理自己發(fā)布過的朋友圈要點(diǎn)擊個(gè)人頭像到個(gè)人主頁中進(jìn)行統(tǒng)一管理，在QQ空間中查看好友動(dòng)態(tài)時(shí)就可通過相冊(cè)、說說分類管理自己的動(dòng)態(tài)。QQ空間本身也有獨(dú)立的APP，所以內(nèi)嵌在QQ中是交互邏輯更像是一個(gè)單獨(dú)應(yīng)用的交互邏輯，而朋友圈則是充分融合在微信中的一個(gè)功能模塊。

2. 操作中反饋及時(shí)

則是通過視覺、聽覺、觸覺的感官體驗(yàn)讓用戶感受到操作的有效的、可執(zhí)行的。前文比較的是微信和QQ在操作前的交互情況所以按照兩大核心功能及各對(duì)應(yīng)界面進(jìn)行劃分，分別比較兩款應(yīng)用各自的交互方式和背后的內(nèi)在邏輯。

涉及到操作中的交互要反饋及時(shí)這里將不再對(duì)微信和QQ進(jìn)行一一對(duì)比，因?yàn)閮煽顟?yīng)用有各自的風(fēng)格，微信偏簡(jiǎn)潔風(fēng)，QQ重個(gè)性化多樣化玩法，所以下文將通過舉微信和QQ中的交互例子的形式列舉出操作中的反饋類型。

（1）視覺反饋

• 表現(xiàn)狀態(tài)的視覺反饋：如QQ中發(fā)送圖片時(shí)顯示發(fā)送完成百分比，反饋信息發(fā)送完成度，讓用戶意識(shí)到信息正在發(fā)送中，發(fā)送行為是運(yùn)行中的。
• 其提示作用的視覺反饋：如QQ消息頁面下拉刷新后過段時(shí)間會(huì)顯示刷新成功，給用戶明確的操作成功反饋。
• 起警示作用的視覺反饋：如在微信消息頁面中長(zhǎng)按某一好友信息要?jiǎng)h除該聊天時(shí)會(huì)出現(xiàn)彈窗警示刪除該聊天后會(huì)一并清空該聊天的消息記錄。因?yàn)椴僮鞑豢赡媲視?huì)造成可能有損失的后果，所以加入了警示性視覺反饋。

（2）聽覺反饋

操作的反饋信息有時(shí)候如果光靠視覺反饋會(huì)造成頁面繁復(fù)的情況，帶來較差的用戶體驗(yàn)，這時(shí)可以用聽覺反饋代替視覺反饋，同樣能給用戶帶來操作提示。如微信掃一掃，當(dāng)掃描成功后會(huì)出現(xiàn)“滴”的一聲反饋，顯示掃描成功。

（3）觸覺反饋

和聽覺反饋一樣，觸覺反饋一是視覺反饋的替代反饋方式之一，如在QQ消息界面中長(zhǎng)按某一聊天欄時(shí)會(huì)彈出切換最近聊天聯(lián)系人的窗口，交互方式類似于手機(jī)的任務(wù)管理的交互方式。當(dāng)長(zhǎng)按彈出最近的聯(lián)系人的同時(shí)手機(jī)會(huì)出現(xiàn)短暫的震動(dòng)，不僅在視覺上提供操作成功反饋，在觸覺上也多了一道反饋形式。

QQ長(zhǎng)按聊天進(jìn)入最近聯(lián)系人切換窗口

3. 操作后可返回

操作后可返回則是一個(gè)操作流程結(jié)束后進(jìn)行的復(fù)位操作，這要求返回的邏輯要清晰，同時(shí)還要兼顧到流程的簡(jiǎn)便性。返回的種類可分為返回、關(guān)閉、完成三大類。

• 返回一般是指返回上一級(jí)界面；
• 關(guān)閉則指關(guān)閉當(dāng)前界面結(jié)束整個(gè)功能場(chǎng)景；
• 完成則一般出現(xiàn)在完成整個(gè)功能流程之后進(jìn)行的一個(gè)結(jié)束功能場(chǎng)景的操作，與關(guān)閉不同的是，關(guān)閉一般指功能流程中止階段直接退出整個(gè)功能流程，而完成是在功能流程處于完成狀態(tài)進(jìn)行的關(guān)閉功能流程操作。

總結(jié)

本文比較了微信和QQ的用戶畫像、各自所涉及的交互對(duì)象和交互流程，試圖說明對(duì)用戶體驗(yàn)的個(gè)人理解。在比較中我們發(fā)現(xiàn)，產(chǎn)品設(shè)計(jì)中要想使產(chǎn)品具有良好的用戶體驗(yàn)就得需要結(jié)合產(chǎn)品的定位和用戶的定位，在這兩個(gè)定位的大框架之下去考慮交互過程中的交互對(duì)象和交互流程中的細(xì)節(jié)信息。

在交互流程中的各大原則在所有的產(chǎn)品設(shè)計(jì)中都具有一定的參考意義，但在遵循這些交互原則的同時(shí)還需要兼顧到用戶和產(chǎn)品定位進(jìn)行相應(yīng)取舍，在動(dòng)態(tài)平衡中給用戶帶來較佳的用戶體驗(yàn)。

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

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