文章來源:http://www.woshipm.com/pd/717075.html
一共有五種臨時框:警告識圖,操作菜單,全局模態(tài)龄捡,Toast啦辐,SnackBar谓传。知道這五類臨時框的作用與特點,就能在設(shè)計APP臨時框時做到心中有數(shù)芹关,游刃有余续挟。
智能手機經(jīng)歷了十年的發(fā)展,目前市場上主流的移動端操作系統(tǒng)只有兩個:Android和iOS侥衬。智能手機的硬件和軟件已經(jīng)同質(zhì)化很嚴重诗祸,所以我會把Android和iOS的臨時框放在一起講,因為站在設(shè)計的角度轴总,它們的界限在變得模糊直颅。基本上在iOS存在的設(shè)計樣式肘习,在Android都能找到對應际乘。
一. 模態(tài)臨時框
臨時框可以分為兩大類,一類稱為模態(tài)臨時框漂佩,另一類稱為非模態(tài)臨時框脖含。模態(tài)臨時框需要用戶必須選擇一項操作后才會消失罪塔,比如 Alert 確認等;而非模態(tài)臨時框并不需要用戶必須選擇一項操作才會消失养葵,比如頁面上彈出的 Toast 提示征堪。
模態(tài)臨時框主要有以下三類:
1. 警告視圖(Alert View)
Alert View是iOS中的概念,中文翻譯為警告視圖关拒,官方定義是:警告框用于告知用戶一些會影響到他們使用 app 或設(shè)備的重要信息佃蚜。與之對應的臨時框,在Android系統(tǒng)中被稱為dialog着绊,翻譯為對話框谐算。
回想一下,當聽到一個令人震驚消息時你的反應是归露?大部分人的反應是“什么洲脂?”或者“你說什么?”你潛意識要求對方再說一遍剧包。為什么恐锦?因為這個信息太出人意外了,所以你要再次確認下是不是真的疆液!
同理一铅,當你觸發(fā)了刪除按鈕時,App是什么反應堕油?刪除的操作太敏感了潘飘,所以需要讓再次確認,這里用到的便是警告視圖Alert View馍迄。
App要獲取位置信息福也;訪問相冊和相機;詢問是否升級App等等攀圈,這些都需要用到警告視圖暴凑。
滴滴出行&網(wǎng)易云音樂
除此之外,警告視圖還能作為運營活動的入口或者引導頁赘来。
韓國某APP&回家吃飯
從上圖可以看到现喳,警告視圖包括三個部分:標題;正文犬辰;按鈕嗦篱。有些簡單的警告視圖只有標題和按鈕,不需要正文來說明幌缝;另外一些可能會沒有按鈕灸促,點擊臨時框外部區(qū)域臨時框會消失。
2. 操作菜單(Action Sheet)
iOS中Action Sheet中文翻譯為操作菜單,對應Android中的Bottom Sheets浴栽,中文翻譯為底部動作條荒叼。
某天你正在用某音樂App聽一首歌,看著播放界面典鸡,這時候你想要查看歌手信息被廓,專輯信息,還想要收藏這首歌……在當前頁面要滿足這這么多需求萝玷,就要用到操作列表Action Sheet嫁乘。針對當前頁面,用戶想要執(zhí)行的操作太多了球碉,不可能把這些操作都放出來蜓斧,這樣頁面上全都是密密麻麻的icon、button汁尺。用操作列表的形式把這些按鈕都放在一個臨時框里就完美的解決了這個問題法精。
網(wǎng)易云音樂&XY
上面兩張圖,看起來完全不一樣痴突,但是原理是我上面所說的,萬變不離其中狼荞,只不過換了個UI樣式辽装。它們都屬于操作菜單類臨時框。
該類臨時框還有一類變種相味,不在底部彈出拾积,而是在用戶觸發(fā)操作的區(qū)域附近彈出,如下圖:
蝸牛讀書&支付寶
3. 全局模態(tài)(Modal View)
全局模態(tài)屬于一種很特殊的臨時框丰涉,因為它的區(qū)域會占據(jù)整個屏幕拓巧。但在iOS的設(shè)計規(guī)范中,全局模態(tài)被放在了臨時框中一死。官方定義是:一個以模態(tài)形式展現(xiàn)的視圖肛度,它為當前任務(wù)或當前工作流程提供獨立的、自包含的(self-contained)功能投慈。
郵件APP
全局模態(tài)有一下幾個特點(對照上面iOS自帶的郵件APP的圖會更容易理解):
占據(jù)整個屏幕承耿,或者占據(jù)整個父視圖的區(qū)域。
包含完成當前任務(wù)所需的文字和控件伪煤。
通常也包含一個完成任務(wù)的按鈕加袋,和一個取消按鈕。
關(guān)于全局模態(tài)和普通二級頁面的區(qū)別抱既,以及什么時候該用全局模態(tài)职烧,什么時候該用普通二級頁面?
二. 非模態(tài)臨時框
非模態(tài)臨時框有Toast、SnackBar:
1. Toast
Toast是Android平臺的設(shè)計形式蚀之,iOS規(guī)范中并沒有規(guī)定這種形式跋理,但是由于Toast能很好的起到輕量級反饋的作用,現(xiàn)在很多iOS的APP也在使用這種臨時框恬总。
toast屬于一種輕量級的反饋前普,常常以小彈框的形式出現(xiàn),一般出現(xiàn)1到2秒會自動消失壹堰,可以出現(xiàn)在屏幕上中下任意位置拭卿,但同個產(chǎn)品會模塊盡量使用同一位置,讓用戶產(chǎn)生統(tǒng)一認知贱纠。
關(guān)于Toast的顯示時間峻厚,Android自帶的兩種時間屬性Toast.LENGTH_SHORT和Toast.LENGTH_SHORT分別為2秒和3.5秒,但是我的設(shè)計習慣一般會自定義為1.5秒和2.5秒谆焊。Toast中的文本超過10個字符用2.5秒惠桃,少于10個字符用1.5秒。
在樣式上辖试,盡量和產(chǎn)品整體風格保持一致辜王,這樣會更和諧,不至于突兀罐孝。
淘寶&豆瓣
2. Snackbar
同Toast呐馆,SnackBar同樣是Android特有的臨時框。
SnackBar繼承了Toast的所有特性莲兢,即:為小彈窗的形式汹来,會自動消失。有三個差異化:
可以出現(xiàn)0到1個操作改艇,不包含取消按鈕收班;
點擊SnackBar以外的區(qū)域,SnackBar會消失谒兄;
一般只出現(xiàn)在屏幕底部摔桦。
在實際的產(chǎn)品設(shè)計中,我沒采用過SnackBar這種形式舵变,在平時使用APP時也很少看到酣溃。所以放了兩張MD規(guī)范中的圖。
帶一個操作 & 不帶操作
舉個可以采用SnackBar臨時框的場景:當刪除某張照片時纪隙,可以在屏幕底部出現(xiàn)Snackbar赊豌,提示“照片成功刪除”,并附帶撤銷操作绵咱,當用戶點擊撤銷時碘饼,照片可恢復。用戶不進行操作Snackbar則消失,照片刪除成功艾恼。
APP中所有臨時框的設(shè)計住涉,基本上不會脫離上面提到的五種形式,這五種形式是按照臨時框的作用和呈現(xiàn)形式來劃分的钠绍。當然也可以按照開發(fā)的實現(xiàn)方式來劃分(Android端):Dialog舆声、Toast、SnackBar柳爽、Popupwindow媳握、Activity等等。但這種劃分對用戶來說并沒有什么價值磷脯,但對于設(shè)計師來說知道什么樣的臨時框可以用什么代碼去實現(xiàn)蛾找,會更容易推動自己的設(shè)計方案。
總結(jié)一下赵誓,一共有五種臨時框:警告識圖打毛,操作菜單,全局模態(tài)俩功,Toast幻枉,SnackBar。知道這五類臨時框的作用與特點绑雄,就能在設(shè)計APP臨時框時做到心中有數(shù)展辞,游刃有余。
相關(guān)閱讀
特殊情況下的APP設(shè)計(1):注冊登錄頁設(shè)計