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

對原型規(guī)范&說明模板不明白朋友，可查看：如何解決原型說明寫不全？

本期組件：圖片

組件概述：頁面內(nèi)僅次于文本的常用組件，可在圖片中增加鏈接或單擊放大等交互。

一、約定基礎(chǔ)樣式??

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

1.1. 樣式

1. 樣式：默認為方形,分辨率默認
2. 圖片尺寸：按比例縮小
3. 圖片大?。哼^大的圖片應(yīng)壓縮為合適大小，以確保頁面載入效率

1.2. 異常

1. 為空：顯示默認符號，由UI提供
2. 加載中：顯示加載符號，由UI提供
3. 加載失?。猴@示加載失敗，可點擊重新加載

二、約定基礎(chǔ)交互

2.1.懶加載

當圖片即將滾動到可視范圍內(nèi)才加載；頁面內(nèi)容器的圖片也是懶加載。

2.2.預(yù)覽大圖

1）默認大?。哼m應(yīng)窗口

2）切換圖片：支持切換當前容器內(nèi)的圖片，鍵盤左右鍵可切換

3）縮放圖片：支持鼠標滾輪縮放圖片，縮放比例需符合常規(guī)，如鼠標滾輪一格，縮放10%，鍵盤上下鍵可縮放

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

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

1）數(shù)據(jù)來源：需說明這塊數(shù)據(jù)從哪來

2）懶加載：默認為否，除非圖片較多，會影響載入體驗

3）鼠標懸停：鼠標懸停于圖片的事件，只可1個，可選事件如下：

• 無需
• 提示文案：氣泡提示文案
• 氣泡彈窗內(nèi)容頁：通過氣泡彈出一個可操作的頁面，需單獨一個原型描述

4）鼠標單擊：可一個事件，也可多個，只要有一個事件，鼠標懸停就會出現(xiàn)引導(dǎo)遮罩，描述格式及范例如下：

• {按鈕名稱}：{點擊事件說明}
• 預(yù)覽大圖：點擊預(yù)覽大圖
• 查看詳情：點擊新窗口打開XX詳情頁

四、輸出說明模板

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

• 組件名稱：規(guī)范-圖片
• 數(shù)據(jù)來源：
• 懶加載：否
• 鼠標懸停：氣泡提示“提示內(nèi)容/內(nèi)容來源”
• 鼠標單擊：預(yù)覽大圖

結(jié)語

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