B端產(chǎn)品的設(shè)計(jì)中經(jīng)常會(huì)出現(xiàn)工作流的身影，有的流程復(fù)雜有的流程簡(jiǎn)單。無(wú)論是簡(jiǎn)單還是復(fù)雜，它的概念都是一樣的。工作流的概念定義的很復(fù)雜，更多是從技術(shù)層面出發(fā)，通俗點(diǎn)說(shuō)就是根據(jù)一系列過(guò)程規(guī)則，將文檔、信息、任務(wù)在不同的執(zhí)行者之間進(jìn)行傳遞與執(zhí)行。下面我將以一個(gè)相對(duì)簡(jiǎn)單的財(cái)務(wù)報(bào)銷(xiāo)的工作流程，來(lái)介紹一下工作流中的交互設(shè)計(jì)是怎么做的

在開(kāi)展交互設(shè)計(jì)之前我想說(shuō)一說(shuō)很多新手設(shè)計(jì)師都會(huì)踩的一個(gè)坑：做設(shè)計(jì)之前沒(méi)有充分了解需求。需求的溝通是交互設(shè)計(jì)師非常重要的一個(gè)能力（千萬(wàn)不要以為交互設(shè)計(jì)師就是畫(huà)畫(huà)原型圖，我做項(xiàng)目時(shí)也是最反感項(xiàng)目經(jīng)理什么需求都不說(shuō)清楚就讓畫(huà)原型圖）。

需求和誰(shuí)溝通？如果能接觸到客戶(hù)與客戶(hù)溝通當(dāng)然最好，當(dāng)然更多時(shí)候我們是與項(xiàng)目經(jīng)理或產(chǎn)品經(jīng)理溝通，我們必須有透過(guò)現(xiàn)象看到本質(zhì)的能力。需求溝通的話(huà)題太大在這里就不再贅述，后續(xù)有時(shí)間再單獨(dú)聊一聊如何溝通需求。

我將以下面三個(gè)方面來(lái)闡述一下工作流中的交互設(shè)計(jì)該怎么做：

1. 需求的確定與梳理。正如前面所說(shuō)任何設(shè)計(jì)一定是建立在明確的需求之上的；
2. 流程的梳理及信息架構(gòu)的產(chǎn)出。流程的設(shè)計(jì)是交互設(shè)計(jì)中非常重要的部分，好的流程能夠讓用戶(hù)更容易完成任務(wù)。這也是我本次分享著重要講的部分；
3. 原型的產(chǎn)出。簡(jiǎn)單講述一下原型設(shè)計(jì)中要注意的問(wèn)題。

一、需求的確定與梳理

在需求溝通的階段有的客戶(hù)（用戶(hù)）相對(duì)專(zhuān)業(yè)能夠很明確的闡述自己需要的功能，但是大多數(shù)客戶(hù)（用戶(hù)）只是能大概的講一下自己需要什么東西。至于具體細(xì)節(jié)他是不清楚的，這個(gè)時(shí)候我們需要根據(jù)需求自己去整理通過(guò)與客戶(hù)（用戶(hù)）的溝通盡可能的去了解用戶(hù)的使用場(chǎng)景，先設(shè)計(jì)一套方案然后和客戶(hù)（用戶(hù)）反復(fù)溝通直至確定最終的需求。

這里如果有條件的情況下盡量去做一個(gè)簡(jiǎn)單的用戶(hù)調(diào)研，因?yàn)檫@樣會(huì)了解更多的用戶(hù)使用場(chǎng)景進(jìn)而挖掘出用戶(hù)的潛在需求。

通過(guò)溝通我們了解并最終確定了到客戶(hù)的需求。

客戶(hù)最開(kāi)始提出的需求是這樣的：

我們經(jīng)過(guò)溝通交流進(jìn)一步挖掘了一些潛在的需求，現(xiàn)在的需求是這樣的：

剛開(kāi)始客戶(hù)的需求是申請(qǐng)人發(fā)起報(bào)銷(xiāo)申請(qǐng)，然后經(jīng)過(guò)部門(mén)經(jīng)理、分管副總、總經(jīng)理、財(cái)務(wù)的審批，在審批中發(fā)現(xiàn)問(wèn)題，可以駁回，如果審批通過(guò)，財(cái)務(wù)進(jìn)行打款，整個(gè)流程形成閉環(huán)。

