文章以作者最近做的一個(gè)會(huì)員卡綁定激活的運(yùn)營活動(dòng)作為案例，總結(jié)了交互設(shè)計(jì)中的一些“套路”。

大家都知道，運(yùn)營類app會(huì)經(jīng)常做各式各樣的運(yùn)營活動(dòng)，面對不同的活動(dòng)類型，會(huì)有不同的需求和用戶目標(biāo)，怎樣能夠快速理解需求并做出邏輯清晰的交互方案，下面以最近做的一個(gè)會(huì)員卡綁定激活的運(yùn)營活動(dòng)作為案例來總結(jié)一下交互設(shè)計(jì)的那些“套路”：

首先，接到這個(gè)需求時(shí)，產(chǎn)品給了個(gè)簡單的原型：

這是什么鬼？

大概看一下原型，可以看到有三個(gè)承載頁面，第一步是要輸入手機(jī)號和驗(yàn)證碼，第二步輸入卡密，最后一步驗(yàn)證成功，進(jìn)行下載。咋一看一頭霧水，這貌似是一個(gè)激活卡的流程，為了更加精準(zhǔn)地了解產(chǎn)品需求，于是找到產(chǎn)品直接進(jìn)行需求溝通（溝通前需要去思考用戶場景和每個(gè)細(xì)節(jié)）：

我：這是什么個(gè)需求？

pm：一個(gè)會(huì)員卡激活綁定的流程頁。

我：會(huì)員卡是什么東西？

pm：這是一個(gè)實(shí)體卡，是我們平臺(tái)用戶升級為會(huì)員用的，上面有l(wèi)ogo，卡號和密碼圖層

我：這卡是怎么來的？

pm：平臺(tái)通過線下運(yùn)營活動(dòng)給平臺(tái)老用戶進(jìn)行的福利或者用戶進(jìn)行購買獲得。

我：會(huì)員卡有什么用？

pm：激活后可以將帳號升級為會(huì)員（類似qq會(huì)員那種）

我：用戶要怎么才能激活？

pm：通過掃描會(huì)員卡后面的二維碼來進(jìn)行激活。

我：激活后又會(huì)怎樣？

pm：激活后用戶升級為會(huì)員，能享受各種xxxxx牛逼的特權(quán)。

我：為什么要做這個(gè)需求？

pm：讓我們平臺(tái)用戶能夠升級為會(huì)員，然后就…….

我：額……

好了，現(xiàn)在已經(jīng)大概了解了項(xiàng)目需求，先出個(gè)一版交互看看：

額，感覺就是把產(chǎn)品原型稍微優(yōu)化重新排個(gè)版而已，如果這樣就算做交互了，那也太簡單了，這個(gè)時(shí)候需要更加深入地思考和分析：

• 上面的步驟流程有沒有問題？第一步就要輸入手機(jī)號？
• 頭部的廣告是什么？跟激活卡有什么關(guān)系？會(huì)不會(huì)影響用戶正常激活流程？
• 按鈕的文案是不是有問題？提示文案是不是太簡單？用戶是否看的懂？

……

從交互設(shè)計(jì)三要素重新梳理整個(gè)邏輯流程：

1、目標(biāo)用戶：大部分平臺(tái)普通用戶（非會(huì)員用戶）和少量非平臺(tái)用戶，通過某些渠道活動(dòng)營銷或自己花錢購買到實(shí)體會(huì)員卡。

2、用戶目標(biāo)：希望用卡能夠快速進(jìn)行升級會(huì)員，然后可以享受各種xxxxx牛逼的特權(quán)，然后可以買各種便宜的東西等等。

3、使用場景：用戶拿到會(huì)員卡后，看到卡背面有二維碼，用戶下意識地用微信去掃一掃，這個(gè)時(shí)候就要去思考，用戶掃完二維碼后出現(xiàn)的頁面的心理預(yù)期是什么？難道應(yīng)該是像產(chǎn)品原型里面那樣直接出現(xiàn)輸入手機(jī)號和驗(yàn)證碼嗎？仔細(xì)想想是不符合用戶心理預(yù)期的，其實(shí)用戶更希望看到關(guān)于卡詳細(xì)的信息，以及這個(gè)卡怎么樣一個(gè)激活流程，讓用戶提前看到激活的步驟和操作會(huì)讓用戶有更好的心理安全感，另外如果能讓用戶直接看到升級會(huì)員后能夠帶來哪些好處能夠享受哪些特權(quán)會(huì)更加促使用戶進(jìn)行升級會(huì)員的操作。

分析了這么多，突然思路就清晰一些了，現(xiàn)在我們再重新優(yōu)化一下交互，就當(dāng)作第二個(gè)版本吧

