如何從交互維度量化用戶體驗？

之前參加了迴音分享會，認識了很多新朋友，線下分享時間有限，可能有很多東西沒有講的很透徹，所以整理了一下我當時的 ppt 和想要表達的觀點，寫了這篇文章，和大家分享一些在產品和交互設計中的一些自己的方法。

一、什麼是交互

狹義的交互（Interaction）定義交互主體必須是人本身，而客體可以是產品，環境，服務等等，且不論交互客體是什麼，只要主體是人，人和客體去進行交互的時候，一定是人帶著心理預期施加一個行為，然後客體會根據這個行為給予一個反饋（沒有反饋本質也是一個反饋），而人會根據這個反饋是否符合預期去進行心理修正。如下圖所示，這就是我理解的最小交互模型：

當時我舉的例子是用翻頁器去控制 ppt 翻頁：

如上圖所示，拆解這一套交互行為：

當我點擊翻頁器的「下一頁」按鈕，我點擊行為附帶的心理預期是「PPT翻往下一頁」，然後我點擊的時候，遙控器塑膠按鈕給到我手指一個物理反饋，證明我按下的行為已經完成了，這是「輸出端（我的手）的交互與反饋」，這時候遙控器接收到按鈕指令，把指令通過紅外線傳輸到 USB接收器上，接收器把指令傳到 PC端然後完成翻頁動作，再通過大屏幕傳到我的眼（輸入端）中，我就可以確認這一次交互反饋是符合預期的。這裡有一點想要補充：設備對設備（上圖中黑色箭頭），也屬於廣義的交互，只不過現階段大家研究的交互設計都是狹義的，人為主體的交互。

在我們日用科技產品的早期，有兩個東西是無法跳過的，那就是按鍵手機和 PC電腦：

他們幾乎是同步在發展的，而這兩個產品的交互行為基本上延續到了觸屏手機時代，所以為了弄明白觸屏手機的交互，這兩個產品是值得講一講的。

先看按鍵手機（就是我們小時候用的非智能手機）：

在按鍵手機中，最讓用戶困惑的其實是按鍵和屏幕之間存在一個映射關係，而不同廠商缺乏一個統一的規範，各家映射規則不一樣。大家是否還記得當年的手機說明書那可以說是相當厚，因為說明書必須要給用戶建構一個心理模型；比如上圖，點擊左上角和右上角那兩個「-」按鈕，其實一一對應的是屏幕左下角的「Goto」和右下角的「Names」。這個一一對應關係作為今天的用戶來看應該是很平常而且很易懂的，但是當年沒用過手機的人，需要花很長時間閱讀說明書，才能夠明白物理按鍵和屏幕上的映射關係，這就是觸屏手機很難用的地方，也是很反人性的地方。因為作為用戶來說，心智上，我們當然希望所觸即所得。

再來看 PC，作為和按鍵手機差不多一起出現的載體形式，人們操作 PC端人是通過媒介（也就是滑鼠+鍵盤）輸入的，其實本質上也是我們通過滑鼠在桌面上滑動 x-y 區域對應到電腦桌面上指針的移動來創造屏幕中x-y的映射關係，然後鍵盤上幾十個鍵配合輸入完成操作。

大家發現了么，上述的兩種設備其實本身就是在製造一種一一對應的映射關係去完成交互行為，這兩種載體從出身開始就是需要很大交互成本的。

隨著科技的發展，觸屏感應技術推出了之後，印象中觸屏手機就是兩三年時間就摧枯拉朽的淘汰了按鍵手機，本質上是幹掉了一一對應的交互映射，所按即所得：

觸屏手機出現之後，交互專家們不禁要問一個問題了：手和觸摸屏到底有多少種交互方式？

答案是有很多種：

越是高階越是隱藏的交互手勢越複雜，所謂的「交互成本」也越高，比如鎚子三指滑動換屏保那種，就是利用了高階交互便捷實現邊界功能。那這麼看起來，iOS 也好還是所有的安卓手機都好，從用戶端而言，就是組合交互手勢，讓信息更好的傳達而已。那麼同理，在 App 中也是一樣，如果我們了解了每一個交互行為的用戶心理預期，對設計工作而言就能做到有的放矢：

