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

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

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

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

步驟二：使用模板

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

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

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

本期組件：全局提示/toast

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

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

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

1. 交互說明

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

隱藏機制：默認顯示3秒，隨后隱藏。

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

2. 樣式說明

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

3. 頁面層級

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

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

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

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

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

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

1. 簡單描述

點擊后，彈出“全局提示 | 復制成功”。

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

2. 復雜描述

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

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

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

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

三、輸出說明模板

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

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