從一個活動來總結一下交互設計的那些“套路”

最近一直在做電商平臺的活動， 大家都知道，電商app會經常做各式各樣的活動，面對不同的活動類型，會有不同的需求和用戶目標，怎樣能夠快速理解需求并做出邏輯清晰的交互方案，下面以最近做的一個會員卡綁定激活的活動作為案例來總結一下交互設計的那些“套路”：

首先，接到這個需求時，產品給了個簡單的原型：

這是什么鬼？

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

我：這是什么個需求？

pm：一個會員卡激活綁定的流程頁。

我：會員卡是什么東西？

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

我：這卡是怎么來的？

pm：平臺通過線下運營活動給平臺老用戶進行的福利或者用戶進行購買獲得。

我：會員卡有什么用？

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

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

pm：通過掃描會員卡后面的二維碼來進行激活。

我：激活后又會怎樣？

pm：激活后用戶升級為會員，能享受各種xxxxx牛逼的特權。

我：為什么要做這個需求？

pm：讓我們平臺用戶能夠升級為會員，然后就…….

我：額……

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

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

上面的步驟流程有沒有問題？第一步就要輸入手機號？

頭部的廣告是什么？跟激活卡有什么關系？會不會影響用戶正常激活流程？

按鈕的文案是不是有問題？提示文案是不是太簡單？用戶是否看的懂？

……

從交互設計三要素重新梳理整個邏輯流程：

1、用戶：大部分平臺普通用戶（非會員用戶）和少量非平臺用戶，通過某些渠道活動營銷或自己花錢購買到實體會員卡。

2、目標：希望用卡能夠快速進行升級會員，然后可以享受各種xxxxx牛逼的特權，然后可以買各種便宜的東西等等。

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

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

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

看到這里感覺這版應該沒有什么問題了，正當我要定稿準備發(fā)出來的時候，為了確保沒有遺漏什么重要的細節(jié)，還是要再仔細思考一下：

頁面流程是否有問題？是不是能夠更簡化？

頁面是否清晰明白？用戶是否能夠看的懂？

用戶當前的心理預期是什么樣的？需要引導用戶怎么操作？

用戶為什么要進行這個操作？用戶的目標是什么？

還有沒有更好的方案？

……

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

所以才有了更優(yōu)的方案：

這里唯一的改動是把特權滑屏區(qū)域去掉，將這里做成了實體卡樣式。

為什么要這么做？還是要回到用戶本身，我們這里的主要用戶群體是平臺非會員用戶，對我們的產品和平臺有一定的關注和了解，能夠接受花錢購買會員卡進行會員升級，說明他已經提前詳細了解了平臺會員所有的特權，并且有足夠強的動力去完成會員卡激活等一系列流程。所以這個地方再次展示會員特權的意義就并不是很大了，由于考慮到用戶是通過實體會員卡掃描二維碼而進入的頁面，所以在頁面上面通過高度還原實體卡樣式來展示，通過用戶手中的實體卡和界面里面的卡來形成會員卡帳號的互通。當用戶輸入密碼時，上面卡密區(qū)域也會同步進行密碼輸入的聯(lián)動。

這樣設計的好處就是能夠讓用戶快速地進行場景帶入，用戶第一眼看到就很清楚地知道需要做什么操作，模擬實體卡設計符合用戶的心理預期，能夠與用戶產生共鳴。

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

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

總結一下，交互設計分析總體分為4點：

1、用戶：是什么樣的人在用你的產品，這些人有哪些特點，有哪些訴求，用戶畫像越細越好；

2、目標：用戶的目標是什么，用戶想得到什么，能夠給用戶帶來什么樣的價值。

3、場景：場景化設計，考慮用戶真實的使用場景，這里分為內部使用場景和外部環(huán)境場景等，針對不同的場景才能做成符合用戶心理預期的設計。

4、流程：考慮用戶在使用過程中在各個場景下分別會產生哪些行為流程，怎樣優(yōu)化用戶流程，怎樣避免用戶犯錯并給出友好的反饋等等。

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

作者：小米渣_大冬瓜
原文：http://www.jianshu.com/p/915c4ce32a01
本文版權歸原作者所有，轉載請注明出處。如有任何問題，請加微信ixdc-apply詳談。