我們以「單擊」和「滑動」這兩個最簡單的交互行為舉例。

所謂單擊手機屏幕，用戶其實最核心的是有兩個預期：

第一是選中一個元素，比如 Radio組件。第二是邏輯上的 Next，比如點了一件衣服，應該 Next 到衣服的詳情；點了付款，應該出現付款流程，點了返回，應該 back 到上一路徑點等等。

划動交互也是一樣的，用戶在一塊手機屏幕上單指劃劃劃，用戶內心的預期其實也不複雜，最核心的預期也就兩點：

第一是查看屏幕外的線索（前提是設計師給用戶留下線索了或者是這個 UI組件長得就是可以划動的樣子）。第二是查看相鄰標籤的內容，或者查看同一個標籤下的相鄰元素，比如 iOS 的 segment controlle組件就是典型例子：

當我們了解了這些之後，我們在實際的設計工作中就可以根據上面這些理論來合理選擇 UI組件去呈現對應的信息了。

二、從交互維度合理選擇UI組件

我們在設計工作中，選擇 UI組件，本質上就是選擇信息的呈現形式。

每一個常見的 UI界面和 UI組件，都一定也滿足上面所說的最小交互模型：

在這裡我舉一些例子說明。

第一個例子：同樣的內容，選擇不同的 UI組件呈現，給用戶呈現的是完全不同的產品結構：

大家看下面這張圖：

這兩個 UI模塊擺在大家面前，大家應該能清晰的感受到，左邊是一個 segment 控制下面內容的 UI；而右邊是一個所有內容列表的集合頁，只不過通過 tab 聚類了而已。

第一件事應該想到的是如果需要採用右邊的排列形式就必須要控制 tag 的字數；然後由於右邊的 tag 佔據了推薦貼的位置，導致推薦貼可能沒有左邊的那種展現形式更加醒目。但是相對的，圖右的優勢在於，由於豎向排列 tag 可以讓一個屏幕顯示更多的 tag，可以讓用戶更方便的定位內容，比如外賣產品之所以用右邊這種形式是因為力求一屏展示更多的菜，而且外賣產品的左側 tag 一般是一家店鋪的菜的品類，用戶下滑菜品配合點擊品類，點完即走，很方便（京東和淘寶電商類平台也是類似的）。

但是比如今日頭條，新聞類客戶端只能採用左邊的這種形式，因為新聞類客戶端是需要用戶長時間沉浸的，比如用戶選中一個「體育」的 tag 之後一般要沉浸的看好久好久，用戶需要沉浸在這個 tag 下的內容中，那這個時候顯然用右邊這種設計方式讓 tag 常駐屏幕左側是不合適的。

再來看第二個例子，就是 UI 應該會隨著內容而進行調整和優化：

這裡舉一個唱吧的例子，唱吧從7.0到8.6之間做了三次改版，大家可以看到，唱吧團隊幾乎是損失了屏幕效率來加大了間隔和突出了歌名，這是為什麼呢？

這是因為頁面承載的關鍵任務不同，大家對比著7.0時候和8.6時候的 UI樣式，正好是今天快手和唱吧的對比：

大家會發現，其實這個頁面，快手和唱吧承載的內容都是消費轉化，都希望用戶點擊進去消費內容，但是兩款產品做了截然不同的 UI風格，原因是什麼呢？

快手在這個頁面，其實承載的關鍵任務是：「迅速讓用戶找到感興趣的點」，它這麼設計的本質原因是因為它的截圖可以幫助用戶判斷內容本身，比如第一張圖是一個人在打高爾夫，右邊是一個工人，然後第二排左邊是一個遊戲的鏡頭，右邊是一個傳遞正能量，大家可以很方便的通過圖片識別裡面的內容，用戶更沉浸更聚焦的去選擇自己喜歡的，點擊進入消費就可以了。但是唱吧的視頻截圖其實是不能識別裡面內容的，大家可以看到，第一張圖是一個妹子，第二張圖是一個妹子，第三張圖還是一個妹子，那用戶點擊進去的動力在哪兒了？除了這個照片長相之外，更多的其實是文字決定的，是這個人唱的這首歌的歌曲名是不是我喜歡的，或者是這個演唱者的歌手等級。

