今天和大家分享的是彈窗在設(shè)計(jì)中的應(yīng)用。彈窗是鏈接產(chǎn)品交互與用戶操作的常用方式，它既能處理用戶的「即時(shí)任務(wù)」，也能作為提示通知用戶的當(dāng)前操作反饋或狀態(tài)，但你真的足夠了解它嗎？

 背景 

前兩天一個(gè)小伙伴咨詢我“彈窗”問(wèn)題，說(shuō)現(xiàn)在主管讓他把產(chǎn)品正在使用的彈窗梳理下，整理成規(guī)范。這讓他感覺(jué)無(wú)從下手，彈窗不就是一個(gè)彈窗么,怎么做才能讓你的彈窗變得有意義呢？

我們大多數(shù)普通設(shè)計(jì)師每天工作都處在一個(gè)點(diǎn)上，單純做好交互或者視覺(jué)本身，也就是我們常說(shuō)的單點(diǎn)；但是高級(jí)設(shè)計(jì)師卻可能需要解決線的問(wèn)題，不止是某個(gè)點(diǎn)的某個(gè)問(wèn)題；到資深設(shè)計(jì)師階段，你還可能需要解決面的問(wèn)題，設(shè)計(jì)專家做的可能就是面的事情。

很多人可能會(huì)有這個(gè)疑問(wèn)，怎么做事情才叫由從點(diǎn)到線，以上面整理彈窗規(guī)范為例，看似一個(gè)簡(jiǎn)單需求，我們是如何體現(xiàn)它的設(shè)計(jì)價(jià)值？接下來(lái)我分享一個(gè)我之前項(xiàng)目的彈窗案例，希望可以幫助大家打開(kāi)這個(gè)思路！

 1.定制彈窗尺寸 

既然是彈窗需求，那么首先就是如何去確定尺寸。大家也可以問(wèn)問(wèn)自己，你拿到這個(gè)項(xiàng)目，會(huì)如何確定尺寸？大多數(shù)人，可能通過(guò)看競(jìng)品來(lái)參考，這是一個(gè)方法；但是有沒(méi)有更科學(xué)的做法呢？

百度指數(shù)

百度指數(shù)能幫助我們查到很多不錯(cuò)的數(shù)據(jù)，比如屏幕分辨率，手機(jī)占用率等！在真正著手設(shè)計(jì)一個(gè)彈框時(shí),市面上各種各樣尺寸的屏幕分辨率，如果你希望以一個(gè)尺寸適配所有屏幕分辨率，那可以參考以下數(shù)據(jù)：

這是兩年前統(tǒng)計(jì)數(shù)據(jù)，現(xiàn)在可能有更新，大家主要借鑒其思路：

通過(guò)這個(gè)數(shù)據(jù)，我們可以得出安卓主流分辨率720X1280，1080X1920；蘋(píng)果是750X1334，640X1136，那么只要我們彈窗能在640X1136下顯示完整，在其他尺寸上應(yīng)該都沒(méi)有問(wèn)題。

如上圖，市面上手機(jī)主流分辨率最小的是640X1136px,只要保證彈窗在這個(gè)尺寸顯示正常, 其他尺寸也就不會(huì)有問(wèn)題。根據(jù)以往經(jīng)驗(yàn)，彈窗寬度640px是足夠有余的。高度上以iPhone為例，去掉系統(tǒng)頂部和底部導(dǎo)航條的高度后，可以得出:1334 - 128(導(dǎo)航欄+狀態(tài)欄) - 98px(底部導(dǎo)航欄高度) = 1108px；保證彈窗高度在這個(gè)范圍內(nèi)顯示完整即可。

 2.梳理彈窗類型 

在日常工作中，我們經(jīng)常通常需要考慮哪種類型的彈窗適合當(dāng)前業(yè)務(wù)場(chǎng)景或需求？是用系統(tǒng)的彈窗，還是自己做一個(gè)特殊樣式？

這需要你對(duì)彈窗類型有一個(gè)比較全面的了解，就能很快分辨什么時(shí)候使用什么類型彈窗更適合。

彈窗特性

▲提示型:也叫操作反饋，一般是完成某項(xiàng)任務(wù)后交互的一個(gè)反饋信息，不需要點(diǎn)擊一般是自動(dòng)消失，一般后面沒(méi)有蒙版，單獨(dú)一個(gè)小浮層設(shè)計(jì)時(shí)，注意一致性原則

▲引導(dǎo)操作:一般需要引導(dǎo)用戶去操作下一步，如引導(dǎo)用戶去分享，引導(dǎo)用戶去下單購(gòu)買(mǎi)，引導(dǎo)用戶去查看商品，這種彈窗需要重點(diǎn)強(qiáng)調(diào)彈窗行動(dòng)點(diǎn)，吸引用戶參與

