交互

彈窗提醒的交互設(shè)計(jì)方法

6732

為什么彈窗總結(jié)文章這么多我還要總結(jié)，主要原因是用彈窗來概括APP提醒交互本就不精準(zhǔn)。而且現(xiàn)在出現(xiàn)彈窗亂用，爆用的情況，產(chǎn)品經(jīng)理一說強(qiáng)調(diào)，營(yíng)銷，設(shè)計(jì)師就加一個(gè)彈窗。彈窗加彈窗的情景，看到我都是崩潰的。彈窗本身是一種模態(tài)彈窗，對(duì)用戶行為阻斷強(qiáng)烈，所以一些不是特別重要的情況下可以選擇其他優(yōu)先級(jí)的提醒交互。

一、提醒交互概念

提醒交互是指：需要給用戶提醒信息時(shí)，界面中出現(xiàn)的一些提醒機(jī)制，已達(dá)到告知用戶信息或者讓用戶強(qiáng)制做出選擇的目的。彈窗是為了讓用戶回應(yīng)，需要用戶與之交互的窗口，根據(jù)是否需要強(qiáng)制用戶交互分為：模態(tài)彈窗和非模態(tài)彈窗。模態(tài)彈窗會(huì)打斷用戶的當(dāng)前操作流程，用戶不在彈框上操作的話，無法進(jìn)入下一個(gè)操作。優(yōu)點(diǎn)是可以很好的獲取的用戶的視覺焦點(diǎn)，缺點(diǎn)也顯而易見，打斷了用戶的當(dāng)前操作流程，引起用戶的反感。

二、彈窗體系的分類

在彈窗分類的時(shí)候，我們先要明確自己分類的目標(biāo)，是快速選擇出適合我們當(dāng)時(shí)情景下的提醒交互。所以我們按照提醒程度來區(qū)分比較合適，按照ios和安卓來分就沒有必要。但是值得一提的是，我么日常用的英文名稱都是從這兩個(gè)系統(tǒng)自帶的開發(fā)語言來命名的。從開發(fā)角度上，ue知道系統(tǒng)自帶的提示，會(huì)大大提高開發(fā)效率，當(dāng)然現(xiàn)在很多形式都在兩個(gè)系統(tǒng)中通用，最終選擇需要根據(jù)實(shí)際情況而定。

三、彈窗提醒交互的應(yīng)用案例

(1)、Toast提示

Toast是安卓系統(tǒng)的一個(gè)控件名詞，現(xiàn)在也應(yīng)用于iOS系統(tǒng)中。Toast屬于一種輕量級(jí)的反饋，常常以小彈框的形式出現(xiàn)，一般出現(xiàn)1到2秒會(huì)自動(dòng)消失，可以出現(xiàn)在屏幕上中下任意位置。Toast信息給予用戶及時(shí)反饋，確保用戶知曉自己所處的狀態(tài)，并做出相應(yīng)的措施。

設(shè)計(jì)原則：

1、同個(gè)產(chǎn)品會(huì)模塊盡量使用同一位置，讓用戶產(chǎn)生統(tǒng)一認(rèn)知

2、Toast提示可以用圖片加文字的形式，不適合承載過多的文字和重要信息。

3、一般是灰黑或黑色半透明，但是為了視覺美觀統(tǒng)一現(xiàn)出現(xiàn)提示更弱化的白色底和彩色底。

應(yīng)用場(chǎng)景：

1、正在加載等過程狀態(tài)

2、輕度提醒的結(jié)果狀態(tài)

優(yōu)化方案：

有些過程提醒的Toast提示可以優(yōu)化成另一種形式

1、多態(tài)按鈕

如果按鈕被按下后需要與服務(wù)器交互后才能真正響應(yīng)操作，那么等待難以避免。這種情況下可以給按鈕增加多個(gè)狀態(tài)，讓用戶知道App已經(jīng)接受到他的操作。典型的例子是支付寶的確認(rèn)付款按鈕，支付前、支付中和付款成功三個(gè)狀態(tài)。

2、動(dòng)效代替過程

現(xiàn)在動(dòng)效的應(yīng)用越來越越連貫和大膽，適當(dāng)?shù)膭?dòng)效可以省略一些過程提醒。例如電商App加入購(gòu)物車，商品飛入購(gòu)物車中，有趣流暢。

但是京東部分頁面的加入購(gòu)物車既做了動(dòng)效，又加了Toast提示，我覺得是比較多余的，此時(shí)toast提示可以去掉。

(2)、HUD提示

HUD是與Toast類似的ios系統(tǒng)上的效果。

HUD與Toast的區(qū)別：

1、HUD只出現(xiàn)在屏幕的中央，Toast應(yīng)用位置廣泛。

2、HUD可以包含內(nèi)容比較富豐，Toast一般用文字，或者加載動(dòng)效。

3、HUD一般是毛玻璃透明，Toast一般是灰黑或者黑色半透明，延伸顏色多。

4、HUD中內(nèi)容開發(fā)接受到信息后反饋所以可以變化（如調(diào)節(jié)音量時(shí)），Toast中內(nèi)容不可變化。