所以基於這種更深層次的邏輯，唱吧和快手兩款產品的這個頁面都是為了促進消費轉化，但是 UI 長相上完全不同。

我們看第三個例子：

同樣組件下，選擇不同的交互方式，也會使得效果完全不同，比如現在有一個 UI頁面，主要由一個 tab（iOS叫segment controlled）組件控制下面的內容，長這樣：

我先假定一個前提：這個 app 中的這個組件不支持橫劃，只支持點擊切換。

好了，現在我假設這是一款已經穩定運營了一年的產品，為了說明問題，我假設一個理想數據：

假設每天有20W 的 uv 訪問這個頁面，其中分流情況是：

• 10Wuv消費「推薦」下的內容
• 2Wuv消費「生活」下的內容
• 1Wuv消費「段子」下的內容
• 3Wuv消費「美女」下的內容
• 4Wuv消費「遊戲」下的內容

這時候，為了優化交互行為，有一天決定把這個 tab組件從不可橫向划動改成可以划動的（並且告訴用戶這裡可以滑動了），然後給你一次機會重新排列這五個 tab 順序，你會怎麼做呢？最簡單的辦法當然是把五個 tab 按照用戶消費意願逐一排列，即：「推薦、遊戲、美女、生活、段子」。

這樣排列當然沒有任何問題，但是還有沒有更優解呢？我給出的解決辦法是這樣的，大家評判一下：

按照用戶的消費量，「遊戲」是消費量第二的一個 tab，毫無疑問我會把它排在第二項，這樣可以刺激用戶划動行為，然後「美女」是消費量第三的，我會把它放在第四位，這時候我會把「段子」和「生活」這兩個消費率最低的 tab 分 AB test 做兩個版本放在第三和第五位拿去測，以判斷之前的「段子」和「生活」是由於自身內容不夠優質，還是之前交互成本太低導致的數據較差：

最後我們來看第四個例子：

比如一個 app，他的 UI 如下圖所示的這個樣子。

現在假設在運營和市場團隊不做任何努力的情況下，單從產品交互的角度，能不能優化上面這個版塊的點擊率？

首先我們來分析一下頁面架構：

如果我們認為，不管是點擊右上角的「>」，還是點擊留個圓形入口都算完成轉化的話，我們現在的這個紅色的 UI組件，入口位置一共有7個。根據長尾理論，如果我們把這個圓形入口從6個擴展到比如九個，是不是一定對轉化率有正向影響？答案並不一定：

為什麼呢？因為主要是這樣的改動會帶來一個未知的泳道橫劃交互，它會產生一定的影響，如下圖所示。

用戶看到這個泳道之後可能出現三種行為：

• 用戶完全不滑動——那入口就從7個變成了7.5個，別的沒有變數影響。
• 用戶滑動看完了之後，點擊某一個或者左上角的「>」進入——這是我們想要的轉化
• 用戶滑動看了這些圓形入口之後鬆手，就是不點擊進去——這是我們不願意看到的結果

想到這裡，那為什麼我們不能讓用戶直接滑動之後鬆手就跳轉呢？

想到這裡，所以優化方案如下圖所示，給與用戶一個 x軸區間，滑動手勢操過那個區間則告訴用戶你現在鬆手默認跳轉，用戶不願意跳轉也可以回劃，只要不足這個 x區間就給與用戶自主選擇的機會：

我之前在上家工作的時候，我們把6個圓形入口變成了10個，然後用這個「鬆手跳轉」的交互把單元模塊的穿透率從21%提升到了31%，這是一個實戰當中的真實例子。

當然了，請大家再思考這樣的一個問題：

一個頁面的流量就這麼大，一個地方漲了11%，那勢必別的地方就會相應的損失11%。一般情況下 app 首頁承擔著80%以上的分流工作，根據流量漏斗來看的話每一次引流都會導致其他模塊的數據下降，所以設計師們應該要根據運營策略和公司大的產品 OKR 來合理選用合適的交互組件，以達到想要的目的，還是那句話：「小孩兒才分對錯，大人只看利弊。」

