原型說明咋寫-普通上傳圖片

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

產品經理在做原型設計時,需要寫好原型說明,這篇文章里,作者以“普通上傳圖片”這一組件為例,梳理了相應的規范和模板,一起來看看吧。

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

步驟一:約定規范

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

步驟二:使用模板

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

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

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

本期組件:普通上傳圖片。

組件概述:將圖片通過網頁或者上傳工具發布到遠程服務器上的過程。

一、約定基礎規范

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

1)默認狀態:點擊上傳按鈕,打開本地文件夾選文件上傳,支持多選;按鈕下方為提示文案,通常提示可上傳的格式及文件大?。淮蜷_本地文件夾有以下注意事項:

  • 顯示的文件:需過濾不可上傳的文件格式。
  • 單個文件過大:提交上傳時toast提示“文件大小超出限制”。
  • 已上傳文件數量:需計算已上傳數量+即將上傳數量是否超出限制,超出toast提示“文件數量超出限制”。

2)上傳狀態:通過百分比及進度條顯示上傳進度。懸停至上傳區域,有懸停樣式,點擊可取消上傳。注意點如下:

  • 上傳百分比需與開發確認實現方案。
  • 常規的小文件上傳,無需考慮斷點續傳,斷了則上傳失??;若業務需求必須斷點續傳,則與研發溝通具體方案。

3)上傳成功:顯示上傳成功樣式。懸停至上傳區域,有懸停樣式,點擊可取消上傳。

4)上傳失?。簩蟼饔涗洺适邮剑c擊“重傳”即重新上傳。

5)上傳多個文件:按上傳順序排列,多個文件同時上傳按文件夾內的文件順序排序,當超出5個,已上傳區域滾動顯示,并保持滾動至最新上傳文件。

6)懸停樣式:每個上傳狀態都有懸停樣式。此樣式有明顯的鼠標懸停態,點擊右側”關閉按鈕“可刪除此文件。點擊后,彈窗二次確認是否刪除。

二、約定可控參數

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

  1. 文件類型:根據業務需求確定可支持上傳的格式,一般為.jpg/.png/.bmp等。
  2. 文件大小:根據業務需求確定可支持上傳的大小,一般小于等于2mb。
  3. 文件數量:根據業務需求確定可支持上傳的數量,一般小于5個。
  4. 提示文案:即描述上傳按鈕下方提示文案的提示內容。
  5. 后置影響:上傳后,將影響關聯數據表數據。

三、輸出說明模板

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

  • 組件名稱:規范-普通上傳圖片。
  • 文件類型:.jpg/.png/.bmp。
  • 文件大?。盒∮诘扔?mb。
  • 文件數量:最多5個。
  • 提示文案:支持格式:.jpg/.png/.bmp,單個文件不超過2mb,最多上傳5個文件。
  • 后置影響:暫無。

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

題圖來自Unsplash,基于 CC0 協議

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

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