交互思考:怎么設(shè)計(jì)任務(wù)流程

2024-6-21    資深UI設(shè)計(jì)者

交互思考:怎么設(shè)計(jì)任務(wù)流程

 
 
 

任務(wù),到底是怎么來的?是原本就存在的?還是人為設(shè)計(jì)而來的?


游戲中npc會(huì)交給你一個(gè)任務(wù),完成任務(wù)獲得獎(jiǎng)勵(lì)。每一個(gè)任務(wù)都會(huì)有一個(gè)目標(biāo),比如你要幫助農(nóng)夫艾爾趕跑正在破壞農(nóng)田的地精,你的任務(wù)就是殺死100只地精,這是農(nóng)夫給你的任務(wù)。你現(xiàn)在有點(diǎn)內(nèi)急,你想去廁所解決這個(gè)燃眉之急,所以你的目標(biāo)是去解決內(nèi)急這個(gè)問題,任務(wù)是找到廁所,進(jìn)入包廂,進(jìn)行“作業(yè)”。你會(huì)覺得前者是農(nóng)夫設(shè)計(jì)好的任務(wù)讓你來完成,而后者是自發(fā)的,是自己安排的任務(wù)?

 

不對,其實(shí)后者也是經(jīng)營者安排好的任務(wù)。當(dāng)用戶有需要的時(shí)候才會(huì)進(jìn)入這個(gè)任務(wù)。

 

再舉個(gè)例子,在家里吃飯、喝水、洗衣服,其實(shí)每一個(gè)都是任務(wù),設(shè)計(jì)師會(huì)根據(jù)用戶需求去設(shè)計(jì)“任務(wù)”流程,比如你在衛(wèi)生間洗完澡,你的臟衣服放在哪里,如果你要洗衣服需要把衣服從衛(wèi)生間拿到哪里去洗,中間要經(jīng)過哪些空間,洗完的時(shí)候衣服晾曬在哪里,晾曬完后又要收入到哪里,比如我現(xiàn)在的工作間外就是一個(gè)陽臺,陽臺上放著洗衣機(jī),每當(dāng)我開始碼字的時(shí)候,就會(huì)有人用洗衣機(jī)洗衣服…...但是這個(gè)對于任務(wù)的執(zhí)行者而言是最好的方案,洗衣機(jī)沒有其他可放置的空間。

 

再說個(gè)例子,還是上廁所的,有點(diǎn)俗大家不要見怪。你們是否有想過,為什么廁所里的洗手池不放在小隔間里面?如果根據(jù)就近原則,上完廁所直接洗手不應(yīng)該更快嗎?顯然,場景不是這么單一的,大家來廁所不僅僅是為了上號,可能只是洗個(gè)手、抽個(gè)煙、補(bǔ)個(gè)妝,如果隔間里放洗手池,那對于這部分人而言只能等別人上完號才能洗手了?顯然是不行的,如果不考慮成本和空間的話,里外都放一個(gè)會(huì)更好嗎?顯然也不行,對于經(jīng)營者而言,還要考慮效率、利用率等

 

以上兩則是多人空間中的任務(wù)設(shè)計(jì),任務(wù)是人為設(shè)計(jì)的,根據(jù)不同的目標(biāo),任務(wù)的效率、體驗(yàn)都會(huì)有一定變化。

 

那么任務(wù)該怎么設(shè)計(jì)才能讓效率和體驗(yàn)都更好呢?效率并不意味著步驟少,比如現(xiàn)在有一個(gè)把大象放進(jìn)冰箱的任務(wù),大家都知道只需要三步就可以把它放進(jìn)去,但是如果塞不進(jìn)怎么辦呢?那是不是要切塊或者切塊后放到兩個(gè)冰箱。

 

所以當(dāng)我們在設(shè)計(jì)任務(wù)的時(shí)候首先需要設(shè)定任務(wù)的關(guān)鍵節(jié)點(diǎn),比如開門-塞象-關(guān)門,然后每個(gè)節(jié)點(diǎn)會(huì)出現(xiàn)更多的子節(jié)點(diǎn),比如門鎖上了需要先解鎖,大象塞不進(jìn)要先切塊等等。

 

 

 

同理我們用一個(gè)買電影票的任務(wù)流程來解釋一下,用戶的目標(biāo)是想在線上預(yù)定電影票去線下看電影,所以他在線上需要購買一張票。那么為了讓用戶能夠成功買到票,我們針對這個(gè)目標(biāo)來設(shè)定幾個(gè)關(guān)鍵的節(jié)點(diǎn):1.選擇電影 2.選擇日期 3.選擇影院 4.選擇時(shí)間 5.選擇座位6.確認(rèn)訂單 7.支付。

 

有同學(xué)一定想問,這些關(guān)鍵節(jié)點(diǎn)是怎么列出來的?為什么一定是這樣的順序呢?首先關(guān)鍵節(jié)點(diǎn)在一開始列的時(shí)候順序可以是打亂的,所以第一步需要大家頭腦風(fēng)暴,先列出關(guān)鍵節(jié)點(diǎn),關(guān)鍵節(jié)點(diǎn)也可以理解為用戶的關(guān)鍵行為,行為的顆粒度可以大一點(diǎn)。

 

