B端交互組件之彈窗篇

9 評(píng)論 25994 瀏覽 165 收藏 14 分鐘

編輯導(dǎo)語(yǔ):不管是Web端還是移動(dòng)端,我們?cè)谑褂脮r(shí)經(jīng)常會(huì)看見(jiàn)彈窗類(lèi)的消息,大多為提示類(lèi)消息;彈窗對(duì)于體驗(yàn)感來(lái)說(shuō)也是非常重要的,怎么才能設(shè)計(jì)出好的彈窗?本文作者詳細(xì)介紹了B端產(chǎn)品中的彈窗設(shè)計(jì),我們一起來(lái)看一下。

我們常說(shuō)的用戶(hù)的認(rèn)知能力與系統(tǒng)的反饋,這里的反饋很多時(shí)候會(huì)用到彈窗組件,包括強(qiáng)提醒和弱提醒。

有時(shí)候一個(gè)復(fù)雜的場(chǎng)景需要拆分,我們便會(huì)對(duì)一個(gè)頁(yè)面進(jìn)行優(yōu)化,把一些功能通過(guò)彈窗形式來(lái)展示;例如:個(gè)人信息頁(yè)面,包含很多分組,主界面是分組的集合,每個(gè)分組通過(guò)彈窗打開(kāi)來(lái)維護(hù);這樣可以把復(fù)雜的表單簡(jiǎn)化,分段維護(hù)。

交互設(shè)計(jì)可以簡(jiǎn)單理解為把復(fù)雜轉(zhuǎn)移給系統(tǒng),把簡(jiǎn)單留給用戶(hù),讓用戶(hù)更多的感受便捷化、智能化。

類(lèi)似的情況還有很多,下面我會(huì)從操作性和提示性?xún)煞矫鎭?lái)聊聊B端產(chǎn)品中的彈窗。

一、操作性彈窗

操作性彈窗主要是一些表單類(lèi)、配置類(lèi)界面,例如新增、導(dǎo)入、設(shè)置等。

有些人可能說(shuō)新增可以設(shè)計(jì)成標(biāo)簽頁(yè)形式,作為獨(dú)立的頁(yè)面存在,不過(guò)這里是講彈窗,所以暫不考慮這種情況;啰嗦一句,如果是頁(yè)簽形式,新增提交后,頁(yè)面要消失,并且要把值傳給父級(jí)頁(yè)面。

比較常見(jiàn)的是彈窗形式,新增提交后,彈窗消失,值傳給父級(jí)并自動(dòng)刷新頁(yè)面。

1. 簡(jiǎn)單場(chǎng)景

表單輸入項(xiàng)不多,或者頁(yè)面內(nèi)容不多的情況,可以看成簡(jiǎn)單場(chǎng)景;一個(gè)彈窗頁(yè)面只需要把一個(gè)功能完成好,沒(méi)有太多關(guān)聯(lián)性的操作,例如輸入內(nèi)容不多的新增彈窗。

另外類(lèi)似于批量查詢(xún)、導(dǎo)入這類(lèi)操作,彈窗中還需要再?gòu)梻€(gè)彈窗去執(zhí)行導(dǎo)入模板的操作,這種情況還是可以歸于簡(jiǎn)單場(chǎng)景。

小結(jié):簡(jiǎn)單場(chǎng)景差不多就是表單內(nèi)容不多、功能單一、業(yè)務(wù)簡(jiǎn)單的操作性彈窗。

2. 復(fù)雜場(chǎng)景

表單輸入內(nèi)容很多需要分組,或者有很多需要關(guān)聯(lián)的操作,可以看成是復(fù)雜場(chǎng)景。

要么是一個(gè)主體彈窗,包含很多再?gòu)楅_(kāi)的彈窗。

如下圖所示:

或者是就在一個(gè)主體彈窗內(nèi),通過(guò)分組、TAB、分步等來(lái)優(yōu)化復(fù)雜業(yè)務(wù)。

1)彈窗TAB

這里的TAB不是指頁(yè)簽,而是在彈窗內(nèi)部用TAB進(jìn)行分組。以前設(shè)計(jì)CRM系統(tǒng)時(shí),新增會(huì)員信息部分就采用的這種方式。

其實(shí)也不代表這種方式有多好,主要是技術(shù)上當(dāng)時(shí)彈窗尺寸需要固定,寫(xiě)成公共樣式,有的內(nèi)容很多,有的內(nèi)容很少,為了兼容多種情況,才考慮這種TAB分組。

如下圖所示:

