什么是提示？提示，指給予題型和解釋。提示指啟示；提起注意。映射到現(xiàn)實(shí)生活中，教學(xué)樓“請(qǐng)保持安靜”、廁所的標(biāo)示提示、飯店里禁止吸煙的牌子都是提示，是用來提醒人們注意自己的語言、行為

根據(jù)不同到使用場(chǎng)合這里梳理了5中提示操作的使用控件：分別是彈框提示、常駐提示、通知、全局提示、徽標(biāo)提示，這五種提示方式承載的信息量、優(yōu)先級(jí)和用戶操作場(chǎng)景各有不同

下面分別介紹這5種提示控件的使用場(chǎng)景：

一、彈框提示Modal

使用場(chǎng)景：

需要用戶處理事務(wù)，又不希望跳轉(zhuǎn)頁面以致打斷工作流程時(shí)，可以使用在當(dāng)前頁面正中打開一個(gè)浮層，承載相應(yīng)的操作。

另外當(dāng)需要一個(gè)簡潔的確認(rèn)框詢問用戶時(shí)，能夠讓用戶清晰的知道自己的操作，并且進(jìn)行二次確認(rèn)

設(shè)計(jì)原則：

聚焦：使用戶集中注意力確保任務(wù)得到解決，對(duì)話框一旦出現(xiàn)，應(yīng)當(dāng)呈現(xiàn)在頁面上方的視覺層。

清晰：對(duì)話框應(yīng)直接展示信息，并帶有相關(guān)或上下文信息響應(yīng)用戶任務(wù)或操作。

控件類型：

1、功能對(duì)話框：

• 除標(biāo)題、純文本內(nèi)容和按鈕外，還需要承載更多復(fù)雜信息時(shí)

• 可配置單選框、復(fù)選框、列表、穿梭框、圖片、頭像、插畫、視頻等

2、通知對(duì)話框：

• 用于警示、緊急、或簡單的二次彈窗確認(rèn)。

• 按鈕文案需承接上下文表述，并準(zhǔn)確引導(dǎo)用戶行為，如“確定”、“取消”、“刪除”。

• 簡單的消息提醒時(shí)或不可返回的操作，只提供一個(gè)按鈕用于關(guān)閉，如“知道了”“刷新”。

3、選項(xiàng)對(duì)話框

• 內(nèi)容不足以構(gòu)成單獨(dú)頁面或不希望跳轉(zhuǎn)新頁面的對(duì)話框，多使用于搜索、設(shè)置、內(nèi)容選擇；

• 需要完成的一系列任務(wù)操作，被選擇后立即生效，無需進(jìn)行確定反饋； 

二、常駐提示 Notice

使用場(chǎng)景：

常駐提示是一種非阻礙式的信息展示，它不打斷用戶的當(dāng)前操作，一般停留至頁面某個(gè)位置（優(yōu)先頂部），非浮層的靜態(tài)展現(xiàn)形式，始終展現(xiàn)，不會(huì)自動(dòng)消失，用戶可以點(diǎn)擊關(guān)閉。

設(shè)計(jì)原則：

直接：當(dāng)前頁面需要向用戶顯示需要關(guān)注的信息時(shí)，常駐提示顯示，要求用戶立即注意；

重點(diǎn)：常駐提示引起用戶注意，以確保其內(nèi)容得到解決。

控件類型：

常駐提示屬性包括常規(guī)提示、成功提示、警示提示、錯(cuò)誤提示四種。

普通提示：建議用于展示背景條件、政策信息、規(guī)范要求、當(dāng)前狀態(tài)等客觀內(nèi)容。

成功提示：建議用于展示已完成操作的成功狀態(tài)。

警告提示：建議用于展示可能會(huì)導(dǎo)致某種后果的警示性文本。

錯(cuò)誤提示：建議用于展示一個(gè)信息組的報(bào)錯(cuò)文本，如表單中同時(shí)滿足幾個(gè)條件時(shí)觸發(fā)整體報(bào)錯(cuò)，可用此樣式。

