有關(guān)全局提示/toast這一組件的原型說(shuō)明該怎么寫(xiě)？這篇文章里，作者做了說(shuō)明與解讀，不妨來(lái)看看吧，或許會(huì)對(duì)產(chǎn)品同學(xué)有所幫助。

開(kāi)發(fā)吐槽原型說(shuō)明不清晰，領(lǐng)導(dǎo)催促原型要快細(xì)節(jié)再說(shuō)，真是夾縫中生存的產(chǎn)品。今天教大家一個(gè)方法，既快又全。文末提供模板，可直接用。

步驟一：約定規(guī)范

如圖，與開(kāi)發(fā)、UI約定組件規(guī)范，并維護(hù)在獨(dú)立文檔中。

步驟二：使用模板

如圖，Axure可將帶說(shuō)明的通用組件置入元件庫(kù)，出原型時(shí)使用；開(kāi)發(fā)看到組件，則使用約定規(guī)范；墨刀同理。

那么，規(guī)范與模板應(yīng)該怎么寫(xiě)？

本系列將通過(guò)“通用、輸入、輸出、反饋”四類(lèi)約43個(gè)常用組件及3篇頁(yè)面（表單頁(yè)、列表頁(yè)、詳情頁(yè)）寫(xiě)法，將規(guī)范與模板分享予您。

本期組件：全局提示/toast

組件概述：常用于主動(dòng)操作后的反饋提示，在頂部居中位置顯示并自動(dòng)消失。是一種不打斷用戶(hù)操作的輕量級(jí)提示方式。

一、約定基礎(chǔ)規(guī)范

本節(jié)主要與研發(fā)約定默認(rèn)實(shí)現(xiàn)內(nèi)容，通過(guò)規(guī)范文檔維護(hù)。

1. 交互說(shuō)明

通過(guò)頁(yè)面按鈕或其他內(nèi)容，觸發(fā)提示，隨后自動(dòng)隱藏，彈出時(shí)不影響界面其他操作，同時(shí)界面操作也不影響顯示時(shí)長(zhǎng)。

做交互设计10年，我为何转岗到产品经理？

真正转岗之后，我发现很多工作还是超出了自己的想象。产品经理的工作确实比较杂。理论上，产品经理的工作包括了产品的方方面面，从市场研究、用户调研、数据分析...

查看详情 >

隱藏機(jī)制：默認(rèn)顯示3秒，隨后隱藏。

• 鼠標(biāo)懸停于提示中，不自動(dòng)隱藏；移開(kāi)后若超出時(shí)長(zhǎng)，則隱藏。
• 多個(gè)提示：短時(shí)間觸發(fā)多個(gè)，則新提示將舊提示往下擠。確保新提示保持在最頂部。

2. 樣式說(shuō)明

• 基礎(chǔ)樣式：區(qū)分信息、成功、警告、錯(cuò)誤四種類(lèi)型。樣式需與頁(yè)面有明顯層級(jí)差異，且顯而易見(jiàn)，UI可根據(jù)產(chǎn)品風(fēng)格，定義各類(lèi)型風(fēng)格。
• 文本說(shuō)明：提示文本需簡(jiǎn)短，一句話說(shuō)不清，建議用對(duì)話框。
• 出現(xiàn)位置：頂部居中位置，離頁(yè)面邊緣一定距離，要求不遮擋頂部菜單欄。

3. 頁(yè)面層級(jí)

需明確該組件所在的頁(yè)面層級(jí)，以防出現(xiàn)彈窗將全局提示遮蓋情況，層級(jí)建議如下：

數(shù)字越小層級(jí)越高，如1處在頂層：

1. 全局提示
2. 警告提示
3. 對(duì)話框
4. 彈窗
5. 抽屜
6. 頁(yè)面

二、約定可控參數(shù)

本節(jié)主要與研發(fā)約定原型中可控制的參數(shù)，也通過(guò)規(guī)范文檔維護(hù)。文中會(huì)提供示例參數(shù)，及參數(shù)填寫(xiě)說(shuō)明。

原型說(shuō)明中，通過(guò)“全局提示/toast |內(nèi)容”格式來(lái)表達(dá)需要一個(gè)全局提示/toast，及其中文案，舉例：

1. 簡(jiǎn)單描述

點(diǎn)擊后，彈出“全局提示 | 復(fù)制成功”。

表示使用消息類(lèi)型全局提示，文案為：復(fù)制成功。

2. 復(fù)雜描述

點(diǎn)擊后，彈出“全局提示|警告|上傳數(shù)量達(dá){即將上傳數(shù)量+已上傳數(shù)量}個(gè)，已超出最大數(shù)量10個(gè)|5秒”，關(guān)閉文件夾。

表示使用警告類(lèi)型全局提示，文案為：上傳數(shù)量達(dá){即將上傳數(shù)量+已上傳數(shù)量}個(gè)，已超出最大數(shù)量10個(gè)。且顯示時(shí)長(zhǎng)5秒。

其中，大括號(hào) {} 包住的是動(dòng)態(tài)數(shù)據(jù)，所需數(shù)據(jù)在其中說(shuō)明。

此應(yīng)用方式比較快速，但開(kāi)發(fā)時(shí)容易忽略。建議一些常規(guī)操作所需的提示，維護(hù)在規(guī)范文檔中。涉及業(yè)務(wù)層面的提示，通過(guò)流程圖維護(hù)。

三、輸出說(shuō)明模板

組件名稱(chēng)前加個(gè)“規(guī)范”，便于團(tuán)隊(duì)識(shí)別規(guī)范組件；模板可直接寫(xiě)入注釋?zhuān)⒋鏋锳xure/墨刀元件庫(kù)。

僅大致示例，后續(xù)將在“表單頁(yè)”中，通過(guò)完整流程圖演示。