最近做交互總結(jié)，又碰到了頁面彈窗提示的問題，于是便總結(jié)了下。我按彈窗提示的樣式分為了以下幾種來進(jìn)行說明。每種樣式的提示強(qiáng)度不同，對(duì)用戶在使用app時(shí)的打擾與影響也不同。這些提示并不是說哪種好哪種不好，按照自己的規(guī)范選擇合理的就好。

以下總結(jié)，前三個(gè)提示的名稱是大家習(xí)以為常的，但后面幾個(gè)的命名是以我個(gè)人的經(jīng)驗(yàn)來命的，不一定很合理，但至少可以說明點(diǎn)問題。

Action sheet

Action sheet 即為操作列表，通常用于在當(dāng)前頁面給用戶提供快捷的選擇按鈕，用在功能較多，對(duì)次要功能進(jìn)行收納的界面中。

Action sheet的IOS與Android的展示樣式有所不同。IOS主要是以我們所熟知的半覆蓋式浮層，而Android以彈框菜單為主。如下圖：

iOS的半覆蓋式浮層&android的彈框菜單

上圖是app中最常見的樣式了，當(dāng)然也會(huì)遇到一些其它的樣式，如在adroid中有時(shí)也會(huì)用到半覆蓋式浮層，大多是用于分享到第三方的頁面。

還有一種情況是選擇菜單與當(dāng)前選項(xiàng)關(guān)系比較緊密，選擇菜單直接原地展開，當(dāng)前選項(xiàng)為選擇菜單中的一項(xiàng)。如下圖左邊是ios的popper樣式，右邊是android的卡片菜單。但在實(shí)際應(yīng)用當(dāng)中，兩個(gè)平臺(tái)并沒有很明顯的區(qū)分，一般就通用成左圖的樣式了。但手機(jī)屏幕比較小，用這咱展示樣式會(huì)很界面顯得比較碎，所以在app的實(shí)際應(yīng)用中，這種樣式很少用到。目前大家熟知的app中，微博首頁的分組用了這種方式切換，還有qq的v6.3.1版本的空間也帶入了這種設(shè)計(jì)。

iOS的popper樣式 &android的卡片菜單

Alert

Alert 即為彈框提示，也叫警示框，用于向用戶提供警示，用戶必須進(jìn)行操作后才能進(jìn)行下一步操作。主要用于系統(tǒng)向用戶提示操作后涉及隱私、及其他非常重要的信息或后果不可逆的操作流程中。必須給出明確的操作按鈕，主要以以下幾種樣式展現(xiàn)。為了引導(dǎo)用戶操作，有時(shí)會(huì)強(qiáng)化某按鈕，弱化另一按鈕。

常見的幾種alert樣式

alert打斷用戶的操作，因此應(yīng)減少其在app中的出現(xiàn)次數(shù)，同時(shí)也避免出現(xiàn)過多導(dǎo)致用戶對(duì)alert不重視。

還有一種alert提醒，在使用app時(shí)經(jīng)常遇到的，同時(shí)也是很另人生煩的，那就是要求對(duì)app評(píng)價(jià)的alert。這種提醒，往往會(huì)打斷用戶的操作，如果出現(xiàn)時(shí)機(jī)不恰當(dāng)，會(huì)讓人產(chǎn)生很厭煩的感覺。這里提到它，是因?yàn)樗路降牟僮靼粹o，一般有三個(gè)，所以上下排列，這咱排列相較于左右排列，按鈕間的間距比較小，所以也加大了操作失誤的機(jī)率。所以一般情況下慎用這種排布方式。

app引導(dǎo)好評(píng)

Toast

Toast即為浮層提示，快速地為用戶顯示少量的信息。

Toast浮動(dòng)顯示信息給用戶，它永遠(yuǎn)不會(huì)獲得焦點(diǎn)，不影響用戶的輸入等操作，主要用于一些幫助/提示。常用的有兩種樣式，純文字的和帶圖的。

