如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

交互設(shè)計(jì)師有一項(xiàng)很重要的工作就是定義任務(wù)流程。在接到需求之后，設(shè)計(jì)師需要把抽象的需求設(shè)計(jì)成具象的流程，然后再把流程分配到不同的界面，最終形成成品。設(shè)計(jì)流程不難，但是設(shè)計(jì)好的流程非常難。今天主要是從“閉環(huán)”這個(gè)角度來講講流程設(shè)計(jì)中的優(yōu)化問題。

舉個(gè)簡單的例子，注冊這個(gè)流程可以這么定義：

這么一看，確實(shí)很簡單。但是這是一個(gè)好的流程嗎？比如填寫手機(jī)號(hào)碼的時(shí)候發(fā)現(xiàn)手機(jī)號(hào)碼已經(jīng)注冊了，這個(gè)時(shí)候需要怎么辦？比如獲取不到驗(yàn)證碼怎么辦？這些細(xì)化的場景如果沒有考慮到的話，流程就會(huì)變得很晦澀難用。怎么去尋找細(xì)分的場景一直是流程設(shè)計(jì)中一個(gè)難題，這部分以后會(huì)談。所以，今天我主要是從“閉環(huán)”這個(gè)角度來講講流程設(shè)計(jì)中的優(yōu)化問題。怎么去構(gòu)造交互設(shè)計(jì)的閉環(huán)，我主要從以下幾個(gè)維度去講：①打通斷頭路；②設(shè)置延長線；③開辟新岔路。每個(gè)流程就好比一條路，所以這里借用交通領(lǐng)域的名詞來說明，理解起來更加形象生動(dòng)。

1、打通斷頭路

斷頭路，顧名思義就是流程走到某個(gè)地方，雖然目標(biāo)還沒達(dá)成，但是路徑已經(jīng)中斷了。如果現(xiàn)實(shí)中遇到斷頭路，司機(jī)肯定是一頓怒罵然后沿路返回，再選擇新的路。在流程中，如果用戶遇到斷頭路，有可能用戶會(huì)沿路返回，然后去嘗試新的流程，但是也有可能是用戶會(huì)直接流失掉。如果流失掉客戶，那么損失可就大了。所以，在做流程設(shè)計(jì)的時(shí)候，首先就要看看有沒有斷頭路，然后要把斷頭路都打通。

回到一開始的例子，我們來看看這個(gè)例子中可能出現(xiàn)的斷頭路。在填寫完手機(jī)號(hào)碼之后，一般都會(huì)有個(gè)檢驗(yàn)的功能，首先會(huì)檢驗(yàn)輸入的是不是11位數(shù)字，接著才會(huì)檢驗(yàn)是否已經(jīng)注冊。如果已經(jīng)注冊了，一般至少都會(huì)彈出一個(gè)toast“該手機(jī)號(hào)碼已注冊”。流程如下：

△ 注冊流程（增加toast提示）

如果按照這個(gè)流程走，就出現(xiàn)了我所說的斷頭路。在注冊/登錄流程，用戶的目的很明確，就是要注冊或者登錄以使用應(yīng)用，如果沒能達(dá)成這兩個(gè)目的就中斷，用戶的任務(wù)就無法完成，用戶當(dāng)然會(huì)很不爽。所以，如果只是彈出一個(gè)toast“該手機(jī)號(hào)碼已注冊”，這無疑就中斷了用戶的流程。

那么要怎么進(jìn)行改進(jìn)呢？最簡單的就是把提示文案修改一下“該手機(jī)號(hào)碼已注冊，請直接登錄”，通過文案的引導(dǎo)，可以讓用戶知道后續(xù)要做什么。不要小看加上去的這幾個(gè)字，因?yàn)槲覀儫o法揣摩用戶的狀態(tài)，所以我們不能保證用戶時(shí)時(shí)刻刻都很清楚他在干嘛，他接下來要干嘛。針對這種情況，交互設(shè)計(jì)有一個(gè)“可學(xué)習(xí)性”的原則，簡單地說就是，我們要一步步告訴用戶，他應(yīng)該怎么做。其中，文案的作用至關(guān)重要。

當(dāng)然，現(xiàn)在這還不是最好的方式。最好的方式是什么呢？我們來捋一捋現(xiàn)在的場景?，F(xiàn)在是用戶的注冊流程被打斷了，為什么會(huì)被打斷呢？因?yàn)橛脩粢呀?jīng)注冊過了。為什么用戶會(huì)現(xiàn)在還注冊一遍呢？因?yàn)樗脒M(jìn)入應(yīng)用使用。所以呢，既然我們知道用戶走到了斷頭路，我們也知道用戶想去哪？那么最好的方式就是告訴用戶：“嘿，這條路走不通了，但是這里有捷徑喲”。具體實(shí)施起來就是用一個(gè)彈窗進(jìn)行引導(dǎo)，如下圖：

