一、什么是交互

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

當(dāng)時(shí)我舉的例子是用翻頁(yè)器去控制 ppt 翻頁(yè)：

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

當(dāng)我點(diǎn)擊翻頁(yè)器的「下一頁(yè)」按鈕，我點(diǎn)擊行為附帶的心理預(yù)期是「PPT翻往下一頁(yè)」，然后我點(diǎn)擊的時(shí)候，遙控器塑膠按鈕給到我手指一個(gè)物理反饋，證明我按下的行為已經(jīng)完成了，這是「輸出端（我的手）的交互與反饋」，這時(shí)候遙控器接收到按鈕指令，把指令通過紅外線傳輸?shù)?USB接收器上，接收器把指令傳到 PC端然后完成翻頁(yè)動(dòng)作，再通過大屏幕傳到我的眼（輸入端）中，我就可以確認(rèn)這一次交互反饋是符合預(yù)期的。這里有一點(diǎn)想要補(bǔ)充：設(shè)備對(duì)設(shè)備（上圖中黑色箭頭），也屬于廣義的交互，只不過現(xiàn)階段大家研究的交互設(shè)計(jì)都是狹義的，人為主體的交互。

在我們?nèi)沼每萍籍a(chǎn)品的早期，有兩個(gè)東西是無法跳過的，那就是按鍵手機(jī)和 PC電腦：

他們幾乎是同步在發(fā)展的，而這兩個(gè)產(chǎn)品的交互行為基本上延續(xù)到了觸屏手機(jī)時(shí)代，所以為了弄明白觸屏手機(jī)的交互，這兩個(gè)產(chǎn)品是值得講一講的。

先看按鍵手機(jī)（就是我們小時(shí)候用的非智能手機(jī)）：

在按鍵手機(jī)中，最讓用戶困惑的其實(shí)是按鍵和屏幕之間存在一個(gè)映射關(guān)系，而不同廠商缺乏一個(gè)統(tǒng)一的規(guī)范，各家映射規(guī)則不一樣。大家是否還記得當(dāng)年的手機(jī)說明書那可以說是相當(dāng)厚，因?yàn)檎f明書必須要給用戶建構(gòu)一個(gè)心理模型；比如上圖，點(diǎn)擊左上角和右上角那兩個(gè)「-」按鈕，其實(shí)一一對(duì)應(yīng)的是屏幕左下角的「Goto」和右下角的「Names」。這個(gè)一一對(duì)應(yīng)關(guān)系作為今天的用戶來看應(yīng)該是很平常而且很易懂的，但是當(dāng)年沒用過手機(jī)的人，需要花很長(zhǎng)時(shí)間閱讀說明書，才能夠明白物理按鍵和屏幕上的映射關(guān)系，這就是觸屏手機(jī)很難用的地方，也是很反人性的地方。因?yàn)樽鳛橛脩魜碚f，心智上，我們當(dāng)然希望所觸即所得。

再來看 PC，作為和按鍵手機(jī)差不多一起出現(xiàn)的載體形式，人們操作 PC端人是通過媒介（也就是鼠標(biāo)+鍵盤）輸入的，其實(shí)本質(zhì)上也是我們通過鼠標(biāo)在桌面上滑動(dòng) x-y 區(qū)域?qū)?yīng)到電腦桌面上指針的移動(dòng)來創(chuàng)造屏幕中x-y的映射關(guān)系，然后鍵盤上幾十個(gè)鍵配合輸入完成操作。

大家發(fā)現(xiàn)了么，上述的兩種設(shè)備其實(shí)本身就是在制造一種一一對(duì)應(yīng)的映射關(guān)系去完成交互行為，這兩種載體從出身開始就是需要很大交互成本的。

隨著科技的發(fā)展，觸屏感應(yīng)技術(shù)推出了之后，印象中觸屏手機(jī)就是兩三年時(shí)間就摧枯拉朽的淘汰了按鍵手機(jī)，本質(zhì)上是干掉了一一對(duì)應(yīng)的交互映射，所按即所得：

