移動(dòng)端交互輸出文檔,應(yīng)該怎么寫?
?編輯導(dǎo)讀:交互設(shè)計(jì)師在團(tuán)隊(duì)一般承擔(dān)著承上啟下的作用,上游對接視覺設(shè)計(jì)師和項(xiàng)目經(jīng)理,下游對接視覺設(shè)計(jì)師和開發(fā)工程師,他們都是根據(jù)交互設(shè)計(jì)師輸出的交互文檔作為下一步的工作的參考,交互文檔的重要性不言而喻。
本文作者從項(xiàng)目實(shí)踐出發(fā),結(jié)合案例等分享了移動(dòng)端交互輸出文檔的撰寫步驟以及過程中需要注意的關(guān)鍵問題,供大家一同參考和學(xué)習(xí)。
一套完整且比較優(yōu)秀的移動(dòng)端交互文檔,我認(rèn)為可以包含以下部分:
- 業(yè)務(wù)背景、產(chǎn)品目標(biāo)、用戶人群和用戶目標(biāo)
- 業(yè)務(wù)規(guī)則定義
- 用戶流程圖
- 設(shè)計(jì)原則
- 交互流程標(biāo)注
當(dāng)然也可以增加產(chǎn)品概況和更新日志等內(nèi)容,產(chǎn)品概況即簡單說明這個(gè)產(chǎn)品版本號和產(chǎn)品相關(guān)人員。
更新日志主要是注明每次更新之后,更新了哪些內(nèi)容、更新人和更新日期,如下圖所示。
01 業(yè)務(wù)背景、產(chǎn)品目標(biāo)、用戶人群和用戶目標(biāo)
作為一個(gè)交互設(shè)計(jì)師。在我們接到需求之后,首先需要弄清楚的是產(chǎn)生需求的業(yè)務(wù)背景是什么。其次是基于業(yè)務(wù)背景了解產(chǎn)品的目標(biāo)是什么。最后弄清楚產(chǎn)品的用戶人群有哪些,用戶目標(biāo)是哪些。
交互設(shè)計(jì)師通過從產(chǎn)品經(jīng)理或者其他需求發(fā)起方那里了解需求生產(chǎn)的業(yè)務(wù)背景,了解為什么要做這個(gè)需求。在了解清楚之后,追溯需求最原始本質(zhì)。
在我們實(shí)際工作的大部分情況下,產(chǎn)品經(jīng)理是不會(huì)在需求文檔中將業(yè)務(wù)背景寫清晰,這時(shí)候我們交互設(shè)計(jì)師就可以將業(yè)務(wù)背景在交互文檔中輸出,并清晰的展示出來。
- 業(yè)務(wù)背景是什么?業(yè)務(wù)背景通常是我們?yōu)槭裁匆鲞@個(gè)功能。通過做這個(gè)功能,對業(yè)務(wù)有什么幫助。通過業(yè)務(wù)背景,我們可以推演出業(yè)務(wù)訴求,并得到對應(yīng)的產(chǎn)品目標(biāo)。
- 產(chǎn)品目標(biāo)是什么?產(chǎn)品目標(biāo)是產(chǎn)品能得到什么樣的結(jié)果,對產(chǎn)品來說可以獲得什么樣的好處。所以在交互文檔的設(shè)計(jì)中要重點(diǎn)體現(xiàn)出產(chǎn)品目標(biāo)。通過明確產(chǎn)品目標(biāo),可以清晰的指導(dǎo)我們做交互方案。
- 用戶人群是哪些?用戶人群主要是通過我們對現(xiàn)有產(chǎn)品的用戶畫像得到,并推算出使用這個(gè)需求的用戶人群是哪一類人,通過明確的用戶人群,這樣我們在做設(shè)計(jì)過程中,可以很清晰知道這個(gè)需求為誰而做。
- 用戶目標(biāo)是什么?用戶希望通過使用這個(gè)功能達(dá)到什么樣的好處或目的。
接下來我以一個(gè)虛構(gòu)的案例來講解如何輸出移動(dòng)端交互文檔。
案例:瀏覽器的競猜拉新活動(dòng)。該活動(dòng)的需求是通過瀏覽器的金幣競猜活動(dòng)讓用戶與產(chǎn)品有一個(gè)拉新互動(dòng),提升新用戶和老用戶的日活量,提升活躍度。
基于這個(gè)需求,我們交互設(shè)計(jì)師該如何進(jìn)行設(shè)計(jì)并輸出一份交互文檔呢?
根據(jù)以上所說:我們在設(shè)計(jì)之前,需要考慮業(yè)務(wù)背景、產(chǎn)品目標(biāo)、用戶人群和用戶目標(biāo)。
經(jīng)過分析,可以得到這個(gè)需求的業(yè)務(wù)背景、產(chǎn)品目標(biāo)、用戶人群和用戶目的如下:
業(yè)務(wù)背景:
讓用戶通過使用某瀏覽器的一些指定任務(wù)賺取金幣,并將金幣用于消費(fèi)(競猜活動(dòng)),從而形成一個(gè)完整的良性閉環(huán)。
產(chǎn)品目標(biāo):
- 通過活動(dòng)分享,提升瀏覽器的下載量;
- 通過用戶賺取金幣的方式,提升用戶使用某瀏覽器時(shí)長;
- 通過活動(dòng)引導(dǎo)用戶分享,從而得到產(chǎn)品活動(dòng)的更多曝光。
用戶人群:
- 已使用某瀏覽器并喜歡獲利活動(dòng)的用戶;
- 未使用過瀏覽器的但喜歡獲利活動(dòng)的用戶。
用戶目標(biāo):
簡單方便的完成競猜活動(dòng),并希望能夠獲獎(jiǎng)。
02 業(yè)務(wù)規(guī)則
關(guān)于產(chǎn)品的業(yè)務(wù)規(guī)則,可能需要同產(chǎn)品經(jīng)理、業(yè)務(wù)方和運(yùn)營一起溝通討論。這個(gè)里面涉及到整個(gè)產(chǎn)品業(yè)務(wù)的規(guī)則。在實(shí)際工作中,我們交互會(huì)碰到兩種情況:
- 產(chǎn)品經(jīng)理會(huì)和業(yè)務(wù)或運(yùn)營溝通,然后輸出一份業(yè)務(wù)規(guī)則,這時(shí)候我們交互可以認(rèn)真閱讀并梳理業(yè)務(wù)規(guī)則,如果覺得不合理的話,可以和產(chǎn)品經(jīng)理討論溝通,并修改業(yè)務(wù)規(guī)則使之變得更合理,并輸出在交互文檔中。
- 產(chǎn)品經(jīng)理只是簡單的有個(gè)業(yè)務(wù)規(guī)則想法,這時(shí)候需要我們交互設(shè)計(jì)師幫忙一起溝通并細(xì)化其業(yè)務(wù)規(guī)則,并輸出在交互文檔中。
瀏覽器競猜拉新這個(gè)需求涉及到的業(yè)務(wù)規(guī)則有:活動(dòng)時(shí)間規(guī)則、金幣產(chǎn)生規(guī)則,金幣消費(fèi)規(guī)則、資金池消費(fèi)規(guī)則、活動(dòng)發(fā)布規(guī)則和提現(xiàn)規(guī)則。對于這些,如果產(chǎn)品經(jīng)理沒有明確的制定,或者制定的不好不夠細(xì)致。那么我們交互可以來進(jìn)行梳理制定。
在制定規(guī)則的過程中,需要我們設(shè)計(jì)師將活動(dòng)的開始前、過程中、到結(jié)束后所有的活動(dòng)流程全部想明白,并將整個(gè)活動(dòng)流程跑通。并給一個(gè)合理的規(guī)則定義,如果規(guī)則制定的不合理,上線之后,整個(gè)活動(dòng)會(huì)因?yàn)橐?guī)則漏洞導(dǎo)致崩掉。
下圖所示就是我定義的所有規(guī)則:
03 用戶流程圖
用戶流程即我們設(shè)計(jì)師要梳理用戶在使用過程中的各種場景流程,通過用戶流程圖可避免遺漏場景,避免交互方案遺漏。
任何一個(gè)功能或者活動(dòng),第一個(gè)問題就是入口設(shè)置在哪?所以我們需要設(shè)計(jì)活動(dòng)入口的邏輯。
活動(dòng)的用戶主流程就是用戶正常進(jìn)行活動(dòng)時(shí)的流程。
區(qū)別于主流程對應(yīng)的就是金幣不足時(shí)的異常流程。
如果用戶競猜獲獎(jiǎng)了,那么對應(yīng)的問題就是提現(xiàn),由于瀏覽器目前還沒有錢包,所以設(shè)計(jì)為通過綁定微信提現(xiàn)。
活動(dòng)為了曝光率,需要重點(diǎn)設(shè)計(jì)分享功能和入口。當(dāng)用戶已中獎(jiǎng)時(shí),則需要提示在使用產(chǎn)品的用戶已中獎(jiǎng)。當(dāng)活動(dòng)過期時(shí),需要設(shè)計(jì)對應(yīng)過期的活動(dòng)界面。
通過以上的簡單分析和深入的用戶流程圖梳理總結(jié)后,可得到以下7種用戶交互流程圖:
- 競猜活動(dòng)的入口設(shè)計(jì)在哪里
- 金幣充足-競猜活動(dòng)主流程
- 金幣不足時(shí)
- 提現(xiàn)流程
- 活動(dòng)分享流程及所有入口
- 已中獎(jiǎng)時(shí)場景
- 活動(dòng)過期時(shí)場景
04 設(shè)計(jì)原則
這里的設(shè)計(jì)原則非常見的一些交互或者視覺設(shè)計(jì)原則,而是在設(shè)計(jì)這個(gè)活動(dòng)交互方案中需要遵守的原則。這里的設(shè)計(jì)原則和業(yè)務(wù)強(qiáng)掛鉤。
在做這個(gè)活動(dòng)設(shè)計(jì)之前,要明確這個(gè)活動(dòng)在設(shè)計(jì)過程中的原則應(yīng)該有那些,這樣的話,我們在設(shè)計(jì)整個(gè)活動(dòng)的各種場景時(shí),可以清晰的讓交互流程和頁面布局按照既定的原則走,這樣才更具有全局觀。
這個(gè)活動(dòng)的產(chǎn)品目標(biāo)是通過活動(dòng)獲得產(chǎn)品的曝光和下載,則需要滿足的原則是引導(dǎo)用戶快速找到活動(dòng)入口,并提供活動(dòng)簡介說明,吸引用戶參加并順利參與。
這個(gè)活動(dòng)的用戶目標(biāo)是簡單方便的完成競猜活動(dòng),并希望能夠獲獎(jiǎng)。則在設(shè)計(jì)過程中要簡單易懂,用戶沒有認(rèn)知和操作成本。為了讓用戶有獲獎(jiǎng)的機(jī)會(huì),讓用戶感受到公平,需要及時(shí)的向用戶反饋中獎(jiǎng)用戶。
因?yàn)榛顒?dòng)只是臨時(shí)的,所以需要減少該活動(dòng)對絕大部分非目標(biāo)用戶產(chǎn)生打擾或反感。
基于以上的分析,總結(jié)之后制定以下設(shè)計(jì)原則:
- 引導(dǎo)用戶快速找到活動(dòng)入口,并順利參與
- 提供活動(dòng)簡介說明,吸引用戶參加
- 競猜活動(dòng)頁面,簡單易懂,用戶沒有認(rèn)知和操作成本
- 盡量減少該活動(dòng)對絕大部分用戶產(chǎn)生打擾或反感
- 保證公平公正,及時(shí)向用戶反饋中獎(jiǎng)人數(shù)
以上的設(shè)計(jì)原則是為之后的交互流程確定思路和設(shè)計(jì)指導(dǎo)。
05 交互流程標(biāo)注
基于上面的用戶流程圖,可以得到7個(gè)用戶操作流程,即7個(gè)交互流程標(biāo)注。
目前我覺得交互流程標(biāo)注比較好的展示方式,是按照一個(gè)主流程在一個(gè)站點(diǎn)地圖/畫板的形式展示。當(dāng)一個(gè)主流程中存在幾個(gè)支線操作流程時(shí),可以分別在一個(gè)站點(diǎn)地圖/畫板中,展示出來。同時(shí)用標(biāo)題區(qū)分說明分支流程的操作名字。
如下圖所示:
在涉及到異常場景,且可以全局性復(fù)用的情況,則只需要全局性組件說明即可,不用每個(gè)流程都展示其異常場景組件或者頁面。
全局組件指的是整個(gè)產(chǎn)品通用的組件,例如全局?jǐn)嗑W(wǎng),操作成功、操作失敗、加載、空數(shù)據(jù)界面,404等
- 全局?jǐn)嗑W(wǎng):一般是在首頁使用tips提示。用戶在其他界面點(diǎn)擊操作時(shí),也會(huì)出現(xiàn)toast反饋提示用戶。也有一些app在用戶進(jìn)入出現(xiàn)對話框提示用戶網(wǎng)絡(luò)異常。相對于對話框,使用tips對用戶的干擾更小。
- 操作成功:一般操作成功都是根據(jù)具體的使用場景對出對應(yīng)的提示。
- 操作失敗:異常情況導(dǎo)致操作失敗,這時(shí)需要統(tǒng)一的提示,通常使用toast,也有一些使用對話框強(qiáng)提示用戶。
- 加載:涉及到全局加載和局部加載,全局加載在設(shè)計(jì)中要統(tǒng)一說明,例如上一個(gè)界面點(diǎn)擊進(jìn)入下一個(gè)界面,使用的全局加載就需要說明。如果是一些小場景的加載,那么需要特殊說明。例如上拉加載,下拉加載,局部小區(qū)域加載等。
空數(shù)據(jù)類型一共有三類:
- 初始狀態(tài)的定義:初始化狀態(tài),沒有任何內(nèi)容,需要用戶進(jìn)行某種操作才能產(chǎn)生內(nèi)容的界面。
- 清空狀態(tài)的定義:通過刪除或其他用戶操作,清空當(dāng)前的頁面內(nèi)容,產(chǎn)生了空界面,這時(shí)候需要有明確的提示,且告知用戶該如何處理。
- 出錯(cuò)狀態(tài)的定義:由于網(wǎng)絡(luò)、服務(wù)器或者沒有找他其他結(jié)果等原因?qū)е聼o法加載內(nèi)容,產(chǎn)生了空界面,這時(shí)候需要有明確的提示,且告知用戶該如何處理。用戶操作反饋的無結(jié)果界面也可以用這樣的思路來設(shè)計(jì)。
下圖是H5競猜拉新活動(dòng)部分交互流程標(biāo)注示意圖:
在羅列流程過程中,盡量一條線走到頭,避免出現(xiàn)線與線之間的交叉,界面之間各種線穿插導(dǎo)致的后果就是閱讀起來很亂,體驗(yàn)特別差,邏輯也容易出問題。同時(shí)每一個(gè)界面下面寫上對應(yīng)的標(biāo)注說明。
結(jié)語
以上就是如何輸出移動(dòng)端交互文檔說明,僅供參考,大家可以按照自己公司的實(shí)際情況,進(jìn)行合理的增加、刪除或修改,使之文檔更符合自身公司/項(xiàng)目組。
#專欄作家#
UX,人人都是產(chǎn)品經(jīng)理專欄作家。前美團(tuán)點(diǎn)評高級交互設(shè)計(jì)師。微信公眾號:Echo的設(shè)計(jì)筆記,歡迎關(guān)注
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自 Unsplash,基于 CC0 協(xié)議
導(dǎo)語有誤,上游對接產(chǎn)品經(jīng)理和項(xiàng)目經(jīng)理
能不能分享一份交互文檔給我學(xué)習(xí)一下 謝謝
感覺你都可以去做產(chǎn)品了