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

本期組件：卡片

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

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

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

1.基礎(chǔ)樣式

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

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

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

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

2. 異常樣式

頁(yè)面中每個(gè)卡片，UI都需提供以下樣式

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

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

3. 基礎(chǔ)交互

1、浮起：如果點(diǎn)擊卡片有交互，則鼠標(biāo)移過(guò)時(shí)需浮起

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

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

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

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

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

三、輸出說(shuō)明模板

組件名稱前加個(gè)“規(guī)范”，便于團(tuán)隊(duì)識(shí)別規(guī)范組件；模板可直接寫入注釋，并存為Axure/墨刀元件庫(kù)。

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

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

結(jié)語(yǔ)

本系列持續(xù)更新，喜歡的朋友請(qǐng)點(diǎn)個(gè)【關(guān)注】或【收藏】，您的鼓勵(lì)是我們持續(xù)分享的動(dòng)力。