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

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

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

步驟二：使用模板

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

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

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

=========強(qiáng)烈建議點(diǎn)個【關(guān)注】或【收藏】不迷路=========

本期組件：拖拽上傳圖片

組件概述：將信息圖片通過網(wǎng)頁或者上傳工具發(fā)布到遠(yuǎn)程服務(wù)器的過程

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

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

1. 模塊整體說明

1）上傳區(qū)

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

上傳方式：

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

上傳異常處理方式：

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

2）已上傳操作區(qū)

• 一個文件對應(yīng)一個上傳卡片，按上傳順序從上到下排列（卡片狀態(tài)及樣式，請看“拆分說明-已上傳操作區(qū)”）
• 多個文件同時上傳按文件夾內(nèi)的文件順序排序
• 結(jié)合頁面合理布局，超出一定個數(shù)后滾動顯示，并保持滾動至最新上傳文件

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

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

B端究竟需要什么样的产品经理？

B端产品经理都是以提升供应侧的工作效率为目的，所以B端需求主要是以业务问题为导向。 这个是B端产品比较重要的一点，B端产品是服务于一个主体 ...

查看详情 >

注意點(diǎn)如下：

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

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

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

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

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

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

• 文件類型：根據(jù)業(yè)務(wù)需求確定可支持上傳的格式，一般為.jpg/.png/.bmp等。
• 文件大小：根據(jù)業(yè)務(wù)需求確定可支持上傳的大小，一般小于等于2mb。
• 文件數(shù)量：根據(jù)業(yè)務(wù)需求確定可支持上傳的數(shù)量，一般小于5個。
• 提示文案：即描述上傳按鈕下方提示文案的提示內(nèi)容。
• 后置影響：上傳后，是否影響關(guān)聯(lián)數(shù)據(jù)表數(shù)據(jù)，或表單控件等。

三、輸出說明模板

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

• 組件名稱：規(guī)范-拖拽上傳圖片
• 文件類型：.jpg/.png/.bmp
• 文件大?。盒∮诘扔?mb
• 文件數(shù)量：最多10個
• 提示文案：將圖片拖到此處或點(diǎn)擊選擇，按住Ctrl可同時多選，最多上傳10張 n 僅支持上傳.jpg/.png/.bmp格式文件，單文件不超2mb
• 后置影響：暫無

結(jié)語

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