△ 彈窗提示直接登錄

然后做的再細(xì)致一點(diǎn)，因?yàn)橛脩粢呀?jīng)填寫了手機(jī)號(hào)碼，登錄的時(shí)候就不需要用戶再填寫一遍了。還有，不要忘了登錄頁面的“忘記密碼”選項(xiàng)。

回頭再來看看設(shè)計(jì)中的斷頭路，還有哪些情況。比如說搜索不到內(nèi)容，這時(shí)候就相當(dāng)于一個(gè)斷頭路。假如這時(shí)候提供一些推薦的相關(guān)的關(guān)鍵詞，就相當(dāng)于打通了斷頭路。比如說，下載資源沒速度，這也相當(dāng)于斷頭路。舊版迅雷會(huì)推薦相似的資源，這就像打通了斷頭路。再比如說，chrome瀏覽器連接不到網(wǎng)絡(luò)，斷頭路又出現(xiàn)了。chrome會(huì)推薦一個(gè)小游戲給用戶玩，這也相當(dāng)于打通了斷頭路。

2、設(shè)置延長線

如果說打通斷頭路更多是站在用戶的角度去進(jìn)行設(shè)計(jì)，那么設(shè)置延長線除了是為用戶考慮之外，還有一部分是為了產(chǎn)品本身考慮的。具體做法就是，當(dāng)原來的任務(wù)已經(jīng)完成的時(shí)候，但這時(shí)候又推薦一些任務(wù)給你做，流程變得比原來更長了，這個(gè)新加入的劉晨就是我所說放入”延長線”。乍一看，這好像違背了交互設(shè)計(jì)的簡潔性，無端端把流程變長了，就不需要考慮流程的用戶流失率嗎？當(dāng)然不是，關(guān)于這一點(diǎn)，還讓我細(xì)細(xì)說來。

之前在手機(jī)管家實(shí)習(xí)的時(shí)候，正巧是手機(jī)管家從5.x到6.x的升級(jí)改版項(xiàng)目。這里稍微解釋一下，手機(jī)管家是一款工具型應(yīng)用。你可以把手機(jī)管家當(dāng)成瑞士軍刀，是一堆工具的合集。在5.x的版本遇到有個(gè)問題就是，部分功能的滲透率非常低（注：滲透率就是一個(gè)功能的使用率）。通過調(diào)研分析，得出兩個(gè)方法，其中一個(gè)就是整合功能，把原先20多項(xiàng)的功能整合到10多項(xiàng)，減少選項(xiàng)的確有助于讓用戶做出選擇。第二種就是這里講的“設(shè)置延長線”的方法。具體的做法就是通過高滲透率的功能去帶動(dòng)低滲透率的功能。比如說，在某個(gè)操作完成之后，除了結(jié)果反饋以及完成按鈕之外，可以推薦用戶做另外一些操作。通過這種流程的優(yōu)化去帶動(dòng)其他的功能，從而提高整體功能的滲透率。如下圖：

△ 完成頁的推薦任務(wù)

你可能會(huì)說，那這樣不會(huì)有問題么？流程不會(huì)變得很長很長么？結(jié)果反饋頁不會(huì)變得很復(fù)雜么？

關(guān)于結(jié)果反饋頁的問題。沒錯(cuò)，頁面會(huì)變復(fù)雜，但是頁面簡單并不是我們的目的。我們的目的是通過頁面去引導(dǎo)用戶，所以可以通過頁面內(nèi)容的大小對比、顏色對比來解決頁面復(fù)雜的問題。同時(shí)，交互設(shè)計(jì)是一個(gè)平衡用戶需求和商業(yè)需求的職位，所以，有時(shí)候?yàn)榱松虡I(yè)需求也需要犧牲一點(diǎn)用戶體驗(yàn)。

第二個(gè)是流程變長的問題。這個(gè)問題是這樣子的，用戶可以選擇像之前那樣直接完成任務(wù)即可，所以我們只是增加了選擇成本而已。其次，如果我們推薦的功能剛好是用戶需要的，那么用戶當(dāng)然會(huì)很樂意繼續(xù)操作下去。最后，不是每一項(xiàng)操作完成之后都會(huì)緊跟著一些推薦功能。當(dāng)流程過長時(shí)，我們可以關(guān)閉這個(gè)“設(shè)置延長線”的功能，只留下結(jié)果反饋元素和“完成”按鈕。

