用兩大維度來(lái)定義屬于自己的APP彈窗體系
Tips、Toast、彈窗、動(dòng)作列表等等這幾個(gè)詞,雖然經(jīng)常掛在嘴邊,但是應(yīng)該如何分類(lèi)自己并不清楚。在經(jīng)過(guò)篩選歸類(lèi)后,決定按照以下維度來(lái)定義我自己的彈窗體系。
以下為閑聊:
最近看了一篇關(guān)于自我成長(zhǎng)的文章,大概意思就是告訴我們成長(zhǎng)的四大環(huán)節(jié):
- 定位(方向)
- 學(xué)習(xí)方法
- 堅(jiān)持
- 突破
我個(gè)人覺(jué)得自己不差堅(jiān)持和突破的能力,差的就是定位與學(xué)習(xí)方法,而導(dǎo)致學(xué)習(xí)方法有誤的原因也是由于定位還不夠清晰,至少短期內(nèi)是這樣的情況。因?yàn)槲蚁雽W(xué)的東西太多了,3D、插畫(huà)、動(dòng)畫(huà)、交互、界面視覺(jué)等等,導(dǎo)致自己無(wú)法聚焦,從而產(chǎn)生了各種焦慮、煩躁的情緒,正因如此才會(huì)有學(xué)習(xí)方法有誤、學(xué)習(xí)效率低下的情況出現(xiàn)。
所以我決定從源頭找出最根本的原因,也就是短期內(nèi)確定定位(方向)的問(wèn)題,我要暫時(shí)放棄有所關(guān)于界面設(shè)計(jì)以外的其它分支(插畫(huà)、3D、動(dòng)效等等),為自己設(shè)定一個(gè)短期定位:高級(jí)UI設(shè)計(jì)師。
而高級(jí)UI設(shè)計(jì)師應(yīng)該具備什么樣的素質(zhì)呢?我覺(jué)得其中最基本的一點(diǎn)就是要有自己的設(shè)計(jì)體系。
比如說(shuō)有人問(wèn)你如何定義app內(nèi)的彈窗樣式與使用場(chǎng)景?我相信大多數(shù)人都無(wú)法回答完全,也許我們可以說(shuō)出Toast、警示彈窗等等,但是卻不知道Toast只是Android系統(tǒng)的控件,Ios系統(tǒng)并沒(méi)有這種說(shuō)法,;而彈窗也分為模態(tài)窗與非模態(tài)窗口。大多數(shù)人就是因?yàn)樾畔](méi)有拉通并不善于總結(jié)才導(dǎo)致沒(méi)有形成自己的設(shè)計(jì)體系。
當(dāng)然體系也不是一兩天就能搞定的事情,需要慢慢積累與沉淀,所以今天我們就先從彈窗這個(gè)名詞開(kāi)始,養(yǎng)成一個(gè)善于拉通全局、定期總結(jié)的好習(xí)慣。
以下為正文:
Tips、Toast、彈窗、動(dòng)作列表等等這幾個(gè)詞,雖然經(jīng)常掛在嘴邊,但是應(yīng)該如何分類(lèi)自己并不清楚,查閱大量資料后,我發(fā)現(xiàn)原來(lái)還有更多我不知道的知識(shí)點(diǎn),每個(gè)人分類(lèi)的維度也各不相同,有些按照模態(tài)、非模態(tài)彈窗來(lái)分類(lèi)(Toast、Dialog、Actionbar 和 Snackbar);有些按照彈窗、浮層來(lái)分等等,我覺(jué)得沒(méi)有絕對(duì)的對(duì)錯(cuò),只要能夠有自己清晰的思考維度與參考依據(jù),并且能夠?yàn)閷?shí)際工作帶來(lái)指導(dǎo)意義,那就是有價(jià)值的,所以自己在經(jīng)過(guò)篩選歸類(lèi)后,決定按照以下維度來(lái)定義我自己的彈窗體系,大綱如下(如有不妥之處,還請(qǐng)批評(píng)指正):
接下我們來(lái)一個(gè)一個(gè)講解。
1. 阻斷式彈窗
1.1 下拉彈窗(界面頂部,少量出現(xiàn)在界面中間)
如下圖,點(diǎn)擊某按鈕后,從頂部彈出的彈窗叫做下拉彈窗。此時(shí)用戶(hù)必須要操作彈窗上的某個(gè)功能或者點(diǎn)擊空白處才能消除彈窗,從而進(jìn)行其它操作。
1.2 對(duì)話框(界面中間)
對(duì)話框(Dialog)就是我們最常見(jiàn)的從界面中間彈出的提示彈框,需要用戶(hù)對(duì)此彈框進(jìn)行操作后才能繼續(xù)執(zhí)行其他任務(wù)。如下圖:
而對(duì)話框也有很多形式:不同維度會(huì)有不同的分類(lèi),比如以操作按鈕的多少來(lái)分類(lèi)、是否可以輸入內(nèi)容來(lái)分類(lèi)、系統(tǒng)樣式還是自定義樣式等等,我們可以根據(jù)具體項(xiàng)目來(lái)制定對(duì)話框的樣式與規(guī)則。
此類(lèi)彈窗大多數(shù)用于信息提示及操作的二次確認(rèn),設(shè)計(jì)師在使用前一定要謹(jǐn)慎選擇,綜合場(chǎng)景角度、用戶(hù)價(jià)值及平臺(tái)價(jià)值多個(gè)維度進(jìn)行考慮。
1.3 動(dòng)作列表(界面底部)
動(dòng)作列表會(huì)向用戶(hù)展示多個(gè)功能按鈕,形式有純文字、文字加圖標(biāo)、甚至純圖標(biāo)。對(duì)于警示性選項(xiàng)會(huì)標(biāo)出紅色,推薦性選項(xiàng)可標(biāo)示藍(lán)色,可根據(jù)實(shí)際情況自行定義。
案例如下圖:
2. 非阻斷式彈窗
2.1 Toast/HUD(界面頂部或中間)
Toast 提示框是一種非阻斷式(非模態(tài))彈窗,它彈出狀態(tài)信息給予用戶(hù)及時(shí)反饋,確保用戶(hù)知曉自己所處的狀態(tài),并做出相應(yīng)的措施。
而 Toast 的樣式也分頂部和中部,如下圖:
這里值得一提的是,Toast 其實(shí)是安卓系統(tǒng)的一個(gè)控件名詞,Ios并沒(méi)有,Ios有一個(gè)類(lèi)似的控件叫做HUD,但是行業(yè)內(nèi)大部分已經(jīng)將Toast彈窗通用到兩個(gè)系統(tǒng)內(nèi),所以對(duì)于HUD大家了解即可。
2.2 Tips 提示條(界面頂部)
Tips嚴(yán)格來(lái)說(shuō)其實(shí)并不算彈窗,因?yàn)閺棿笆歉≡诮缑嫔蠈拥膯为?dú)浮層,而tips是嵌入在頁(yè)面內(nèi)的提示條,但由于個(gè)人覺(jué)得tips提示條也是相當(dāng)重要的一個(gè)控件,而且很少看見(jiàn)有人將其總結(jié)到哪個(gè)歸類(lèi)當(dāng)中,所以我決定將其分類(lèi)到非阻斷式彈窗的類(lèi)別下,與toast彈窗并行。這樣在整理控件的時(shí)候也很方便。
可能有些同學(xué)還不知道Tips提示條是什么樣子的,請(qǐng)看下圖:
2.3 snackbar(界面底部,可交互)
雖然snackbar彈窗也是出于安卓系統(tǒng),但是目前也已經(jīng)通用到Ios系統(tǒng)中,它就是一種底部非阻斷式彈窗,也會(huì)自行消失,但和toast不同的是它是可交互的,并且一定是在底部出現(xiàn),如下圖郵件歸檔后的狀態(tài):
小結(jié)
在拉通所有分類(lèi)、場(chǎng)景、樣式后,再去執(zhí)行,你會(huì)有一種前所未有的成就感,感覺(jué)一切都在自己的掌控之中,這也就是總結(jié)的魅力所在。
以上就是我個(gè)人關(guān)于彈窗的一些簡(jiǎn)單總結(jié),還有很多不全之處,以后會(huì)慢慢摸索補(bǔ)充,希望能夠?qū)δ阌兴鶈l(fā)。
另外,如果現(xiàn)在你也對(duì)自己定位不夠清晰,那就請(qǐng)盡快思考一下吧,因?yàn)橹挥蟹较虼_定了,你后面的努力才夠事半功倍,你才能真正的快速成長(zhǎng)起來(lái)!
作者:菜心(微信號(hào):410628210 ?微信公眾號(hào):菜心設(shè)計(jì)鋪),華為ITUX用戶(hù)體驗(yàn)設(shè)計(jì)師(主視覺(jué)),3年工作經(jīng)驗(yàn),參與華為Welink、3MS、連長(zhǎng)社區(qū)等多個(gè)項(xiàng)目的用戶(hù)體驗(yàn)設(shè)計(jì)工作。歡迎大家互相交流關(guān)注。
本文由 @菜心 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
介紹得簡(jiǎn)單易懂,看過(guò)許多關(guān)于彈窗設(shè)計(jì)的文章,都不是很全面。
受教受教
:mrgreen:學(xué)習(xí)了,移動(dòng)端的購(gòu)物軟件,在購(gòu)買(mǎi)物品前,會(huì)彈出選擇尺寸,型號(hào),顏色等信息,這類(lèi)是不是也算阻斷式彈窗?
忘記說(shuō)明阻斷與非阻斷的定義
阻斷式彈窗:需要用戶(hù)對(duì)彈窗進(jìn)行操作反饋
非阻斷式彈窗:不需要用戶(hù)對(duì)彈窗進(jìn)行操作反饋
所以你說(shuō)的那個(gè)彈窗是阻斷式的,因?yàn)樾枰脩?hù)去選擇尺寸、型號(hào)等內(nèi)容,需要用戶(hù)對(duì)彈窗進(jìn)行操作反饋。
學(xué)習(xí)
謝謝支持
姐姐說(shuō)的對(duì),場(chǎng)景問(wèn)題確實(shí)沒(méi)有說(shuō)全。簡(jiǎn)單概括一下:
對(duì)話框:一般是重提示信息
動(dòng)作列表:較多功能操作
toast:輕提示,提示信息不重要,但是又不能不展示
tips提示條:信息重要,但是又不能影響用戶(hù)操作
下拉彈窗:一般都是app中很重要的主功能選擇時(shí)會(huì)用到
snackbar:比較特殊,不阻斷用戶(hù)操作,還要可交互。
以上只是簡(jiǎn)略的概括,不對(duì)之處還請(qǐng)批評(píng),哈哈
我覺(jué)得說(shuō)全面的話可以再來(lái)一篇文章了
小蔡童鞋總結(jié)的還是較全面,姐姐給你點(diǎn)個(gè)贊。但是看完我的疑問(wèn)是,場(chǎng)景間的區(qū)別是什么,為什么要用這種而不用那種?比如1.3的微信的栗子為啥不用下拉彈框式?
姐姐說(shuō)的對(duì),場(chǎng)景問(wèn)題確實(shí)沒(méi)有說(shuō)全。簡(jiǎn)單概括一下:
對(duì)話框:一般是重提示信息
動(dòng)作列表:較多功能操作
toast:輕提示,提示信息不重要,但是又不能不展示
tips提示條:信息重要,但是又不能影響用戶(hù)操作
下拉彈窗:一般都是app中很重要的主功能選擇時(shí)會(huì)用到
snackbar:比較特殊,不阻斷用戶(hù)操作,還要可交互。
以上只是簡(jiǎn)略的概括,不對(duì)之處還請(qǐng)批評(píng),哈哈
我覺(jué)得說(shuō)全面的話可以再來(lái)一篇文章了
標(biāo)題2貌似寫(xiě)錯(cuò)了,應(yīng)該是“2. 非阻斷式彈窗”?。。?/p>
謝謝提醒,已經(jīng)和編輯說(shuō)了