免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

APP中的臨時(shí)框設(shè)計(jì)

2022-05-25    分類: 網(wǎng)站建設(shè)

一共有五種臨時(shí)框:警告識(shí)圖,操作菜單,全局模態(tài),Toast,SnackBar。知道這五類臨時(shí)框的作用與特點(diǎn),就能在設(shè)計(jì)APP臨時(shí)框時(shí)做到心中有數(shù),游刃有余。

智能手機(jī)經(jīng)歷了十年的發(fā)展,目前市場(chǎng)上主流的移動(dòng)端操作系統(tǒng)只有兩個(gè):Android和iOS。智能手機(jī)的硬件和軟件已經(jīng)同質(zhì)化很嚴(yán)重,所以我會(huì)把Android和iOS的臨時(shí)框放在一起講,因?yàn)檎驹谠O(shè)計(jì)的角度,它們的界限在變得模糊。基本上在iOS存在的設(shè)計(jì)樣式,在Android都能找到對(duì)應(yīng)。

一. 模態(tài)臨時(shí)框

臨時(shí)框可以分為兩大類,一類稱為模態(tài)臨時(shí)框,另一類稱為非模態(tài)臨時(shí)框。模態(tài)臨時(shí)框需要用戶必須選擇一項(xiàng)操作后才會(huì)消失,比如 Alert 確認(rèn)等;而非模態(tài)臨時(shí)框并不需要用戶必須選擇一項(xiàng)操作才會(huì)消失,比如頁(yè)面上彈出的 Toast 提示。

模態(tài)臨時(shí)框主要有以下三類:

1. 警告視圖(Alert View)

Alert View是iOS中的概念,中文翻譯為警告視圖,官方定義是:警告框用于告知用戶一些會(huì)影響到他們使用 app 或設(shè)備的重要信息。與之對(duì)應(yīng)的臨時(shí)框,在Android系統(tǒng)中被稱為dialog,翻譯為對(duì)話框。

回想一下,當(dāng)聽到一個(gè)令人震驚消息時(shí)你的反應(yīng)是?大部分人的反應(yīng)是“什么?”或者“你說(shuō)什么?”你潛意識(shí)要求對(duì)方再說(shuō)一遍。為什么?因?yàn)檫@個(gè)信息太出人意外了,所以你要再次確認(rèn)下是不是真的!

同理,當(dāng)你觸發(fā)了刪除按鈕時(shí),App是什么反應(yīng)?刪除的操作太敏感了,所以需要讓再次確認(rèn),這里用到的便是警告視圖Alert View。

App要獲取位置信息;訪問(wèn)相冊(cè)和相機(jī);詢問(wèn)是否升級(jí)App等等,這些都需要用到警告視圖。


滴滴出行&網(wǎng)易云音樂(lè)

除此之外,警告視圖還能作為運(yùn)營(yíng)活動(dòng)的入口或者引導(dǎo)頁(yè)。


韓國(guó)某APP&回家吃飯

從上圖可以看到,警告視圖包括三個(gè)部分:標(biāo)題;正文;按鈕。有些簡(jiǎn)單的警告視圖只有標(biāo)題和按鈕,不需要正文來(lái)說(shuō)明;另外一些可能會(huì)沒(méi)有按鈕,點(diǎn)擊臨時(shí)框外部區(qū)域臨時(shí)框會(huì)消失。

2. 操作菜單(Action Sheet)

iOS中Action Sheet中文翻譯為操作菜單,對(duì)應(yīng)Android中的Bottom Sheets,中文翻譯為底部動(dòng)作條。

某天你正在用某音樂(lè)App聽一首歌,看著播放界面,這時(shí)候你想要查看歌手信息,專輯信息,還想要收藏這首歌……在當(dāng)前頁(yè)面要滿足這這么多需求,就要用到操作列表Action Sheet。針對(duì)當(dāng)前頁(yè)面,用戶想要執(zhí)行的操作太多了,不可能把這些操作都放出來(lái),這樣頁(yè)面上全都是密密麻麻的icon、button。用操作列表的形式把這些按鈕都放在一個(gè)臨時(shí)框里就好的解決了這個(gè)問(wèn)題。


網(wǎng)易云音樂(lè)&XY

上面兩張圖,看起來(lái)完全不一樣,但是原理是我上面所說(shuō)的,萬(wàn)變不離其中,只不過(guò)換了個(gè)UI樣式。它們都屬于操作菜單類臨時(shí)框。

該類臨時(shí)框還有一類變種,不在底部彈出,而是在用戶觸發(fā)操作的區(qū)域附近彈出,如下圖:


蝸牛讀書&支付寶

3. 全局模態(tài)(Modal View)

全局模態(tài)屬于一種很特殊的臨時(shí)框,因?yàn)樗膮^(qū)域會(huì)占據(jù)整個(gè)屏幕。但在iOS的設(shè)計(jì)規(guī)范中,全局模態(tài)被放在了臨時(shí)框中。官方定義是:一個(gè)以模態(tài)形式展現(xiàn)的視圖,它為當(dāng)前任務(wù)或當(dāng)前工作流程提供獨(dú)立的、自包含的(self-contained)功能。