常見的兩種toast樣式

這種提示樣式是最常見的，能夠告訴用戶目前的狀況，但又不會(huì)對(duì)用戶造成太多的干擾，一帶而過。同時(shí)這種提示也是比較容易被忽略掉的，所以對(duì)于一些比較重要的提示最好不要用這種樣式。

頁面文字提示

這也是一種比較常見的提示，主要用于對(duì)頁面內(nèi)容或是某個(gè)輸入框或按鈕進(jìn)行說明的文字。一般以淡而小的文字存在于頁面上，對(duì)用戶的操作影響比較小，提示性比較弱，僅僅是對(duì)當(dāng)前位置的說明，不會(huì)影響頁面的視覺焦點(diǎn)。

如下圖是支付寶螞蟻花唄的首頁，紅框中的文字是對(duì)前面描述的進(jìn)一步說明，不影響視覺焦點(diǎn)，看下月應(yīng)還金額時(shí)才會(huì)看到它們。在輸入界面這種提示比較多見，如注冊(cè)界面密碼規(guī)則的提示語等。

支付寶螞蟻花唄

頁面頂部的提示

位于頁面頂部的提示，有三種樣式，這三種樣式表達(dá)的輕重性不一，所用場景不同，對(duì)用戶的打擾程度也不同，是其它提示樣式的一種變體。

第一種：一直存在于頁面頂部，用于重要的提示或是沒網(wǎng)這種嚴(yán)重影響操作的提示。

如下圖，沒有網(wǎng)絡(luò)時(shí)，qq頂部的提示。

第二種：操作出錯(cuò)或是頁面內(nèi)容出錯(cuò)是從頁面頂部滑下，之后馬上消失，是toast的一種變形。這樣的提示比普通toast提示更顯眼些，更能引人注意到。

第三種，位于電池條的位置，用于一些上傳的地方，上傳需要時(shí)間，又要保證APP的流暢性，削弱對(duì)用戶的干擾，甚至把干擾減少至零。如發(fā)布動(dòng)態(tài)時(shí)，后臺(tái)上傳，在最頂部提示，這種提示更弱，很容易被忽略掉。這種提示也越來越少見了，沒找到圖片，請(qǐng)?jiān)试S我ps亂入一張。

頁面上的新功能提示

一般用于第一次出現(xiàn)的頁面，提示一些重要或是常用的功能，或是頁面功能搬家的提示。這種提示一般常見的一有兩種形式，突出重點(diǎn)的強(qiáng)弱性不同。

如下圖左邊的頁面，功能提示比較強(qiáng)，必須點(diǎn)擊掉提示才可進(jìn)入下一步操作。而右邊的形式就弱了好多，可看可不看，不影響頁面的操作。當(dāng)然這樣的功能說明的提示還可以從二者延伸出一些其它樣式，但終歸也就是必須看和無須看兩種吧。

必須看的功能提示&無須看的功能提示

特殊提示

通過頁面的變化進(jìn)行的提示，不影響頁面的整體布局，同時(shí)在用戶操作的地方提示，不容易被忽略。

支付寶的手勢(shì)密碼錯(cuò)誤的提示是個(gè)很好的例子，通過頭像的后退縮小，錯(cuò)誤提示文字的出現(xiàn)，很好的提示了用戶操作的錯(cuò)誤。最常見到這種提示的地方還有登錄注冊(cè)頁面，輸入錯(cuò)誤時(shí)，頁面出現(xiàn)細(xì)小而精致的變化，同時(shí)很好的提醒用戶。

大體上最常見的提示樣式都在這了吧，如有遺漏或是有更好的提示，后續(xù)更新。同時(shí)也歡迎小伙伴們?cè)掖u。

作者：snowgrain

來源：http://www.jianshu.com/p/3dc14c3733d4

本文由 @snowgrain 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。