開發吐槽原型說明不清晰，上司催促原型要快細節再說，真是夾縫中生存的産品。今天教大家一個方法，既快又全。
對原型規範&說明模闆不明白朋友，可檢視：如何解決原型說明寫不全？
本期元件：圖檔
元件概述：頁面内僅次于文本的常用元件，可在圖檔中增加連結或單擊放大等互動。
一、約定基礎樣式
本節主要與研發約定預設實作内容，通過規範文檔維護。
1.1. 樣式
- 樣式：預設為方形,分辨率預設
- 圖檔尺寸：按比例縮小
- 圖檔大小：過大的圖檔應壓縮為合适大小，以確定頁面載入效率
1.2. 異常
- 為空：顯示預設符号，由UI提供
- 加載中：顯示加載符号，由UI提供
- 加載失敗：顯示加載失敗，可點選重新加載
二、約定基礎互動
2.1.懶加載
當圖檔即将滾動到可視範圍内才加載；頁面内容器的圖檔也是懶加載。
2.2.預覽大圖
1）預設大小：适應視窗
2）切換圖檔：支援切換目前容器内的圖檔，鍵盤左右鍵可切換
3）縮放圖檔：支援滑鼠滾輪縮放圖檔，縮放比例需符合正常，如滑鼠滾輪一格，縮放10%，鍵盤上下鍵可縮放
三、約定可控參數
本節主要與研發約定原型中可控制的參數，也通過規範文檔維護。文中會提供示例參數，及參數填寫說明。
1）資料來源：需說明這塊資料從哪來
2）懶加載：預設為否，除非圖檔較多，會影響載入體驗
3）滑鼠懸停：滑鼠懸停于圖檔的事件，隻可1個，可選事件如下：
- 無需
- 提示文案：氣泡提示文案
- 氣泡彈窗内容頁：通過氣泡彈出一個可操作的頁面，需單獨一個原型描述
4）滑鼠單擊：可一個事件，也可多個，隻要有一個事件，滑鼠懸停就會出現引導遮罩，描述格式及範例如下：
- {按鈕名稱}：{點選事件說明}
- 預覽大圖：點選預覽大圖
- 檢視詳情：點選新視窗打開XX詳情頁
四、輸出說明模闆
元件名稱前加個“規範”，便于團隊識别規範元件；模闆可直接寫入注釋，并存為Axure/墨刀元件庫。
- 元件名稱：規範-圖檔
- 資料來源：
- 懶加載：否
- 滑鼠懸停：氣泡提示“提示内容/内容來源”
- 滑鼠單擊：預覽大圖
結語
本系列持續更新，喜歡的朋友請點個【關注】或，您的鼓勵是我們持續分享的動力。
本文由 @産品工具庫 原創釋出于人人都是産品經理。未經許可，禁止轉載
題圖來自Unsplash，基于 CC0 協定
該文觀點僅代表作者本人，人人都是産品經理平台僅提供資訊存儲空間服務。