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

本期組件：圖像

組件概述：用圖標(biāo)、圖片或者字符的形式展示用戶(hù)或事物信息

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

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

1. 基礎(chǔ)樣式

1、樣式：有方形圓形，本篇描述默認(rèn)為方形

2、大?。簣D像大小由UI決定，圖片按比例縮小在圖像框內(nèi)，分辨率優(yōu)先保證加載速度

2. 基礎(chǔ)交互

組件需自帶以下?tīng)顟B(tài)

1. 無(wú)圖像：顯示默認(rèn)符號(hào)，由UI提供
2. 加載中：顯示加載符號(hào)，由UI提供
3. 加載失?。猴@示失敗符號(hào)，由UI提供，點(diǎn)擊重新加載

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

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

1、數(shù)據(jù)來(lái)源：需說(shuō)明這塊數(shù)據(jù)從哪來(lái)

2、鼠標(biāo)懸停：無(wú)需/氣泡提示/氣泡彈窗內(nèi)容頁(yè)等

• 氣泡提示：通過(guò)氣泡提示，顯示對(duì)應(yīng)文案信息
• 氣泡彈窗：銜接到下一個(gè)交互頁(yè)面

3、鼠標(biāo)單擊：預(yù)覽圖像/跳轉(zhuǎn)某個(gè)頁(yè)面或打開(kāi)某個(gè)彈窗

• 預(yù)覽圖像：通過(guò)彈窗顯示圖像完整大圖，點(diǎn)擊空白區(qū)/關(guān)閉按鈕，關(guān)閉預(yù)覽
• 跳轉(zhuǎn)某頁(yè)面或打開(kāi)彈窗：銜接到下一個(gè)交互頁(yè)面

三、輸出說(shuō)明模板

組件名稱(chēng)前加個(gè)“規(guī)范”，便于團(tuán)隊(duì)識(shí)別規(guī)范組件；模板可直接寫(xiě)入注釋?zhuān)⒋鏋锳xure/墨刀元件庫(kù)。

• 組件名稱(chēng)：規(guī)范
• 數(shù)據(jù)來(lái)源：
• 鼠標(biāo)懸停：氣泡提示“提示內(nèi)容/內(nèi)容來(lái)源”
• 鼠標(biāo)單擊：預(yù)覽圖像

結(jié)語(yǔ)

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