今天學(xué)堂君繼續(xù)跟大家分享Android UI 設(shè)計(jì)規(guī)范當(dāng)中的卡片化設(shè)計(jì)規(guī)范，因?yàn)槟壳翱ㄆO(shè)計(jì)已經(jīng)成為了移動(dòng)app設(shè)計(jì)趨勢。

方便讓大家更好的理解APP卡片化設(shè)計(jì)一些知識點(diǎn)。于是，25學(xué)堂專門為大家整理了出下面這些Android界面設(shè)計(jì)使用卡片化布局的標(biāo)準(zhǔn)和規(guī)范。

當(dāng)然，之前25學(xué)堂也分享了Material Design設(shè)計(jì)干貨：

1、谷歌Material Design的官方動(dòng)效設(shè)計(jì)指南【中文版】

2、APP設(shè)計(jì)風(fēng)格對比：扁平化、極簡、Material Design

3、最全安卓Material Design的設(shè)計(jì)原則和設(shè)計(jì)規(guī)范

今天讓我們重點(diǎn)學(xué)習(xí)一下Android UI 設(shè)計(jì)規(guī)范當(dāng)中的卡片化設(shè)計(jì)規(guī)范和準(zhǔn)則。

1、什么是android 卡片化？

卡片是包含一組特定數(shù)據(jù)集的紙片，數(shù)據(jù)集含有各種相關(guān)信息，例如，關(guān)于單一主題的照片，文本，和鏈接。卡片通常是通往更詳細(xì)復(fù)雜信息的入口?？ㄆ泄潭ǖ膶挾群涂勺兊母叨?。最大高度限制于可適應(yīng)平臺上單一視圖的內(nèi)容，但如果需要它可以臨時(shí)擴(kuò)展（例如，顯示評論欄）?？ㄆ粫D(zhuǎn)以展示其背后的信息。

2、目前成熟的卡片化設(shè)計(jì)APP案例欣賞：

3、android界面設(shè)計(jì)使用卡片的場景：

可以在以下情況考慮使用卡片：

（1）、同時(shí)展現(xiàn)多種不同內(nèi)容

（2）、卡片內(nèi)容之間不需要進(jìn)行比較

（3）、包含了長度不確定的內(nèi)容，比如評論

（4）、包含豐富的內(nèi)容與操作項(xiàng)，比如贊、滾動(dòng)條、評論

（5）、本該是列表，但文字超過3行

（6）、本該是網(wǎng)格，但需要展現(xiàn)更多文字

卡片最多有兩塊操作區(qū)域。

輔助操作區(qū)至多包含兩個(gè)操作項(xiàng)，更多操作需要使用下拉菜單。其余部分都是主操作區(qū)。

比如下圖：

上面這圖就完美解讀了卡片設(shè)計(jì)布局方式和操作區(qū)域。

應(yīng)用上面這個(gè)android卡片設(shè)計(jì)準(zhǔn)則來校驗(yàn)下面這個(gè)卡片化設(shè)計(jì)APP

操作區(qū)分為2大塊：

第一塊操作區(qū)：是頂部的那里，有漢堡菜單、有標(biāo)題、有分享和地圖等圖標(biāo)按鈕。

第二塊操作區(qū)：就是下面的卡片列表，滑動(dòng)往下查看。

4、android卡片設(shè)計(jì)布局基本規(guī)范

字體設(shè)計(jì)

正文：14 sp 或 16 sp

標(biāo)題：24 sp 或更

扁平按鈕：Roboto Medium, ? 14 sp, ? ? 10 sp 字間距

移動(dòng)設(shè)備上的卡片間距

屏幕邊界與卡片間留白：8 dp

卡片間留白：8 dp

比如下面的菜單到上下留出8dp距離。

內(nèi)容留白邊距或空間大小：16 dp

以上都是開發(fā)用到的android設(shè)計(jì)字體單位sp和dp，如果需要轉(zhuǎn)換成px，需要根據(jù)你設(shè)計(jì)的尺寸轉(zhuǎn)換。

如果你設(shè)計(jì)的720*1280尺寸的設(shè)計(jì)稿：1sp=1dp=2px

如果你設(shè)計(jì)的1080*1920尺寸的設(shè)計(jì)稿：1sp=1dp=3px

對應(yīng)轉(zhuǎn)換就行。

如果還沒明白，可以再來下載一個(gè)符合Android界面設(shè)計(jì)使用卡片化布局的標(biāo)準(zhǔn)和規(guī)范的PSD對比學(xué)習(xí)下。

素材下載：APP每日一練：material design風(fēng)格的安卓界面PSD下載

以上就是25學(xué)堂跟 大家分享Android界面設(shè)計(jì)使用卡片化布局的標(biāo)準(zhǔn)和規(guī)范，希望讓大家對android卡片化設(shè)計(jì)有一定加深理解和設(shè)計(jì)。