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