移動(dòng)端交互文檔應(yīng)該如何寫(xiě)？

交互設(shè)計(jì)師在團(tuán)隊(duì)一般承擔(dān)著承上啟下的作用，上游對(duì)接視覺(jué)設(shè)計(jì)師和項(xiàng)目經(jīng)理，下游對(duì)接視覺(jué)設(shè)計(jì)師和開(kāi)發(fā)工程師，他們都是根據(jù)交互設(shè)計(jì)師輸出的交互文檔作為下一步的工作的參考，交互文檔的重要性不言而喻。本文結(jié)合案例等分享了移動(dòng)端交互輸出文檔的撰寫(xiě)步驟以及過(guò)程中需要注意的關(guān)鍵問(wèn)題，供大家一同參考和學(xué)習(xí)。

一套完整且比較優(yōu)秀的移動(dòng)端交互文檔，我認(rèn)為可以包含以下部分：

1.業(yè)務(wù)背景、產(chǎn)品目標(biāo)、用戶(hù)人群和用戶(hù)目標(biāo)

2.業(yè)務(wù)規(guī)則定義

3.用戶(hù)流程圖

4.設(shè)計(jì)原則

5.交互流程標(biāo)注

當(dāng)然也可以增加產(chǎn)品概況和更新日志等內(nèi)容，產(chǎn)品概況即簡(jiǎn)單說(shuō)明這個(gè)產(chǎn)品版本號(hào)和產(chǎn)品相關(guān)人員。

更新日志主要是注明每次更新之后，更新了哪些內(nèi)容、更新人和更新日期，如下圖所示。

01 業(yè)務(wù)背景、產(chǎn)品目標(biāo)、用戶(hù)人群和用戶(hù)目標(biāo)

作為一個(gè)交互設(shè)計(jì)師。在我們接到需求之后，首先需要弄清楚的是產(chǎn)生需求的業(yè)務(wù)背景是什么。其次是基于業(yè)務(wù)背景了解產(chǎn)品的目標(biāo)是什么。最后弄清楚產(chǎn)品的用戶(hù)人群有哪些，用戶(hù)目標(biāo)是哪些。

交互設(shè)計(jì)師通過(guò)從產(chǎn)品經(jīng)理或者其他需求發(fā)起方那里了解需求生產(chǎn)的業(yè)務(wù)背景，了解為什么要做這個(gè)需求。在了解清楚之后，追溯需求最原始本質(zhì)。

在我們實(shí)際工作的大部分情況下，產(chǎn)品經(jīng)理是不會(huì)在需求文檔中將業(yè)務(wù)背景寫(xiě)清晰，這時(shí)候我們交互設(shè)計(jì)師就可以將業(yè)務(wù)背景在交互文檔中輸出，并清晰的展示出來(lái)。

業(yè)務(wù)背景是什么?業(yè)務(wù)背景通常是我們?yōu)槭裁匆鲞@個(gè)功能。通過(guò)做這個(gè)功能，對(duì)業(yè)務(wù)有什么幫助。通過(guò)業(yè)務(wù)背景，我們可以推演出業(yè)務(wù)訴求，并得到對(duì)應(yīng)的產(chǎn)品目標(biāo)。

產(chǎn)品目標(biāo)是什么?產(chǎn)品目標(biāo)是產(chǎn)品能得到什么樣的結(jié)果，對(duì)產(chǎn)品來(lái)說(shuō)可以獲得什么樣的好處。所以在交互文檔的設(shè)計(jì)中要重點(diǎn)體現(xiàn)出產(chǎn)品目標(biāo)。通過(guò)明確產(chǎn)品目標(biāo)，可以清晰的指導(dǎo)我們做交互方案。

用戶(hù)人群是哪些?用戶(hù)人群主要是通過(guò)我們對(duì)現(xiàn)有產(chǎn)品的用戶(hù)畫(huà)像得到，并推算出使用這個(gè)需求的用戶(hù)人群是哪一類(lèi)人，通過(guò)明確的用戶(hù)人群，這樣我們?cè)谧鲈O(shè)計(jì)過(guò)程中，可以很清晰知道這個(gè)需求為誰(shuí)而做。

用戶(hù)目標(biāo)是什么?用戶(hù)希望通過(guò)使用這個(gè)功能達(dá)到什么樣的好處或目的。

接下來(lái)我以一個(gè)虛構(gòu)的案例來(lái)講解如何輸出移動(dòng)端交互文檔。

