經(jīng)驗(yàn)總結(jié):APP頁(yè)面提示樣式,選擇合理的就好

4 評(píng)論 39458 瀏覽 255 收藏 10 分鐘

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

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

Action sheet

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

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

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

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

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

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

Alert

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

常見(jiàn)的幾種alert樣式

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

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

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

Toast

Toast即為浮層提示,快速地為用戶(hù)顯示少量的信息。

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

常見(jiàn)的兩種toast樣式

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

頁(yè)面文字提示

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

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

支付寶螞蟻花唄

頁(yè)面頂部的提示

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

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

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

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

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

頁(yè)面上的新功能提示

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

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

必須看的功能提示&無(wú)須看的功能提示

特殊提示

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

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

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

 

作者:snowgrain

來(lái)源:http://www.jianshu.com/p/3dc14c3733d4

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. ?? 實(shí)用

    來(lái)自廣東 回復(fù)
  2. 好文章!

    回復(fù)
  3. 受教了?。。?/p>

    來(lái)自江蘇 回復(fù)
  4. 就喜歡這樣的總結(jié)性文章。

    來(lái)自北京 回復(fù)