有些時(shí)候，交互設(shè)計(jì)師在其他崗位的認(rèn)知中，僅僅是一個(gè)只會(huì)產(chǎn)出黑白稿、低保真原型的工種。如何改變這種認(rèn)知呢？本文通過(guò)對(duì)實(shí)際案例的解析，希望能帶大家了解，交互設(shè)計(jì)師在產(chǎn)出交互方案時(shí)，是如何進(jìn)行思考與設(shè)計(jì)的，一起來(lái)看一下吧。

交互設(shè)計(jì)師往往在公司中處在一個(gè)尷尬的位置，甚至絕大部分公司都沒(méi)有交互設(shè)計(jì)師這個(gè)崗位，取而代之的是會(huì)畫(huà)原型的產(chǎn)品、會(huì)畫(huà)原型的運(yùn)營(yíng)以及會(huì)畫(huà)原型的UI設(shè)計(jì)師。所以交互設(shè)計(jì)師在其他崗位的認(rèn)知中，僅僅是一個(gè)只會(huì)產(chǎn)出黑白稿、低保真原型的工種。如何改變這類認(rèn)知？相比較去反駁，我認(rèn)為倒不如通過(guò)自己的思考跟產(chǎn)出的方案，來(lái)證明自己的價(jià)值。

本次帶來(lái)的案例，是運(yùn)營(yíng)產(chǎn)出的一套交互原型。由于身后的視覺(jué)設(shè)計(jì)師在設(shè)計(jì)的時(shí)候一直怨聲載道，總是抱怨信息不完整、流程不完整導(dǎo)致的無(wú)盡的返工。所以想基于這個(gè)案例，帶大家一起來(lái)看看，作為一個(gè)交互設(shè)計(jì)師，在產(chǎn)出交互方案時(shí)，是如何進(jìn)行思考與設(shè)計(jì)的。

ps：可能本文提到的交互形式與內(nèi)容并不是最佳方案，思考維度有限，也希望大家指出一起交流進(jìn)步。

一、項(xiàng)目背景

根據(jù)運(yùn)營(yíng)同事的介紹，知道本次項(xiàng)目的目標(biāo)是提升產(chǎn)品信息的透出，最終完成轉(zhuǎn)化。
而用戶行為的設(shè)計(jì)是通過(guò)解鎖產(chǎn)品相關(guān)信息，了解產(chǎn)品相關(guān)內(nèi)容，增加對(duì)產(chǎn)品的熟悉度與好感，最終購(gòu)買(mǎi)產(chǎn)品。

為了便于了解，我們可以把它模擬成一個(gè)汽車(chē)銷售的案例，一般用戶的購(gòu)買(mǎi)行為肯定是基于對(duì)汽車(chē)各個(gè)性能的充分了解的前提下進(jìn)行的，通過(guò)“定位”與“解鎖”，讓用戶可以選擇自己感興趣的性能去了解。而解鎖的模塊越多，客戶對(duì)產(chǎn)品的性能越了解，客戶購(gòu)買(mǎi)的可能性就越大。所以為了促進(jìn)用戶解鎖，我們?cè)O(shè)置了積分獎(jiǎng)勵(lì)，通過(guò)解鎖獲取積分的刺激來(lái)提升解鎖率，最終達(dá)到產(chǎn)品銷售轉(zhuǎn)化的目的。

以下是運(yùn)營(yíng)提供的交互原型（原型做了一些脫敏處理）：

我們分別從信息層級(jí)、交互形式、操作鏈路三個(gè)方面來(lái)解析當(dāng)前的原型所存在的問(wèn)題，同時(shí)結(jié)合對(duì)于運(yùn)營(yíng)目標(biāo)以及用戶行為的思考，給出一些優(yōu)化建議。

二、明確頁(yè)面信息層級(jí)

大部分非交互人員在制作原型時(shí)，對(duì)于信息的布局是沒(méi)有過(guò)多思考的，往往都是哪里順眼就放在哪，或者別人怎么放就怎么放，而信息布局對(duì)于交互設(shè)計(jì)師而言，是非常重要的一環(huán)，需要考慮信息的結(jié)構(gòu)、信息的關(guān)聯(lián)性、信息的重要程度等。所以針對(duì)當(dāng)前的原型，我們來(lái)看看都有哪些信息布局的問(wèn)題。

1. 信息關(guān)聯(lián)性

《設(shè)計(jì)師要懂心理學(xué)》這本書(shū)中有提到一個(gè)用戶心理，人們往往認(rèn)為相鄰物體必然相關(guān)。我們可以看到當(dāng)前原型中，“您當(dāng)前獲得0積分”這個(gè)信息在兩個(gè)按鈕中間，按照信息關(guān)聯(lián)性他似乎是跟兩個(gè)按鈕都有關(guān)聯(lián)性，但其實(shí)她跟“立即購(gòu)買(mǎi)”按鈕沒(méi)有任何關(guān)系，因此放在這個(gè)地方無(wú)疑違背了大家對(duì)于信息關(guān)聯(lián)性的認(rèn)知與理解。

