編者按：本文通過一個交互方案的改版思考，幫你了解交互設(shè)計師在產(chǎn)出交互方案時，是如何進(jìn)行思考與設(shè)計的。

更多思考案例：

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

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

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

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

一、項(xiàng)目背景

根據(jù)運(yùn)營同事的介紹，知道本次項(xiàng)目的目標(biāo)是提升產(chǎn)品信息的透出，最終完成轉(zhuǎn)化。

而用戶行為的設(shè)計是通過解鎖產(chǎn)品相關(guān)信息，了解產(chǎn)品相關(guān)內(nèi)容，增加對產(chǎn)品的熟悉度與好感，最終購買產(chǎn)品。

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

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

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

二、明確頁面信息層級

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

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

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

2. 信息重要程度

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

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

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

三、選擇頁面交互形式

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

1. 解鎖前

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

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

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

2. 解鎖中

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

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

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

那如果業(yè)務(wù)或者客戶就要求用戶必須滑到最底部，我們該如何進(jìn)行交互呢？我們可以通過“顯性”跟“隱性”兩種方式來展開。

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

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

3. 解鎖后

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

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

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

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

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

五、總結(jié)

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