清晰的原型說(shuō)明有助于產(chǎn)品經(jīng)理工作上的對(duì)接，這篇文章里，作者就針對(duì)“拖拽上傳文件”這一組件梳理了相應(yīng)的說(shuō)明與規(guī)范，不妨一起來(lái)看看吧。

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

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

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

步驟二：使用模板

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

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

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

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

組件概述：將信息（網(wǎng)頁(yè)、文字、圖片、視頻等）通過(guò)網(wǎng)頁(yè)或者上傳工具發(fā)布到遠(yuǎn)程服務(wù)器的過(guò)程。

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

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

1. 模塊整體說(shuō)明

1）“上傳區(qū)”說(shuō)明

樣式說(shuō)明：整個(gè)模塊為上傳區(qū)，鼠標(biāo)懸停有對(duì)應(yīng)樣式如高亮圖標(biāo)與描邊，內(nèi)部有手動(dòng)上傳按鈕及說(shuō)明文案，文案通常提示可上傳的格式、大小、數(shù)量及其他注意項(xiàng)。

上傳方式：

• 拖拽上傳：拖拽文件到“上傳區(qū)”，支持同時(shí)拖拽多個(gè)。
• 點(diǎn)擊上傳：點(diǎn)擊文字按鈕，打開(kāi)本地文件夾選文件上傳，支持多選。文件夾可選文件需過(guò)濾不可上傳格式。

上傳異常處理方式：

• 單個(gè)文件過(guò)大：提交上傳時(shí)toast提示“文件大小超出限制”。
• 已上傳文件數(shù)量：需計(jì)算已上傳數(shù)量+即將上傳數(shù)量是否超出限制，超出toast提示“文件數(shù)量超出限制”。
• 文件格式錯(cuò)誤：拖拽上傳時(shí)文件格式不可控，組件需識(shí)別。當(dāng)遇到非法格式則不可上傳，并toast提示“包含不支持格式文件，請(qǐng)過(guò)濾后再試一次”。

2）“已上傳操作區(qū)”說(shuō)明

• 一個(gè)文件對(duì)應(yīng)一個(gè)上傳卡片，按上傳順序從上到下排列；
• 多個(gè)文件同時(shí)上傳按文件夾內(nèi)的文件順序排序；
• 超出5個(gè)，則滾動(dòng)顯示，并保持滾動(dòng)至最新上傳文件。

2. 拆分說(shuō)明-已上傳操作區(qū)

1）上傳中：通過(guò)百分比及進(jìn)度條顯示上傳進(jìn)度。懸停至上傳區(qū)域，有懸停樣式，點(diǎn)擊可取消上傳。注意點(diǎn)如下：

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

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

3）上傳失?。簩?duì)應(yīng)上傳記錄呈失敗樣式，點(diǎn)擊“重傳”即重新上傳。

4）懸停樣式：每個(gè)上傳狀態(tài)都有懸停樣式。此樣式有明顯的鼠標(biāo)懸停態(tài)，點(diǎn)擊右側(cè)”關(guān)閉按鈕“可刪除此文件。點(diǎn)擊后，彈窗二次確認(rèn)是否刪除。

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

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

1. 文件類(lèi)型：根據(jù)業(yè)務(wù)需求確定可支持上傳的文件格式，一般為.rar .zip .doc .docx .pdf等
2. 文件大?。焊鶕?jù)業(yè)務(wù)需求確定可支持上傳的文件大小，一般小于等于20MB
3. 文件數(shù)量：根據(jù)業(yè)務(wù)需求確定可支持上傳的文件數(shù)量
4. 提示文案：即描述上傳按鈕下方提示文案的提示內(nèi)容，一般小于等于5個(gè)
5. 后置影響：上傳后，將影響關(guān)聯(lián)數(shù)據(jù)表數(shù)據(jù)

三、輸出說(shuō)明模板

組件名稱(chēng)前加個(gè)“規(guī)范”，便于團(tuán)隊(duì)識(shí)別規(guī)范組件；模板可直接寫(xiě)入注釋?zhuān)⒋鏋锳xure/墨刀元件庫(kù)。

• 組件名稱(chēng)：規(guī)范-拖拽上傳文件
• 文件類(lèi)型：.rar .zip .doc .docx .pdf
• 文件大小：小于等于500kb
• 文件數(shù)量：最多5個(gè)
• 提示文案：按住Ctrl可同時(shí)多選，支持上傳.rar .zip .doc .docx .pdf格式文件，單文件不超500kbn嚴(yán)禁上傳包含色情、暴力、反動(dòng)等相關(guān)違法信息文件
• 后置影響：暫無(wú)