界面該不該加彈窗?來(lái)看高級(jí)設(shè)計(jì)師的總結(jié)

2020-4-14    資深UI設(shè)計(jì)者

這幾天在工作中處理了一個(gè)歷史遺留問(wèn)題:彈窗適配,幾經(jīng)折騰終于落定發(fā)包。于是我也趁著這個(gè)機(jī)會(huì)把彈窗體系梳理研究了一遍。

我們常見(jiàn)的彈窗有對(duì)話框,提示框,有時(shí)候在需求溝通中經(jīng)常會(huì)聽(tīng)到產(chǎn)品同學(xué)說(shuō),給這里加個(gè)彈窗,那里加個(gè)提示框吧。實(shí)際上,這個(gè)彈窗到底該不該加?這個(gè)彈窗承載的是提示說(shuō)明文字內(nèi)容,還是需要引導(dǎo)用戶下一步操作?接下來(lái)我們從彈窗的屬性來(lái)聊聊我們的彈窗到底在什么時(shí)候加比較合適?用什么形態(tài)展示體驗(yàn)會(huì)更好?

彈窗體系:模態(tài)與非模態(tài)

模態(tài)彈窗:是指在用戶任務(wù)中,終止了用戶的上一步行為。也就是說(shuō),這個(gè)模態(tài)彈窗必須要用戶操作才可以進(jìn)行下一步動(dòng)作。所以在產(chǎn)品設(shè)計(jì)中,我們通常會(huì)用模態(tài)彈窗引導(dǎo)用戶去做我們要他做的操作。

常見(jiàn)的模態(tài)彈窗有這幾種:對(duì)話框、動(dòng)作欄、浮層。

對(duì)話框:對(duì)話框主要是給用戶提供選項(xiàng)、相關(guān)的操作。另外,在一些對(duì)話框中,也可以展現(xiàn)圖片、頭像、步驟圖、其它輸入項(xiàng)等。

動(dòng)作欄:常見(jiàn)的動(dòng)作欄一般會(huì)出現(xiàn)屏幕下方,比如選擇某個(gè)內(nèi)容時(shí)候,出現(xiàn)的選擇。

浮層:彈出窗口,浮動(dòng)于頂層窗口,氣泡。

非模態(tài)彈窗:是指不強(qiáng)制用戶操作,他的作用相當(dāng)于內(nèi)容信息提示,他的出現(xiàn)不打擾用戶的當(dāng)前操作,并且有時(shí)間限制,在一定時(shí)間里能自動(dòng)消失。比如「xxx 功能已更新哦」,這種提示是不需要用戶點(diǎn)擊操作,讓用戶看到就可以了。

常見(jiàn)的非模態(tài)彈窗有這幾種:toast/hud、snackbar、notice(通知)

toast/hud:iOS 用戶更習(xí)慣于在中間感知反饋信息,通常在信息提示完 3 秒左右后會(huì)消失,安卓通常會(huì)出現(xiàn)在屏幕頂部或者下部,不會(huì)遮擋主體內(nèi)容。需要注意的是 toast 只有文字,hud 是可以帶有圖標(biāo)的。

snackbar;可以理解為加強(qiáng)版的 Toast

notice:系統(tǒng)消息、通知推送,也是不干擾用戶行為,有消失時(shí)間,是非模態(tài)的彈窗。

什么場(chǎng)景下使用什么彈框

了解完彈窗體系后,我們就可以針對(duì)具體場(chǎng)景來(lái)看產(chǎn)品同學(xué)說(shuō)加個(gè)彈窗到底合適不合適?我們可以從下面的幾個(gè)使用場(chǎng)景來(lái)看用什么樣的彈窗合適。

1. 重要打斷用戶操作

在一些重要操作,避免用戶操作失誤。不過(guò)目前很多人都覺(jué)得這類(lèi)彈框有利有弊,有的地方出現(xiàn)得不合時(shí)宜,打斷了用戶的使用狀態(tài)。所以在設(shè)計(jì)這類(lèi)彈框時(shí)要非常謹(jǐn)慎,得通過(guò)多研究確認(rèn)是否有必要出現(xiàn)。