2. 信息重要程度

我們一般在對(duì)按鈕進(jìn)行布局的時(shí)候，會(huì)將重要性相當(dāng)?shù)陌粹o擺放在一起，同時(shí)將直接促成轉(zhuǎn)化的按鈕突出顯示，如視覺(jué)加強(qiáng)，放在右側(cè)方便用戶點(diǎn)擊等。比如電商平臺(tái)經(jīng)常將“加入購(gòu)物車(chē)”跟“購(gòu)買(mǎi)”按鈕并排擺放。當(dāng)前的原型中，雖然強(qiáng)調(diào)了“立即購(gòu)買(mǎi)”按鈕，但是由于“使用積分”的重要程度要弱，所以兩個(gè)按鈕放在一起就顯得不是很合適，那該如何來(lái)進(jìn)行布局呢？

在進(jìn)行布局之前，我們可以分析一下業(yè)務(wù)跟用戶在該頁(yè)面的動(dòng)機(jī)分別是什么。對(duì)于業(yè)務(wù)而言，無(wú)論采取積分刺激或者別的方式，最終的目標(biāo)肯定是轉(zhuǎn)化，所以轉(zhuǎn)化按鈕一定是最重要的觸點(diǎn)，重點(diǎn)突出；而對(duì)于用戶而言，積分所帶來(lái)的利益點(diǎn)是來(lái)到頁(yè)面的目的之一，所以積分的展示與使用才是重點(diǎn)突出的。

所以用戶來(lái)到頁(yè)面的視線應(yīng)該是先看到積分情況，促使用戶解鎖內(nèi)容獲得積分，最后才是根據(jù)解鎖內(nèi)容的了解完成最終的購(gòu)買(mǎi)產(chǎn)品的轉(zhuǎn)化。

三、選擇頁(yè)面交互形式

我們將主要頁(yè)面進(jìn)行信息層級(jí)的梳理與布局后，接下來(lái)我們就需要選擇合適的交互形式來(lái)承載。當(dāng)前頁(yè)面主要發(fā)生用戶交互的地方在解鎖內(nèi)容獲取積分上，我們拆分用戶行為，分析在解鎖前、中、后三個(gè)階段，當(dāng)前原型存在的問(wèn)題以及優(yōu)化的思路。

1. 解鎖前

當(dāng)前原型中，解鎖前是通過(guò)圖形“鎖”來(lái)標(biāo)識(shí)狀態(tài)，但是鎖也有禁止的意思，所以當(dāng)用戶進(jìn)入頁(yè)面時(shí)可能會(huì)面臨兩點(diǎn)疑惑：能不能點(diǎn)擊以及要不要點(diǎn)擊。那么該如何解決用戶的疑惑呢？

針對(duì)能不能點(diǎn)擊，除了告知視覺(jué)做出可點(diǎn)擊的樣式，我們還需要給與引導(dǎo)，一方面告知用戶次此處是可以進(jìn)行交互的，另一方面，也是促進(jìn)用戶點(diǎn)擊，從而完成內(nèi)容對(duì)用戶的轉(zhuǎn)化。

而關(guān)于要不要點(diǎn)擊，就需要采取手段刺激用戶發(fā)生交互。當(dāng)前僅僅是展示待解鎖的內(nèi)容，顯然缺乏刺激點(diǎn)，而原型中把獲取積分放到解鎖后才透出，可能解鎖操作前就流失了一部分用戶，那我們就需要把利益點(diǎn)前置，告知用戶解鎖能獲取什么，刺激用戶點(diǎn)擊，增強(qiáng)用戶解鎖的意愿。

2. 解鎖中

解鎖中即用戶點(diǎn)擊進(jìn)入次級(jí)頁(yè)面閱讀相關(guān)內(nèi)容進(jìn)行解鎖，運(yùn)營(yíng)人員設(shè)置的業(yè)務(wù)規(guī)則是用戶必須滑到最底部閱讀全文才能解鎖成功，彈出解鎖獎(jiǎng)勵(lì)彈窗。但是頁(yè)面上并沒(méi)有展示任何跟該規(guī)則相關(guān)的信息，客戶按照過(guò)往認(rèn)知，可能會(huì)覺(jué)得進(jìn)入頁(yè)面返回就會(huì)獲得積分獎(jiǎng)勵(lì)，但是當(dāng)用戶返回并沒(méi)有解鎖成功時(shí)，用戶會(huì)感到挫敗與疑惑，可能會(huì)直接退出該頁(yè)面。那該如何解決呢？

從跟運(yùn)營(yíng)的溝通中我們得知其業(yè)務(wù)目的是希望用戶多停留在該頁(yè)面，讓內(nèi)容盡可能多的展示給用戶。那我們是不是可以換種思路，不需要用戶滑到最底部，而是設(shè)置用戶在該頁(yè)面的停留時(shí)間，是不是也能滿足？

