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

本期組件：圖像

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

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

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

1. 基礎(chǔ)樣式

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

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

2. 基礎(chǔ)交互

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

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

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

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

做交互设计10年，我为何转岗到产品经理？

真正转岗之后，我发现很多工作还是超出了自己的想象。产品经理的工作确实比较杂。理论上，产品经理的工作包括了产品的方方面面，从市场研究、用户调研、数据分析...

查看详情 >

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

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

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

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

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

三、輸出說明模板

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

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

結(jié)語

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