原型說明咋寫-全局提示/toast

0 評論 3535 瀏覽 12 收藏 6 分鐘

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

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

步驟一:約定規范

如圖,與開發、UI約定組件規范,并維護在獨立文檔中。

步驟二:使用模板

如圖,Axure可將帶說明的通用組件置入元件庫,出原型時使用;開發看到組件,則使用約定規范;墨刀同理。

那么,規范與模板應該怎么寫?

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

本期組件:全局提示/toast

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

一、約定基礎規范

本節主要與研發約定默認實現內容,通過規范文檔維護。

1. 交互說明

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

隱藏機制:默認顯示3秒,隨后隱藏。

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

2. 樣式說明

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

3. 頁面層級

需明確該組件所在的頁面層級,以防出現彈窗將全局提示遮蓋情況,層級建議如下:

數字越小層級越高,如1處在頂層:

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

二、約定可控參數

本節主要與研發約定原型中可控制的參數,也通過規范文檔維護。文中會提供示例參數,及參數填寫說明。

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

1. 簡單描述

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

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

2. 復雜描述

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

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

其中,大括號 {} 包住的是動態數據,所需數據在其中說明。

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

三、輸出說明模板

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

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

本文由 @產品工具庫 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!