如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

編者按：初級UI 設(shè)計(jì)師可能有很多想學(xué)的：3D、插畫、動(dòng)畫、交互、界面視覺，但是如果你想成為高級UI 設(shè)計(jì)師，最應(yīng)該學(xué)的是構(gòu)建自己的設(shè)計(jì)體系。

最近看了一篇關(guān)于自我成長的文章，大概意思就是告訴我們成長的四大環(huán)節(jié)：1.定位（方向）——2.學(xué)習(xí)方法——3.堅(jiān)持——4.突破。我個(gè)人覺得自己不差堅(jiān)持和突破的能力，差的就是定位與學(xué)習(xí)方法，而導(dǎo)致學(xué)習(xí)方法有誤的原因也是由于定位還不夠清晰，至少短期內(nèi)是這樣的情況，因?yàn)槲蚁雽W(xué)的東西太多了，3D、插畫、動(dòng)畫、交互、界面視覺等等，導(dǎo)致自己無法聚焦，從而產(chǎn)生了各種焦慮、煩躁的情緒，正因如此才會(huì)有學(xué)習(xí)方法有誤、學(xué)習(xí)效率低下的情況出現(xiàn)。

所以我決定從源頭找出最根本的原因，也就是短期內(nèi)確定定位（方向）的問題，我要暫時(shí)放棄有所關(guān)于界面設(shè)計(jì)以外的其它分支（插畫、3D、動(dòng)效等等），為自己設(shè)定一個(gè)短期定位：高級UI設(shè)計(jì)師。

而高級UI設(shè)計(jì)師應(yīng)該具備什么樣的素質(zhì)呢？我覺得其中最基本的一點(diǎn)就是要有自己的設(shè)計(jì)體系。

比如說有人問你如何定義app內(nèi)的彈窗樣式與使用場景？我相信大多數(shù)人都無法回答完全，也許我們可以說出Toast、警示彈窗等等，但是卻不知道Toast只是Android系統(tǒng)的控件，iOS系統(tǒng)并沒有這種說法；而彈窗也分為模態(tài)窗與非模態(tài)窗口。大多數(shù)人就是因?yàn)樾畔]有拉通而且不善于總結(jié)才導(dǎo)致沒有形成自己的設(shè)計(jì)體系。

當(dāng)然體系也不是一兩天就能搞定的事情，需要慢慢積累與沉淀，所以今天我們就先從彈窗這個(gè)名詞開始，養(yǎng)成一個(gè)善于拉通全局、定期總結(jié)的好習(xí)慣。

大綱

Tips、Toast、彈窗、動(dòng)作列表等等這幾個(gè)詞，雖然經(jīng)常掛在嘴邊，但是應(yīng)該如何分類自己并不清楚，查閱大量資料后，我發(fā)現(xiàn)原來還有更多我不知道的知識(shí)點(diǎn)，每個(gè)人分類的維度也各不相同，有些按照模態(tài)、非模態(tài)彈窗來分類（Toast、Dialog、Actionbar 和 Snackbar）；有些按照彈窗、浮層來分等等，我覺得沒有絕對的對錯(cuò)，只要能夠有自己清晰的思考維度與參考依據(jù)，并且能夠?yàn)閷?shí)際工作帶來指導(dǎo)意義，那就是有價(jià)值的，所以自己在經(jīng)過篩選歸類后，決定按照以下維度來定義我自己的彈窗體系，大綱如下（如有不妥之處，還請批評指正）：

接下我們來一個(gè)一個(gè)講解

1.1 下拉彈窗（界面頂部，少量出現(xiàn)在界面中間）

如下圖，點(diǎn)擊某按鈕后，從頂部彈出的彈窗叫做下拉彈窗。此時(shí)用戶必須要操作彈窗上的某個(gè)功能或者點(diǎn)擊空白處才能消除彈窗，從而進(jìn)行其它操作。

1.2 對話框（界面中間）

對話框（Dialog）就是我們最常見的從界面中間彈出的提示彈框，需要用戶對此彈框進(jìn)行操作后才能繼續(xù)執(zhí)行其他任務(wù)。如下圖：

而對話框也有很多形式：不同維度會(huì)有不同的分類，比如以操作按鈕的多少來分類、是否可以輸入內(nèi)容來分類、系統(tǒng)樣式還是自定義樣式等等，我們可以根據(jù)具體項(xiàng)目來制定對話框的樣式與規(guī)則。
此類彈窗大多數(shù)用于信息提示及操作的二次確認(rèn)，設(shè)計(jì)師在使用前一定要謹(jǐn)慎選擇，綜合場景角度、用戶價(jià)值及平臺(tái)價(jià)值多個(gè)維度進(jìn)行考慮。

1.3 動(dòng)作列表（界面底部）

動(dòng)作列表會(huì)向用戶展示多個(gè)功能按鈕，形式有純文字、文字加圖標(biāo)、甚至純圖標(biāo)。對于警示性選項(xiàng)會(huì)標(biāo)出紅色，推薦性選項(xiàng)可標(biāo)示藍(lán)色，可根據(jù)實(shí)際情況自行定義。

案例如下圖：

2.1 Toast/HUD（界面頂部或中間）

Toast提示框是一種非阻斷式（非模態(tài)）彈窗，它彈出狀態(tài)信息給予用戶及時(shí)反饋，確保用戶知曉自己所處的狀態(tài)，并做出相應(yīng)的措施。

而Toast的樣式也分頂部和中部，如下圖：

這里值得一提的是，Toast其實(shí)是安卓系統(tǒng)的一個(gè)控件名詞，iOS 并沒有，IOS有一個(gè)類似的控件叫做HUD，但是行業(yè)內(nèi)大部分已經(jīng)將Toast彈窗通用到兩個(gè)系統(tǒng)內(nèi)，所以對于HUD大家了解即可。

2.2 Tips 提示條（界面頂部）

Tips嚴(yán)格來說其實(shí)并不算彈窗，因?yàn)閺棿笆歉≡诮缑嫔蠈拥膯为?dú)浮層，而tips是嵌入在頁面內(nèi)的提示條，但由于個(gè)人覺得tips提示條也是相當(dāng)重要的一個(gè)控件，而且很少看見有人將其總結(jié)到哪個(gè)歸類當(dāng)中，所以我決定將其分類到非阻斷式彈窗的類別下，與toast彈窗并行。這樣在整理控件的時(shí)候也很方便。

可能有些同學(xué)還不知道Tips提示條是什么樣子的，請看下圖：

2.3 snackbar（界面底部，可交互）

雖然snackbar彈窗也是出于安卓系統(tǒng)，但是目前也已經(jīng)通用到iOS系統(tǒng)中，它就是一種底部非阻斷式彈窗，也會(huì)自行消失，但和toast不同的是它是可交互的，并且一定是在底部出現(xiàn)，如下圖郵件歸檔后的狀態(tài)：

總結(jié)

在拉通所有分類、場景、樣式后，再去執(zhí)行，你會(huì)有一種前所未有的成就感，感覺一切都在自己的掌控之中，這也就是總結(jié)的魅力所在。

以上就是我個(gè)人關(guān)于彈窗的一些簡單總結(jié)，還有很多不全之處，以后會(huì)慢慢摸索補(bǔ)充，希望能夠?qū)δ阌兴鶈l(fā)。

最后：如果現(xiàn)在你也對自己定位不夠清晰，那就請盡快思考一下吧，因?yàn)橹挥蟹较虼_定了，你后面的努力才夠事半功倍，你才能真正的快速成長起來！

藍(lán)藍(lán)設(shè)計(jì)( www.lzhte.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)