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

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

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

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

步驟二：使用模板

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

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

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

本期組件：全局提示/toast

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

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

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

1. 交互說明

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

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

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

2. 樣式說明

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

3. 頁面層級

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

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

1. 全局提示
2. 警告提示
3. 對話框
4. 彈窗
5. 抽屜
6. 頁面

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

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

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

1. 簡單描述

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

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

2. 復(fù)雜描述

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

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

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

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

三、輸出說明模板

組件名稱前加個(gè)“規(guī)范”，便于團(tuán)隊(duì)識別規(guī)范組件；模板可直接寫入注釋，并存為Axure/墨刀元件庫。

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