觸屏手機(jī)出現(xiàn)之后，交互專家們不禁要問一個(gè)問題了：手和觸摸屏到底有多少種交互方式？

答案是有很多種：

越是高階越是隱藏的交互手勢(shì)越復(fù)雜，所謂的「交互成本」也越高，比如錘子三指滑動(dòng)換屏保那種，就是利用了高階交互便捷實(shí)現(xiàn)邊界功能。那這么看起來，iOS 也好還是所有的安卓手機(jī)都好，從用戶端而言，就是組合交互手勢(shì)，讓信息更好的傳達(dá)而已。那么同理，在 App 中也是一樣，如果我們了解了每一個(gè)交互行為的用戶心理預(yù)期，對(duì)設(shè)計(jì)工作而言就能做到有的放矢：

我們以「單擊」和「滑動(dòng)」這兩個(gè)最簡(jiǎn)單的交互行為舉例。

所謂單擊手機(jī)屏幕，用戶其實(shí)最核心的是有兩個(gè)預(yù)期：

第一是選中一個(gè)元素，比如 Radio組件。第二是邏輯上的 Next，比如點(diǎn)了一件衣服，應(yīng)該 Next 到衣服的詳情；點(diǎn)了付款，應(yīng)該出現(xiàn)付款流程，點(diǎn)了返回，應(yīng)該 back 到上一路徑點(diǎn)等等。

劃動(dòng)交互也是一樣的，用戶在一塊手機(jī)屏幕上單指劃劃劃，用戶內(nèi)心的預(yù)期其實(shí)也不復(fù)雜，最核心的預(yù)期也就兩點(diǎn)：

第一是查看屏幕外的線索（前提是設(shè)計(jì)師給用戶留下線索了或者是這個(gè) UI組件長(zhǎng)得就是可以劃動(dòng)的樣子）。第二是查看相鄰標(biāo)簽的內(nèi)容，或者查看同一個(gè)標(biāo)簽下的相鄰元素，比如 iOS 的 segment controlle組件就是典型例子：

當(dāng)我們了解了這些之后，我們?cè)趯?shí)際的設(shè)計(jì)工作中就可以根據(jù)上面這些理論來合理選擇 UI組件去呈現(xiàn)對(duì)應(yīng)的信息了。

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

我們?cè)谠O(shè)計(jì)工作中，選擇 UI組件，本質(zhì)上就是選擇信息的呈現(xiàn)形式。

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

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

第一個(gè)例子：同樣的內(nèi)容，選擇不同的 UI組件呈現(xiàn)，給用戶呈現(xiàn)的是完全不同的產(chǎn)品結(jié)構(gòu)：

大家看下面這張圖：

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

第一件事應(yīng)該想到的是如果需要采用右邊的排列形式就必須要控制 tag 的字?jǐn)?shù)；然后由于右邊的 tag 占據(jù)了推薦貼的位置，導(dǎo)致推薦貼可能沒有左邊的那種展現(xiàn)形式更加醒目。但是相對(duì)的，圖右的優(yōu)勢(shì)在于，由于豎向排列 tag 可以讓一個(gè)屏幕顯示更多的 tag，可以讓用戶更方便的定位內(nèi)容，比如外賣產(chǎn)品之所以用右邊這種形式是因?yàn)榱η笠黄琳故靖嗟牟耍彝赓u產(chǎn)品的左側(cè) tag 一般是一家店鋪的菜的品類，用戶下滑菜品配合點(diǎn)擊品類，點(diǎn)完即走，很方便（京東和淘寶電商類平臺(tái)也是類似的）。

