2016-12-30 周周
編者按：初級UI 設計師可能有很多想學的：3D、插畫、動畫、交互、界面視覺，但是如果你想成為高級UI 設計師，最應該學的是構建自己的設計體系。
最近看了一篇關于自我成長的文章，大概意思就是告訴我們成長的四大環節：1.定位（方向）——2.學習方法——3.堅持——4.突破。我個人覺得自己不差堅持和突破的能力，差的就是定位與學習方法，而導致學習方法有誤的原因也是由于定位還不夠清晰，至少短期內是這樣的情況，因為我想學的東西太多了，3D、插畫、動畫、交互、界面視覺等等，導致自己無法聚焦，從而產生了各種焦慮、煩躁的情緒，正因如此才會有學習方法有誤、學習效率低下的情況出現。
所以我決定從源頭找出最根本的原因，也就是短期內確定定位（方向）的問題，我要暫時放棄有所關于界面設計以外的其它分支（插畫、3D、動效等等），為自己設定一個短期定位：高級UI設計師。
而高級UI設計師應該具備什么樣的素質呢？我覺得其中最基本的一點就是要有自己的設計體系。
比如說有人問你如何定義app內的彈窗樣式與使用場景？我相信大多數人都無法回答完全，也許我們可以說出Toast、警示彈窗等等，但是卻不知道Toast只是Android系統的控件，iOS系統并沒有這種說法；而彈窗也分為模態窗與非模態窗口。大多數人就是因為信息沒有拉通而且不善于總結才導致沒有形成自己的設計體系。
當然體系也不是一兩天就能搞定的事情，需要慢慢積累與沉淀，所以今天我們就先從彈窗這個名詞開始，養成一個善于拉通全局、定期總結的好習慣。
Tips、Toast、彈窗、動作列表等等這幾個詞，雖然經常掛在嘴邊，但是應該如何分類自己并不清楚，查閱大量資料后，我發現原來還有更多我不知道的知識點，每個人分類的維度也各不相同，有些按照模態、非模態彈窗來分類（Toast、Dialog、Actionbar 和 Snackbar）；有些按照彈窗、浮層來分等等，我覺得沒有絕對的對錯，只要能夠有自己清晰的思考維度與參考依據，并且能夠為實際工作帶來指導意義，那就是有價值的，所以自己在經過篩選歸類后，決定按照以下維度來定義我自己的彈窗體系，大綱如下（如有不妥之處，還請批評指正）：
接下我們來一個一個講解
1.1 下拉彈窗（界面頂部，少量出現在界面中間）
如下圖，點擊某按鈕后，從頂部彈出的彈窗叫做下拉彈窗。此時用戶必須要操作彈窗上的某個功能或者點擊空白處才能消除彈窗，從而進行其它操作。
1.2 對話框（界面中間）
對話框（Dialog）就是我們最常見的從界面中間彈出的提示彈框，需要用戶對此彈框進行操作后才能繼續執行其他任務。如下圖：
而對話框也有很多形式：不同維度會有不同的分類，比如以操作按鈕的多少來分類、是否可以輸入內容來分類、系統樣式還是自定義樣式等等，我們可以根據具體項目來制定對話框的樣式與規則。
此類彈窗大多數用于信息提示及操作的二次確認，設計師在使用前一定要謹慎選擇，綜合場景角度、用戶價值及平臺價值多個維度進行考慮。
1.3 動作列表（界面底部）
動作列表會向用戶展示多個功能按鈕，形式有純文字、文字加圖標、甚至純圖標。對于警示性選項會標出紅色，推薦性選項可標示藍色，可根據實際情況自行定義。
案例如下圖：
2.1 Toast/HUD（界面頂部或中間）
Toast提示框是一種非阻斷式（非模態）彈窗，它彈出狀態信息給予用戶及時反饋，確保用戶知曉自己所處的狀態，并做出相應的措施。
而Toast的樣式也分頂部和中部，如下圖：
這里值得一提的是，Toast其實是安卓系統的一個控件名詞，iOS 并沒有，IOS有一個類似的控件叫做HUD，但是行業內大部分已經將Toast彈窗通用到兩個系統內，所以對于HUD大家了解即可。
2.2 Tips 提示條（界面頂部）
Tips嚴格來說其實并不算彈窗，因為彈窗是浮在界面上層的單獨浮層，而tips是嵌入在頁面內的提示條，但由于個人覺得tips提示條也是相當重要的一個控件，而且很少看見有人將其總結到哪個歸類當中，所以我決定將其分類到非阻斷式彈窗的類別下，與toast彈窗并行。這樣在整理控件的時候也很方便。
可能有些同學還不知道Tips提示條是什么樣子的，請看下圖：
2.3 snackbar（界面底部，可交互）
雖然snackbar彈窗也是出于安卓系統，但是目前也已經通用到iOS系統中，它就是一種底部非阻斷式彈窗，也會自行消失，但和toast不同的是它是可交互的，并且一定是在底部出現，如下圖郵件歸檔后的狀態：
在拉通所有分類、場景、樣式后，再去執行，你會有一種前所未有的成就感，感覺一切都在自己的掌控之中，這也就是總結的魅力所在。
以上就是我個人關于彈窗的一些簡單總結，還有很多不全之處，以后會慢慢摸索補充，希望能夠對你有所啟發。
最后：如果現在你也對自己定位不夠清晰，那就請盡快思考一下吧，因為只有方向確定了，你后面的努力才夠事半功倍，你才能真正的快速成長起來！
藍藍設計( m.gerard.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務