這里有個(gè)注意點(diǎn),就是必填字段問(wèn)題,由于字段信息都影藏到每個(gè)TAB標(biāo)簽中,不能一眼看到哪些字段是必填,以及必填未輸入時(shí)如何提醒,我以前是設(shè)計(jì)成小三角放在標(biāo)題右頂部。

如下圖所示:

當(dāng)影藏的TAB標(biāo)簽中有必填字段未填或者其他校驗(yàn)信息提示時(shí),可以采用紅標(biāo)方式來(lái)提醒用戶(hù),當(dāng)用戶(hù)切換到紅標(biāo)TAB時(shí),即可查看彈窗無(wú)法提交的原因;問(wèn)題全部解決后,紅標(biāo)才會(huì)消失,當(dāng)前TAB問(wèn)題則可以直接看到。

2)分組彈窗

在彈窗內(nèi)將字段信息全部展開(kāi),但是其中一部分字段又屬于同一類(lèi)型的,這時(shí)可以采用分組信息來(lái)區(qū)分;分組彈窗可以將字段信息條理化,便于用戶(hù)輸入信息,可以理解為提高了用戶(hù)的認(rèn)知能力。

字段信息可以全部順排,也可以按數(shù)量橫向排列,例如一排擺2個(gè)字段,需要根據(jù)整體界面結(jié)構(gòu)來(lái)設(shè)計(jì);另外還需要考慮下系統(tǒng)反饋時(shí)的展示方式,例如是放在信息框右側(cè)、底部、浮層提示等。

如下圖所示:

3)分步彈窗

在彈窗內(nèi)部將字段信息按先后順序分開(kāi),這種就叫分步彈窗,這種設(shè)計(jì)有個(gè)要點(diǎn),就是第二步操作的數(shù)據(jù)需要第一步來(lái)做支撐;如果不完成第二步,無(wú)法直接從第一步到第三步。

例如我之前設(shè)計(jì)的命題系統(tǒng),一般是要先有大題,才能設(shè)計(jì)小題。

如下圖所示:

可能有人會(huì)說(shuō),如果字段前后沒(méi)有關(guān)聯(lián),是不是就不能用分步彈窗了,一般WEB端是采用分組方式,移動(dòng)端可以按照分步來(lái);但是一般都不是必填的,用戶(hù)可以后面有興趣時(shí)再去補(bǔ)充。

例如注冊(cè)一些APP后,需要選擇一些初始設(shè)置,以及填寫(xiě)個(gè)人資料,不過(guò)都可以不填直接跳過(guò)。

二、提示性彈窗

為了讓用戶(hù)可以更好地使用產(chǎn)品,需要產(chǎn)品有很好的反饋能力,本次主要說(shuō)的就是系統(tǒng)的反饋了,也就是提示性彈窗——我們?cè)趯?duì)系統(tǒng)發(fā)出指令后,都希望系統(tǒng)能給我們正確的反饋,好知道自己做的對(duì)與不對(duì),以及如何進(jìn)行下一步操作等等。

下面我將從三個(gè)方面來(lái)聊聊提示性彈窗,即弱提醒、強(qiáng)提醒、二次確認(rèn)。

1.?弱提醒彈窗

從字面上,我們可以得知,這種彈窗對(duì)用戶(hù)的打擾不大,只是做到提醒和告知,比如用戶(hù)操作某個(gè)功能后,系統(tǒng)將結(jié)果反饋給用戶(hù),常見(jiàn)的就是新建成功、刪除成功等。

不過(guò)這里要區(qū)分下,用戶(hù)輸入指令給計(jì)算機(jī)后,計(jì)算機(jī)運(yùn)算后得出結(jié)果并將結(jié)果反饋給用戶(hù),這種可以稱(chēng)為toast提示。

用戶(hù)一些簡(jiǎn)單的鼠標(biāo)操作,例如滑過(guò)、點(diǎn)擊、懸停等,系統(tǒng)在前臺(tái)即時(shí)給出一些反饋;這種可以理解為廣義的彈窗,其實(shí)就是一些浮層,我們可以稱(chēng)為tips提示。

1)toast提示

用戶(hù)點(diǎn)擊新建按鈕,系統(tǒng)彈出新建彈窗,當(dāng)輸入必填字段并確定提交后,系統(tǒng)會(huì)以toast形式提示用戶(hù),該新建操作成功;例如“新建成功”,該彈窗停留片刻后便會(huì)自動(dòng)消失,同時(shí)新建彈窗消失,并且會(huì)刷新列表并新增一條數(shù)據(jù)。