應(yīng)用場(chǎng)景：

(3)、Snackbar 對(duì)話框提示

nackbar 是 Android 5.0 新特性——Material Design 中的一個(gè)控件。Snackbar會(huì)在超時(shí)或者用戶在屏幕其他地方觸摸之后自動(dòng)消失；可以在屏幕上滑動(dòng)關(guān)閉；

出現(xiàn)時(shí)不會(huì)阻礙用戶在屏幕上的輸入。

Snackbar與Toast的區(qū)別：

1、Snackbar可以滑動(dòng)退出，也可以處理用戶交互（點(diǎn)擊）事件

2、Snackbar一般設(shè)置時(shí)間會(huì)比Toast長(zhǎng)。

設(shè)計(jì)原則：

1、屏幕上同時(shí)最多只能顯示一個(gè)Snackbar，需要多個(gè)時(shí)，則先將當(dāng)前顯示的Snackbar隱藏后再顯示新的Snackbar。

2、可以在Snackbar中添加一個(gè)按鈕，處理用戶點(diǎn)擊事件。

應(yīng)用場(chǎng)景：

用戶可能需要了解、感興趣的變更信息，如：安裝完成、任務(wù)刪除、好友消息、網(wǎng)絡(luò)錯(cuò)誤、賬號(hào)升級(jí)等

(4)、 Tips提示欄

開發(fā)沒有固定的組件，但是對(duì)設(shè)計(jì)語言來說，tips它是內(nèi)嵌在頁面上的，一般讓用戶觸發(fā)關(guān)閉或進(jìn)入下級(jí)頁面。

應(yīng)用場(chǎng)景：

一般用于需要用戶感知到的通知信息，例如金融類的到期提醒，或者類似廣告的輕度提示。

(5)、Popover 浮層（ios） / popup 浮層（安卓）

Popover是ios的，popup是安卓的，現(xiàn)在功能上基本相通了，所以我這邊就解析Popover

Popover 浮層

Popover（氣泡彈出框/彈出式氣泡/氣泡）是由一個(gè)矩形和三角箭頭組成的彈出窗口，箭頭指向的地方通常是導(dǎo)致Popover彈出的控件或區(qū)域。通過點(diǎn)擊Popover內(nèi)的按鈕或非Popover的屏幕其他區(qū)域可關(guān)閉Popover。

設(shè)計(jì)原則：

1、箭頭的指向很好的表達(dá)了Popover和觸發(fā)控件的潛在關(guān)系，用戶可以匹配對(duì)應(yīng)位置

2、相比于Action Sheet，Popover的三角箭頭能明確的指示當(dāng)前操作的是哪個(gè)條目，不易出錯(cuò)。Popover顯示區(qū)域較小呈現(xiàn)的選項(xiàng)有限，為了防止誤操作不建議在Popover里啟用滾動(dòng)，如果選項(xiàng)很多，建議使用Action Sheet。

應(yīng)用場(chǎng)景：

1、快捷導(dǎo)航

2、情境下的相關(guān)選項(xiàng)

3、提示引導(dǎo)

（6）強(qiáng)引導(dǎo)浮層

我為什么要把他單獨(dú)拎出來呢，因?yàn)檫@個(gè)浮層的應(yīng)用，已經(jīng)是模態(tài)提示了，此刻該對(duì)話框中的內(nèi)容獲取了焦點(diǎn)，想要操作對(duì)話框以外的功能。

設(shè)計(jì)原則：

因?yàn)閷?duì)用戶干擾比較大，且很多用戶在不敢興趣的請(qǐng)款下不會(huì)去進(jìn)行操作，所以現(xiàn)在用單純的氣泡彈窗不加遮罩的情況較多。

應(yīng)用場(chǎng)景：

比如我們上新功能，局部的按鈕、功能模塊搬家，一些復(fù)雜且容易被遺漏的一些操作，會(huì)使用這中浮層。

（7）動(dòng)作欄

因?yàn)橹罢f過很多英文解釋都是直接用的ios和安卓原生系統(tǒng)的英文代碼，所以動(dòng)作欄我沒有解釋成actionbar，因?yàn)榘沧块_發(fā)語言所講的actionbar并沒有彈窗意思，只是操作欄而已，所以不計(jì)入彈窗體系中。這里所以說的是底部的動(dòng)作欄，在Material Design里稱之為Bottom Sheets，在iOS的設(shè)計(jì)規(guī)范中有Activity Views和Action Sheets兩種。

我們這邊所說的動(dòng)作欄一般是從頁面底部出現(xiàn)，也有人稱底部動(dòng)作欄，在Material Design里稱之為Bottom Sheets，在iOS的設(shè)計(jì)規(guī)范中有Activity tanchuan和Action Sheets兩種。

操作欄本質(zhì)上也是收納操作選擇項(xiàng)，避免脫離該頁面重新開啟一個(gè)頁面，導(dǎo)致操作不連續(xù)，另一個(gè)優(yōu)點(diǎn)是更加節(jié)省界面空間。

設(shè)計(jì)原則：

1、一般由用戶主動(dòng)發(fā)起的任務(wù)。

