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

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

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

步驟二：使用模板

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

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

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

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

本期組件：照片墻上傳

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

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

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

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

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

2、上傳狀態(tài)：通過百分比及進(jìn)度條顯示上傳進(jìn)度。懸停至上傳區(qū)域，有懸停樣式，點(diǎn)擊可取消上傳。

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

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

查看详情 >

注意點(diǎn)如下：

• 上傳百分比需與開發(fā)確認(rèn)實(shí)現(xiàn)方案
• 過程中，圖片區(qū)域顯示圖片小圖

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

4、上傳失?。河袑?duì)應(yīng)失敗樣式，可操作重新上傳或取消，其中重傳無需再打開文件夾選文件

5、懸停樣式：

1）未上傳：即常規(guī)圖標(biāo)懸停樣式

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

• 查看：點(diǎn)擊彈窗全尺寸預(yù)覽圖片
• 下載：下載文件，有條件則文件名為上傳的文件名
• 刪除：刪除圖片，點(diǎn)擊彈出對(duì)話框二次確認(rèn)是否刪除。如果后方有已上傳圖片，則順勢(shì)補(bǔ)位

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

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

文中會(huì)提供示例參數(shù)，及參數(shù)填寫說明。

• 文件類型：僅支持上傳圖片
• 文件大?。焊鶕?jù)業(yè)務(wù)需求確定可支持上傳圖片的大小
• 文件數(shù)量：根據(jù)業(yè)務(wù)需求確定可支持圖片的數(shù)量
• 換行節(jié)點(diǎn)：需要根據(jù)頁面布局確定換行節(jié)點(diǎn)，如上傳至第幾張圖片后自動(dòng)換行，一般為3個(gè)
• 后置影響：上傳后，將影響關(guān)聯(lián)數(shù)據(jù)表數(shù)據(jù)

三、輸出說明模板

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

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

結(jié)語

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