我們可以進(jìn)一步優(yōu)化時(shí)間的設(shè)置，當(dāng)前解鎖是跳出到新的頁(yè)面，但是溝通后發(fā)現(xiàn)，該頁(yè)面的內(nèi)容不會(huì)很多，那我們是否可以用彈窗的形式來(lái)呈現(xiàn)呢？這樣不僅減少用戶的頻繁跳出，同時(shí)也可以增強(qiáng)內(nèi)容與主頁(yè)面的關(guān)聯(lián)性。因?yàn)橛脩舭l(fā)生交互的行為是解鎖，為了保持跟用戶預(yù)期一致，是不是可以加一個(gè)解鎖的操作，這樣就能讓整個(gè)邏輯形成閉環(huán)。那么時(shí)間的設(shè)置就可以結(jié)合解鎖按鈕來(lái)進(jìn)行交互呈現(xiàn)。

那如果業(yè)務(wù)或者客戶就要求用戶必須滑到最底部，我們?cè)撊绾芜M(jìn)行交互呢？我們可以通過(guò)“顯性”跟“隱性”兩種方式來(lái)展開(kāi)。

顯性，顧名思義就是直白的告訴用戶業(yè)務(wù)規(guī)則，比如用戶首次進(jìn)入頁(yè)面，通過(guò)彈窗的形式告訴用戶滑到底部即可解鎖，但是帶來(lái)的問(wèn)題就是過(guò)于直白的指引可能導(dǎo)致用戶為了獲得獎(jiǎng)勵(lì)直接滑到底部而忽略內(nèi)容本身；

而隱性就是讓用戶自己明白這個(gè)業(yè)務(wù)規(guī)則，我們可以通過(guò)定位用戶在該頁(yè)面的位置，結(jié)合進(jìn)度來(lái)呈現(xiàn)，用戶向上滑動(dòng)則進(jìn)度條前進(jìn)，反之則保持不變，通過(guò)這種形式不僅增加了用戶在該頁(yè)面的停留時(shí)間，同時(shí)也增加了解鎖的趣味性，但是需要考量的就是該交互形式的開(kāi)發(fā)成本。

3. 解鎖后

解鎖后也就是用戶返回主頁(yè)面時(shí)候的交互，此時(shí)頁(yè)面發(fā)生變化的主要是解鎖按鈕的狀態(tài)（已解鎖）以及積分?jǐn)?shù)量的變化（增加積分），其中積分的增加可以滿足用戶的獲得感并且激勵(lì)用戶繼續(xù)完成解鎖任務(wù)，那么該選擇何種交互形式呢？

首先想到的是進(jìn)度條的形式，通過(guò)積分獲得進(jìn)度來(lái)告知用戶已經(jīng)獲得的積分以及還可以完成的解鎖任務(wù)，用戶解鎖成功返回首頁(yè)，進(jìn)度條前進(jìn)一格展示該節(jié)點(diǎn)成功解鎖狀態(tài)。但是由于積分跟最終的購(gòu)買(mǎi)轉(zhuǎn)化并沒(méi)有強(qiáng)關(guān)聯(lián)，這樣的交互形式會(huì)過(guò)多的突出積分的價(jià)值，導(dǎo)致用戶將過(guò)多的注意力放在解鎖獲取積分上，所以此種交互形式在該場(chǎng)景下就不是很合適。

那么選擇何種形式，既要增強(qiáng)用戶的獲得感，同時(shí)降低積分的權(quán)重？我們可以嘗試用計(jì)數(shù)器來(lái)展示，用戶解鎖成功返回首頁(yè)，積分?jǐn)?shù)字動(dòng)態(tài)增加，由于是過(guò)性的交互，所以并沒(méi)有過(guò)多的搶占用戶的注意力，同時(shí)數(shù)字的增長(zhǎng)又很好地展示解鎖成功所帶來(lái)的收獲，滿足此場(chǎng)景下的業(yè)務(wù)目標(biāo)。

四、優(yōu)化用戶操作鏈路

交互設(shè)計(jì)師的主要職責(zé)，就是站在用戶的角度優(yōu)化操作鏈路，提升用戶在產(chǎn)品中的用戶體驗(yàn)。在當(dāng)前的鏈路中，用戶解鎖成功獲得積分后，如果需要使用積分，需要返回首頁(yè)進(jìn)行操作，那么該如何優(yōu)化這個(gè)鏈路呢？我們可以很容易想到在用戶獲得積分的彈窗加上使用積分的按鈕，這樣用戶可以“所得即所用”，就不用再返回首頁(yè)進(jìn)行操作了。

五、總結(jié)

以上，就是筆者根據(jù)過(guò)往的工作經(jīng)驗(yàn)，分享的一篇關(guān)于日常交互設(shè)計(jì)思考的文章。后續(xù)也會(huì)繼續(xù)分享自己在實(shí)際工作中，關(guān)于產(chǎn)品交互的心得與感想。經(jīng)驗(yàn)有限，歡迎大家批評(píng)指正與交流。