2、收納內(nèi)容不易過多，如果較多需要限定內(nèi)容滑動(dòng)范圍。

應(yīng)用場(chǎng)景：

操作列表 Actionsheet

以簡(jiǎn)潔的功能描述性文字展示功能按鈕，敏感的功能操作一般用紅色字體標(biāo)出，主要應(yīng)用在操作選擇、刪除、拍照等。

操作視圖 Actionview

以圖標(biāo)和文字結(jié)合的形式展示功能，典型案例:分享、購(gòu)買、支付，現(xiàn)在延伸的場(chǎng)景比較多。

（8）對(duì)話框

對(duì)話框也就是我們熟知的彈窗，安卓開發(fā)語言 Dialog，ios開發(fā)語言Alert。對(duì)話框來傳達(dá)重要信息，需要用戶主動(dòng)操作或進(jìn)行選擇才能繼續(xù)。手機(jī)端一般至多2個(gè)按鈕，按鈕較多會(huì)選擇actionsheet，web端選項(xiàng)較多可使用復(fù)選框。

根據(jù)操作類型分類：

1、信息傳達(dá)-確認(rèn)/關(guān)閉

2、信息輸入-輸入提交

3、信息選擇-雙向按鈕

設(shè)計(jì)原則：

1、確保用戶能夠看到提示。

2、必須用戶主動(dòng)操作或進(jìn)行選擇才能繼續(xù)。

3、阻斷用戶最嚴(yán)重，需要克制使用。

應(yīng)用場(chǎng)景：

1、重要提示信息：跟用戶切身利益有關(guān)系的提示、產(chǎn)品本身重要的信息等

2、需要用戶選中或輸入信息的，如系統(tǒng)權(quán)限，或驗(yàn)證密碼等

2、商業(yè)意圖：廣告、推薦（大家都是為了掙錢，商業(yè)意圖有時(shí)候需要犧牲一些用戶體驗(yàn)。）

四、刪除提醒用什么

說到這里，我必須要說一下Alert View 與 Action Sheet 的區(qū)別

1、最重要的判斷原則是，用戶主動(dòng)發(fā)起的任務(wù)使用 Action Sheet，否則使用 Alert。

2、當(dāng)用戶的下一步操作，與當(dāng)前任務(wù)的主要目標(biāo)不符，或某些含有潛在風(fēng)險(xiǎn)的操作時(shí)，應(yīng)該使用 Action Sheet，而非 Alert。

舉一個(gè)典型的例子

之前寫過一篇關(guān)于微信7.0升級(jí)的文章，說道張小龍是很崇敬喬布斯的，所以設(shè)計(jì)產(chǎn)品的時(shí)候盡量跟著apple的規(guī)則來設(shè)計(jì)的。Apple和微信刪除都只用了Alert sheet，因?yàn)閯h除之前用戶是經(jīng)過思考的，有預(yù)見性的，而且不屬于頁面的主要操作行為。并且微信在刪除好友和不再關(guān)注的結(jié)果都提前跟用戶說明了。

那么刪除一定要用Alert sheet嗎？

當(dāng)然不是。在刪除列表項(xiàng)的時(shí)候，apple、微信、qq、淘寶都使用了列表刪除組件，但是他們出發(fā)刪除按鈕后的反饋卻不一樣。

1、apple短信刪除還是通過Alert sheet再次確認(rèn)刪除，因?yàn)槎绦艃?nèi)容包含信息多，相對(duì)可能是重要信息。

2、微信聊天列表刪除在原來按鈕區(qū)域用“確認(rèn)刪除”按鈕確認(rèn)刪除。主要原因是該會(huì)話刪除后，與該好友的聊天記錄也會(huì)完全清空。所以確認(rèn)是需要的，只不過我覺得第一次刪除時(shí)需要感知用戶“您的刪除將會(huì)導(dǎo)致會(huì)話記錄的清空”會(huì)更好。

3、qq聊天列表刪除點(diǎn)擊刪除就直接不見了，主要原因是該刪除并沒有清空聊天記錄或者其他影響，好友也可以通過搜索找到，只是做了一次“聊天界面的清理”

4、淘寶商品列表刪除點(diǎn)擊刪除也是直接不見了的，主要原因是女生購(gòu)物車東西太多，隨便刪，哈哈，而且刪除后在歷史足跡和搜索中任然能找到。

列表的刪除也會(huì)涉及到批量刪除。

1、apple批量刪除短信的時(shí)候，是直接刪除了，我個(gè)人理解原因是，當(dāng)你進(jìn)入“批量刪除”的狀態(tài)的時(shí)候，你的目的很明確，所以給用戶最爽的體驗(yàn)就直接刪除。

2、同樣是批量刪除，淘寶卻用了一個(gè)彈窗刪除，按照之前的邏輯是不是有問題呢。其實(shí)不然，短信刪除是信息管理，但是商品刪除，是違背商業(yè)意圖，“一兩個(gè)刪除是幫助你選擇更好的，批量刪除得讓我緩緩，你再思考一下吧”。但是我覺得彈窗還是過了，像京東使用actionsheet會(huì)更好，因?yàn)橛脩舻囊鈭D是很明確的。