最近開始整理app規(guī)范，這一次的規(guī)范比以往做項(xiàng)目的規(guī)范都要研究得細(xì)。所以相對(duì)應(yīng)也會(huì)細(xì)致到細(xì)節(jié)的數(shù)值對(duì)比。從而得出最適當(dāng)?shù)囊?guī)范數(shù)值。
這里主要是講彈窗遮罩的規(guī)范。簡(jiǎn)單點(diǎn)就是該用多少透明度。
一個(gè)App涉及到的彈窗主要有模態(tài)彈窗和非模態(tài)彈窗，而從實(shí)現(xiàn)方式來(lái)分，又可以分為原生系統(tǒng)彈窗和webview實(shí)現(xiàn)彈窗。
模態(tài)彈窗簡(jiǎn)單來(lái)說(shuō)就是會(huì)打斷用戶當(dāng)前操作的彈窗，用戶如果不做任何操作，就不能進(jìn)行下一步的行為。如下圖例
非模態(tài)彈窗就是同樣是彈窗但是卻不會(huì)影響用戶對(duì)頁(yè)面進(jìn)行其他操作。
如下圖例
原生系統(tǒng)實(shí)現(xiàn)彈窗顧名思義就是系統(tǒng)自帶的彈窗控件
web view實(shí)現(xiàn)彈窗則是app內(nèi)嵌的WEB前端代碼操控的彈窗。這類彈窗的優(yōu)點(diǎn)在于可操作性強(qiáng)，方便替換。所以基本所有的App都會(huì)有webview實(shí)現(xiàn)的彈窗。因?yàn)檫@樣可以方便做不同的專題廣告。平時(shí)你進(jìn)入微信游戲頻道彈出來(lái)的專題活動(dòng)頁(yè)?；蛘叽蜷_淘寶的第一瞬間彈出來(lái)的新活動(dòng)彈窗就是用webview實(shí)現(xiàn)的。
為了方便統(tǒng)一，我們App原先一直采用#000000，70%左右的的一個(gè)遮罩來(lái)承載彈窗，同時(shí)也能最大限度避免背后元素的干擾。
而為了得出比較規(guī)范的設(shè)定，我專門對(duì)比研究了微信、淘寶、美團(tuán)外賣、大眾點(diǎn)評(píng)、餓了么等幾個(gè)大流量App的彈窗遮罩的數(shù)值，一個(gè)字概括“亂”，雖然亂，但是亂里面套路還是存在的。
下面詳細(xì)給出一些數(shù)值和圖例
微信：#000000，50%、78%（系統(tǒng)彈窗修改了iOS默認(rèn)值，專題彈窗78%）
淘寶：#000000，50%、40%、70%、80%（樣式過(guò)多）
美團(tuán)外賣：#000000，70%、40%（同一菜單下透明度都不一樣）
大眾點(diǎn)評(píng)：#000000，85%（自定義彈窗）、38%（下拉）
餓了嗎：#000000，50%（彈窗）、30%（下拉）
蘋果系統(tǒng)：#000000，40%
為什么會(huì)有淺和深兩個(gè)差值較大的遮罩設(shè)計(jì)同時(shí)存在？以下是我的一些理解
1、從輸出的內(nèi)容來(lái)看，一個(gè)是輕內(nèi)容重體驗(yàn)，例如系統(tǒng)彈窗，內(nèi)容都基本一樣，體驗(yàn)要舒適，不必過(guò)分突出；另一種是重內(nèi)容輕體驗(yàn)，例如專題，新手引導(dǎo)等，需要強(qiáng)制聚焦。
2、從內(nèi)容形式來(lái)看，一個(gè)是有界定邊界且圖形規(guī)則，容易分辨；另一種是自定義，可以規(guī)則，但是大部分時(shí)候我們希望他不規(guī)則。例如專題，規(guī)則的時(shí)候跟底色的區(qū)分是比較容易，但是當(dāng)色彩和線條都不規(guī)則，區(qū)分不好就會(huì)顯得雜亂。
3、因?yàn)樵到y(tǒng)常用的遮罩是顏色漸變出現(xiàn)。數(shù)值差距過(guò)大會(huì)造成視覺(jué)上的跳躍度過(guò)大，造成不舒適感。
4、從輸出的頻率來(lái)說(shuō)，系統(tǒng)彈窗是高頻操作，無(wú)論是下拉，點(diǎn)擊，誤操作等等都有可能觸發(fā)此類彈窗，不適應(yīng)用過(guò)重的顏色對(duì)比。而webview彈窗出現(xiàn)的頻率相對(duì)較低。更強(qiáng)調(diào)內(nèi)容本身，適當(dāng)可以強(qiáng)調(diào)。
至于為什么需要定兩種色值，可以理解成一種是比系統(tǒng)模態(tài)窗口層級(jí)更高的形態(tài)-也就是推薦專題。
推薦專題是一段時(shí)期內(nèi)，app強(qiáng)推給用戶感知的內(nèi)容。從形式層面上，的確打斷了用戶的閱讀，而且不可忽略的，所以是模態(tài)窗口的一種。但是這種模態(tài)窗口是app鼓勵(lì)操作的，優(yōu)先級(jí)會(huì)更重。所以可忽略掉上面的各種問(wèn)題，就是想要讓用戶聚焦，只有窗口推薦內(nèi)容一條路徑可