但是比如今日頭條，新聞?lì)惪蛻舳酥荒懿捎米筮叺倪@種形式，因?yàn)樾侣勵(lì)惪蛻舳耸切枰脩糸L(zhǎng)時(shí)間沉浸的，比如用戶選中一個(gè)「體育」的 tag 之后一般要沉浸的看好久好久，用戶需要沉浸在這個(gè) tag 下的內(nèi)容中，那這個(gè)時(shí)候顯然用右邊這種設(shè)計(jì)方式讓 tag 常駐屏幕左側(cè)是不合適的。

再來看第二個(gè)例子，就是 UI 應(yīng)該會(huì)隨著內(nèi)容而進(jìn)行調(diào)整和優(yōu)化：

這里舉一個(gè)唱吧的例子，唱吧從7.0到8.6之間做了三次改版，大家可以看到，唱吧團(tuán)隊(duì)幾乎是損失了屏幕效率來加大了間隔和突出了歌名，這是為什么呢？

這是因?yàn)轫?yè)面承載的關(guān)鍵任務(wù)不同，大家對(duì)比著7.0時(shí)候和8.6時(shí)候的 UI樣式，正好是今天快手和唱吧的對(duì)比：

大家會(huì)發(fā)現(xiàn)，其實(shí)這個(gè)頁(yè)面，快手和唱吧承載的內(nèi)容都是消費(fèi)轉(zhuǎn)化，都希望用戶點(diǎn)擊進(jìn)去消費(fèi)內(nèi)容，但是兩款產(chǎn)品做了截然不同的 UI風(fēng)格，原因是什么呢？

快手在這個(gè)頁(yè)面，其實(shí)承載的關(guān)鍵任務(wù)是：「迅速讓用戶找到感興趣的點(diǎn)」，它這么設(shè)計(jì)的本質(zhì)原因是因?yàn)樗慕貓D可以幫助用戶判斷內(nèi)容本身，比如第一張圖是一個(gè)人在打高爾夫，右邊是一個(gè)工人，然后第二排左邊是一個(gè)游戲的鏡頭，右邊是一個(gè)傳遞正能量，大家可以很方便的通過圖片識(shí)別里面的內(nèi)容，用戶更沉浸更聚焦的去選擇自己喜歡的，點(diǎn)擊進(jìn)入消費(fèi)就可以了。但是唱吧的視頻截圖其實(shí)是不能識(shí)別里面內(nèi)容的，大家可以看到，第一張圖是一個(gè)妹子，第二張圖是一個(gè)妹子，第三張圖還是一個(gè)妹子，那用戶點(diǎn)擊進(jìn)去的動(dòng)力在哪兒了？除了這個(gè)照片長(zhǎng)相之外，更多的其實(shí)是文字決定的，是這個(gè)人唱的這首歌的歌曲名是不是我喜歡的，或者是這個(gè)演唱者的歌手等級(jí)。

所以基于這種更深層次的邏輯，唱吧和快手兩款產(chǎn)品的這個(gè)頁(yè)面都是為了促進(jìn)消費(fèi)轉(zhuǎn)化，但是 UI 長(zhǎng)相上完全不同。

我們看第三個(gè)例子：

同樣組件下，選擇不同的交互方式，也會(huì)使得效果完全不同，比如現(xiàn)在有一個(gè) UI頁(yè)面，主要由一個(gè) tab（iOS叫segment controlled）組件控制下面的內(nèi)容，長(zhǎng)這樣：

我先假定一個(gè)前提：這個(gè) app 中的這個(gè)組件不支持橫劃，只支持點(diǎn)擊切換。

好了，現(xiàn)在我假設(shè)這是一款已經(jīng)穩(wěn)定運(yùn)營(yíng)了一年的產(chǎn)品，為了說明問題，我假設(shè)一個(gè)理想數(shù)據(jù)：

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

• 10Wuv消費(fèi)「推薦」下的內(nèi)容
• 2Wuv消費(fèi)「生活」下的內(nèi)容
• 1Wuv消費(fèi)「段子」下的內(nèi)容
• 3Wuv消費(fèi)「美女」下的內(nèi)容
• 4Wuv消費(fèi)「游戲」下的內(nèi)容