小結(jié)一下，設(shè)置延長線相當(dāng)于把應(yīng)用不同模塊之間做一個(gè)串聯(lián)，一是可以提高功能模塊的滲透率，二是如果串聯(lián)的功能恰好是用戶需要的，那么同時(shí)也會(huì)提升用戶體驗(yàn)。只是，怎么樣“恰好”推薦到用戶喜歡的功能，這個(gè)需要多方調(diào)研以及用數(shù)據(jù)做支撐才行。

3、開辟新岔路

一般來說，正常的流程應(yīng)該是線性的，這樣的流程最簡單，用戶使用起來也沒什么壓力和成本。但是，這僅僅只是正常的流程。交互設(shè)計(jì)需要考慮復(fù)雜的異常流程，這也就導(dǎo)致了好的流程更像一張網(wǎng)，有無數(shù)的岔路，每個(gè)岔路還可能有岔路，岔路走著走著可能又回到原點(diǎn)，最終，所有的路徑都會(huì)匯集到一個(gè)或者多個(gè)終點(diǎn)。

這是普通的情況，但是也有特殊的情況。比如說我現(xiàn)在要講的這個(gè)“開辟新岔路”，如果說前面兩個(gè)方法都還是為用戶著想的話，現(xiàn)在這個(gè)方法更多的是為產(chǎn)品運(yùn)營方著想的。開辟新岔路是說在正常流程的某個(gè)節(jié)點(diǎn)，分岔出新的流程，最終分岔的這個(gè)流程還會(huì)回歸到正常的流程。

如下圖，藍(lán)色代表普通的流程，但是現(xiàn)在插進(jìn)去了一些新的節(jié)點(diǎn)，就是橙色的點(diǎn)，這些橙色的點(diǎn)構(gòu)成的流程就是我所說的新岔路。

△ 新岔路

這么說還是很抽象，我還是通過例子來說明吧。購物車是購物應(yīng)用里面一個(gè)非常常見的功能，用戶在使用購物車的時(shí)候流程是這樣子的。

△ 購物車使用流程

但是，真的是這樣么？在查看購物車的界面，其實(shí)除了購物車的內(nèi)容，還有其他的內(nèi)容。如下圖：

購物車頁面其實(shí)還有一個(gè)推薦商品的部分，如果用戶恰好在這里發(fā)現(xiàn)自己需要的商品，就很有可能會(huì)跳轉(zhuǎn)出去瀏覽，然后再回來購物車進(jìn)行結(jié)賬。流程如下：

△ 京東購物流程

這一個(gè)跳出去的動(dòng)作就是我所說的岔路。在電商這個(gè)場景下，岔路的意思就是要讓你多“逛”一下，萬一你再看重別的東西，電商不就多賺一點(diǎn)么？同理，岔路還適用于其他適合“逛”的產(chǎn)品，比如說資訊閱讀類產(chǎn)品等等。對于其他產(chǎn)品，這種方法就要慎重了。因?yàn)橛锌赡懿碇碇脩艟筒换貋砹恕３酥?，岔路的設(shè)置也會(huì)使得界面變得更加復(fù)雜，用戶有可能會(huì)迷失掉。

不過，我們可以從結(jié)果推導(dǎo)一下：既然現(xiàn)在電商的購物車普遍都用了這種方法，說明它還是切實(shí)有效的。所以，是否選中這種岔路，不僅需要基于自身產(chǎn)品的屬性來考量，更重要的是要從上線之后的數(shù)據(jù)來觀察。

好了，講到這里，我對于交互設(shè)計(jì)流程的閉環(huán)問題也就講完了?？偨Y(jié)一下，閉環(huán)實(shí)際上是一種“串聯(lián)”，把同個(gè)功能模塊下的不同流程串聯(lián)起來（打通斷頭路），把不同的功能模塊串聯(lián)起來（設(shè)置延長線），或者是自己把自己串聯(lián)起來（開辟新岔路）。這種串聯(lián)有為用戶著想的，也有產(chǎn)品方面的考量。但是不管從哪里出發(fā)，在設(shè)計(jì)交互流程對這些閉環(huán)進(jìn)行思考，整個(gè)交互流程才會(huì)變得更加強(qiáng)大和完整。

藍(lán)藍(lán)設(shè)計(jì)( www.alimai.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。