本文作者以移動(dòng)端為例，從三個(gè)角度分析提示設(shè)計(jì)——重要程度、出現(xiàn)位置和內(nèi)容構(gòu)成。enjoy~

稍微復(fù)雜一點(diǎn)的產(chǎn)品都少不了提示功能，這種全局模塊即需要整體解決方案，也需要具體運(yùn)用規(guī)則。以手機(jī) App 為例，提示種類(lèi)很多（操作成功、操作失敗、收藏點(diǎn)贊、二次確認(rèn)…）；展示形式也很多。

我最近對(duì)這一方面有所思考，結(jié)合外網(wǎng)資料整理了一套提示設(shè)計(jì)的方法和建議。為了方便解釋?zhuān)旅鏁?huì)以移動(dòng)端為例，但是核心的方法理念是適用于各種終端平臺(tái)的。

下文會(huì)從三個(gè)角度分析提示設(shè)計(jì)——重要程度、出現(xiàn)位置和內(nèi)容構(gòu)成。

1. 重要程度

提示種類(lèi)之多，幾乎無(wú)法完全枚舉，況且很多Bug提示是無(wú)法在設(shè)計(jì)時(shí)就預(yù)料到的。所以比較實(shí)際的方法是用重要程度劃分提示。但是以什么為依據(jù)呢？我這里參考了的可用性問(wèn)題評(píng)級(jí)規(guī)則，利用“如果沒(méi)有提示，可能對(duì)用戶(hù)產(chǎn)生的影響”來(lái)判斷提示的重要程度。

想要了解可用性問(wèn)題評(píng)級(jí)規(guī)則的話，可以去看我早期寫(xiě)的這篇理論性較強(qiáng)的文章：《正視可用性問(wèn)題》

1.1 重度提示

不可逆、涉及金錢(qián)或不建議的變更信息，如：永久刪除、購(gòu)買(mǎi)、取消關(guān)注…

設(shè)計(jì)方向：

• 確保用戶(hù)能夠看到提示，哪怕打斷當(dāng)前任務(wù)
• 必須用戶(hù)主動(dòng)操作或進(jìn)行選擇才能繼續(xù)

1.2 中度提示

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

設(shè)計(jì)方向：

• 在盡量不打斷當(dāng)前任務(wù)的前提下，確保用戶(hù)可以看到提示
• 不自動(dòng)消失，但用戶(hù)可以選擇忽視

1.3 輕度提示

用戶(hù)可以預(yù)料的變更信息，如：發(fā)送成功、添加收藏、開(kāi)啟省流量模式…

設(shè)計(jì)方向：

• 避免對(duì)當(dāng)前任務(wù)產(chǎn)生任何干擾，讓感興趣的用戶(hù)能夠發(fā)現(xiàn)提示
• 自動(dòng)消失，無(wú)需任何操作

2. 出現(xiàn)位置

位置對(duì)于注意力來(lái)說(shuō)非常重要，提示出現(xiàn)在不同地方會(huì)產(chǎn)生完全不同的效果。因?yàn)榭赡艿奈恢锰?，這里主要將其分為三類(lèi)：

2.1 原位

在用戶(hù)原本操作之處、視線焦點(diǎn)出現(xiàn)提示肯定是最好的方式。

因?yàn)闊o(wú)論引導(dǎo)如何強(qiáng)烈，對(duì)用戶(hù)來(lái)說(shuō)有一個(gè)代價(jià)是無(wú)可避免的——轉(zhuǎn)移視線。尤其是有時(shí)候用戶(hù)做某件事情太過(guò)集中時(shí)，可能再?gòu)?qiáng)的旁側(cè)提示都無(wú)法引起注意。所以像這樣相當(dāng)于把信息放到用戶(hù)眼前，就消減了很多問(wèn)題和代價(jià)。

這種方式固然好，但是可行性卻相對(duì)較低。像上例中收藏圖標(biāo)點(diǎn)一下加個(gè)動(dòng)效變實(shí)心這種當(dāng)然簡(jiǎn)單，但是很多提示（如加載失敗）都不存在觸發(fā)操作或不確定視線焦點(diǎn)，對(duì)于這類(lèi)提示要用原位展示的話，視線成本就比較高了。

也就是 Google 這種量級(jí)的公司，才敢在構(gòu)架 Material Design 時(shí)提出，我之前也在《谷歌 Material Design 從這些方面打破了我思維局限》中用“不是視線追蹤元素，而是元素追蹤視線”進(jìn)行了闡釋?？梢簿瓦B Google 這種量級(jí)的公司，都沒(méi)有辦法真正將這套理念鋪展運(yùn)用起來(lái)，實(shí)際上他們大部分產(chǎn)品并沒(méi)有實(shí)現(xiàn) Material Design 中的很多理想化的設(shè)計(jì)。

但是從技術(shù)發(fā)展的發(fā)展速度來(lái)看，這些應(yīng)該都不是太遙遠(yuǎn)的事情。

2.2 中央

中央彈窗、浮層可能是我們印象最深刻的提示位置了，無(wú)需過(guò)多解釋。

