特殊情況下的APP設(shè)計(5):最全的臨時框設(shè)計

文章來源: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è)計

特殊情況下的APP設(shè)計(2):啟動頁的設(shè)計

特殊情況下的APP設(shè)計(3):如何處理加載頁面

特殊情況下的APP設(shè)計(4):網(wǎng)絡(luò)異常時該如何設(shè)計万牺?

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市洽腺,隨后出現(xiàn)的幾起案子脚粟,更是在濱河造成了極大的恐慌,老刑警劉巖蘸朋,帶你破解...
    沈念sama閱讀 216,402評論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件核无,死亡現(xiàn)場離奇詭異,居然都是意外死亡藕坯,警方通過查閱死者的電腦和手機团南,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來炼彪,“玉大人吐根,你說我怎么就攤上這事》恚” “怎么了拷橘?”我有些...
    開封第一講書人閱讀 162,483評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我冗疮,道長萄唇,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,165評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮赡译,結(jié)果婚禮上兢哭,老公的妹妹穿的比我還像新娘。我一直安慰自己四敞,他們只是感情好,可當我...
    茶點故事閱讀 67,176評論 6 388
  • 文/花漫 我一把揭開白布揍障。 她就那樣靜靜地躺著目养,像睡著了一般。 火紅的嫁衣襯著肌膚如雪毒嫡。 梳的紋絲不亂的頭發(fā)上癌蚁,一...
    開封第一講書人閱讀 51,146評論 1 297
  • 那天,我揣著相機與錄音兜畸,去河邊找鬼努释。 笑死,一個胖子當著我的面吹牛咬摇,可吹牛的內(nèi)容都是我干的伐蒂。 我是一名探鬼主播,決...
    沈念sama閱讀 40,032評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼肛鹏,長吁一口氣:“原來是場噩夢啊……” “哼逸邦!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起在扰,我...
    開封第一講書人閱讀 38,896評論 0 274
  • 序言:老撾萬榮一對情侶失蹤缕减,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后芒珠,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體桥狡,經(jīng)...
    沈念sama閱讀 45,311評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,536評論 2 332
  • 正文 我和宋清朗相戀三年皱卓,在試婚紗的時候發(fā)現(xiàn)自己被綠了裹芝。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,696評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡娜汁,死狀恐怖嫂易,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情存炮,我是刑警寧澤炬搭,帶...
    沈念sama閱讀 35,413評論 5 343
  • 正文 年R本政府宣布蜈漓,位于F島的核電站,受9級特大地震影響宫盔,放射性物質(zhì)發(fā)生泄漏融虽。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,008評論 3 325
  • 文/蒙蒙 一灼芭、第九天 我趴在偏房一處隱蔽的房頂上張望有额。 院中可真熱鬧,春花似錦彼绷、人聲如沸巍佑。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽萤衰。三九已至,卻和暖如春猜旬,著一層夾襖步出監(jiān)牢的瞬間脆栋,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評論 1 269
  • 我被黑心中介騙來泰國打工洒擦, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留椿争,地道東北人。 一個月前我還...
    沈念sama閱讀 47,698評論 2 368
  • 正文 我出身青樓熟嫩,卻偏偏與公主長得像秦踪,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子掸茅,可洞房花燭夜當晚...
    茶點故事閱讀 44,592評論 2 353

推薦閱讀更多精彩內(nèi)容