嗯，現(xiàn)在看起來是不是頁面結(jié)構(gòu)清晰多了，用戶通過掃描二維碼進(jìn)入后可以看到大大的標(biāo)題“特奢匯會(huì)員卡激活”以及副標(biāo)題“升級超級會(huì)員，尊享會(huì)員8大特權(quán)”從標(biāo)題上就告知用戶這確實(shí)是會(huì)員卡的激活流程，以及升級會(huì)員會(huì)享有8大特權(quán)，符合用戶的心理預(yù)期。標(biāo)題下面一塊滑屏區(qū)，展示著升級會(huì)員后會(huì)享有的一些特權(quán)和好處，這個(gè)地方也是為了讓用戶更好地了解會(huì)員的好處并促使用戶進(jìn)行升級的誘發(fā)劑?；羺^(qū)下面的步驟拆分區(qū)域也是為了更好地讓用戶感知到整個(gè)流程和需要操作的步驟。

看到這里感覺這版應(yīng)該沒有什么問題了，正當(dāng)我要定稿的時(shí)候，為了確保沒有遺漏什么重要的細(xì)節(jié)，還是要再仔細(xì)思考一下：

• 頁面流程是否有問題？是不是能夠更簡化？
• 頁面是否清晰明白？用戶是否能夠看的懂？
• 用戶當(dāng)前的心理預(yù)期是什么樣的？需要引導(dǎo)用戶怎么操作？
• 用戶為什么要進(jìn)行這個(gè)操作？用戶的目標(biāo)是什么？
• 還有沒有更好的方案？

……

不停地問為什么，同理心的目的就是讓我們能夠站在用戶的角度去思考用戶的心理和其行為模式。

抱著一定有更好的方案的思路才能不斷突破：

優(yōu)化后的思路是把特權(quán)滑屏區(qū)域去掉，將這里做成了實(shí)體卡樣式。

為什么要這么做？還是要回到用戶和場景本身，我們這里的主要用戶群體是非會(huì)員用戶，對我們的產(chǎn)品和平臺(tái)有一定的關(guān)注和了解，能夠接受花錢購買會(huì)員卡進(jìn)行會(huì)員升級，說明該用戶已經(jīng)提前詳細(xì)了解了平臺(tái)會(huì)員所有的特權(quán)，并且有足夠強(qiáng)的動(dòng)力去完成會(huì)員卡激活等一系列流程，所以這個(gè)地方再次強(qiáng)調(diào)有哪些會(huì)員特權(quán)就顯得意義不大。

考慮到用戶是通過實(shí)體會(huì)員卡掃描二維碼而進(jìn)入的頁面，所以在頁面形態(tài)上面通過高度還原實(shí)體卡樣式來展示，通過用戶手中的實(shí)體卡和界面里面的卡來形成會(huì)員卡帳號的互通。當(dāng)用戶輸入密碼時(shí)，上面卡密區(qū)域也會(huì)同步進(jìn)行密碼輸入的聯(lián)動(dòng)。

這樣設(shè)計(jì)的好處就是能夠讓用戶快速地進(jìn)行場景帶入，用戶第一眼看到就很清楚地知道需要做什么操作，模擬實(shí)體卡設(shè)計(jì)符合用戶當(dāng)前的使用場景和心理預(yù)期，能夠與用戶產(chǎn)生情感上的共鳴。

最后再整理優(yōu)化一下交互流程，添加細(xì)節(jié)描述和異常態(tài)：

好了，到目前為止交互的工作算是完成了，接下來就是視覺設(shè)計(jì)師的工作啦~

最后總結(jié)一下，在處理運(yùn)營活動(dòng)類交互設(shè)計(jì)時(shí)（其實(shí)適用于大部分交互設(shè)計(jì)類型）一般通過下面4個(gè)維度來分析：

1. 用戶：是什么樣的人在用你的產(chǎn)品，這些人有哪些特點(diǎn)，有哪些訴求，用戶畫像越細(xì)越好；
2. 目標(biāo)：用戶的目標(biāo)是什么，用戶想得到什么，能夠給用戶帶來什么樣的價(jià)值。
3. 場景：場景化設(shè)計(jì)，考慮用戶真實(shí)的使用場景，這里分為內(nèi)部使用場景和外部環(huán)境場景等，針對不同的場景才能做成符合用戶心理預(yù)期的設(shè)計(jì)。
4. 流程：考慮用戶在使用過程中在各個(gè)場景下分別會(huì)產(chǎn)生哪些行為流程，怎樣優(yōu)化用戶流程，怎樣避免用戶犯錯(cuò)并給出友好的反饋等等。

總之，多問一些為什么，多思考這樣做的原因，可以通過交互設(shè)計(jì)七大定律、交互設(shè)計(jì)三要素以及5W1H規(guī)則等交互方法來進(jìn)行實(shí)施和驗(yàn)證。

本文由 @小米渣和大冬瓜 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。