以上便是我們常見(jiàn)的新建操作流程,其他操作也是類(lèi)似的,例如修改和刪除等。

這種提示一般會(huì)停留個(gè)幾秒便會(huì)自動(dòng)消失,并不需要用戶(hù)進(jìn)行強(qiáng)確認(rèn),用戶(hù)是不是真的知道了,系統(tǒng)不會(huì)去管了。

如下圖所示:

2)tips提示

用戶(hù)將鼠標(biāo)懸停在輸入字段右側(cè)的問(wèn)號(hào)圖標(biāo)上,系統(tǒng)會(huì)將字段輸入說(shuō)明以tips形式告知用戶(hù),鼠標(biāo)滑出問(wèn)號(hào)圖標(biāo)的感應(yīng)區(qū)域后,該浮層提示會(huì)消失,再次懸停則會(huì)再次出現(xiàn)。

如下圖所示:

另外在導(dǎo)航菜單上,如果文字太多,會(huì)將多的文字以省略號(hào)形式展現(xiàn),當(dāng)鼠標(biāo)懸停在文字上時(shí),同樣會(huì)有tips提示出現(xiàn),展示完整的文字信息。

正常的方式還是需要精簡(jiǎn)導(dǎo)航菜單文字,這種設(shè)計(jì)方式只是用來(lái)補(bǔ)救糟糕的用戶(hù)體驗(yàn)的。

還有一個(gè)可能用到的地方就是TAB文字了,TAB頁(yè)簽一般是會(huì)給一個(gè)固定寬度的,文字太多,也是需要用省略號(hào),同理鼠標(biāo)懸停時(shí)可以看到tips提示的完整文字信息。

2.?強(qiáng)提醒彈窗

當(dāng)系統(tǒng)給用戶(hù)反饋后,并且需要強(qiáng)制用戶(hù)確認(rèn)時(shí),就是我們要說(shuō)的強(qiáng)提醒彈窗了。

一些比較重要的通知,例如:系統(tǒng)版本過(guò)低某些功能不支持、用戶(hù)的某些操作會(huì)造成一些什么后果等。

一些比較重要的反饋并且需要確保用戶(hù)已經(jīng)知道的場(chǎng)景下,我們就可以使用強(qiáng)提醒反饋,如果用戶(hù)不去響應(yīng)反饋,系統(tǒng)不會(huì)讓用戶(hù)進(jìn)行其他操作,所以我們叫做強(qiáng)提醒彈窗。

通常的做法是給一個(gè)用戶(hù)反饋的按鈕,例如:確定、知道了等,用戶(hù)點(diǎn)擊該按鈕,該提醒彈窗則會(huì)消失,這里對(duì)于反饋的文字和按鈕可以體現(xiàn)出情感化設(shè)計(jì),可以安慰用戶(hù)被強(qiáng)制操作后的失落情緒。

如下圖所示:

還有種強(qiáng)提醒是需要輸入數(shù)據(jù)的,比如:審批同意時(shí),審批人需要確定一個(gè)時(shí)間范圍,這時(shí)系統(tǒng)便會(huì)強(qiáng)提醒用戶(hù)輸入一個(gè)結(jié)束日期,當(dāng)然這只是一種設(shè)計(jì)方式;也可以把這個(gè)結(jié)束日期字段放到審批界面去,在做審批同意操作時(shí)作為必填字段校驗(yàn)。

3.?二次確認(rèn)彈窗

一般用戶(hù)的某些不可逆操作,在操作時(shí)需要讓用戶(hù)二次確認(rèn);如果用戶(hù)還是要繼續(xù)操作,則系統(tǒng)執(zhí)行該操作,如果用戶(hù)取消,則關(guān)閉該操作。

二次確認(rèn)彈窗主要是為了避免用戶(hù)誤操作,造成無(wú)法挽回的損失,所以一些不可逆的操作進(jìn)行時(shí),需要用戶(hù)進(jìn)行二次確認(rèn);同時(shí)彈窗的文案也能提醒用戶(hù)當(dāng)前正在進(jìn)行某些不可逆的操作,想清楚再?zèng)Q定,給用戶(hù)一次謹(jǐn)慎思考的機(jī)會(huì)。

如下圖所示:

二次確認(rèn)比較經(jīng)典的就是用于刪除操作時(shí),因?yàn)閯h除后該數(shù)據(jù)就徹底找不到了,只能重新建一條一樣的數(shù)據(jù);如果是通過(guò)上游傳過(guò)來(lái)的數(shù)據(jù),本系統(tǒng)可能還需要控制權(quán)限,只有特定權(quán)限的用戶(hù)可以刪除。有時(shí)候?yàn)榱吮苊鈹?shù)據(jù)丟失,也會(huì)有軟硬刪除之分。

