原型說明咋寫-卡片

1 評論 1449 瀏覽 3 收藏 4 分鐘

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

本期組件:卡片

組件概述:基礎的卡片容器,可承載文字、列表、圖片、段落、操作,常用于頁面內容展示

一、 約定基礎規范

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

1.基礎樣式

1、樣式:通過矩形包住信息,矩形可以是線框也可以是色塊,具體由UI定義

2、信息:常用于跳轉詳情頁,所以僅需顯示關鍵信息,可根據實際情況設計,如

  • 標題+內容概述+操作
  • 標題+圖像預覽+內容概述+操作

3、尺寸:通常配合柵格使用,具體尺寸由UI決定。

2. 異常樣式

頁面中每個卡片,UI都需提供以下樣式

1、空數據:自帶“空數據”方案,對應內容為空時使用

2、預加載:自帶“加載中”方案,數據讀入前顯示此樣式

3. 基礎交互

1、浮起:如果點擊卡片有交互,則鼠標移過時需浮起

二、約定可控參數

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

  1. 數據來源:一般卡片內容會詳細說明,這邊僅做補充
  2. 內容超出方案:滾動/自適應,未說明默認“滾動”

滾動:內容超出顯示區域,則縱向滾動顯示,UI需提供滾動拉條

自適應:內容超出顯示區域,則向下拓展尺寸,但會影響頁面布局

三、輸出說明模板

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

卡片樣式在不同場景有不同樣式,具體由產品設計原型。

  • 組件名稱:規范-卡片
  • 數據來源:請看卡片內容說明
  • 內容超出方案:滾動

結語

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

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

題圖來自Unsplash,基于 CC0 協議

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 太有用了大佬!

    來自山西 回復