我們?cè)诹私獾叫枨蠛蠼Y(jié)合自己的分析提出了幾個(gè)問(wèn)題：

1. 審批中被駁回的申請(qǐng)需要怎么處理；
2. 如果申請(qǐng)人在提交申請(qǐng)后發(fā)現(xiàn)問(wèn)題能否進(jìn)行修改；
3. 部門(mén)經(jīng)理、分管副總、財(cái)務(wù)以及總經(jīng)理是否也需要報(bào)銷(xiāo)申請(qǐng)。

在和客戶(hù)溝通后最終需求為：申請(qǐng)人發(fā)起申請(qǐng)、然后經(jīng)過(guò)部門(mén)經(jīng)理、分管副總、總經(jīng)理、財(cái)務(wù)審批，審批通過(guò)后財(cái)務(wù)進(jìn)行打款。被駁回的申請(qǐng)，申請(qǐng)人在修改后可以再次提交。如果申請(qǐng)人在提交申請(qǐng)后發(fā)現(xiàn)問(wèn)題可以先進(jìn)行撤回然后再修改并提交。部門(mén)經(jīng)理、分管副總、財(cái)務(wù)、總經(jīng)理有審批和發(fā)起申請(qǐng)兩種權(quán)限，畢竟他們也需要進(jìn)行報(bào)銷(xiāo)。

經(jīng)過(guò)溝通與梳理需求基本敲定了，當(dāng)然這只是一個(gè)大的框架還有許多細(xì)節(jié)沒(méi)有考慮進(jìn)去，這就是我們后面進(jìn)行流程設(shè)計(jì)的時(shí)候需要做的事情了

二、梳理信息架構(gòu)及流程設(shè)計(jì)

經(jīng)過(guò)前面的需求溝通與梳理現(xiàn)在我們已經(jīng)對(duì)需要設(shè)計(jì)的財(cái)務(wù)報(bào)銷(xiāo)系統(tǒng)有了一個(gè)大概的框架，接下來(lái)我們需要站在交互的角度去考慮并設(shè)計(jì)流程。前面為了讓大家直觀的了解需求我已經(jīng)繪制了一個(gè)簡(jiǎn)單的流程了，現(xiàn)在我們需要在此基礎(chǔ)上細(xì)化。

這個(gè)階段比較重要，因?yàn)檫@個(gè)階段的設(shè)計(jì)基本決定了我們的系統(tǒng)可用性和易用性，關(guān)乎用戶(hù)體驗(yàn)，所以要花大量時(shí)間在這個(gè)階段思考、打磨。

首先從需求出發(fā)梳理出一個(gè)大概的流程，前面談需求的時(shí)候已經(jīng)梳理過(guò)了，這里再貼出來(lái)：

這里有兩個(gè)流程圖，并不是說(shuō)有兩套流程，流程都是一樣的，只不過(guò)是角色不同，后面再說(shuō)。先看看我們梳理出的流程，功能點(diǎn)比較清晰，看上去似乎沒(méi)有什么問(wèn)題，那么我們需要更深入的去思考了，站在用戶(hù)體驗(yàn)的角度去思考，這個(gè)時(shí)候我們就要帶入一些使用場(chǎng)景了。

我們舉兩個(gè)比較通用的場(chǎng)景：

1. 如果操作途中出現(xiàn)了異常情況（網(wǎng)絡(luò)異常、服務(wù)器異常）；
2. 用戶(hù)在使用途中因個(gè)人行為被迫中斷操作（嘗試挖掘用戶(hù)新的需求點(diǎn)）。

第一點(diǎn)的異常情況現(xiàn)在的流程中我們并沒(méi)有考慮到，那這里我們就要去思考了，異常情況有哪些，其實(shí)異常情況有很多這里我們只考慮幾種常見(jiàn)的情況：網(wǎng)絡(luò)異常；服務(wù)器異常。

（1）網(wǎng)絡(luò)異常