郵件APP

全局模態(tài)有一下幾個(gè)特點(diǎn)(對(duì)照上面iOS自帶的郵件APP的圖會(huì)更容易理解):

占據(jù)整個(gè)屏幕,或者占據(jù)整個(gè)父視圖的區(qū)域。

包含完成當(dāng)前任務(wù)所需的文字和控件。

通常也包含一個(gè)完成任務(wù)的按鈕,和一個(gè)取消按鈕。

關(guān)于全局模態(tài)和普通二級(jí)頁(yè)面的區(qū)別,以及什么時(shí)候該用全局模態(tài),什么時(shí)候該用普通二級(jí)頁(yè)面?

二. 非模態(tài)臨時(shí)框

非模態(tài)臨時(shí)框有Toast、SnackBar:

1. Toast

Toast是Android平臺(tái)的設(shè)計(jì)形式,iOS規(guī)范中并沒(méi)有規(guī)定這種形式,但是由于Toast能很好的起到輕量級(jí)反饋的作用,現(xiàn)在很多iOS的APP也在使用這種臨時(shí)框。

toast屬于一種輕量級(jí)的反饋,常常以小彈框的形式出現(xiàn),一般出現(xiàn)1到2秒會(huì)自動(dòng)消失,可以出現(xiàn)在屏幕上中下任意位置,但同個(gè)產(chǎn)品會(huì)模塊盡量使用同一位置,讓用戶產(chǎn)生統(tǒng)一認(rèn)知。

關(guān)于Toast的顯示時(shí)間,Android自帶的兩種時(shí)間屬性Toast.LENGTH_SHORT和Toast.LENGTH_SHORT分別為2秒和3.5秒,但是我的設(shè)計(jì)習(xí)慣一般會(huì)自定義為1.5秒和2.5秒。Toast中的文本超過(guò)10個(gè)字符用2.5秒,少于10個(gè)字符用1.5秒。

在樣式上,盡量和產(chǎn)品整體風(fēng)格保持一致,這樣會(huì)更和諧,不至于突兀。


淘寶&豆瓣

2. Snackbar

同Toast,SnackBar同樣是Android特有的臨時(shí)框。

SnackBar繼承了Toast的所有特性,即:為小彈窗的形式,會(huì)自動(dòng)消失。有三個(gè)差異化:

可以出現(xiàn)0到1個(gè)操作,不包含取消按鈕;

點(diǎn)擊SnackBar以外的區(qū)域,SnackBar會(huì)消失;

一般只出現(xiàn)在屏幕底部。

在實(shí)際的產(chǎn)品設(shè)計(jì)中,我沒(méi)采用過(guò)SnackBar這種形式,在平時(shí)使用APP時(shí)也很少看到。所以放了兩張MD規(guī)范中的圖。


帶一個(gè)操作 & 不帶操作

舉個(gè)可以采用SnackBar臨時(shí)框的場(chǎng)景:當(dāng)刪除某張照片時(shí),可以在屏幕底部出現(xiàn)Snackbar,提示“照片成功刪除”,并附帶撤銷操作,當(dāng)用戶點(diǎn)擊撤銷時(shí),照片可恢復(fù)。用戶不進(jìn)行操作Snackbar則消失,照片刪除成功。

APP中所有臨時(shí)框的設(shè)計(jì),基本上不會(huì)脫離上面提到的五種形式,這五種形式是按照臨時(shí)框的作用和呈現(xiàn)形式來(lái)劃分的。當(dāng)然也可以按照開發(fā)的實(shí)現(xiàn)方式來(lái)劃分(Android端):Dialog、Toast、SnackBar、Popupwindow、Activity等等。但這種劃分對(duì)用戶來(lái)說(shuō)并沒(méi)有什么價(jià)值,但對(duì)于設(shè)計(jì)師來(lái)說(shuō)知道什么樣的臨時(shí)框可以用什么代碼去實(shí)現(xiàn),會(huì)更容易推動(dòng)自己的設(shè)計(jì)方案。

總結(jié)一下,一共有五種臨時(shí)框:警告識(shí)圖,操作菜單,全局模態(tài),Toast,SnackBar。知道這五類臨時(shí)框的作用與特點(diǎn),就能在設(shè)計(jì)APP臨時(shí)框時(shí)做到心中有數(shù),游刃有余。

文章標(biāo)題:APP中的臨時(shí)框設(shè)計(jì)
當(dāng)前網(wǎng)址:http://m.newbst.com/news39/158789.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供響應(yīng)式網(wǎng)站用戶體驗(yàn)網(wǎng)站營(yíng)銷搜索引擎優(yōu)化移動(dòng)網(wǎng)站建設(shè)品牌網(wǎng)站制作

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)