狀態(tài)的命名
流程狀態(tài)的設(shè)計(jì)原則與人機(jī)交互的最根本原則一致,即「以用戶為中心」,確保目標(biāo)用戶在相應(yīng)的使用場(chǎng)景下能夠快速理解并正確執(zhí)行相關(guān)操作。
按行業(yè)規(guī)則命名
專業(yè)工具或平臺(tái)的設(shè)計(jì)中,對(duì)于狀態(tài)的命名如果有行業(yè)約定俗成的術(shù)語(yǔ),則遵照行業(yè)規(guī)則命名,即便在體驗(yàn)設(shè)計(jì)師自己眼中可能不夠簡(jiǎn)潔美好。
例如:以工程師為主要用戶群體的項(xiàng)目管理工具 Aone 中,bug 的狀態(tài)有 10 種(如下圖),且遵循了英文技術(shù)術(shù)語(yǔ)。對(duì)于設(shè)計(jì)師來(lái)說(shuō)狀態(tài)種類復(fù)雜、語(yǔ)言不統(tǒng)一,但從用戶的角度來(lái)說(shuō)這樣是必須的、規(guī)范的,因此設(shè)計(jì)師要尊重用戶的習(xí)慣和需求。
圍繞核心操作命名
流程的名稱通常是描述對(duì)應(yīng)操作的過(guò)程或結(jié)果,如「待付款」、「退款中」是操作的過(guò)程,「完成付款」、「退款失敗」是操作的結(jié)果。
單個(gè)核心操作
最簡(jiǎn)單、最常見(jiàn)的流程是:角色A 發(fā)起流程 – 角色B 進(jìn)行操作 – 流程結(jié)束給出結(jié)果
這種兩個(gè)角色三步走的流程,狀態(tài)命名通常分為如下兩種(框中是狀態(tài)命名):
上圖里面的動(dòng)詞可替換成其他動(dòng)作;結(jié)果狀態(tài)也可用「已通過(guò)」、「未通過(guò)」等,根據(jù)實(shí)際情況而定。
圍繞一個(gè)核心的操作,也可能涉及多個(gè)角色。
例如:最常見(jiàn)的審批流程,過(guò)程中涉及多個(gè)角色的層層審批。如果不同角色審批時(shí),用戶可執(zhí)行的操作不同,或?qū)徟脑敿?xì)過(guò)程對(duì)用戶非常關(guān)鍵,這時(shí)審批單的狀態(tài)命名上需要注明具體角色;如果通常不需要關(guān)注具體到哪個(gè)人審批了,則統(tǒng)一稱為「審批中」即可,用戶可以到詳情頁(yè)面查看具體進(jìn)度。
多個(gè)核心操作
涉及多個(gè)角色、一串核心操作的復(fù)雜流程。
- 在流程完成之前的中間過(guò)程中,告知用戶下一步待執(zhí)行的操作,比上一步剛剛完成哪個(gè)更重要;
- 在角色多、極易混淆的情況下建議在狀態(tài)名上增加角色名。
例如:數(shù)字倉(cāng)單的倉(cāng)單質(zhì)押流程中涉及三個(gè)角色(存貨人、倉(cāng)儲(chǔ)方、資金方)多個(gè)步驟,過(guò)程中關(guān)鍵是引導(dǎo)用戶繼續(xù)后續(xù)操作、高效完成申請(qǐng),所以狀態(tài)上展示當(dāng)前要進(jìn)行的操作。同時(shí)流程中包含連續(xù)多個(gè)角色的接力審核確認(rèn),容易混淆,因此狀態(tài)標(biāo)簽中顯示當(dāng)前需要哪個(gè)角色進(jìn)行操作;而放款、收款的角色很明顯是資金方和申請(qǐng)方來(lái)操作,所以對(duì)應(yīng)的狀態(tài)沒(méi)有顯示角色名稱。如圖:
- 同一階段時(shí),不建議區(qū)分不同用戶角色看到的狀態(tài)名,可以給他們不同的反饋或提醒。
- 狀態(tài)組間存在一對(duì)多的映射關(guān)系時(shí),要注意區(qū)分邏輯關(guān)系,不建議將上下層狀態(tài)打平到一起。
接上面數(shù)字倉(cāng)單的案例:系統(tǒng)中,貨物的所有者可以用倉(cāng)單進(jìn)行質(zhì)押,這樣倉(cāng)單就會(huì)有「未質(zhì)押」、「質(zhì)押申請(qǐng)中」和「質(zhì)押中」?fàn)顟B(tài)(不允許重復(fù)質(zhì)押)。而質(zhì)押申請(qǐng)是個(gè)復(fù)雜的流程,「質(zhì)押申請(qǐng)中」這一倉(cāng)單狀態(tài),對(duì)應(yīng)「質(zhì)押申請(qǐng)單」的一系列流程狀態(tài)。同理,在倉(cāng)單解除質(zhì)押、注銷等其它情況下,又會(huì)有「解質(zhì)流程中」、「注銷中」等狀態(tài),對(duì)應(yīng)的「解除質(zhì)押流程」、「注銷流程」有會(huì)一系列對(duì)應(yīng)的狀態(tài)。如圖:
這種情況下要梳理好業(yè)務(wù)流程,如果將上下層狀態(tài)打平到一起,短期內(nèi)可能看起來(lái)比較簡(jiǎn)潔,但隨著產(chǎn)品復(fù)雜度的提升(B 類產(chǎn)品通常會(huì)越來(lái)越復(fù)雜),邏輯關(guān)系會(huì)越來(lái)越混亂。
狀態(tài)的視覺(jué)設(shè)計(jì)
狀態(tài)的顏色
表示狀態(tài)的顏色不建議超過(guò) 5 種:紅色、橙色、綠色、藍(lán)色、灰色。
設(shè)計(jì)師需要結(jié)合色彩的功能特性、品牌色板、產(chǎn)品邏輯、用戶需求來(lái)選擇適合的顏色。常用配色舉例:
- 狀態(tài)的顏色不止會(huì)用在標(biāo)簽上,對(duì)應(yīng)的可視化圖表、圖標(biāo)等視覺(jué)元素要用色一致。例如進(jìn)度條:
狀態(tài)標(biāo)簽的樣式
不同狀態(tài)對(duì)應(yīng)不同用戶的不同操作,因此狀態(tài)信息通常與普通文本在視覺(jué)上有所區(qū)分。常用的樣式包括彩色標(biāo)簽、彩色圓點(diǎn)等等。例如:
- 注意列表、表單中狀態(tài)標(biāo)簽的樣式統(tǒng)一。
總結(jié)
- 原則:流程狀態(tài)的設(shè)計(jì)原則與人機(jī)交互的最根本原則一致:以用戶為中心。
- 命名:
- 在流程完成之前的中間過(guò)程中,告知用戶下一步待執(zhí)行的操作,比上一步剛剛完成哪個(gè)更重要;
- 在角色多、極易混淆的情況下建議在狀態(tài)名上增加角色名;
- 同一階段時(shí),不建議區(qū)分不同用戶角色看到的狀態(tài)名,可以給他們不同的反饋或提醒。
- 專業(yè)工具或平臺(tái)中,如果有行業(yè)約定俗成的術(shù)語(yǔ)來(lái)命名狀態(tài),則遵照行業(yè)規(guī)則。
- 關(guān)系:狀態(tài)組間存在一對(duì)多的映射關(guān)系時(shí),不要將上下層狀態(tài)打平到一起。
- 顏色:表示狀態(tài)的顏色不建議超過(guò)「紅色、橙色、綠色、藍(lán)色、灰色」這 5 種。
原文地址:Ant_Design(站酷)
作者: 林葉
轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》B類產(chǎn)品設(shè)計(jì)細(xì)節(jié):流程狀態(tài)
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)