這種提示必然從視覺(jué)上打斷了當(dāng)前任務(wù)，所以更加適合重度程度較高的提示。

如果自動(dòng)消失，也是可以運(yùn)用于弱提示的，但是這樣的效果遠(yuǎn)比不上在原位提示更好。尤其是如果觸發(fā)操作或視線焦點(diǎn)在界面邊緣，之后屏幕中央出現(xiàn)一閃即逝的弱提示未必能夠引起注意。

總的來(lái)說(shuō)，中央位置算是比較省事保險(xiǎn)的方案。

2.3 邊緣

消息推送、角標(biāo)這類(lèi)利用界面邊緣位置的提示也很常見(jiàn)。

這種位置的好處是不會(huì)打擾當(dāng)前任務(wù)，且頂部或底部位置可以擺放較多文字，適合中度或輕度提示。

缺點(diǎn)也很明顯，即很容易被忽略，所以通常要搭配動(dòng)效、音效。更糟糕的情況是，這種邊緣很有可能距離觸發(fā)操作和視線焦點(diǎn)較遠(yuǎn)，如果不巧發(fā)生了，那么用戶(hù)很有可能看不到。

3. 結(jié)構(gòu)組成

3.1 關(guān)閉

傳統(tǒng)Windows都是清一色帶有關(guān)閉按鈕的，但是大部分情況可能并不需要這個(gè)按鈕。因?yàn)椋?/p>

• 重度提示會(huì)在用戶(hù)進(jìn)行選擇操作后自動(dòng)消失，所以不需要關(guān)閉。
• 輕度提示會(huì)很快自動(dòng)消失，也不需要關(guān)閉。
• 只有無(wú)必選項(xiàng)的中度提示才可能需要關(guān)閉按鈕。

3.2 標(biāo)題

為了不干擾用戶(hù)，提示應(yīng)該是越簡(jiǎn)潔易懂越好，所以標(biāo)題這個(gè)東西就很雞肋了。由于一些系統(tǒng)彈窗的結(jié)構(gòu)限制，有時(shí)在配置提示的時(shí)候?yàn)榱颂畛錁?biāo)題區(qū)域，不得不寫(xiě)上“提示”、“二次確認(rèn)”這種毫無(wú)意義的文字。

沒(méi)有必要就不要強(qiáng)塞標(biāo)題了，除了給用戶(hù)造成閱讀負(fù)擔(dān)之外沒(méi)有任何好處。

3.3 圖片

從純碎的人機(jī)交互上來(lái)說(shuō)，大部分提示其實(shí)完全不用配圖，尤其有些系統(tǒng)為了強(qiáng)行配圖，每個(gè)提示框都加上一個(gè)等級(jí)強(qiáng)度的圖標(biāo)，這樣做其實(shí)沒(méi)有什么意義。

但是從視覺(jué)美感和易于記憶的角度來(lái)看，搭配一些真正合適好看的圖也是不錯(cuò)的。

3.4 選項(xiàng)

重度提示通常都是要求用戶(hù)選擇操作的；輕度提示一般自動(dòng)消失不需要進(jìn)行任何選擇。

所以關(guān)鍵在于中度提示是否需要提供選項(xiàng)呢？最好是能夠提供可選操作，哪怕用戶(hù)可以叉掉或無(wú)視提示。

例如在打開(kāi)新頁(yè)面時(shí)，因?yàn)榱髁刻髥?wèn)題而出錯(cuò)。如果簡(jiǎn)單處理，給用戶(hù)講一下出錯(cuò)理由就好了。但是如果要真正為體驗(yàn)而設(shè)計(jì)，就要考慮用戶(hù)此時(shí)的心理。用戶(hù)發(fā)現(xiàn)頁(yè)面打不開(kāi)，不管理由如何就是會(huì)覺(jué)得不開(kāi)心。如果這里有一個(gè)反饋入口，提供一個(gè)宣泄途徑，哪怕實(shí)際上并不能夠解決任何問(wèn)題，至少能讓用戶(hù)在心理上有“做出了努力”的感覺(jué)。

3.5 情感

這是很有意思的一點(diǎn)，也是近幾年來(lái)才出現(xiàn)的設(shè)計(jì)趨勢(shì)。大部分人都對(duì)可愛(ài)的事物持有較高的容忍度，例如一個(gè)成年人走路摔了一下會(huì)被嘲笑，而一個(gè)小孩子走路摔了一跤會(huì)被說(shuō)可愛(ài)，這可能和呵護(hù)下一代的天性有關(guān)吧。

利用人的感性這一點(diǎn)，如果將系統(tǒng)包裝成一個(gè)較為可愛(ài)的人物形象，就能提高用戶(hù)對(duì)問(wèn)題的容忍度。提示通常會(huì)對(duì)用戶(hù)造成一定干擾，尤其是問(wèn)題提示，這些情況是最需要容忍度的，所以此處也是情感包裝的良機(jī)。

作者：Z Yuhan，知乎專(zhuān)欄：交互進(jìn)階

來(lái)源：https://zhuanlan.zhihu.com/p/35974525?group_id=971686050897227776

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

題圖來(lái)自 Pexels，基于 CC0 協(xié)議