清晰的原型說明有助于產品經理工作上的對接，這篇文章里，作者就針對“拖拽上傳文件”這一組件梳理了相應的說明與規范，不妨一起來看看吧。

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

步驟一：約定規范

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

步驟二：使用模板

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

那么，規范與模板應該怎么寫？

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

本期組件：拖拽上傳文件。

組件概述：將信息（網頁、文字、圖片、視頻等）通過網頁或者上傳工具發布到遠程服務器的過程。

一、約定基礎規范

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

1. 模塊整體說明

1）“上傳區”說明

樣式說明：整個模塊為上傳區，鼠標懸停有對應樣式如高亮圖標與描邊，內部有手動上傳按鈕及說明文案，文案通常提示可上傳的格式、大小、數量及其他注意項。

上傳方式：

• 拖拽上傳：拖拽文件到“上傳區”，支持同時拖拽多個。
• 點擊上傳：點擊文字按鈕，打開本地文件夾選文件上傳，支持多選。文件夾可選文件需過濾不可上傳格式。

上傳異常處理方式：

• 單個文件過大：提交上傳時toast提示“文件大小超出限制”。
• 已上傳文件數量：需計算已上傳數量+即將上傳數量是否超出限制，超出toast提示“文件數量超出限制”。
• 文件格式錯誤：拖拽上傳時文件格式不可控，組件需識別。當遇到非法格式則不可上傳，并toast提示“包含不支持格式文件，請過濾后再試一次”。

2）“已上傳操作區”說明

• 一個文件對應一個上傳卡片，按上傳順序從上到下排列；
• 多個文件同時上傳按文件夾內的文件順序排序；
• 超出5個，則滾動顯示，并保持滾動至最新上傳文件。

2. 拆分說明-已上傳操作區

1）上傳中：通過百分比及進度條顯示上傳進度。懸停至上傳區域，有懸停樣式，點擊可取消上傳。注意點如下：

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

2）上傳成功：顯示上傳成功樣式。

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

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

二、約定可控參數

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

1. 文件類型：根據業務需求確定可支持上傳的文件格式，一般為.rar .zip .doc .docx .pdf等
2. 文件大?。焊鶕I務需求確定可支持上傳的文件大小，一般小于等于20MB
3. 文件數量：根據業務需求確定可支持上傳的文件數量
4. 提示文案：即描述上傳按鈕下方提示文案的提示內容，一般小于等于5個
5. 后置影響：上傳后，將影響關聯數據表數據

三、輸出說明模板

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

• 組件名稱：規范-拖拽上傳文件
• 文件類型：.rar .zip .doc .docx .pdf
• 文件大?。盒∮诘扔?00kb
• 文件數量：最多5個
• 提示文案：按住Ctrl可同時多選，支持上傳.rar .zip .doc .docx .pdf格式文件，單文件不超500kbn嚴禁上傳包含色情、暴力、反動等相關違法信息文件
• 后置影響：暫無