案例：瀏覽器的競(jìng)猜拉新活動(dòng)。該活動(dòng)的需求是通過(guò)瀏覽器的金幣競(jìng)猜活動(dòng)讓用戶(hù)與產(chǎn)品有一個(gè)拉新互動(dòng)，提升新用戶(hù)和老用戶(hù)的日活量，提升活躍度?；谶@個(gè)需求，我們交互設(shè)計(jì)師該如何進(jìn)行設(shè)計(jì)并輸出一份交互文檔呢?

根據(jù)以上所說(shuō)：我們?cè)谠O(shè)計(jì)之前，需要考慮業(yè)務(wù)背景、產(chǎn)品目標(biāo)、用戶(hù)人群和用戶(hù)目標(biāo)。

經(jīng)過(guò)分析，可以得到這個(gè)需求的業(yè)務(wù)背景、產(chǎn)品目標(biāo)、用戶(hù)人群和用戶(hù)目的如下：

業(yè)務(wù)背景：

讓用戶(hù)通過(guò)使用某瀏覽器的一些指定任務(wù)賺取金幣，并將金幣用于消費(fèi)(競(jìng)猜活動(dòng))，從而形成一個(gè)完整的良性閉環(huán)。

產(chǎn)品目標(biāo)：

1.通過(guò)活動(dòng)分享，提升瀏覽器的下載量;

2.通過(guò)用戶(hù)賺取金幣的方式，提升用戶(hù)使用某瀏覽器時(shí)長(zhǎng);

3.通過(guò)活動(dòng)引導(dǎo)用戶(hù)分享，從而得到產(chǎn)品活動(dòng)的更多曝光。

用戶(hù)人群：

1.已使用某瀏覽器并喜歡獲利活動(dòng)的用戶(hù);

2.未使用過(guò)瀏覽器的但喜歡獲利活動(dòng)的用戶(hù)。

用戶(hù)目標(biāo)：

簡(jiǎn)單方便的完成競(jìng)猜活動(dòng)，并希望能夠獲獎(jiǎng)。

02 業(yè)務(wù)規(guī)則

關(guān)于產(chǎn)品的業(yè)務(wù)規(guī)則，可能需要同產(chǎn)品經(jīng)理、業(yè)務(wù)方和運(yùn)營(yíng)一起溝通討論。這個(gè)里面涉及到整個(gè)產(chǎn)品業(yè)務(wù)的規(guī)則。在實(shí)際工作中，我們交互會(huì)碰到兩種情況：

1.產(chǎn)品經(jīng)理會(huì)和業(yè)務(wù)或運(yùn)營(yíng)溝通，然后輸出一份業(yè)務(wù)規(guī)則，這時(shí)候我們交互可以認(rèn)真閱讀并梳理業(yè)務(wù)規(guī)則，如果覺(jué)得不合理的話，可以和產(chǎn)品經(jīng)理討論溝通，并修改業(yè)務(wù)規(guī)則使之變得更合理，并輸出在交互文檔中。

2.產(chǎn)品經(jīng)理只是簡(jiǎn)單的有個(gè)業(yè)務(wù)規(guī)則想法，這時(shí)候需要我們交互設(shè)計(jì)師幫忙一起溝通并細(xì)化其業(yè)務(wù)規(guī)則，并輸出在交互文檔中。

瀏覽器競(jìng)猜拉新這個(gè)需求涉及到的業(yè)務(wù)規(guī)則有：活動(dòng)時(shí)間規(guī)則、金幣產(chǎn)生規(guī)則，金幣消費(fèi)規(guī)則、資金池消費(fèi)規(guī)則、活動(dòng)發(fā)布規(guī)則和提現(xiàn)規(guī)則。對(duì)于這些，如果產(chǎn)品經(jīng)理沒(méi)有明確的制定，或者制定的不好不夠細(xì)致。那么我們交互可以來(lái)進(jìn)行梳理制定。

在制定規(guī)則的過(guò)程中，需要我們?cè)O(shè)計(jì)師將活動(dòng)的開(kāi)始前、過(guò)程中、到結(jié)束后所有的活動(dòng)流程全部想明白，并將整個(gè)活動(dòng)流程跑通。并給一個(gè)合理的規(guī)則定義，如果規(guī)則制定的不合理，上線之后，整個(gè)活動(dòng)會(huì)因?yàn)橐?guī)則漏洞導(dǎo)致崩掉。

下圖所示就是我定義的所有規(guī)則：

03 用戶(hù)流程圖