如果用戶(hù)在提交申請(qǐng)的過(guò)程中網(wǎng)絡(luò)出現(xiàn)異常該怎么處理。我們?cè)谳斎肓撕芏啾韱蝺?nèi)容上傳了一堆附件之后在提交的時(shí)候網(wǎng)絡(luò)出現(xiàn)異常了。如果不對(duì)這個(gè)環(huán)節(jié)進(jìn)行設(shè)計(jì)的話(huà)，用戶(hù)辛苦輸入半天的內(nèi)容直接沒(méi)有了，回頭還得再次輸入，這是一件很崩潰的事情。這個(gè)時(shí)候我們需要一些策略，對(duì)用戶(hù)輸入的內(nèi)容進(jìn)行緩存，即使用戶(hù)碰到網(wǎng)絡(luò)異常再返回的時(shí)候內(nèi)容仍然在，這個(gè)體驗(yàn)就很贊了。

有的同學(xué)可能會(huì)覺(jué)得這個(gè)是技術(shù)層面的問(wèn)題應(yīng)該是開(kāi)發(fā)去考慮的事情，這就大錯(cuò)特錯(cuò)了。除了少數(shù)有經(jīng)驗(yàn)的開(kāi)發(fā)會(huì)去考慮這個(gè)問(wèn)題，大多數(shù)開(kāi)發(fā)是不會(huì)考慮的或者說(shuō)他們更多只會(huì)按照需求清單進(jìn)行開(kāi)發(fā)，你沒(méi)提他可能也不會(huì)問(wèn)。而恰恰這些地方就是體現(xiàn)一個(gè)系統(tǒng)易用性的重要細(xì)節(jié)。也是體現(xiàn)一個(gè)產(chǎn)品經(jīng)理或者交互設(shè)計(jì)師設(shè)計(jì)能力的點(diǎn)。

（2）服務(wù)器異常

服務(wù)器異常同網(wǎng)絡(luò)異?；绢?lèi)似，最大區(qū)別是網(wǎng)絡(luò)異?？赡懿辉谖覀兊目刂品秶畠?nèi)而服務(wù)器異常卻是我們不可推卸的責(zé)任。所以在這個(gè)時(shí)候我們除了要解決用戶(hù)內(nèi)容緩存問(wèn)題還需要安撫用戶(hù)的情緒，提出一個(gè)好的解決方案，比如告訴用戶(hù)嘗試刷新頁(yè)面，或者判斷是不是用戶(hù)操作導(dǎo)致的問(wèn)題并進(jìn)行提示引導(dǎo)，而不是直接丟給用戶(hù)一個(gè)404頁(yè)面。

第二點(diǎn)用戶(hù)在使用途中因個(gè)人行為被迫中斷操作

這個(gè)其實(shí)是從用戶(hù)使用場(chǎng)景出發(fā)去挖掘用戶(hù)潛在的需求點(diǎn)。比如說(shuō)用戶(hù)正在錄入報(bào)銷(xiāo)內(nèi)容，中途突然有重要電話(huà)過(guò)來(lái)了，或者臨時(shí)有重要任務(wù)需要處理，而這個(gè)時(shí)候用戶(hù)錄入了很多內(nèi)容了他并不想放棄已經(jīng)輸入的內(nèi)容，這個(gè)時(shí)候該怎么辦？

如果不去做這個(gè)環(huán)節(jié)的設(shè)計(jì)會(huì)不會(huì)影響系統(tǒng)的可用性，當(dāng)然不會(huì)，我們的核心流程是沒(méi)有問(wèn)題的。

那會(huì)不會(huì)影響用戶(hù)的情緒呢？

可能會(huì)，為什么是可能，因?yàn)橐徊糠钟脩?hù)可能不在乎或者沒(méi)有這個(gè)意識(shí)。那如果我們?cè)谶@里設(shè)計(jì)一個(gè)草稿箱是不是就能解決用戶(hù)這一痛點(diǎn)了呢，這對(duì)于提升用戶(hù)體驗(yàn)很有幫助。

這些用戶(hù)潛在的需求點(diǎn)，只能通過(guò)帶入用戶(hù)場(chǎng)景，切實(shí)站在用戶(hù)易用性的角度去考慮問(wèn)題你才能尋求突破。

再來(lái)說(shuō)說(shuō)角色問(wèn)題

角色是工作流中最根本的一個(gè)環(huán)節(jié)，不同角色權(quán)限不同，流程也會(huì)有些差別。

前面提到過(guò)，這個(gè)報(bào)銷(xiāo)系統(tǒng)主要分為三個(gè)角色：?jiǎn)T工、領(lǐng)導(dǎo)（部門(mén)經(jīng)理、分管副總、總經(jīng)理）、財(cái)務(wù)。

