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

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

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

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

步驟二：使用模板

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

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

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

什么是B端产品经理？和C端产品经理有什么区别？

B端产品经理中的B是Business，商业的意思，B端产品经理首先就要理解这个职位的重要性，要设计出更适合这个项目需求的产品方案，B最终产品经理在日常工作中...

查看详情 >

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

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

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

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

1）默認狀態(tài)：點擊上傳按鈕，打開本地文件夾選文件上傳，支持多選；按鈕下方為提示文案，通常提示可上傳的格式及文件大小；打開本地文件夾有以下注意事項：

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

2）上傳狀態(tài)：通過百分比及進度條顯示上傳進度。懸停至上傳區(qū)域，有懸停樣式，點擊可取消上傳。注意點如下：

• 上傳百分比需與開發(fā)確認實現(xiàn)方案。
• 常規(guī)的小文件上傳，無需考慮斷點續(xù)傳，斷了則上傳失敗；若業(yè)務需求必須斷點續(xù)傳，則與研發(fā)溝通具體方案。

3）上傳成功：顯示上傳成功樣式。懸停至上傳區(qū)域，有懸停樣式，點擊可取消上傳。

4）上傳失?。簩蟼饔涗洺适邮?，點擊“重傳”即重新上傳。

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

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

二、約定可控參數

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

1. 文件類型：根據業(yè)務需求確定可支持上傳的格式，一般為.jpg/.png/.bmp等。
2. 文件大?。焊鶕I(yè)務需求確定可支持上傳的大小，一般小于等于2mb。
3. 文件數量：根據業(yè)務需求確定可支持上傳的數量，一般小于5個。
4. 提示文案：即描述上傳按鈕下方提示文案的提示內容。
5. 后置影響：上傳后，將影響關聯(lián)數據表數據。

三、輸出說明模板

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

• 組件名稱：規(guī)范-普通上傳圖片。
• 文件類型：.jpg/.png/.bmp。
• 文件大小：小于等于2mb。
• 文件數量：最多5個。
• 提示文案：支持格式：.jpg/.png/.bmp，單個文件不超過2mb，最多上傳5個文件。
• 后置影響：暫無。