用戶(hù)流程即我們?cè)O(shè)計(jì)師要梳理用戶(hù)在使用過(guò)程中的各種場(chǎng)景流程，通過(guò)用戶(hù)流程圖可避免遺漏場(chǎng)景，避免交互方案遺漏。

任何一個(gè)功能或者活動(dòng)，第一個(gè)問(wèn)題就是入口設(shè)置在哪?所以我們需要設(shè)計(jì)活動(dòng)入口的邏輯。

活動(dòng)的用戶(hù)主流程就是用戶(hù)正常進(jìn)行活動(dòng)時(shí)的流程。

區(qū)別于主流程對(duì)應(yīng)的就是金幣不足時(shí)的異常流程。

如果用戶(hù)競(jìng)猜獲獎(jiǎng)了，那么對(duì)應(yīng)的問(wèn)題就是提現(xiàn)，由于瀏覽器目前還沒(méi)有錢(qián)包，所以設(shè)計(jì)為通過(guò)綁定微信提現(xiàn)。

活動(dòng)為了曝光率，需要重點(diǎn)設(shè)計(jì)分享功能和入口。當(dāng)用戶(hù)已中獎(jiǎng)時(shí)，則需要提示在使用產(chǎn)品的用戶(hù)已中獎(jiǎng)。當(dāng)活動(dòng)過(guò)期時(shí)，需要設(shè)計(jì)對(duì)應(yīng)過(guò)期的活動(dòng)界面。

通過(guò)以上的簡(jiǎn)單分析和深入的用戶(hù)流程圖梳理總結(jié)后，可得到以下7種用戶(hù)交互流程圖：

1.競(jìng)猜活動(dòng)的入口設(shè)計(jì)在哪里

2.金幣充足-競(jìng)猜活動(dòng)主流程

3.金幣不足時(shí)

4.提現(xiàn)流程

5.活動(dòng)分享流程及所有入口

6.已中獎(jiǎng)時(shí)場(chǎng)景

7.活動(dòng)過(guò)期時(shí)場(chǎng)景

04 設(shè)計(jì)原則

這里的設(shè)計(jì)原則非常見(jiàn)的一些交互或者視覺(jué)設(shè)計(jì)原則，而是在設(shè)計(jì)這個(gè)活動(dòng)交互方案中需要遵守的原則。這里的設(shè)計(jì)原則和業(yè)務(wù)強(qiáng)掛鉤。

在做這個(gè)活動(dòng)設(shè)計(jì)之前，要明確這個(gè)活動(dòng)在設(shè)計(jì)過(guò)程中的原則應(yīng)該有那些，這樣的話，我們?cè)谠O(shè)計(jì)整個(gè)活動(dòng)的各種場(chǎng)景時(shí)，可以清晰的讓交互流程和頁(yè)面布局按照既定的原則走，這樣才更具有全局觀。

這個(gè)活動(dòng)的產(chǎn)品目標(biāo)是通過(guò)活動(dòng)獲得產(chǎn)品的曝光和下載，則需要滿(mǎn)足的原則是引導(dǎo)用戶(hù)快速找到活動(dòng)入口，并提供活動(dòng)簡(jiǎn)介說(shuō)明，吸引用戶(hù)參加并順利參與。

這個(gè)活動(dòng)的用戶(hù)目標(biāo)是簡(jiǎn)單方便的完成競(jìng)猜活動(dòng)，并希望能夠獲獎(jiǎng)。則在設(shè)計(jì)過(guò)程中要簡(jiǎn)單易懂，用戶(hù)沒(méi)有認(rèn)知和操作成本。為了讓用戶(hù)有獲獎(jiǎng)的機(jī)會(huì)，讓用戶(hù)感受到公平，需要及時(shí)的向用戶(hù)反饋中獎(jiǎng)用戶(hù)。

因?yàn)榛顒?dòng)只是臨時(shí)的，所以需要減少該活動(dòng)對(duì)絕大部分非目標(biāo)用戶(hù)產(chǎn)生打擾或反感。

基于以上的分析，總結(jié)之后制定以下設(shè)計(jì)原則：

1.引導(dǎo)用戶(hù)快速找到活動(dòng)入口，并順利參與

2.提供活動(dòng)簡(jiǎn)介說(shuō)明，吸引用戶(hù)參加

3.競(jìng)猜活動(dòng)頁(yè)面，簡(jiǎn)單易懂，用戶(hù)沒(méi)有認(rèn)知和操作成本

4.盡量減少該活動(dòng)對(duì)絕大部分用戶(hù)產(chǎn)生打擾或反感

