国产真实乱对白精彩久久|免费观看污|国产女主播福利|337p人体韩国极品|wwww69ww18

您現在的位置:網站首頁 > 觀點資訊 >
NEWS
觀點資訊




想成為高級UI 設計師?先學會構建自己的設計體系!

大綱

Tips、Toast、彈窗、動作列表等等這幾個詞,雖然經常掛在嘴邊,但是應該如何分類自己并不清楚,查閱大量資料后,我發現原來還有更多我不知道的知識點,每個人分類的維度也各不相同,有些按照模態、非模態彈窗來分類(Toast、Dialog、Actionbar 和 Snackbar);有些按照彈窗、浮層來分等等,我覺得沒有絕對的對錯,只要能夠有自己清晰的思考維度與參考依據,并且能夠為實際工作帶來指導意義,那就是有價值的,所以自己在經過篩選歸類后,決定按照以下維度來定義我自己的彈窗體系,大綱如下(如有不妥之處,還請批評指正):

uisdc-window-20161229-0

接下我們來一個一個講解

1.1 下拉彈窗(界面頂部,少量出現在界面中間)

如下圖,點擊某按鈕后,從頂部彈出的彈窗叫做下拉彈窗。此時用戶必須要操作彈窗上的某個功能或者點擊空白處才能消除彈窗,從而進行其它操作。

uisdc-window-20161229-1

1.2 對話框(界面中間)

對話框(Dialog)就是我們最常見的從界面中間彈出的提示彈框,需要用戶對此彈框進行操作后才能繼續執行其他任務。如下圖:

uisdc-window-20161229-2

而對話框也有很多形式:不同維度會有不同的分類,比如以操作按鈕的多少來分類、是否可以輸入內容來分類、系統樣式還是自定義樣式等等,我們可以根據具體項目來制定對話框的樣式與規則。
此類彈窗大多數用于信息提示及操作的二次確認,設計師在使用前一定要謹慎選擇,綜合場景角度、用戶價值及平臺價值多個維度進行考慮。

1.3 動作列表(界面底部)

動作列表會向用戶展示多個功能按鈕,形式有純文字、文字加圖標、甚至純圖標。對于警示性選項會標出紅色,推薦性選項可標示藍色,可根據實際情況自行定義。

案例如下圖:

uisdc-window-20161229-3

2.1 Toast/HUD(界面頂部或中間)

Toast提示框是一種非阻斷式(非模態)彈窗,它彈出狀態信息給予用戶及時反饋,確保用戶知曉自己所處的狀態,并做出相應的措施。

而Toast的樣式也分頂部和中部,如下圖:

uisdc-window-20161229-4

這里值得一提的是,Toast其實是安卓系統的一個控件名詞,iOS 并沒有,IOS有一個類似的控件叫做HUD,但是行業內大部分已經將Toast彈窗通用到兩個系統內,所以對于HUD大家了解即可。

2.2 Tips 提示條(界面頂部)

Tips嚴格來說其實并不算彈窗,因為彈窗是浮在界面上層的單獨浮層,而tips是嵌入在頁面內的提示條,但由于個人覺得tips提示條也是相當重要的一個控件,而且很少看見有人將其總結到哪個歸類當中,所以我決定將其分類到非阻斷式彈窗的類別下,與toast彈窗并行。這樣在整理控件的時候也很方便。

可能有些同學還不知道Tips提示條是什么樣子的,請看下圖:

uisdc-window-20161229-5

2.3 snackbar(界面底部,可交互)

雖然snackbar彈窗也是出于安卓系統,但是目前也已經通用到iOS系統中,它就是一種底部非阻斷式彈窗,也會自行消失,但和toast不同的是它是可交互的,并且一定是在底部出現,如下圖郵件歸檔后的狀態:

uisdc-window-20161229-6

總結

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

最后:如果現在你也對自己定位不夠清晰,那就請盡快思考一下吧,因為只有方向確定了,你后面的努力才夠事半功倍,你才能真正的快速成長起來!