之后再根據(jù)用戶場景進(jìn)行排序。比如可能我們在列的時(shí)候會(huì)先列出選擇影院再列選擇時(shí)間,當(dāng)我們分析過用戶場景和真實(shí)需求后,選擇日期就會(huì)排在影院之前。也有同學(xué)會(huì)說,我一般是先選擇電影院再考慮看什么電影的,確實(shí),但這種場景一定是少數(shù),比如你在外地出差,你突然想看電影,你會(huì)先找附近有什么電影院,但是用戶大多數(shù)情況都是先想好要看什么電影,再考慮什么時(shí)候看,去哪里看。

 

那又有同學(xué)要說了,選擇日期和選擇電影院很難說誰先誰后,那怎么判斷呢?我們可以給這些關(guān)鍵行為一個(gè)具像化呈現(xiàn):

 

 

 

 

這樣就能很清楚判斷誰先誰后了,選擇影院需要有一個(gè)影院列表,選擇日期需要有日期的控制器,可以用tab、雙聯(lián)picker、展開式布局,所以通過分析影院的類型,用戶需要進(jìn)行篩選和瀏覽,這樣屬性的內(nèi)容就要放在界面的下方,同時(shí)日期單獨(dú)處理成一個(gè)界面也顯得效率很低,所以日期在前影院在后是比較合理的,而日期選擇的方式也是考慮用戶看電影不像買飛機(jī)或酒店票需要非常大的時(shí)間跨度,所以一周內(nèi)的tab時(shí)間選擇就可以了。

 

到目前為止,我們只是對關(guān)鍵行為節(jié)點(diǎn)進(jìn)行了梳理,還沒有呈現(xiàn)到界面上去,所以根據(jù)這些關(guān)鍵行為我們再進(jìn)行頁面維度的填充。

 

1.選擇電影,怎么選擇

 

這里又要區(qū)分場景了

 

場景1:我知道自己要看哪本電影,也知道電影的基本內(nèi)容,只要讓我找到那本電影在哪里就可以了。

場景2:我不知道要看什么電影,最近電影荒。滿足場景1的需求我們需要一個(gè)所有電影的列表,滿足場景2的需求我們需要一個(gè)電影詳情介紹,并且電影詳情介紹也會(huì)部分存在于場景1中。

 

 

 

 

列表和詳情,顯然不能做在一個(gè)界面中,那么這里就可以拆成兩個(gè)界面了。

 

2.選擇日期和影院,剛才解釋過了,那么就放在一個(gè)界面中。

 

3.選擇時(shí)間,每個(gè)影院的排片時(shí)間不同,所以時(shí)間需要單獨(dú)選擇。也獨(dú)立成一個(gè)界面。

 

4.選擇座位,如果你要硬塞,其實(shí)是可以把選擇座位和時(shí)間放在一張界面中的,因?yàn)橄瘳F(xiàn)在很多線上購票軟件在選擇座位的時(shí)候也能夠選擇時(shí)間。在選擇時(shí)間的時(shí)候也能選擇日期和影片。

 

所以這里又要提到線性任務(wù),如果一個(gè)任務(wù)是線性的,并且任務(wù)節(jié)點(diǎn)中的用戶場景會(huì)出現(xiàn)重復(fù)的情況,那么需要讓用戶在當(dāng)前頁面就可以進(jìn)行直接操作,比如我在選擇完影院之后又想看其他電影了怎么辦,那我是不是要返回到最開始的列表,這顯然效率是很低的。那么正確的做法就是當(dāng)用戶確定好要在哪家影院看之后,讓用戶可以同步修改影片和日期。

 

 

 

 

然后在選擇座位的時(shí)候又可以同步修改時(shí)間,大家發(fā)現(xiàn)沒有,這兩個(gè)界面中,每個(gè)界面里的信息都會(huì)和之前界面中有重復(fù),顯然,也是和場景有關(guān)。

 

那為什么不干脆都做在一個(gè)界面中呢?我們來看下,web端是怎么做的:

 

 

 

 

web端的空間充裕,所以他將影片介紹、選擇影院、選擇日期、選擇時(shí)間都放在了一個(gè)界面中,選座也是另起一個(gè)界面。所以,只要空間夠大,其實(shí)這些內(nèi)容都可以放在一起,但是也要考慮單個(gè)界面的復(fù)雜度。

 

我們也來嘗試一下,能不能把信息都塞到一個(gè)界面中,我分別在移動(dòng)端和web端給大家演示一下

 

 

 

顯然太復(fù)雜了,同時(shí)也會(huì)出現(xiàn)一個(gè)問題,那就是在一個(gè)界面中出現(xiàn)過個(gè)核心任務(wù)按鈕,像選座購票、確認(rèn)選座這樣的按鈕是不能出現(xiàn)在同一個(gè)界面中的

 

來總結(jié)一下,想要規(guī)劃好一個(gè)任務(wù)流程,需要做注意以下幾點(diǎn):

 

1.根據(jù)任務(wù)目標(biāo)列出關(guān)鍵行為節(jié)點(diǎn)

2.根據(jù)用戶核心場景將行為節(jié)點(diǎn)進(jìn)行排序

3.根據(jù)核心場景將行為節(jié)點(diǎn)以頁面維度進(jìn)行合并

4.補(bǔ)充其他支線場景

 

作者:應(yīng)駿
鏈接:https://www.zcool.com.cn/article/ZMTQ5NjI2OA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。
 

藍(lán)藍(lán)設(shè)計(jì)(bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司

銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

日歷

鏈接

個(gè)人資料

存檔