對(duì)話框相對(duì)來(lái)說(shuō)比動(dòng)作欄更重要,因?yàn)樵谝曈X(jué)中心,更能強(qiáng)烈引起用戶的重視,對(duì)于十分重要的內(nèi)容需要打斷用戶上一步任務(wù)的,采用對(duì)話框的彈窗,對(duì)于不是特別重要信息露出又需要終止用戶上一步動(dòng)作的情況下,一般采用動(dòng)作欄彈框。

2. 定制化廣告彈窗

如功能更新、升級(jí)、優(yōu)惠券彈窗。這一類(lèi)一般是強(qiáng)制用戶看到的,要展示出與眾不同的特色,在視覺(jué)上比較突出,會(huì)使用模態(tài)的彈窗浮層形式。

3. 給予一定提示

比如提示用戶狀態(tài)、信息、反饋,確保用戶知曉自己所處的狀態(tài),并可以做出相應(yīng)的措施。一般使用非模態(tài)的彈窗。

4. 用戶操作反饋

出現(xiàn)在用戶操作完之后的反饋,比如提醒用戶頁(yè)面正在加載中、保存成功、已刪除、已刷新等等。

可以不用彈窗的反饋例子:完成頁(yè)

比如已支付成功、下載完畢、簽到成功,這一類(lèi)是告訴你上個(gè)動(dòng)作結(jié)束了,下一步不需要進(jìn)行引導(dǎo)了,這種反饋大多數(shù)都不采用彈窗形式展現(xiàn)了。

需要注意事項(xiàng)

1. 層級(jí)關(guān)系

彈框是內(nèi)容和導(dǎo)航的補(bǔ)充,用于通知、操作菜單、成功或加載狀態(tài)的 toast,他是寫(xiě)在蒙層上面的一層內(nèi)容。

2. 適配方式

下面我們需要了解的是這幾種彈窗在開(kāi)發(fā)那的實(shí)現(xiàn)形式。我們可以理解為 2 種形式:

一種是開(kāi)發(fā)直接用系統(tǒng)的接口,缺點(diǎn)是具有不可定制,形式美觀度不夠好。

另一種是開(kāi)發(fā)用代碼會(huì)單獨(dú)寫(xiě)出一個(gè)模態(tài)彈框系統(tǒng),這套系統(tǒng)與整體設(shè)計(jì)語(yǔ)言具有一致性,可以復(fù)用在各個(gè)任務(wù)中,可以定制化設(shè)計(jì)。

需要注意的是,代碼寫(xiě)出來(lái)的模態(tài)樣式要考慮在不同機(jī)型的適配情況,考慮不同機(jī)型的邊界。這個(gè)適配也有兩種實(shí)現(xiàn)形式,一種是固定寬高尺寸,展示在不同機(jī)型尺寸中,另一種是常用的等比例縮放。這個(gè)就需要開(kāi)發(fā)與設(shè)計(jì)進(jìn)行密切的溝通,能盡量合理地在不同機(jī)型展現(xiàn)更加合適,避免出現(xiàn)極限的情況。

我們是這樣操作的,為了避免尺寸比例混亂的情況,會(huì)設(shè)計(jì)一個(gè)彈窗的寬高尺寸范圍,開(kāi)發(fā)同學(xué)代碼寫(xiě)出的這套彈窗的適配在各個(gè)機(jī)型中,是在一定縮放比例下,適用各個(gè)不同情況下的視覺(jué)展示。這套彈窗可以調(diào)用在首頁(yè)引導(dǎo)、升級(jí)等各個(gè)頁(yè)面的彈窗設(shè)計(jì)中。

文章來(lái)源:優(yōu)設(shè)    作者:詠舍

分享本文至:

日歷

鏈接

個(gè)人資料

存檔