中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

你是否留意過B端產(chǎn)品中彈窗的應(yīng)用？你是否曾猶豫過該用彈窗還是頁面呢？

可能很多產(chǎn)品經(jīng)理覺得這是一個(gè)無關(guān)緊要的點(diǎn)，只要功能實(shí)現(xiàn)了就可以了，畢竟只是一種展示形式而已。

其實(shí)不然，我們之前在用戶調(diào)研中收到這樣的反饋：感覺流程很長，操作太復(fù)雜了。但是該有的功能不能少??！怎么辦？我們把很多頁面改成了彈窗，用戶說：我覺得這樣流暢多了。

之前我們也一直在強(qiáng)調(diào)B端產(chǎn)品的精細(xì)化設(shè)計(jì)，本文就這個(gè)小點(diǎn)來深入地探討下，可能會(huì)讓你有所啟發(fā)，讓產(chǎn)品設(shè)計(jì)更加的人性化。

彈窗 VS 頁面

彈窗和頁面就是2種展現(xiàn)形式，沒有絕對(duì)的好和不好，只有怎么應(yīng)用會(huì)帶來更好的用戶體驗(yàn)。

1. 減少跳出感：彈窗勝

我們點(diǎn)擊按鈕后，如果是跳轉(zhuǎn)到新頁面，就會(huì)有很強(qiáng)的跳出感，特別是當(dāng)加載速度慢時(shí)感受尤為強(qiáng)烈。

比如說患者到診所后的登記流程，從登記頁面到完成掛號(hào)收費(fèi)，再回到登記頁，要跳轉(zhuǎn)4次，讓前臺(tái)感覺操作很繁瑣：

如果我們把其中2個(gè)頁面做成彈窗，用戶感知上流程就變成了下圖這樣，2步就可以完成登記，比之前少了2步操作，簡單多了。

2. 減少跳轉(zhuǎn)引起的錯(cuò)誤：彈窗勝

因?yàn)轭l繁的跳轉(zhuǎn)，有些用戶跳出去以后不知道怎么回去了。我們可以看下面這個(gè)小視頻，本來是在醫(yī)生門診的，因?yàn)辄c(diǎn)擊了預(yù)約，直接跳到了新頁面，然后點(diǎn)擊預(yù)約頁面上的返回按鈕，返回到了預(yù)約列表頁面，而不是原先的醫(yī)生門診頁。

我估計(jì)很多醫(yī)生都懵了，明明只想簡化操作，直接在門診時(shí)就給患者約好下次看診時(shí)間，卻在跳出后還要找到入口重新進(jìn)去。

更糟糕的情況是，如果頁面上的內(nèi)容填寫到一半沒有保存，跳出回去之后全軍覆沒了，醫(yī)生還要重新填寫一遍，真是欲哭無淚啊。每次在點(diǎn)擊這個(gè)按鈕前都要仔細(xì)地想想：我的內(nèi)容都保存了嗎？這是最后一步操作了嗎，一會(huì)還要回來嗎？如此左思右想的時(shí)間，直接拉低了工作效率。

為了驗(yàn)證我的猜想，我去看了下后臺(tái)的埋點(diǎn)數(shù)據(jù)，果真使用率很低，不排除說開展預(yù)約服務(wù)的用戶數(shù)量少，也不排除直接在門診時(shí)就約下次的情況少，但這功能做的我也不敢用啊，一點(diǎn)就有膽戰(zhàn)心驚的感覺。

后來設(shè)計(jì)的時(shí)候就把這個(gè)功能改成了彈窗，不管任何時(shí)候想進(jìn)行預(yù)約，都不用擔(dān)心找不到回來的路，也不用擔(dān)心沒有保存了。

當(dāng)然還有一種做法是不直接覆蓋原頁面，新開窗口進(jìn)行跳轉(zhuǎn)，這種能減少很多錯(cuò)誤。但有一個(gè)缺點(diǎn)是：當(dāng)新開頁面很多時(shí)，用戶想要點(diǎn)擊回去的那個(gè)頁面也得找一下，有時(shí)還沒直接點(diǎn)擊左側(cè)菜單欄快。

但畢竟不是所有的功能都適合做成彈窗形式的，比如我在門診時(shí)想看下患者的完整資料，這個(gè)時(shí)候就適合新開窗口跳轉(zhuǎn)，因?yàn)椴∪速Y料庫里面的內(nèi)容太多了，而且兩個(gè)頁面可以對(duì)比來看，更加清晰。

新開窗口跳轉(zhuǎn)的方法也是很常用的，但要注意的是不要太多，否則就會(huì)像上面那個(gè)密集的tab了。

3. 信息承載量：頁面勝

從面積來看，彈窗會(huì)比頁面小，故容納的信息量也比較少，如果內(nèi)容較多，彈窗要么會(huì)看起來很擠，要么需要滾動(dòng)，會(huì)減低用戶的使用效率，畢竟大部分的B端用戶恨不得一頁上能顯示所有的東西。這也是上面說到的病人庫不適合做成彈窗形式的原因。

