濮阳杆衣贸易有限公司

主頁 > 快速排名 > 常見問題 > 特殊情況下的APP設(shè)計(5):最全的臨時框設(shè)計

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

POST TIME:2018-12-03 21:25

 

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

智能手機經(jīng)歷了十年的發(fā)展,目前市場上主流的移動端操作系統(tǒng)只有兩個:Android和iOS。智能手機的硬件和軟件已經(jīng)同質(zhì)化很嚴(yán)重,所以我會把Android和iOS的臨時框放在一起講,因為站在設(shè)計的角度,它們的邊界在變得模糊?;旧显趇OS存在的設(shè)計樣式,在Android都能找到對應(yīng)。

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

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

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

1. 警告視圖(Alert View)

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

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

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

App要獲取位置信息;拜候相冊和相機;詢問是否升級App等等,這些都需要用到警告視圖。

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

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

韓國某APP&回家吃飯

從上圖可以看到,警告視圖包孕三個部分:標(biāo)題;正文;按鈕。有些簡單的警告視圖只有標(biāo)題和按鈕,不需要正文來說明;別的一些可能會沒有按鈕,點擊臨時框外部區(qū)域臨時框會消失。

2. 操作菜單(Action Sheet)

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

某天你正在用某音樂App聽一首歌,看著播放界面,這時候你想要查看歌手信息,專輯信息,還想要保藏這首歌……在當(dāng)前頁面要滿足這這么多需求,就要用到操作列表Action Sheet。針對當(dāng)前頁面,用戶想要執(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)的視圖,它為當(dāng)前任務(wù)或當(dāng)前工作流程提供獨立的、自包羅的(self-contained)功能。

郵件APP

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

占據(jù)整個屏幕,或者占據(jù)整個父視圖的區(qū)域。包羅完成當(dāng)前任務(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)一認(rèn)知。

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

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

淘寶&豆瓣

2. Snackbar

同Toast,SnackBar同樣是Android特有的臨時框。

標(biāo)簽:林芝 東營 九江 烏魯木齊 鹽城



收縮
  • 微信客服
  • 微信二維碼
  • 電話咨詢

  • 400-1100-266
岳普湖县| 清流县| 石首市| 弋阳县| 九寨沟县| 壤塘县| 荣成市| 安陆市| 陆川县| 长岛县| 澜沧| 水富县| 静安区| 新乡县| 泽库县| 休宁县| 漳浦县| 贵南县| 健康| 浦江县| 潍坊市| 定安县| 师宗县| 剑河县| 盐源县| 新和县| 万盛区| 新乡市| 霍州市| 凭祥市| 运城市| 会理县| 肃北| 灵川县| 元氏县| 东至县| 平昌县| 尉犁县| 佛教| 张家口市| 闽侯县|