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

步驟一：約定規范

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

步驟二：使用模板

如圖，Axure可將帶說明的通用組件置入元件庫，出原型時使用；開發看到組件，則使用約定規范；墨刀同理?！綪S：想了解word如何使用，請評論留言哈】

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

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

=========強烈建議點個【關注】或【收藏】不迷路=========

本期組件：照片墻上傳

組件概述：可上傳多張照片，并通過宮格形式預覽，便于快速管理照片

一、 約定基礎規范

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

1、默認狀態：點擊“上傳圖片”，打開本地文件夾選文件上傳；按鈕下方為提示文案，通常提示可上傳的格式及文件大??；打開本地文件夾有以下注意事項：

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

2、上傳狀態：通過百分比及進度條顯示上傳進度。懸停至上傳區域，有懸停樣式，點擊可取消上傳。

注意點如下：

• 上傳百分比需與開發確認實現方案
• 過程中，圖片區域顯示圖片小圖

3、上傳成功：顯示已上傳圖片的小圖，鼠標懸停有“懸停樣式”

4、上傳失?。河袑邮?，可操作重新上傳或取消，其中重傳無需再打開文件夾選文件

5、懸停樣式：

1）未上傳：即常規圖標懸停樣式

2）已上傳：增加一層蒙版，并顯示“查看、下載、刪除”按鈕，功能說明如下：

• 查看：點擊彈窗全尺寸預覽圖片
• 下載：下載文件，有條件則文件名為上傳的文件名
• 刪除：刪除圖片，點擊彈出對話框二次確認是否刪除。如果后方有已上傳圖片，則順勢補位

二、約定可控參數

本節主要與研發約定原型中可控制的參數，也通過規范文檔維護。

文中會提供示例參數，及參數填寫說明。

• 文件類型：僅支持上傳圖片
• 文件大?。焊鶕I務需求確定可支持上傳圖片的大小
• 文件數量：根據業務需求確定可支持圖片的數量
• 換行節點：需要根據頁面布局確定換行節點，如上傳至第幾張圖片后自動換行，一般為3個
• 后置影響：上傳后，將影響關聯數據表數據

三、輸出說明模板

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

• 組件名稱：規范-照片墻上傳
• 文件類型：jpg/png
• 文件大?。?0mb以內
• 文件數量：最多9張
• 一行最大數量：3個
• 后置影響：暫無

結語

本系列持續更新，喜歡的朋友請點個【關注】或【收藏】，您的鼓勵是我們持續分享的動力。