原型說明咋寫-卡片
開發吐槽原型說明不清晰,領導催促原型要快細節再說,真是夾縫中生存的產品。今天教大家一個方法,既快又全。
本期組件:卡片
組件概述:基礎的卡片容器,可承載文字、列表、圖片、段落、操作,常用于頁面內容展示
一、 約定基礎規范
本節主要與研發約定默認實現內容,通過規范文檔維護。
1.基礎樣式
1、樣式:通過矩形包住信息,矩形可以是線框也可以是色塊,具體由UI定義
2、信息:常用于跳轉詳情頁,所以僅需顯示關鍵信息,可根據實際情況設計,如
- 標題+內容概述+操作
- 標題+圖像預覽+內容概述+操作
3、尺寸:通常配合柵格使用,具體尺寸由UI決定。
2. 異常樣式
頁面中每個卡片,UI都需提供以下樣式
1、空數據:自帶“空數據”方案,對應內容為空時使用
2、預加載:自帶“加載中”方案,數據讀入前顯示此樣式
3. 基礎交互
1、浮起:如果點擊卡片有交互,則鼠標移過時需浮起
二、約定可控參數
本節主要與研發約定原型中可控制的參數,也通過規范文檔維護。文中會提供示例參數,及參數填寫說明。
- 數據來源:一般卡片內容會詳細說明,這邊僅做補充
- 內容超出方案:滾動/自適應,未說明默認“滾動”
滾動:內容超出顯示區域,則縱向滾動顯示,UI需提供滾動拉條
自適應:內容超出顯示區域,則向下拓展尺寸,但會影響頁面布局
三、輸出說明模板
組件名稱前加個“規范”,便于團隊識別規范組件;模板可直接寫入注釋,并存為Axure/墨刀元件庫。
卡片樣式在不同場景有不同樣式,具體由產品設計原型。
- 組件名稱:規范-卡片
- 數據來源:請看卡片內容說明
- 內容超出方案:滾動
結語
本系列持續更新,喜歡的朋友請點個【關注】或【收藏】,您的鼓勵是我們持續分享的動力。
本文由 @產品工具庫 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于 CC0 協議
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
評論
太有用了大佬!