三、通知Notification

使用場(chǎng)景：

在系統(tǒng)四個(gè)角顯示通知提醒信息。經(jīng)常用于以下情況：

• 較為復(fù)雜的通知內(nèi)容。

• 帶有交互的通知，給出用戶下一步的行動(dòng)點(diǎn)。

• 系統(tǒng)主動(dòng)推送。

設(shè)計(jì)原則：

提示文本內(nèi)容以及交互方式盡量準(zhǔn)確、清晰、簡明，保證用戶在其消息自動(dòng)消失前了解提示信息或做出交互。

控件類型：

1、基礎(chǔ)樣式：分為基礎(chǔ)文字通知、基礎(chǔ)文字通知（帶操作）

2、根據(jù)業(yè)務(wù)需要在區(qū)域內(nèi)填充內(nèi)容或操作類組件的通知。

四、全局提示toast/ Message

使用場(chǎng)景：

通常出現(xiàn)時(shí)顯示幾秒后自動(dòng)消失，或者數(shù)據(jù)正在加載時(shí)顯示，提醒用戶已經(jīng)完成的動(dòng)作，或者已經(jīng)達(dá)成的目的，是用戶完成動(dòng)作后或者異常情況下的提示（pc端叫 Message，移動(dòng)端叫toast實(shí)質(zhì)上都是全局提示是一個(gè)控件）

設(shè)計(jì)原則：

在不跳轉(zhuǎn)頁面打斷用戶工作流程的前提下，提供成功、警告和錯(cuò)誤等反饋信息。不打斷用戶操作

控件類型：

1、刷新頁面時(shí)，提示更新的條數(shù)：

2、收藏或者其他操作，提示用戶操作成功：

五、徽標(biāo)提示 Badge

使用場(chǎng)景：

紅點(diǎn)、數(shù)字或文字，一般出現(xiàn)在通知圖標(biāo)或頭像的右上角，用于顯示需要處理的消息條數(shù)，通過醒目視覺形式吸引用戶處理。

設(shè)計(jì)原則：

跨平臺(tái)：可適用于 Windows/macOS/iOS/Android 平臺(tái)的所有套件產(chǎn)品，為產(chǎn)品提供一致的設(shè)計(jì)體驗(yàn)，使用戶在不同端使用產(chǎn)品時(shí)，都可以擁有流暢高效的使用體驗(yàn)。

直觀：通過清晰醒目的視覺形式告知用戶狀態(tài)，吸引用戶關(guān)注和處理。

控件類型

1、點(diǎn)狀徽標(biāo)

當(dāng)功能模塊更新、信息狀態(tài)為未讀、人員在線協(xié)同、信息量變化且無需告知具體數(shù)量或性質(zhì)時(shí)，使用點(diǎn)狀徽標(biāo)突出狀態(tài)

2、字符徽標(biāo)

內(nèi)容的信息量發(fā)生變化，且需要明確告知新增數(shù)量時(shí)

3、圖標(biāo)徽標(biāo)

在某些功能場(chǎng)景中，作為特殊狀態(tài)提示使用

4、角標(biāo)徽標(biāo)

通常出現(xiàn)在列表、卡片上，強(qiáng)調(diào)和突出其特殊狀態(tài)，其主要作用是標(biāo)記，或吸引用戶的注意力，提示用戶關(guān)注該事物或事件

總結(jié)

簡單的總結(jié)，并不是非常全面，還有很多需要繼續(xù)挖掘的技巧，還有很多需要學(xué)習(xí)的東西；有一點(diǎn)能夠肯定的是，要從實(shí)際的用戶場(chǎng)景中去考慮問題，用戶體驗(yàn)就必須站在用戶的角度，不能為了設(shè)計(jì)上的美感，而讓增加用戶學(xué)習(xí)成本，好的體驗(yàn)應(yīng)該就是用戶一眼就能看懂，操作簡便。

文章來源：站酷  作者：郭大毛

藍(lán)藍(lán)設(shè)計(jì)( www.0391cbd.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)