但信息量多不代表只能用頁面，比如說這個(gè)系統(tǒng)，雖然患者信息很多，但還是用了彈窗的形式，因?yàn)樗诤芏嗟胤蕉颊{(diào)用到了這個(gè)彈窗，為了減少跳出率，也為了使多處的體驗(yàn)一致且更流暢，他在原先有頁面的情況下還是做了個(gè)彈窗。

現(xiàn)在有些系統(tǒng)為了讓彈窗的信息承載量變大，做成了全屏彈窗。這個(gè)下面會(huì)講到。

如何選擇合適的彈窗？

當(dāng)我們決定使用彈窗了，下面就要挑個(gè)漂亮的彈窗了。根據(jù)頁面信息量的多少，我們會(huì)給出幾個(gè)彈窗大小的標(biāo)準(zhǔn)。

1. 根據(jù)信息量選擇

（1）全屏彈窗

這種和頁面相比肩，又有彈窗性質(zhì)的彈窗，真是讓人又愛又恨。完美解決了頁面跳出的問題，也解決了信息量承載少的問題。但在現(xiàn)實(shí)中發(fā)現(xiàn)，有些用戶剛用時(shí)比較懵，右上角的叉號(hào)小且不明顯，菜單欄還被遮住了，不知道該如何操作。

這也是因?yàn)槿翉棿斑€不夠普遍的原因，用戶習(xí)慣還沒有被培養(yǎng)起來。你可以試下培養(yǎng)用戶習(xí)慣，不然的話就還是縮小一點(diǎn)，用個(gè)超大屏彈窗，四周留點(diǎn)底，用戶認(rèn)知更輕松點(diǎn)。

至于大、中、小、提示彈窗大家都很好理解，這邊只是提示一下，系統(tǒng)里面要制定好這3個(gè)彈窗的尺寸標(biāo)準(zhǔn)，千萬不要讓開發(fā)隨意發(fā)揮，導(dǎo)致每個(gè)彈窗大小都不一樣，比如：這是我們定的標(biāo)準(zhǔn)。

（2）大彈窗

（3）中彈窗

（4）小彈窗

2. 彈窗不只能居中

一般彈窗的位置就2種，居中和右側(cè)。右側(cè)彈窗的好處是：如果比較窄的話，左側(cè)內(nèi)容不會(huì)被遮擋住，信息量更大。

如果對(duì)覆蓋住的信息展示要求不高的話，居中彈窗就可以了。

居中：

右側(cè)：

彈窗使用小tip

最后提示2個(gè)注意事項(xiàng)。

1. 彈窗疊彈窗

這是交互最不喜歡的，他們的理念是：彈窗就是一個(gè)最小集合了，不能在彈窗上疊加彈窗，這樣無限制疊加下去，豈不亂了規(guī)則。

但對(duì)于B端產(chǎn)品來說，哪有那么多規(guī)則，效率第一，好用第一。你看下面這張圖，就包含了3個(gè)彈窗：全屏彈窗、右側(cè)大彈窗、居中小彈窗。并沒有不和諧的感覺。

所以不要多顧慮彈窗疊彈窗的問題，大膽去用吧。

2. 彈窗關(guān)閉

這個(gè)需要注意下，彈窗里面的信息分2類：一類是填寫的數(shù)據(jù)需要保存的，比如說病歷；一類就是選擇瀏覽的，比如說選擇模板。

需要保存信息的就不能點(diǎn)擊空白處就消失，點(diǎn)擊關(guān)閉按鈕時(shí)最好也提示下是否需要保存；另一類就可以簡單地處理，點(diǎn)擊空白和關(guān)閉按鈕時(shí)直接消失。

總結(jié)

用彈窗還是頁面，沒有絕對(duì)的標(biāo)準(zhǔn)，有的系統(tǒng)很喜歡用彈窗，有的系統(tǒng)很喜歡用頁面，但刨除個(gè)人喜好，我們希望彈窗的使用是讓用戶體驗(yàn)更好，更少的跳出感，更少的錯(cuò)誤，更流暢的操作。

至于選擇什么尺寸的彈窗，位置怎么放，根據(jù)內(nèi)容量和性質(zhì)來定就行。

最后，千萬不要被彈窗不能疊彈窗這類的規(guī)則束縛住，勇敢的去用吧。

#專欄作家#

司馬特小隊(duì)，公眾號(hào)：司馬特小分隊(duì)，人人都是產(chǎn)品經(jīng)理專欄作家。8年+互聯(lián)網(wǎng)資深產(chǎn)品經(jīng)驗(yàn)，多年B端產(chǎn)品管理經(jīng)驗(yàn)。具有多個(gè)從0到1的大型B端產(chǎn)品的孵化、重構(gòu)、迭代經(jīng)驗(yàn)；主要教授產(chǎn)業(yè)互聯(lián)網(wǎng)產(chǎn)品相關(guān)的硬核知識(shí)點(diǎn)。

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

題圖來自Unsplash，基于CC0協(xié)議。