原型說明咋寫-圖像

0 評論 996 瀏覽 5 收藏 4 分鐘

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

本期組件:圖像

組件概述:用圖標、圖片或者字符的形式展示用戶或事物信息

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

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

1. 基礎(chǔ)樣式

1、樣式:有方形圓形,本篇描述默認為方形

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

2. 基礎(chǔ)交互

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

  1. 無圖像:顯示默認符號,由UI提供
  2. 加載中:顯示加載符號,由UI提供
  3. 加載失?。猴@示失敗符號,由UI提供,點擊重新加載

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

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

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

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

  • 氣泡提示:通過氣泡提示,顯示對應文案信息
  • 氣泡彈窗:銜接到下一個交互頁面

3、鼠標單擊:預覽圖像/跳轉(zhuǎn)某個頁面或打開某個彈窗

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

三、輸出說明模板

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

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

結(jié)語

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

本文由 @產(chǎn)品工具庫 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自Unsplash,基于 CC0 協(xié)議

該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!