5.保證公平公正，及時(shí)向用戶(hù)反饋中獎(jiǎng)人數(shù)

以上的設(shè)計(jì)原則是為之后的交互流程確定思路和設(shè)計(jì)指導(dǎo)。

05 交互流程標(biāo)注

基于上面的用戶(hù)流程圖，可以得到7個(gè)用戶(hù)操作流程，即7個(gè)交互流程標(biāo)注。

目前我覺(jué)得交互流程標(biāo)注比較好的展示方式，是按照一個(gè)主流程在一個(gè)站點(diǎn)地圖/畫(huà)板的形式展示。當(dāng)一個(gè)主流程中存在幾個(gè)支線操作流程時(shí)，可以分別在一個(gè)站點(diǎn)地圖/畫(huà)板中，展示出來(lái)。同時(shí)用標(biāo)題區(qū)分說(shuō)明分支流程的操作名字。

如下圖所示：

在涉及到異常場(chǎng)景，且可以全局性復(fù)用的情況，則只需要全局性組件說(shuō)明即可，不用每個(gè)流程都展示其異常場(chǎng)景組件或者頁(yè)面。

全局組件指的是整個(gè)產(chǎn)品通用的組件，例如全局?jǐn)嗑W(wǎng)，操作成功、操作失敗、加載、空數(shù)據(jù)界面，404等

·全局?jǐn)嗑W(wǎng)：一般是在首頁(yè)使用tips提示。用戶(hù)在其他界面點(diǎn)擊操作時(shí)，也會(huì)出現(xiàn)toast反饋提示用戶(hù)。也有一些app在用戶(hù)進(jìn)入出現(xiàn)對(duì)話框提示用戶(hù)網(wǎng)絡(luò)異常。相對(duì)于對(duì)話框，使用tips對(duì)用戶(hù)的干擾更小。

·操作成功：一般操作成功都是根據(jù)具體的使用場(chǎng)景對(duì)出對(duì)應(yīng)的提示。

·操作失敗：異常情況導(dǎo)致操作失敗，這時(shí)需要統(tǒng)一的提示，通常使用toast，也有一些使用對(duì)話框強(qiáng)提示用戶(hù)。

·加載：涉及到全局加載和局部加載，全局加載在設(shè)計(jì)中要統(tǒng)一說(shuō)明，例如上一個(gè)界面點(diǎn)擊進(jìn)入下一個(gè)界面，使用的全局加載就需要說(shuō)明。如果是一些小場(chǎng)景的加載，那么需要特殊說(shuō)明。例如上拉加載，下拉加載，局部小區(qū)域加載等。

空數(shù)據(jù)類(lèi)型一共有三類(lèi)：

1.初始狀態(tài)的定義：初始化狀態(tài)，沒(méi)有任何內(nèi)容，需要用戶(hù)進(jìn)行某種操作才能產(chǎn)生內(nèi)容的界面。

2.清空狀態(tài)的定義：通過(guò)刪除或其他用戶(hù)操作，清空當(dāng)前的頁(yè)面內(nèi)容，產(chǎn)生了空界面，這時(shí)候需要有明確的提示，且告知用戶(hù)該如何處理。

3.出錯(cuò)狀態(tài)的定義：由于網(wǎng)絡(luò)、服務(wù)器或者沒(méi)有找他其他結(jié)果等原因?qū)е聼o(wú)法加載內(nèi)容，產(chǎn)生了空界面，這時(shí)候需要有明確的提示，且告知用戶(hù)該如何處理。用戶(hù)操作反饋的無(wú)結(jié)果界面也可以用這樣的思路來(lái)設(shè)計(jì)。

下圖是H5競(jìng)猜拉新活動(dòng)部分交互流程標(biāo)注示意圖：

在羅列流程過(guò)程中，盡量一條線走到頭，避免出現(xiàn)線與線之間的交叉，界面之間各種線穿插導(dǎo)致的后果就是閱讀起來(lái)很亂，體驗(yàn)特別差，邏輯也容易出問(wèn)題。同時(shí)每一個(gè)界面下面寫(xiě)上對(duì)應(yīng)的標(biāo)注說(shuō)明。

結(jié)語(yǔ)

以上就是如何輸出移動(dòng)端交互文檔說(shuō)明，僅供參考，大家可以按照自己公司的實(shí)際情況，進(jìn)行合理的增加、刪除或修改，使之文檔更符合自身公司/項(xiàng)目組。


猜你喜歡：