這時(shí)候，為了優(yōu)化交互行為，有一天決定把這個(gè) tab組件從不可橫向劃動(dòng)改成可以劃動(dòng)的（并且告訴用戶這里可以滑動(dòng)了），然后給你一次機(jī)會(huì)重新排列這五個(gè) tab 順序，你會(huì)怎么做呢？最簡(jiǎn)單的辦法當(dāng)然是把五個(gè) tab 按照用戶消費(fèi)意愿逐一排列，即：「推薦、游戲、美女、生活、段子」。

這樣排列當(dāng)然沒有任何問題，但是還有沒有更優(yōu)解呢？我給出的解決辦法是這樣的，大家評(píng)判一下：

按照用戶的消費(fèi)量，「游戲」是消費(fèi)量第二的一個(gè) tab，毫無疑問我會(huì)把它排在第二項(xiàng)，這樣可以刺激用戶劃動(dòng)行為，然后「美女」是消費(fèi)量第三的，我會(huì)把它放在第四位，這時(shí)候我會(huì)把「段子」和「生活」這兩個(gè)消費(fèi)率最低的 tab 分 AB test 做兩個(gè)版本放在第三和第五位拿去測(cè)，以判斷之前的「段子」和「生活」是由于自身內(nèi)容不夠優(yōu)質(zhì)，還是之前交互成本太低導(dǎo)致的數(shù)據(jù)較差：

最后我們來看第四個(gè)例子：

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

現(xiàn)在假設(shè)在運(yùn)營(yíng)和市場(chǎng)團(tuán)隊(duì)不做任何努力的情況下，單從產(chǎn)品交互的角度，能不能優(yōu)化上面這個(gè)版塊的點(diǎn)擊率？

首先我們來分析一下頁(yè)面架構(gòu)：

如果我們認(rèn)為，不管是點(diǎn)擊右上角的「>」，還是點(diǎn)擊留個(gè)圓形入口都算完成轉(zhuǎn)化的話，我們現(xiàn)在的這個(gè)紅色的 UI組件，入口位置一共有7個(gè)。根據(jù)長(zhǎng)尾理論，如果我們把這個(gè)圓形入口從6個(gè)擴(kuò)展到比如九個(gè)，是不是一定對(duì)轉(zhuǎn)化率有正向影響？答案并不一定：

為什么呢？因?yàn)橹饕沁@樣的改動(dòng)會(huì)帶來一個(gè)未知的泳道橫劃交互，它會(huì)產(chǎn)生一定的影響，如下圖所示。

用戶看到這個(gè)泳道之后可能出現(xiàn)三種行為：

• 用戶完全不滑動(dòng)——那入口就從7個(gè)變成了7.5個(gè)，別的沒有變量影響。
• 用戶滑動(dòng)看完了之后，點(diǎn)擊某一個(gè)或者左上角的「>」進(jìn)入——這是我們想要的轉(zhuǎn)化
• 用戶滑動(dòng)看了這些圓形入口之后松手，就是不點(diǎn)擊進(jìn)去——這是我們不愿意看到的結(jié)果

想到這里，那為什么我們不能讓用戶直接滑動(dòng)之后松手就跳轉(zhuǎn)呢？

想到這里，所以優(yōu)化方案如下圖所示，給與用戶一個(gè) x軸區(qū)間，滑動(dòng)手勢(shì)操過那個(gè)區(qū)間則告訴用戶你現(xiàn)在松手默認(rèn)跳轉(zhuǎn)，用戶不愿意跳轉(zhuǎn)也可以回劃，只要不足這個(gè) x區(qū)間就給與用戶自主選擇的機(jī)會(huì)：

