原型說明咋寫-圖像

0 評論 835 瀏覽 4 收藏 4 分鐘

開發吐槽原型說明不清晰,領導催促原型要快細節再說,真是夾縫中生存的產品。今天教大家一個方法,既快又全。

本期組件:圖像

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

一、 約定基礎規范

本節主要與研發約定默認實現內容,通過規范文檔維護。

1. 基礎樣式

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

2、大小:圖像大小由UI決定,圖片按比例縮小在圖像框內,分辨率優先保證加載速度

2. 基礎交互

組件需自帶以下狀態

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

二、約定可控參數

本節主要與研發約定原型中可控制的參數,也通過規范文檔維護。文中會提供示例參數,及參數填寫說明。

1、數據來源:需說明這塊數據從哪來

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

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

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

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

三、輸出說明模板

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

  • 組件名稱:規范
  • 數據來源:
  • 鼠標懸停:氣泡提示“提示內容/內容來源”
  • 鼠標單擊:預覽圖像

結語

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

本文由 @產品工具庫 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!