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

本期組件：圖像

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

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

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

1. 基礎(chǔ)樣式

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

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

2. 基礎(chǔ)交互

組件需自帶以下狀態(tài)

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

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

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

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

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

查看详情 >

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

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

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

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

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

三、輸出說明模板

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

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

結(jié)語

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