起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)APP退出登錄時(shí)，提示框是從中間彈出，還是底部彈起？
1. 問題引發(fā)
下圖左邊是微信的退出界面，提示框是從底部彈起的。
下圖右邊是QQ的退出界面，提示框是從中間彈出的。
這時(shí)候，就引發(fā)了一個(gè)問題：提示框 從中間彈出和 從底部彈起，有什么區(qū)別呢？
2. 想法探討，如下
- 只有提示信息的時(shí)候，提示框從中間彈出；
- 只有選擇按鈕的時(shí)候，提示框從底部彈起。
- 提示框從中間彈出，表示側(cè)重提示文字；進(jìn)而表示提示文字的內(nèi)容優(yōu)先級(jí)較高；
- 提示框從底部彈出，表示側(cè)重選擇按鈕；進(jìn)而表示選擇按鈕的功能優(yōu)先級(jí)較高；
3. 想法驗(yàn)證，分6種情況，分析如下
3.1、當(dāng)按鈕有2個(gè)時(shí)，且文字信息，對(duì)用戶影響不大，或者毫無影響的時(shí)候，采用底部彈起選擇控件
比如:上面截圖的微信APP界面，當(dāng)點(diǎn)擊微信的【退出登錄】按鈕時(shí)，從底部彈起選擇控件。因?yàn)榧兾淖中畔ⅲ瑢?duì)用戶毫無影響。純文字信息內(nèi)容：“退出后不會(huì)刪除任何歷史數(shù)據(jù)，下次登錄依然可以使用本賬號(hào)。”
提示文字的字體很小，視覺優(yōu)先級(jí)低于選擇按鈕，對(duì)于用戶來說，毫無影響。
既然純文字信息對(duì)用戶毫無影響，那么這里的控件就是純粹側(cè)重選擇。所以微信采用底部彈起選擇控件。
在底部彈起控件顯示文字比在中間提示框顯示的文字有2個(gè)優(yōu)點(diǎn)：
- A.?底部彈起控件的文字比中間彈窗的文字，底部彈起的文字信息更小，內(nèi)容的優(yōu)先級(jí)更低；
- B.?底部彈起控件的文字比中間彈窗的文字，底部選擇按鈕的優(yōu)先級(jí)更高。.
3.2、?當(dāng)按鈕有2個(gè)時(shí)，且文字信息，對(duì)用戶影響較大，采用中間彈出提示框
上圖的QQapp界面，當(dāng)點(diǎn)擊【退出當(dāng)前賬號(hào)】的按鈕時(shí)，采用了中間彈出提示框。原因：提示框的純文字信息對(duì)用戶影響較大。不像微信的提示框信息，對(duì)用戶毫無影響。
純文字信息“退出可能會(huì)使你連續(xù)登錄的249天的記錄歸零，QQ達(dá)人圖標(biāo)變灰，確認(rèn)退出？”
這段純文字傳達(dá)了【退出登錄】對(duì)用戶的影響有2點(diǎn)：
- A.?退出可能會(huì)使你連續(xù)登錄的249天的記錄歸零；
- B.?退出可能會(huì)使你的QQ達(dá)人圖標(biāo)變灰。
所以這里采用了中間彈出提示框，表示提示信息對(duì)用戶影響較大，文字的內(nèi)容優(yōu)先級(jí)較高，需要中間彈窗，起到警示的作用。
在中間提示框顯示文字比在底部彈起控件顯示的文字有2個(gè)優(yōu)點(diǎn)：
- A.?中間彈窗的文字比底部彈起控件的文字，中間的字體來得更大；
- B.?中間彈窗的文字比底部彈起控件的文字，中間的位置更顯目。
3.3、?當(dāng)按鈕選項(xiàng)，為0個(gè)時(shí)，采用中間彈出
比如：上圖中的美團(tuán)APP界面，點(diǎn)擊收藏按鈕，彈出提示框：收藏成功。在用戶看完之后，提示框自動(dòng)消失。這種純文字的，沒用按鈕的選擇的提示框，推薦從中間彈出。這里還有另一原因是，提示的文字信息，比較少。用戶可以在2秒以內(nèi)，理解全部信息。如果文字信息較多，用戶理解的時(shí)間，超過2秒，那么需要在提示文字的下面，添加一個(gè)按鈕比如，【知道了】。點(diǎn)擊【知道了】，提示框再消失。
3.4、?當(dāng)按鈕選項(xiàng)，為1個(gè)時(shí)，采用中間彈出
比如：上圖中的大眾點(diǎn)評(píng)APP的界面，提示框只有一段純文字。加上一個(gè)【確定】的按鈕，這個(gè)時(shí)候，表示側(cè)重提示文字，看完了純文字信息，點(diǎn)擊僅有的一個(gè)【確定】按鈕，就可以隱藏了。
這里需要加一個(gè)【確定】按鈕的原因是，純文字太多，導(dǎo)致不能估計(jì)用戶幾秒之內(nèi)可以看完并理解意思，所以這里需要加一個(gè)按鈕，讓不同的用戶，在不同的時(shí)間，看完之后，再點(diǎn)擊【確定】，讓提示框消失。.
3.5、當(dāng)按鈕選項(xiàng)，為3個(gè)時(shí)，采用底部彈出選擇控件
上圖是大眾點(diǎn)評(píng)APP的界面，當(dāng)點(diǎn)擊電話號(hào)碼的按鈕時(shí)，從底部彈起選擇控件，合計(jì)3個(gè)按鈕。而純文字信息量為0。所以，這里采用了底部彈起選擇控件的樣式。
3.6、當(dāng)按鈕選項(xiàng)，超過3個(gè)時(shí)，采用底部彈出選擇控件
上圖是美團(tuán)APP的界面，當(dāng)點(diǎn)擊分享按鈕時(shí)，會(huì)從底部彈起選擇控件，一共5個(gè)按鈕。這里采用底部彈起的原因是:?此時(shí)的提示性文字信息量為0，而選擇控件卻有5個(gè)，所以這里的優(yōu)先級(jí)別是：功能性的5個(gè)選擇按鈕，大于信息量為0的內(nèi)容。
這里側(cè)重選擇，所以采用底部彈起選擇控件。
4. 總結(jié)
上面是我最近對(duì)于QQ和微信的一點(diǎn)疑問，所引發(fā)的思考。
在點(diǎn)擊【退出】時(shí)，QQ從中間彈出提示框，而微信從底部彈起選擇控件。在這個(gè)地方的疑惑，我現(xiàn)在終于有了清晰的思路。身心愉悅感，油然而生。
#專欄作家#
張?jiān)棋X，人人都是產(chǎn)品經(jīng)理專欄作家，百度簽約作者，Ui中國(guó)認(rèn)證設(shè)計(jì)師；喜歡分析不同崗位的思維方式和溝通思路，偶爾網(wǎng)上冒泡，寫篇文章。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
去看看安卓和iOS的規(guī)范吧，扯這么多論據(jù)不充分，都是猜測(cè)
中間彈出的在蘋果規(guī)范中叫“Alerts”警報(bào)，下面彈出的是“action sheet”操作列表，還有一個(gè)帶有圖標(biāo)的支持更多操作的是“activity views”活動(dòng)視圖。 警報(bào)是模態(tài)的，有相應(yīng)的文字說明詳細(xì)的描述警報(bào)信息，警報(bào)是要引起用戶注意，告知用戶出現(xiàn)了什么問題時(shí)才用，比如沒有開啟相機(jī)權(quán)限，就不能使用掃一掃，告訴用戶去開權(quán)限。操作列表放置的是普通操作，是非模態(tài)的，打斷較小，可以承載更多數(shù)量的操作。用戶執(zhí)行操作是主動(dòng)的，有心理預(yù)期，我認(rèn)為這時(shí)不適合使用警報(bào)彈窗。
文中舉例的只有一個(gè)操作的彈窗，我認(rèn)為還是根據(jù)內(nèi)容的性質(zhì)決定使用彈窗形式，不是為了延長(zhǎng)時(shí)間讓用戶看的清。toast我用來做臨時(shí)性的消息提示，比如成功了，失敗了，加載中，字?jǐn)?shù)短，里面不會(huì)放原因說明的長(zhǎng)文本
分析的很詳細(xì)，謝謝分享 ??
IOS的規(guī)范中，action sheet也是模態(tài)哦
??
了解
我在【Ui中國(guó)】上，有一篇文章，閱讀量超過2萬。鏈接：http://i.ui.cn/ucenter/195080.html
作者先去看看android和iOS的人機(jī)交互指南
? 謝謝點(diǎn)評(píng)，我去看看這個(gè)。
首先還是要肯定下作者的鉆研精神。這里有幾點(diǎn)，和作者分享一下
文章中的截圖都是來自于蘋果手機(jī)，建議作者應(yīng)該去看下安卓平臺(tái)上的微信和QQ針對(duì)退出的彈出框位置。
其實(shí)從微信和QQ兩款產(chǎn)品的設(shè)計(jì)上來說，產(chǎn)品設(shè)計(jì)的思路是完全不一樣。
QQ追求以IOS設(shè)計(jì)為核心設(shè)計(jì)理念的產(chǎn)品設(shè)計(jì)宗旨，安卓APP則照搬蘋果設(shè)計(jì)標(biāo)準(zhǔn)，保證兩者一致。
微信則是以IOS平臺(tái)或者安卓平臺(tái)各自的設(shè)計(jì)標(biāo)準(zhǔn)進(jìn)行設(shè)計(jì)的，所以不同的平臺(tái)導(dǎo)致微信在蘋果與安卓平臺(tái)上的彈出框設(shè)計(jì)處理方式是不一樣的。
所以分析彈出框的設(shè)計(jì)前提是需要對(duì)兩款產(chǎn)品的核心設(shè)計(jì)理念進(jìn)行研究，明白各自產(chǎn)品的設(shè)計(jì)方向，而非單獨(dú)針對(duì)彈出框某個(gè)控件就事論事。
同時(shí)對(duì)于產(chǎn)品核心設(shè)計(jì)理念必須是由用戶畫像、成本、技術(shù)支持、市場(chǎng)定位等多方面客觀情況來決定。
所以個(gè)人淺見：
用戶、成本、技術(shù)、市場(chǎng)定位等客觀環(huán)境 決定 產(chǎn)品設(shè)計(jì)理念；
產(chǎn)品設(shè)計(jì)理念 決定 產(chǎn)品控件細(xì)節(jié)
?? 贊同！用戶、成本、技術(shù)、市場(chǎng)定位等客觀環(huán)境 決定 產(chǎn)品設(shè)計(jì)理念；
產(chǎn)品設(shè)計(jì)理念 決定 產(chǎn)品控件細(xì)節(jié)
?? 謝謝你的提醒。為什么這樣做的原因有3點(diǎn)：
1. 中間的位置，更凸顯提示性的純文字信息；
2.底部的位置，純文字的提示信息字體很小，表示提示信息的內(nèi)容優(yōu)先級(jí)別很低；
3. 選擇按鈕放在底部彈出，是為了表示此時(shí)選擇性的功能，優(yōu)先級(jí)別大于內(nèi)容性的純文字提示信息。
1.贊成大于2個(gè)操作按鈕時(shí)最好放在頁面底部。
2.會(huì)讓用戶丟失數(shù)據(jù)的操作，我理解的應(yīng)該放置在中間位置，并且文字提示要醒目。這種操作并不會(huì)進(jìn)行太頻繁。
1.我也贊成按鈕大于2個(gè)的時(shí)候，放在底部彈起提示框。
2.QQ放在中間，我也是很贊成的。因?yàn)樘崾拘缘奈淖?，需要顯目。放在中間彈窗的提示文字，不僅位置比底部顯目，而且字體可以比底部更大。
1.從單身操作的方面來說，我更喜歡把退出放到下面。
2.為什么按返回一定要提示框？“再按一次返回退出app”的提示更快更合理（有多少人退出app的時(shí)候會(huì)看提示文字？或者會(huì)認(rèn)真看?）
3.退出app提示文字，比如會(huì)清除緩存，會(huì)清除歷史記錄，這些完成可以放在設(shè)置選項(xiàng)里，用戶設(shè)置一次就不用煩了，每次退出都看到同樣的提示信息不煩躁？
? 1. 我也喜歡把【退出】按鈕放到下面。
2.【退出】按鈕，點(diǎn)擊之后，有提示框，是為了防止 誤觸。
3. 這是QQ為了和微信有點(diǎn)不一樣，才使用了不同的交互設(shè)計(jì)。
針對(duì)2，現(xiàn)在的很多都是按一次返回，提示再按一次退出?？梢圆挥猛顺霭粹o