▲信息確認(rèn)型:一般是需求用戶確認(rèn)信息，通常是比較簡(jiǎn)單的操作，并不需要一個(gè)單獨(dú)頁(yè)面來(lái)表現(xiàn)，彈框是一個(gè)很好的銜接方式。這種彈窗一般采用偏系統(tǒng)的設(shè)計(jì)，同樣記往保持視覺(jué)上的統(tǒng)一性: 顏色，間距，文案風(fēng)格等。交互上，因?yàn)檫@個(gè)頁(yè)面需要吸引用戶更多關(guān)注信息內(nèi)容上，一般采取貼近原生系統(tǒng)彈窗的設(shè)計(jì)風(fēng)格即可。

 3.融合品牌感 

很多人好奇，一個(gè)普通彈窗要怎么融合品牌感？其實(shí)在一個(gè)場(chǎng)景設(shè)計(jì)中，每個(gè)地方都可以去融合品牌因素進(jìn)去。

過(guò)去我們對(duì)蒙版顏色沒(méi)有仔細(xì)關(guān)注的階段，也許顏色使用上不是純黑#000，就是純白#fff。其實(shí)蒙版的顏色及透明度完全可以再進(jìn)一步搭配，例如產(chǎn)品是藍(lán)色調(diào)性的，就可以在黑色中混入一點(diǎn)品牌藍(lán)色；產(chǎn)品是輕盈的，那就采用白色或淡灰色，或者嘗試用淺一些的顏色搭配高一點(diǎn)透明度等等，根據(jù)產(chǎn)品的調(diào)性設(shè)計(jì)出適合產(chǎn)品氣質(zhì)的蒙版。

看看別人怎么做的

▲Tumblr的蒙版顏色采用了它的品牌色(54,70,93,95)

▲Twitch的蒙版顏色在黑色中混入了一點(diǎn)紫色rgba(32,28,43,9)，與它的品牌色相符。

 4.彈窗未來(lái)趨勢(shì) 

移動(dòng)在影響著人們生活，也同時(shí)引領(lǐng)著設(shè)計(jì)趨勢(shì)；這些年產(chǎn)品都在追求多終端的一致性。之前也提到過(guò)，視覺(jué)表現(xiàn)方面，將會(huì)有更多產(chǎn)品為了在大屏幕下有更好的視覺(jué)效果，做出針對(duì)性的設(shè)計(jì)。隨著產(chǎn)品愈來(lái)愈追求簡(jiǎn)潔，UI也變得愈來(lái)愈輕盈，甚至透明。彈框也許不再被限制在卡片上。市面上也已經(jīng)有不少產(chǎn)品嘗試使用這種手法，以整個(gè)屏幕來(lái)取代底色卡片。這些也許是未來(lái)的一個(gè)趨勢(shì), 值得設(shè)計(jì)師們?nèi)リP(guān)注。

▲Squarespace的登錄彈框直接全屏設(shè)計(jì)

▲Evernote的修改標(biāo)簽彈框

 5.最終產(chǎn)出 

有了前面的思考和推導(dǎo)，就可以著手整理規(guī)范了；即使只是做一個(gè)簡(jiǎn)單彈窗，里面也包含了你對(duì)整體線的思考、場(chǎng)景的思考，這就是體現(xiàn)你設(shè)計(jì)價(jià)值的方向。

Step1.確定彈窗尺寸

一般需求用戶確認(rèn)信息后，保持整體視覺(jué)統(tǒng)一性：顏色，間距，文案風(fēng)格等。按鈕、圓角、尺寸寬度固定，高度默認(rèn)情況下750px，考慮小機(jī)型可以看到。不滿足內(nèi)容尺寸的各業(yè)務(wù)自行調(diào)整高度。

Step2.根據(jù)業(yè)務(wù)場(chǎng)景選擇彈窗類型

根據(jù)場(chǎng)景選擇，是內(nèi)容型彈窗（純文本、圖片+文本、純圖片、異形彈窗、GIF、內(nèi)容滾動(dòng)等）；還是信息確認(rèn)型。

b1.提示型

b2.圖片+標(biāo)題                  b2.圖片+文字+內(nèi)容          b3.文字下面插商品圖

b4.純文本                       b5.純圖片                     b6.最小彈窗尺寸

b7.大促?gòu)棿?異形彈窗+GIF（最高高度不超過(guò)1000 ）

b8.信息確認(rèn)型彈窗

 最后 

以上就是我日常工作中的一點(diǎn)彈窗經(jīng)驗(yàn)分享，如何通過(guò)一個(gè)簡(jiǎn)單的需求，很小的界面，很小的點(diǎn)；設(shè)計(jì)成線的整個(gè)完整思考。設(shè)計(jì)師能力無(wú)非就是從解決點(diǎn)的事情開(kāi)始，逐步解決線，甚至面的事情，希望大家都能變得越來(lái)越強(qiáng)。