目前行業(yè)里對(duì)于B端頁(yè)面設(shè)計(jì)都有規(guī)范形成，例如ant design與element，但是其中對(duì)于具體元素的一些使用方法和使用場(chǎng)景仍然沒(méi)有詳細(xì)說(shuō)明，本周就針對(duì)“彈窗”這一重要控件，結(jié)合之前做的項(xiàng)目競(jìng)品做了一個(gè)詳細(xì)的梳理。

彈窗的定義

彈窗是一種打斷性控件，用戶在完成一個(gè)流程或者動(dòng)作的過(guò)程中，使用彈窗來(lái)使用戶對(duì)流程中的信息內(nèi)容補(bǔ)充以保證流程動(dòng)作的持續(xù)進(jìn)行。彈窗可以用來(lái)做提示，也可以進(jìn)行創(chuàng)建，編輯，修改，刪除等操作。優(yōu)點(diǎn)是沒(méi)有跳離父級(jí)頁(yè)面，彈窗任務(wù)完成后仍然會(huì)留在父頁(yè)面繼續(xù)進(jìn)行操作，缺點(diǎn)是內(nèi)容承載量有限，復(fù)雜內(nèi)容或者流程性操作在彈窗中進(jìn)行呈現(xiàn)會(huì)比較影響體驗(yàn)。

1.多個(gè)系統(tǒng)調(diào)用，可以使用彈窗

如果操作內(nèi)容去需要在多業(yè)務(wù)線上去做復(fù)用，調(diào)用（例如日程創(chuàng)建，需要在會(huì)議，任務(wù)，消息提示等多個(gè)功能內(nèi)容中去直接調(diào)用），那么傾向使用彈窗。

Teambition里的創(chuàng)建任務(wù)彈窗

2.與“創(chuàng)建”保持一致

如果創(chuàng)建流程是用頁(yè)面形式做的，那么修改流程只能使用頁(yè)面形式，不能使用彈窗。

如果創(chuàng)建流程是用彈窗形式做的，那么通常狀況下修改流程應(yīng)該與之保持統(tǒng)一，但是也有一種情況是，創(chuàng)建流程并不是完整創(chuàng)建，所以在詳情頁(yè)面會(huì)出現(xiàn)其他內(nèi)容設(shè)置，這時(shí)候就需要具體問(wèn)題具體分析了。

Worktile和網(wǎng)易的添加成員功能

3.“彈窗”中跳轉(zhuǎn)“頁(yè)面”

如果用戶在彈窗操作中，點(diǎn)擊某鏈接跳轉(zhuǎn)到頁(yè)面，則該頁(yè)面一定是在新的Tab頁(yè)面彈出，不能在當(dāng)前頁(yè)面進(jìn)行直接刷新跳轉(zhuǎn)。這樣不僅會(huì)遺失彈窗里用戶已設(shè)置的內(nèi)容，而且會(huì)讓用戶在新頁(yè)面迷失，新頁(yè)面無(wú)法通過(guò)面包屑導(dǎo)航返回上一級(jí)頁(yè)面。

Teambition和阿里云

4.“彈窗”中跳出新“彈窗”

如果用戶在彈窗操作中，針對(duì)具體某項(xiàng)進(jìn)行操作需要繼續(xù)彈出彈窗時(shí)，就出現(xiàn)了彈窗套彈窗頁(yè)面，新的彈窗頁(yè)面，其任務(wù)數(shù)必須比之前彈窗的頁(yè)面任務(wù)數(shù)少，最優(yōu)體驗(yàn)是只有單一任務(wù)，這樣邏輯符合“父任務(wù) - 子任務(wù)”，不會(huì)對(duì)用戶造成認(rèn)知負(fù)擔(dān)；如果新彈窗內(nèi)要執(zhí)行的任務(wù)數(shù)大于父彈窗中的任務(wù)數(shù)，就會(huì)造成信息處理失衡，只有將父彈窗以及之前的內(nèi)容變?yōu)轫?yè)面形式，從形式上進(jìn)行平衡，才能符合從“大”到“小”邏輯。

Teambition中任務(wù)詳情功能

5.“彈窗”與“彈層”的使用差異

彈層的樣式與彈窗最不同點(diǎn)，在于其與父級(jí)頁(yè)面的結(jié)構(gòu)，彈層呈現(xiàn)內(nèi)容往往是父級(jí)列表中的詳細(xì)說(shuō)明，用戶可以在父級(jí)頁(yè)面繼續(xù)進(jìn)行點(diǎn)擊切換，彈層內(nèi)容隨之進(jìn)行改變。

今目標(biāo)的流程審批與worktile的任務(wù)詳情

其他場(chǎng)景還在補(bǔ)充...