當(dāng)談及用戶體驗的時候，每個人都能說上兩句，那么到底什么是用戶體驗?zāi)?？筆者在本文將從交互體驗出發(fā)，在對微信和QQ的交互比較中談?wù)勎覍τ脩趔w驗的理解。

既然要說用戶體驗?zāi)敲?strong>第一步我們就應(yīng)該明確用戶到底是誰，才能談用戶體驗，畢竟世界上沒有哪一款產(chǎn)品是能給所有用戶帶來合心意的體驗的，所以我們首先要明確用戶體驗的主體——目標(biāo)用戶。

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

所以本文將會按照上面的思路通過對比微信和QQ的目標(biāo)用戶、用戶交互所涉及的對象、交互流程來談用戶體驗。

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

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

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

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

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

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

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

二、交互所涉及的對象

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

在互聯(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)系是一個金字塔型的關(guān)系。

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

不過值得說明的是，雖然四者存在著金字塔的層級關(guān)系，但并不是所有的應(yīng)用都會涉及到這四種交互類型，同時也并不意味著沒有了中間某一層，上面的層次就不復(fù)存在。就拿此次對比的微信和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īng)用都會涉及到四類交互，所以需要進(jìn)行分析判斷微信和QQ具體具備哪幾種交互類型。

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

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

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

參考文章鏈接：http://theventurebank.com/ucd/2672135.html

三、交互的流程

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

1.?操作前信息明確

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

（1）指示明確

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

TIM聊天界面

（2）減少疑惑

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

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

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

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

另外還有一個例子就是因為目前市場上的應(yīng)用體量變大的原因，加載時間漸漸變長，在加載完成之前，界面會先顯示即將現(xiàn)實的界面結(jié)構(gòu)，讓用戶提前了解界面的結(jié)構(gòu)情況。

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

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

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

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

1）通訊錄：

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

小結(jié)：

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

減少疑惑方面依然如此。

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

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

2）消息界面：

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

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

3）聊天界面：

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

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

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

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

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

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

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

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

2.?操作中反饋及時

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

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

（1）視覺反饋

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

（2）聽覺反饋

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

（3）觸覺反饋

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

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

3.?操作后可返回

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

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

總結(jié)

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

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

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

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