原型說明咋寫-照片墻上傳

0 評論 957 瀏覽 3 收藏 6 分鐘

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

步驟一:約定規范

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

步驟二:使用模板

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

那么,規范與模板應該怎么寫?

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

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

本期組件:照片墻上傳

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

一、 約定基礎規范

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

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

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

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

注意點如下:

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

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

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

5、懸停樣式:

1)未上傳:即常規圖標懸停樣式

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

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

二、約定可控參數

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

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

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

三、輸出說明模板

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

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

結語

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

本文由 @產品工具庫 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!