系統(tǒng)刪除時(shí),只是放到回收站或者其他特定地方,這種叫軟刪除;當(dāng)清空回收站時(shí),就真的不再存儲(chǔ)該數(shù)據(jù)了,這種就叫硬刪除。

有些系統(tǒng)可能沒(méi)有刪除功能,根據(jù)業(yè)務(wù)場(chǎng)景,在滿足特定條件后系統(tǒng)自動(dòng)批處理刪除掉數(shù)據(jù)。

三、總結(jié)

彈窗可以用來(lái)操作數(shù)據(jù),也可以用來(lái)反饋,具體如何使用,需要結(jié)合業(yè)務(wù)場(chǎng)景來(lái)判斷。

B端產(chǎn)品需要有良好的容錯(cuò)、防錯(cuò)、智能屬性,以前更多時(shí)候是為了遷就系統(tǒng)的限制,設(shè)計(jì)了一些蹩腳的體驗(yàn);不過(guò)也正是有限制,才能更好地發(fā)揮出交互設(shè)計(jì)師的價(jià)值。

我們需要去平衡商業(yè)價(jià)值與用戶(hù)價(jià)值,同時(shí)更要考慮系統(tǒng)的技術(shù)限制,最終形成更好的用戶(hù)體驗(yàn)方案,后期又通過(guò)用戶(hù)反饋去迭代產(chǎn)品,不斷完善產(chǎn)品的體驗(yàn)感。

 

作者:D.cheerful,微信號(hào):dcf8859,微信公眾號(hào):D哥設(shè)計(jì)。

本文由 @D.cheerful 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來(lái)自 unsplash,基于 CC0 協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. B端里彈窗 是需要根據(jù)字段數(shù)量的多少定彈窗寬度嗎? 有些只需要填寫(xiě)一個(gè)字段,有些需要填寫(xiě)20多個(gè)。。。 我們交互說(shuō)最好是只有一個(gè)寬度 但是如果根據(jù)字段多的去定,那填寫(xiě)一個(gè)字段的時(shí)候 多奇怪啊。。。

    來(lái)自四川 回復(fù)
  2. 彈窗交互方式應(yīng)盡量保持清晰、單一

    來(lái)自廣東 回復(fù)
  3. 《About Face 4 交互設(shè)計(jì)精髓》——Alen Cooper

    暫時(shí)姿態(tài)的程序在打開(kāi)短暫的時(shí)間后隨即關(guān)閉,用一套有限的附加控件展現(xiàn)一些單一的功能,通常在使用過(guò)程中出現(xiàn)并完成自身工作然后迅速離開(kāi)。暫時(shí)式應(yīng)用程序只使用一個(gè)窗口和視圖,因?yàn)閷盈B式的窗口會(huì)讓用戶(hù)的注意力集中在當(dāng)前彈出的窗口,從而阻斷之前操作的連續(xù)性,并攜帶一定的視覺(jué)干擾。

    樓主彈窗內(nèi)部嵌套分類(lèi)的交互方式不是很合理,不建議使用這種交互方式。

    來(lái)自廣東 回復(fù)
  4. 請(qǐng)問(wèn)配置類(lèi)界面如新增類(lèi)操作頁(yè)面,用彈窗樣式和獨(dú)立頁(yè)簽樣式的優(yōu)缺點(diǎn)分別有哪些呢~哪些場(chǎng)景適合用彈窗,哪些場(chǎng)景適合用頁(yè)簽,求教~能幫忙詳細(xì)分析一下嘛感恩~

    回復(fù)
  5. 主體彈窗里還有再?gòu)椘鸬膹棿?,這種方式能否再詳細(xì)說(shuō)說(shuō),正好遇到了。。感覺(jué)交互怪怪的

    來(lái)自福建 回復(fù)
    1. 這種模式其實(shí)一般不建議的

      來(lái)自湖北 回復(fù)
    2. 能否再請(qǐng)教下不建議的原因,雖然大概隱約知道,但是自己說(shuō)不清楚~~

      來(lái)自福建 回復(fù)
  6. 寫(xiě)的很好的,就是“隱藏”這個(gè)詞 好幾篇里面都寫(xiě)錯(cuò)了,可以改一下(* ̄︶ ̄)

    來(lái)自江蘇 回復(fù)
    1. 哈哈哈,錯(cuò)了這么多,看來(lái)我得好好加深下印象,以后不能錯(cuò)了

      回復(fù)