我之前在上家工作的時(shí)候，我們把6個(gè)圓形入口變成了10個(gè)，然后用這個(gè)「松手跳轉(zhuǎn)」的交互把單元模塊的穿透率從21%提升到了31%，這是一個(gè)實(shí)戰(zhàn)當(dāng)中的真實(shí)例子。

當(dāng)然了，請(qǐng)大家再思考這樣的一個(gè)問題：

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

三、從交互的維度量化用戶體驗(yàn)

移動(dòng)互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中，尤其是在中國(guó)的 app 產(chǎn)品，有兩大分歧陣營(yíng)：

「扁平」陣營(yíng)表示了，我們需要產(chǎn)品足夠扁平，最好就是三次交互可以觸達(dá)所有 app 界面：

「簡(jiǎn)潔」陣營(yíng)也表示了，我們需要頁(yè)面信息足夠簡(jiǎn)潔，最好一個(gè)頁(yè)面只完成一個(gè)核心任務(wù)：

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

中國(guó)的互聯(lián)網(wǎng)產(chǎn)品，很難做到既簡(jiǎn)潔又扁平，這個(gè)問題的根源在于永遠(yuǎn)有那么多信息需要呈現(xiàn)，永遠(yuǎn)有那么多功能需要添加，這個(gè)是中國(guó)的激烈市場(chǎng)競(jìng)爭(zhēng)導(dǎo)致的，并不是說中國(guó)的產(chǎn)品就不如國(guó)外的好（我的哥哥之前在 Facebook 現(xiàn)在 Airbnb 工作，他經(jīng)常感嘆道國(guó)外的互聯(lián)網(wǎng)產(chǎn)品到中國(guó)來真的都得死…）我想要討論的是，面對(duì)中國(guó)現(xiàn)在互聯(lián)網(wǎng)產(chǎn)品市場(chǎng)現(xiàn)狀， 如果一款產(chǎn)品非要你站隊(duì)上面兩派陣營(yíng)，你會(huì)選哪一派？我現(xiàn)在的選擇是「扁平黨」，因?yàn)橛脩裘媾R一款眼花繚亂的 app，如果是經(jīng)常使用，缺功能布局信息架構(gòu)很少改動(dòng)的前提下，早晚也會(huì)習(xí)慣和適應(yīng)的，但是如果一些核心的東西不能第一時(shí)間暴露在用戶眼中，很有可能用戶就不知道你有這種功能。這個(gè)就是為什么我們?cè)O(shè)計(jì)經(jīng)常會(huì)說這個(gè)產(chǎn)品經(jīng)理傻逼吧，怎么什么東西都想展現(xiàn)出來，這一堆東西找個(gè)入口集合收起來頁(yè)面多干凈多清爽多好看。我早年間也是和諸位一樣的觀點(diǎn)，但是現(xiàn)在我越來越覺得，界面清爽了，你的大功能 feature 因?yàn)樵O(shè)計(jì)隱藏沒有被發(fā)現(xiàn)，不是設(shè)計(jì)開發(fā)測(cè)試都白做了么，說好的 ROI 在哪里？

我們大家都是互聯(lián)網(wǎng)從業(yè)者，不管看到這篇文章的你是一位設(shè)計(jì)、產(chǎn)品、還是開發(fā)、測(cè)試、運(yùn)營(yíng)人員，我們都明白用戶體驗(yàn)這個(gè)詞是由 N多維度綜合而成的一個(gè)過程性評(píng)價(jià)，它和方方面面都有關(guān)系。

那既然是這么專業(yè)且牽連甚廣的一個(gè)名詞，我們真的就沒有辦法去量化評(píng)價(jià)它了嗎？

永遠(yuǎn)不要忘記，用戶體驗(yàn)是個(gè)過程，而我們每個(gè)人也都是用戶本身。在這里我提供一種普通用戶維度的比較好用的用戶體驗(yàn)評(píng)估方法是「窮舉分析用戶行為路徑」。

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

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

文章來源：優(yōu)設(shè)網(wǎng)：Seany

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)