三、從交互的維度量化用戶體驗

移動互聯網產品設計中，尤其是在中國的 app 產品，有兩大分歧陣營：

「扁平」陣營表示了，我們需要產品足夠扁平，最好就是三次交互可以觸達所有 app 界面：

「簡潔」陣營也表示了，我們需要頁面信息足夠簡潔，最好一個頁面只完成一個核心任務：

雙發你來我往，誰也說服不了誰，如下圖所示，「簡潔」陣營反駁「扁平」陣營說：你們一點都不遵守席客定律，層級扁平是扁平了，但是相應的頁面信息變得越來越多，給用戶呈現的干擾就越來越多，用戶做出決定的時間也越來越多，所以你們「扁平黨」不行。這時候「扁平」陣營也找到了反駁的論點，他們說你看你頁面足夠簡潔了，但是頁面層級就很深啊，交互成本這麼高，每一次都伴隨流失，可用性這麼差，你們還有理了？所以「簡潔黨」你們才不行。

中國的互聯網產品，很難做到既簡潔又扁平，這個問題的根源在於永遠有那麼多信息需要呈現，永遠有那麼多功能需要添加，這個是中國的激烈市場競爭導致的，並不是說中國的產品就不如國外的好（我的哥哥之前在 Facebook 現在 Airbnb 工作，他經常感嘆道國外的互聯網產品到中國來真的都得死…）我想要討論的是，面對中國現在互聯網產品市場現狀， 如果一款產品非要你站隊上面兩派陣營，你會選哪一派？我現在的選擇是「扁平黨」，因為用戶面臨一款眼花繚亂的 app，如果是經常使用，缺功能布局信息架構很少改動的前提下，早晚也會習慣和適應的，但是如果一些核心的東西不能第一時間暴露在用戶眼中，很有可能用戶就不知道你有這種功能。這個就是為什麼我們設計經常會說這個產品經理傻逼吧，怎麼什麼東西都想展現出來，這一堆東西找個入口集合收起來頁面多乾淨多清爽多好看。我早年間也是和諸位一樣的觀點，但是現在我越來越覺得，界面清爽了，你的大功能 feature 因為設計隱藏沒有被發現，不是設計開發測試都白做了么，說好的 ROI 在哪裡？

我們大家都是互聯網從業者，不管看到這篇文章的你是一位設計、產品、還是開發、測試、運營人員，我們都明白用戶體驗這個詞是由 N多維度綜合而成的一個過程性評價，它和方方面面都有關係。

那既然是這麼專業且牽連甚廣的一個名詞，我們真的就沒有辦法去量化評價它了嗎？

永遠不要忘記，用戶體驗是個過程，而我們每個人也都是用戶本身。在這裡我提供一種普通用戶維度的比較好用的用戶體驗評估方法是「窮舉分析用戶行為路徑」。

比如你是一款外賣產品的設計師，那麼用戶在不同產品模塊下訂一個外賣的流程路徑大概有多少種，都窮舉出來。比如你是一款在線演唱類的產品設計師，那麼用戶在產品中完成一首歌需要的用戶路徑到底有多少條，窮舉所有路徑之後一一優化，讓路徑變得更加扁平，或許是一個最「笨」但是有效的方案，怎麼優化呢？用淘寶消息頁舉個例子：

淘寶消息頁上面有「交易物流」、「通知」、「互動」三個 tab，這時候我們假設一個用戶三個按鈕下面都有消息，用戶想要看完這三個消息大概需要幾次交互？答案是至少6次：「點擊第一個進去 – 返回 – 點擊第二個進去 – 返回 – 點擊第三個進去 – 返回」，這樣的交互顯得呆板且冗長，淘寶團隊巧妙的把三個內頁集合成一個頁面的三個 tab 形式，大大縮短的交互成本，這就是所謂的「把用戶路徑變得更扁平」：

大家在使用很多產品的過程中，多多留心就會發現原來細節裡面總有魔鬼。

歡迎關注作者的微信公眾號：「SeanyDesign 」