2017-3-28 用心設(shè)計
什么是覆蓋層？從本文的角度來講，覆蓋層指在當前頁面上打開的臨時界面。這些臨時界面能夠完成提示性的或上下文相關(guān)的任務(wù)，它們的打斷性較弱，為用戶保持較為連貫的使用體驗。我們?nèi)粘姷降?“浮層”、“彈層”、“彈框”等都在本文的討論范圍內(nèi)。
覆蓋層有著廣泛的應用場景，但因為各平臺規(guī)范不同，又沒有統(tǒng)一說明，所以設(shè)計過程中難免會遇到各種問題。 比如在既定場景下無法確定使用哪種覆蓋層具體樣式； 自己設(shè)計的自定義樣式?jīng)]有平臺默認組件開發(fā)效率高。所以本文的目的是梳理常用的覆蓋層樣式和應用場景，幫助大家在設(shè)計過程中更有目的性的使用覆蓋層。
今天想要討論的是覆蓋層中最為常用的兩種形式：
下面將對這兩種形式進行具體描述。當然，以下只代表作者本人觀點，歡迎指正。
1、對話框
對話框也叫彈框、彈窗等。它是模態(tài)的，需要用戶對其進行操作后才會消失。
1.1、提示型對話框
提示型對話框主要用于對系統(tǒng)級、應用級或用戶操作結(jié)果的提示，需要確保用戶知曉當前的狀況或需要用戶進行選擇時適用。iOS平臺和Android平臺的對話框樣式不同，但使用方法一樣。
優(yōu)點：能夠確保流程正常執(zhí)行，防止用戶犯錯。
1.1.1、通知型提示
【使用場景】通常用于通知用戶某件事情完成了，或重要信息介紹等；
1.1.2、確認型提示
1.1.3、選擇型提示
【使用場景】需要用戶選擇一項操作以保證流程繼續(xù)下去；
1.1.4、小結(jié)
針對3種不同的提示型對話框，主要有以下差異：
1.2、輸入型對話框
對話框還可以用于某個或某組信息的輸入。輸入的信息不易過于復雜，點擊對話框的確認鍵后統(tǒng)一執(zhí)行輸入內(nèi)容。一般情況下，對話框上不允許再出現(xiàn)其它對話框。
1.2.1、單頁對話框
【使用場景】輸入1~2行文本、進行一組多選操作等；
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
缺點：對用戶的打擾較大。
【內(nèi)容】一般由圖文信息+1個確認性按鈕，只能點擊了按鈕后才能退出對話框；
【變形】有時會在對話框角上提供關(guān)閉按鈕以退出對話框；圖文介紹也可以分多頁；甚至確認按鈕可放置于整個蒙層區(qū)域響應。
【內(nèi)容】一般由提示描述+2個按鈕構(gòu)成：描述可帶標題或不帶標題；2個按鈕分別為一個積極的確認按鈕和一個消極的取消/拒絕按鈕構(gòu)成，積極按鈕放于右側(cè)（積極按鈕的位置設(shè)計上一直是仁者見仁智者見智，windows平臺一般是把積極按鈕放在右側(cè)，而Mac
OS更傾向于放在左側(cè)，由于windows系統(tǒng)的市場占有率更大，許多web產(chǎn)品都傾向于將積極按鈕放在左側(cè)；但在移動端設(shè)計場景下，一方面在手指對于右側(cè)按鈕的操作更加敏捷，另一方面Android平臺有明文規(guī)范建議將積極按鈕放于右側(cè)，所以本文建議在移動端設(shè)計時將積極按鈕置于右側(cè)）。注意：積極按鈕指使得流程順利執(zhí)行下去的操作，其具體操作可以是“刪除”“放棄”等。
【變形】有時會在對話框角上提供關(guān)閉按鈕以退出對話框，關(guān)閉按鈕一般等效于取消操作。
【內(nèi)容】一般由提示描述+2~3個按鈕構(gòu)成：描述可帶標題或不帶標題。 
【內(nèi)容】一般由標題+輸入項+2個按鈕構(gòu)成：一個為確認按鈕，一個為取消按鈕。點擊取消按鈕為退出當前流程，但應根據(jù)輸入內(nèi)容的量和重要程度制定取消時是否需要二次確認。
【設(shè)計Tips】當輸入內(nèi)容為文本時，進入對話框就激活第一條輸入框并彈出鍵盤，鍵盤類型需根據(jù)輸入的文本類型進行定制，如字母鍵盤、數(shù)字鍵盤等。
1.2.2、可滾動對話框
【使用場景】當輸入內(nèi)容無法在一頁展示完全時，對話框可支持滑動；
1.2.3、全屏對話框
【使用場景】全屏對話框與可滾動對話框的使用場景其實非常類似，區(qū)別在于全屏對話框能夠承載更多的內(nèi)容；同時在全屏對話框上允許使用其他對話框。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
【內(nèi)容】標題置頂+輸入項+操作按鈕置底。注意：即使對話框的內(nèi)容區(qū)域可以滾動，但輸入項內(nèi)容仍然不宜過多。 
【內(nèi)容】全屏對話框在形式上非常像新的頁面，但其本質(zhì)是一個對話框覆蓋層。全屏對話框由標題+關(guān)閉按鈕+確定按鈕構(gòu)成。頁面展開時由底部往上彈出，收起時從上往下收起。 
當然對話框的應用場景并不止于此，輸入型對話框和全屏對話框主要用于執(zhí)行一些分支任務(wù)或上下文相關(guān)的信息補充。這類使用場景除了對話框外還可以使用Actionsheet、Bottom
Sheet、menu等交互形式，這些覆蓋層樣式我們將會在下篇中討論。歡迎一起討論哦~
藍藍設(shè)計的小編 http://www.yvirxh.cn