一、什么是交互
1.狹義的交互定義交互主體必須是人本身，而客體可以是產(chǎn)品，環(huán)境，服務(wù)等，且不論交互客體是什么，只要主體是人，人和客體去進(jìn)行交互的時候，一定是人帶著心理預(yù)期施加一個行為，然后客體會根據(jù)這個行為給予一個反饋（沒有反饋本身也是一個反饋），而人會根據(jù)這個反饋是否符合預(yù)期去進(jìn)行心理修正，這就是最小交互模型：
以PPT翻頁器去控制文檔翻頁為例，拆解這一套交互行為：
當(dāng)我點(diǎn)擊翻頁器的下一頁按鈕，我點(diǎn)擊行為此時附帶的心理預(yù)期是“PPT翻往下一頁”，然后我點(diǎn)擊的適合，遙控器按鈕給到我手指一個物理反饋，證明我按下的行為已經(jīng)完成了，這是“輸出端（我的手）的交互與反饋”，這時候遙控器接收到按鈕指令，把指令通過紅外線傳輸?shù)経SB接收器上，接收器把指令傳到PC端完成了翻頁動作，再通過大屏幕傳到我的眼（輸入端）中，我就可以確認(rèn)這一次交互反饋是符合預(yù)期的。注意設(shè)備對設(shè)備（黑色箭頭）也屬于廣義的交互，只不過現(xiàn)階段大家研究的交互設(shè)計(jì)都是以人為主體的狹義交互。
2.日用科技產(chǎn)品的早期，按鍵手機(jī)和PC電腦幾乎是同步發(fā)展的，而這兩個產(chǎn)品的交互行為基本上延續(xù)到了觸屏手機(jī)時代。
按鈕手機(jī)中，最讓用戶困惑的是按鈕和屏幕之間存在的一個映射關(guān)系，不同廠商缺乏一個統(tǒng)一的規(guī)范，各家映射規(guī)則也不一樣。當(dāng)年的說明書很厚，因?yàn)檎f明書需要給用戶構(gòu)建一個心理模型；比如上圖點(diǎn)擊左上角和右上角 - 按鈕，其實(shí)一一對應(yīng)的是屏幕左下角的Goto和右下角的Names。這個一一對應(yīng)關(guān)系作為今天的用戶來看是很平常很易懂的，但當(dāng)年沒用過手機(jī)的人，需要花時間去閱讀說明書。才能夠明白物理按鍵和屏幕上的映射關(guān)系，這就是按鍵手機(jī)難用的地方，也很反人性的地方。因?yàn)樽鳛橛脩魜碚f心智上我們希望所觸即所得。
PC作為和按鍵手機(jī)一起出現(xiàn)的載體形式，人們操作PC是通過鼠標(biāo)+鍵盤媒介進(jìn)行輸入的，其實(shí)本質(zhì)上我們通過鼠標(biāo)在桌面上滑動x-y區(qū)域?qū)?yīng)到屏幕上指針的移動來創(chuàng)造屏幕中x-y的映射關(guān)系，然后鍵盤上幾十個鍵配合輸入完成操作。
上述兩種設(shè)備其實(shí)本身就是在制造一種一一對應(yīng)的映射關(guān)系去完成交互行為，這兩種載體從出生開始就需要很大的交互成本。觸屏手機(jī)的出現(xiàn)，本質(zhì)上就是干掉了一一對應(yīng)的交互映射，即所按即所得：
手和觸摸屏到底有多少種交互方式？
越是高階越是隱藏的交互手勢越復(fù)雜，所謂的交互成本就越高。比如錘子手機(jī)三指滑動換屏保就是利用了高階交互便捷實(shí)現(xiàn)邊界功能。所以IOS也好還是安裝也好，從用戶角度而言，就是組合交互手勢，讓信息更好的傳達(dá)而已。同理，在APP中，如果我們了解每一個交互行為的用戶心理預(yù)期，對設(shè)計(jì)工作而言就能做到有的放矢：
我們以“單擊”和“滑動”這兩個最簡單的交互行為為例：
a.所謂單擊手機(jī)屏幕，用戶其實(shí)最核心的有兩個預(yù)期：
第一是選中一個元素，比如Radio組件。
第二是邏輯上的Next，比如點(diǎn)了一件衣服，應(yīng)該Nextdao衣服的詳情；點(diǎn)了付款，應(yīng)該出現(xiàn)付款流程，點(diǎn)了返回，應(yīng)該back到上一路徑點(diǎn)等等。
b.劃動交互也是一樣，用戶在一塊手機(jī)屏幕上單指劃劃劃，用戶內(nèi)心的預(yù)期其實(shí)也不復(fù)雜，最核心的預(yù)期也就兩點(diǎn)：
第一是查看屏幕外的線索，前提是設(shè)計(jì)師給用戶留下線索了或者是這個UI組件長得就是可以劃動的樣子。
第二是查看相鄰標(biāo)簽的內(nèi)容，或者查看同一標(biāo)簽下的相鄰元素，比如IOS的segment controlle組件就是典型例子：
二、從交互維度合理選擇UI組件
在設(shè)計(jì)工作中選擇UI組件，本質(zhì)上就是選擇信息的呈現(xiàn)形式。每一個常見的UI界面和UI組件，都一定也滿足上面雖說的最小交互模型：
舉例：同樣的內(nèi)容，選擇不同的UI組件呈現(xiàn)，給用戶呈現(xiàn)的是完全不同的產(chǎn)品結(jié)構(gòu)：這兩個UI模塊擺在面前，應(yīng)該能清晰的感受到，左邊是一個segment控制下面內(nèi)容的UI ；而右邊是一個所有內(nèi)容列表的集合頁，只不過通過tab聚類而已。
首先第一件事應(yīng)該想到的是如果采用右邊的排列形式就必須要控制Tag的字?jǐn)?shù)；然后由于右邊的tag占據(jù)了推薦貼的位置，導(dǎo)致推薦貼可能沒有左邊那種展現(xiàn)形式更加醒目。但是相對的，圖右的優(yōu)勢在于，由于豎向排列tag可以讓一個屏幕顯示更多的tag，可以讓用戶更方便的定位內(nèi)容，比如外賣產(chǎn)品之所以用右圖這種形式是因?yàn)榱η笠黄琳故靖嗟牟耍彝赓u產(chǎn)品的左側(cè)tag一般是一家店鋪的菜的品類，用戶下滑菜品配合點(diǎn)擊品類，點(diǎn)完即走，很方便。淘寶和京東電商類平臺也是類似的。
但是比如今日頭條，新聞類客戶端只能采用左邊的這種形式，因?yàn)樾侣勵惪蛻舳耸切枰脩糸L時間沉浸的，比如用戶選中一個“體育”的tag一般要沉浸的看好久，用戶需要沉浸在這個tag下的內(nèi)容中，那這個時候顯然用右邊這種設(shè)計(jì)方式讓tag常駐屏幕左側(cè)是不合適的。
第二個例子，UI應(yīng)該會隨著內(nèi)容而進(jìn)行調(diào)整和優(yōu)化：
以唱吧為例，從7.0到8.6之間做了三次改版，可以看到，唱吧團(tuán)隊(duì)幾乎是損失了屏幕效率來加大了間隔和突出歌名，這是為什么呢？這是因?yàn)轫撁娉休d的關(guān)鍵任務(wù)不同，對比7.0時候和8.6時候的UI樣式，正好是今天快手和唱吧的對比：大家會發(fā)現(xiàn)，這個頁面快手（花瓣/Pinest）和唱吧承載的內(nèi)容都是消費(fèi)轉(zhuǎn)化，都希望用戶點(diǎn)擊進(jìn)去消費(fèi)內(nèi)容，但兩款產(chǎn)品都做了截然不同的UI風(fēng)格。快手在這個頁面，其實(shí)承載的關(guān)鍵任務(wù)是：“迅速讓用戶找到感興趣的點(diǎn)”，它這么設(shè)計(jì)的本質(zhì)原因是因?yàn)樗慕貓D可以幫助用戶判斷視頻內(nèi)容本身，比如第一張圖是一個人在打高爾夫，右邊是一個工人，大家可以很方便的通過圖片識別里面的內(nèi)容，用戶更沉浸更聚焦的去選自己喜歡的進(jìn)入消費(fèi)就可以了。但唱吧的視頻截圖其實(shí)是不能識別里面內(nèi)容的，我們可以看到第一張圖是一個妹子，第二張圖是一個姑娘，那用戶點(diǎn)擊進(jìn)去的動力在哪？除了照片長相外（這就是圖片為什么要占據(jù)這么大空間），還有文字決定的，是這個人唱的歌曲名是不是我喜歡的，或者是這個演唱者的歌手等級。
所以基于產(chǎn)品深層次邏輯結(jié)合用戶根本需求，唱吧和快手兩款產(chǎn)品的頁面都是為了促進(jìn)消費(fèi)轉(zhuǎn)化，但UI長相完全不同。
第三個例子，同樣組件下，選擇不同的交互方式，會使效果完全不同。
比如有一個UI頁面，主要由一個tab（ios叫segment controlled）組件控制下面的內(nèi)容：我們先假定一個前提：這個app中這個組件不支持橫劃，只支持點(diǎn)擊切換。
現(xiàn)在我假設(shè)這是一款已經(jīng)穩(wěn)定運(yùn)營來了一年的產(chǎn)品，為了說明問題，我假設(shè)一個理想數(shù)據(jù)：假設(shè)每天有20w的uv訪問這個頁面，其中分流情況是：
10w UV消費(fèi)“推薦”下的內(nèi)容
2w UV消費(fèi)“生活”下的內(nèi)容
1w UV消費(fèi)“段子”下的內(nèi)容
3w UV消費(fèi)“美女”下的內(nèi)容
4w UV消費(fèi)“游戲”下的內(nèi)容這時候，為了優(yōu)化交互行為，有一天決定把這個tab組件從不可橫向劃動改成可以劃動的（并告訴用戶這里可以劃動~），然后給你一次機(jī)會重新排列這五個tab順序，你會怎么做？最簡單的辦法是把五個tab按照用戶意愿逐一排列，即：“推薦、游戲、美女、生活、段子”。
這樣的排列對于用戶是沒有問題的，但對于產(chǎn)品沒好處。所以有沒有更優(yōu)解？按照用戶的消費(fèi)量，游戲是消費(fèi)量第二的tab，毫不疑問會排在第二項(xiàng)，這樣可以刺激用戶滑動行為，然后美女是消費(fèi)量第三的，我會把他放在第四位，這時候我會把“段子”和“生活”這兩個消費(fèi)率最低的tab分AB test做兩個版本放在第三和第五拿去測，以判斷之前的“段子”和“生活”是由于自身內(nèi)容不夠優(yōu)質(zhì)，還是之前交互成本太低導(dǎo)致的數(shù)據(jù)較差。
第四個例子。比如一個app的UI如下圖，現(xiàn)在假設(shè)在運(yùn)營和市場團(tuán)隊(duì)不做任何努力的情況下，單從產(chǎn)品交互的角度，能不能優(yōu)化上面版塊的點(diǎn)擊率？
首先我們來分析一下頁面架構(gòu)：如果我們認(rèn)為，不管是點(diǎn)擊右上角的“>”，還是點(diǎn)擊六個圓形入口都算完成轉(zhuǎn)化的話，我頂部區(qū)域紅色組件的入口位置一共有7個。根據(jù)長尾理論（堆量），如果我們把這個圓形入口從6個擴(kuò)展到9個，是不是一定對轉(zhuǎn)化率有正向影響（7+-2）？答案是并不一定：為什么呢？因?yàn)橹饕沁@樣的改動會帶來一個未知的泳道橫劃交互，它會產(chǎn)生一定的影響，從用戶行為分析如下圖，用戶看到這個泳道之后可能出現(xiàn)三種行為：a.“用戶完全不滑動”，那入口就從7個變成了7.5個，別的沒有變量影響。
b.“用戶滑動看完之后，點(diǎn)擊某一個或者左上角的>按鈕進(jìn)入”，這是我們想要的操作轉(zhuǎn)化。
c.“用戶滑動看了這些圓形入口之后松手，就是布不點(diǎn)擊進(jìn)入”，這是我們不愿意看到的結(jié)果。
想到這里，那為什么我們不能讓用戶直接滑動之后松手就跳轉(zhuǎn)呢？想到這里，給出一個優(yōu)化方案如下：給用戶一個x軸區(qū)間，滑動手勢超過那個區(qū)間則告訴用戶你現(xiàn)在松手默認(rèn)跳轉(zhuǎn)，用戶不愿意跳轉(zhuǎn)也可以回劃，只要不足這個x區(qū)間就給用戶自主選擇的機(jī)會：這是一個實(shí)戰(zhàn)中真實(shí)案例，我們把6個圓形入口變成10個，然后用這個“松手跳轉(zhuǎn)”的交互把單元模塊的穿透率從21%提升到31%。
當(dāng)然，一個頁面的流量就這么大，一個地方漲了11%，那勢必別的地方就會相應(yīng)的損失11%。一般情況下app首頁承擔(dān)著80%以上的分流工作，根據(jù)流量漏斗來看的話每一次引流都會導(dǎo)致其他模塊的數(shù)據(jù)下降，所以設(shè)計(jì)師們應(yīng)該要根據(jù)運(yùn)營策略和公司大的產(chǎn)品OKR來合理選用合適的交互組件，已達(dá)到想要的目的，還是那句話：小孩才分對錯，大人只看利弊。
三、從交互的維度量化用戶體驗(yàn)
移動互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中，尤其是在中國的app產(chǎn)品，有兩大分歧陣營：
1.“扁平（單頁面信息層級多）”陣營表示：我們需要產(chǎn)品足夠扁平，最好就是三次交互可以觸達(dá)所有app界面。
2.“簡潔（單頁面信息層級少）”陣營也表示：我們需要頁面信息足夠簡潔，最好一個頁面只完成一個核心人物。
雙方你來我往，誰也說服不了誰，如下圖，“簡潔”反駁“扁平”：你們一點(diǎn)都不尊重席客定律，層級扁平是扁平了，但是相應(yīng)的頁面信息變得越來越多，給用戶呈現(xiàn)的干擾就越來越多，用戶做出決定的時間也越來越多，所以你們“扁平黨”都是垃圾。這時候“扁平”陣營也找到了反駁的論點(diǎn)，他們說你看你頁面足夠簡潔了，但是頁面層級很深啊，交互成本這么高，每一次都伴隨流失，可用性這么差，你們還有理了，所以“簡潔”黨才是垃圾！中國的互聯(lián)網(wǎng)產(chǎn)品，很難做到既簡潔又扁平，這個問題的根源在于永遠(yuǎn)有那么多信息需要呈現(xiàn)，永遠(yuǎn)有那么多功能需要添加，這個是中國的激烈市場競爭導(dǎo)致的，并不是說中國的產(chǎn)品就不如國外好，我想討論的是面對中國現(xiàn)在互聯(lián)網(wǎng)產(chǎn)品市場現(xiàn)狀，如果一款產(chǎn)品非要你站隊(duì)上面兩派陣營，你會選哪一派？我現(xiàn)在選擇的是“扁平黨”，因?yàn)橛脩裘媾R一款眼花繚亂的app，如果通過市場，運(yùn)營努力以及自身功能的弱替代性，用戶可以經(jīng)常使用，功能布局信息框架很少改動的前提下，早晚會習(xí)慣和適應(yīng)的，用戶會被產(chǎn)品教育。但是如果一些核心的東西不能第一時間暴露在用戶眼中，很可能用戶就不知道你有這種功能。這就是產(chǎn)品經(jīng)理為什么什么東西都想展現(xiàn)出來，而不是把一堆東西找個入口集合收起來頁面干凈清爽好看，用戶專注。界面清爽了，你的大功能feature因?yàn)樵O(shè)計(jì)隱藏沒有被發(fā)現(xiàn)，不是設(shè)計(jì)開發(fā)測試都白做了么，說好的ROI在哪里？中和簡潔與扁平是一件相當(dāng)困難的事情，在一段復(fù)雜多角色的關(guān)系中，平衡永遠(yuǎn)是最高階的追求。
不論你是設(shè)計(jì)、產(chǎn)品、還是開發(fā)、測試、運(yùn)營人員，我們都明白用戶體驗(yàn)這個詞是由N多個維度綜合而成的一個過程性評價，它和方方面面都有關(guān)系。
那既然是這么專業(yè)且牽扯甚廣的一個名詞，我們真沒有辦法去量化評價它么？永遠(yuǎn)不要忘記，用戶體驗(yàn)是一個過程，而我們每個人也都是用戶本身。我們可以從一段過程這個本質(zhì)處罰，提供一種普通用戶維度比較好用的用戶體驗(yàn)評估辦法“窮舉分析用戶行為路徑”比如你是一款外賣產(chǎn)品的設(shè)計(jì)師，那么用戶在不同產(chǎn)品模塊下定一個外賣的流程路徑大概有多少種，都窮舉出來。比如你是一款在線演唱類的產(chǎn)品設(shè)計(jì)師，那么用戶在產(chǎn)品中完成一首歌需要的用戶路徑到底有多少條，窮舉所有路徑之后一一優(yōu)化，讓路徑變得更加扁平，或許是一個最笨但有效的方案，怎么優(yōu)化？以淘寶消息頁舉個例子：淘寶消息頁面有“交易物流”、“通知”、“互動”三個tab，這時候我們假設(shè)一個用戶三個按鈕下面都有消息，用戶想要看完這三個消息大概需要幾次交互？答案是至少6次：點(diǎn)擊第一個進(jìn)去-返回-點(diǎn)擊第二個進(jìn)去-返回-點(diǎn)擊第三個進(jìn)入-返回，這樣的交互顯得呆板且冗長，淘寶團(tuán)隊(duì)把三個內(nèi)頁集合成一個頁面的三個tab形式，大大縮短的交互成本，這就是所謂的“把用戶路徑變得更扁平”：
多多留心，細(xì)節(jié)里面有魔鬼
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
