稍微復(fù)雜一點(diǎn)的產(chǎn)品都少不了提示功能,這種全局模塊既需要整體解決方案,也需要具體運(yùn)用規(guī)則。以手機(jī)app為例,提示種類很多(操作成功、操作失敗、收藏點(diǎn)贊、二次確認(rèn)……),展示形式也很多。
我最近對這一方面有所思考,結(jié)合外網(wǎng)資料整理了一套提示設(shè)計的方法和建議。為了方便解釋,下面會以移動端為例,但是核心的方法理念是適用于各種終端平臺的。
下文會從三個角度分析提示設(shè)計——重要程度、出現(xiàn)位置和內(nèi)容構(gòu)成。
一、重要程度
提示種類之多,幾乎無法完全枚舉,況且很多bug提示是無法在設(shè)計時就預(yù)料到的,所以比較實(shí)際的方法是用重要程度劃分提示。但是以什么為依據(jù)呢?我這里參考了的可用性問題評級規(guī)則,利用「如果沒有提示,可能對用戶產(chǎn)生的影響」來判斷提示的重要程度。
1.重度提示
不可逆、涉及金錢或不建議的變更信息,如:永久刪除、購買、取消關(guān)注……
設(shè)計方向:
確保用戶能夠看到提示,哪怕打斷當(dāng)前任務(wù)。必須用戶主動操作或進(jìn)行選擇才能繼續(xù)。
2.中度提示
用戶可能需要了解、感興趣的變更信息,如:好友消息、網(wǎng)絡(luò)錯誤、賬號升級……
設(shè)計方向:
在盡量不打斷當(dāng)前任務(wù)的前提下,確保用戶可以看到提示。不自動消失,但用戶可以選擇忽視。
3.輕度提示
用戶可以預(yù)料的變更信息,如:發(fā)送成功、添加收藏、開啟省流量模式……
設(shè)計方向:
避免對當(dāng)前任務(wù)產(chǎn)生任何干擾,讓感興趣的用戶能夠發(fā)現(xiàn)提示。自動消失,無需任何操作。
二、出現(xiàn)位置
位置對于注意力來說非常重要,提示出現(xiàn)在不同地方會產(chǎn)生完全不同的效果。因?yàn)榭赡艿奈恢锰?,這里主要將其分為三類。
1.原位
在用戶原本操作之處、視線焦點(diǎn)出現(xiàn)提示肯定是最好的方式。
因?yàn)闊o論引導(dǎo)如何強(qiáng)烈,對用戶來說有一個代價是無可避免的——轉(zhuǎn)移視線。尤其是有時候用戶做某件事情太過集中時,可能再強(qiáng)的旁側(cè)提示都無法引起注意。所以像這樣相當(dāng)于把信息放到用戶眼前,就消減了很多問題和代價。
這種方式固然好,但是可行性卻相對較低。像上例中收藏圖標(biāo)點(diǎn)一下加個動效變實(shí)心這種當(dāng)然簡單,但是很多提示(如加載失?。┒疾淮嬖谟|發(fā)操作或不確定視線焦點(diǎn),對于這類提示要用原位展示的話,視線成本就比較高了。
2.中央
中央彈窗、浮層可能是我們印象最深刻的提示位置了,無需過多解釋。
這種提示必然從視覺上打斷了當(dāng)前任務(wù),所以更加適合程度較高的提示。
如果自動消失,也是可以運(yùn)用于弱提示的,但是這樣的效果遠(yuǎn)比不上在原位提示更好。尤其是如果觸發(fā)操作或視線焦點(diǎn)在界面邊緣,屏幕中央出現(xiàn)一閃即逝的弱提示未必能夠引起注意。
總的來說,中央位置算是比較省事保險的方案。
3.邊緣
消息推送、角標(biāo)這類利用界面邊緣位置的提示也很常見。
這種位置的好處是不會打擾當(dāng)前任務(wù),且頂部或底部位置可以擺放較多文字,適合中度或輕度提示。
缺點(diǎn)也很明顯,即很容易被忽略,所以通常要搭配動效、音效。更糟糕的情況是,這種邊緣很有可能距離觸發(fā)操作和視線焦點(diǎn)較遠(yuǎn),如果不巧發(fā)生了,那么用戶很有可能看不到。
三、結(jié)構(gòu)組成
1.關(guān)閉
傳統(tǒng)windows都是清一色帶有關(guān)閉按鈕的,但是大部分情況可能并不需要這個按鈕。因?yàn)椋?br>重度提示會在用戶進(jìn)行選擇操作后自動消失,所以不需要關(guān)閉。輕度提示會很快自動消失,也不需要關(guān)閉。只有無必選項(xiàng)的中度提示才可能需要關(guān)閉按鈕。
2.標(biāo)題
為了不干擾用戶,提示應(yīng)該是越簡潔易懂越好,所以標(biāo)題這個東西就很雞肋了。由于一些系統(tǒng)彈窗的結(jié)構(gòu)限制,有時在配置提示的時候?yàn)榱颂畛錁?biāo)題區(qū)域,不得不寫上「提示」、「二次確認(rèn)」這種毫無意義的文字。
沒有必要就不要強(qiáng)塞標(biāo)題了,除了給用戶造成閱讀負(fù)擔(dān)之外沒有任何好處。
3.圖片
從純粹的人機(jī)交互上來說,大部分提示其實(shí)完全不用配圖,尤其是有些系統(tǒng)為了強(qiáng)行配圖,每個提示框都加上一個等級強(qiáng)度的圖標(biāo),這樣做其實(shí)沒有什么意義。
但是從視覺美感和易于記憶的角度來看,搭配一些真正合適好看的圖也是不錯的。
4.選項(xiàng)
重度提示通常都是要求用戶選擇操作的;輕度提示一般自動消失不需要進(jìn)行任何選擇。
所以關(guān)鍵在于中度提示是否需要提供選項(xiàng)呢?最好是能夠提供可選操作,哪怕用戶可以關(guān)閉或無視提示。
例如在打開新頁面時,因?yàn)榱髁刻髥栴}而出錯。如果簡單處理,給用戶說明出錯理由就好了。但是如果要真正為體驗(yàn)而設(shè)計,就要考慮用戶此時的心理。用戶發(fā)現(xiàn)頁面打不開,不管理由如何就是會覺得不開心。如果這里有一個反饋入口,提供一個宣泄途徑,哪怕實(shí)際上并不能夠解決任何問題,至少能讓用戶在心理上有「做出了努力」的感覺。
5.情感
這是很有意思的一點(diǎn),也是近幾年來才出現(xiàn)的設(shè)計趨勢。大部分人都對可愛的事物持有較高的容忍度,例如一個成年人走路摔了一下會被嘲笑,而一個小孩子走路摔了一跤會被說可愛,這可能和呵護(hù)下一代的天性有關(guān)吧。
利用人的感性這一點(diǎn),如果將系統(tǒng)包裝成一個較為可愛的人物形象,就能提高用戶對問題的容忍度。提示通常會對用戶造成一定干擾,尤其是問題提示,這些情況是最需要容忍度的,所以此處也是情感包裝的良機(jī)。
normal
0
7.8 磅
0
2
false
false
false
en-us
zh-cn
x-none
/* style definitions */
table.msonormaltable
{mso-style-name:普通表格;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:;
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:calibri,sans-serif;}