原型說明咋寫-通知

0 評論 1650 瀏覽 9 收藏 6 分鐘

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

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

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

步驟二:使用模板

如圖,Axure可將帶說明的通用組件置入元件庫,出原型時使用;開發(fā)看到組件,則使用約定規(guī)范;墨刀同理。【PS:想了解word如何使用,請評論留言哈】

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

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

=========強烈建議點個【關(guān)注】【收藏】不迷路=========

本期組件:通知

組件概述:全局展示的通知,在界面的右上角顯示和隱藏。常用于以下情況:較復(fù)雜的通知內(nèi)容;帶有交互給出用戶下一步行動點的通知;系統(tǒng)主動推送

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

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

1. 樣式及交互

1)樣式說明:區(qū)分信息、成功、警告、錯誤四種類型。UI可根據(jù)產(chǎn)品風(fēng)格,定義各類型風(fēng)格,要求與頁面有明顯層級差異。

  • 尺寸:使用前端組件的默認尺寸
  • 文本:提示文本需一句話說明白。通過內(nèi)容要求,區(qū)分普通樣式、帶標題樣式

2)交互說明:通過事件觸發(fā),彈出時不影響界面其他操作,同時界面操作也不影響顯示時長。

  • 關(guān)閉:通過關(guān)閉按鈕關(guān)閉,也可設(shè)置自動關(guān)閉時長
  • 多個:短時間觸發(fā)多個則新提示擠下舊提示,確保新提示在最頂部

2. 位置與層級

1)位置:右上角位置,離頁面邊緣一定距離,要求不遮擋頂部菜單欄

2)層級:需明確該組件所在的頁面層級,以防出現(xiàn)彈窗將全局提示遮蓋情況

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

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

1)類型:不填則默認為“消息”類型,可選“消息、成功、警告、錯誤”

注:此描述一般跟隨在元件名稱后

2)標題:不填則默認跟隨類型自帶標題,如需自定則描述

3)內(nèi)容:描述實際顯示內(nèi)容,如有動態(tài)數(shù)據(jù)或跳轉(zhuǎn)鏈接,則通過大括號{}表示,并另起一行說明數(shù)據(jù)來源或跳轉(zhuǎn),如需顯示{創(chuàng)建時間}

  • {創(chuàng)建時間}:此條記錄的創(chuàng)建時間
  • {任務(wù)名稱}:點擊后新頁面打開此任務(wù)頁面

4)關(guān)閉:控制通知的關(guān)閉方式,自動關(guān)閉也支持手動關(guān)閉。默認“僅手動”,可選“僅手動、4.5秒自動關(guān)閉”

5)事件:如關(guān)閉通知時觸發(fā)的事件,如對于一些提醒需用戶馬上處理,可增加“二次確認”

三、輸出說明模板

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

說明中直接描述比較快,但開發(fā)時容易忽略,且內(nèi)容較多易讀性差。建議常規(guī)操作的提示,維護在規(guī)范文檔中。業(yè)務(wù)層面提示,通過流程圖描述。

1.說明中直接描述

2.通過流程圖描述

結(jié)語

本系列持續(xù)更新,喜歡的朋友請點個【關(guān)注】【收藏】,您的鼓勵是我們持續(xù)分享的動力。

本文由 @產(chǎn)品工具庫 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自Unsplash,基于 CC0 協(xié)議

該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!