員工只有發(fā)起報(bào)銷(xiāo)申請(qǐng)的權(quán)限，領(lǐng)導(dǎo)有發(fā)起報(bào)銷(xiāo)和審批報(bào)銷(xiāo)單的權(quán)限。這里把部門(mén)經(jīng)理、分管副總、總經(jīng)理都劃為一個(gè)角色，因?yàn)樗麄兊臋?quán)限是一致的只不過(guò)在流程的節(jié)點(diǎn)上有先后關(guān)系，財(cái)務(wù)的權(quán)限比較特殊，從級(jí)別劃分上他不具備審批權(quán)。但是要行使審核權(quán)，就是檢查報(bào)銷(xiāo)信息和發(fā)票信息是否正確、屬實(shí)，但是在權(quán)限上他與領(lǐng)導(dǎo)角色是一致的這個(gè)是要特別注意的。

不同權(quán)限角色在流程設(shè)計(jì)上也會(huì)不同，所以設(shè)計(jì)流程時(shí)必須搞清楚角色權(quán)限問(wèn)題。前面我們針對(duì)員工角色和領(lǐng)導(dǎo)角色分別設(shè)計(jì)了不同的流程，財(cái)務(wù)角色的流程和領(lǐng)導(dǎo)角色的流程是一致的。

這個(gè)報(bào)銷(xiāo)系統(tǒng)的設(shè)計(jì)是最基礎(chǔ)的工作流形式了，權(quán)限相對(duì)清晰，在實(shí)際工作中由于需求和應(yīng)用場(chǎng)景不同，往往會(huì)很復(fù)雜。在設(shè)計(jì)的時(shí)候需要明確把角色權(quán)限控制的規(guī)則告知開(kāi)發(fā)。

通過(guò)進(jìn)一步的考慮分析，現(xiàn)在流程設(shè)計(jì)這個(gè)環(huán)節(jié)基本就完成了（不一定全面，任何設(shè)計(jì)都要結(jié)合實(shí)際的需求和業(yè)務(wù)場(chǎng)景）。

接下來(lái)是梳理信息架構(gòu)了，有了流程和角色的設(shè)計(jì)，產(chǎn)出信息架構(gòu)相對(duì)來(lái)說(shuō)就比較簡(jiǎn)單了，這里需要注意的是信息架構(gòu)需要考慮的更細(xì)，有哪些角色不同角色分別對(duì)應(yīng)什么頁(yè)面，頁(yè)面有哪些功能點(diǎn)都需要列出來(lái)

三、原型的產(chǎn)出

原型同樣是一個(gè)很重要的環(huán)節(jié)，因?yàn)樗沁B接上下游、可視化的呈現(xiàn)系統(tǒng)設(shè)計(jì)的一個(gè)重要載體，并且是設(shè)計(jì)、開(kāi)發(fā)、測(cè)試工作的重要依據(jù)。所以原型的設(shè)計(jì)不能馬虎，必須面面俱到，把前面設(shè)計(jì)的流程和角色權(quán)限的規(guī)則體現(xiàn)出來(lái)，同時(shí)還要注意細(xì)節(jié)和流程的完整。

在前面梳理信息架構(gòu)的時(shí)候?qū)嶋H上頁(yè)面的設(shè)計(jì)在我們腦海中已經(jīng)有了一個(gè)雛形，原型的繪制只不過(guò)是時(shí)間問(wèn)題。當(dāng)然這里也不排除在繪制原型的過(guò)程中發(fā)現(xiàn)一些信息架構(gòu)設(shè)計(jì)上的問(wèn)題，可能需要同步整理修改。我個(gè)人習(xí)慣在繪制原型前簡(jiǎn)單的畫(huà)一個(gè)草稿，這樣有利于梳理思路，發(fā)現(xiàn)問(wèn)題時(shí)修改成本也會(huì)比較低。

以上是我對(duì)工作流中交互設(shè)計(jì)的一些理解，僅代表個(gè)人觀點(diǎn)不是行業(yè)準(zhǔn)則，希望能對(duì)你有所幫助，也歡迎大家提出問(wèn)題共同交流！

本文由 @鱷魚(yú)先生 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議