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

本期組件：卡片

組件概述：基礎(chǔ)的卡片容器，可承載文字、列表、圖片、段落、操作，常用于頁面內(nèi)容展示

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

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

1.基礎(chǔ)樣式

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

2、信息：常用于跳轉(zhuǎn)詳情頁，所以僅需顯示關(guān)鍵信息，可根據(jù)實際情況設(shè)計，如

• 標(biāo)題+內(nèi)容概述+操作
• 標(biāo)題+圖像預(yù)覽+內(nèi)容概述+操作

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

2. 異常樣式

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

1、空數(shù)據(jù)：自帶“空數(shù)據(jù)”方案，對應(yīng)內(nèi)容為空時使用

2、預(yù)加載：自帶“加載中”方案，數(shù)據(jù)讀入前顯示此樣式

3. 基礎(chǔ)交互

1、浮起：如果點擊卡片有交互，則鼠標(biāo)移過時需浮起

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

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

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

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

查看详情 >

1. 數(shù)據(jù)來源：一般卡片內(nèi)容會詳細(xì)說明，這邊僅做補充
2. 內(nèi)容超出方案：滾動/自適應(yīng)，未說明默認(rèn)“滾動”

滾動：內(nèi)容超出顯示區(qū)域，則縱向滾動顯示，UI需提供滾動拉條

自適應(yīng)：內(nèi)容超出顯示區(qū)域，則向下拓展尺寸，但會影響頁面布局

三、輸出說明模板

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

卡片樣式在不同場景有不同樣式，具體由產(chǎn)品設(shè)計原型。

• 組件名稱：規(guī)范-卡片
• 數(shù)據(jù)來源：請看卡片內(nèi)容說明
• 內(nèi)容超出方案：滾動

結(jié)語

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