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