今天學堂君繼續(xù)跟大家分享Android UI 設計規(guī)范當中的卡片化設計規(guī)范，因為目前卡片化設計已經成為了移動app設計趨勢。

方便讓大家更好的理解APP卡片化設計一些知識點。于是，25學堂專門為大家整理了出下面這些Android界面設計使用卡片化布局的標準和規(guī)范。

當然，之前25學堂也分享了Material Design設計干貨：

1、谷歌Material Design的官方動效設計指南【中文版】

2、APP設計風格對比：扁平化、極簡、Material Design

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

今天讓我們重點學習一下Android UI 設計規(guī)范當中的卡片化設計規(guī)范和準則。

1、什么是android 卡片化？

卡片是包含一組特定數(shù)據(jù)集的紙片，數(shù)據(jù)集含有各種相關信息，例如，關于單一主題的照片，文本，和鏈接?？ㄆǔＪ峭ㄍ敿殢碗s信息的入口?？ㄆ泄潭ǖ膶挾群涂勺兊母叨?。最大高度限制于可適應平臺上單一視圖的內容，但如果需要它可以臨時擴展（例如，顯示評論欄）。卡片不會翻轉以展示其背后的信息。

2、目前成熟的卡片化設計APP案例欣賞：

3、android界面設計使用卡片的場景：

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

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

（2）、卡片內容之間不需要進行比較

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

（4）、包含豐富的內容與操作項，比如贊、滾動條、評論

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

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

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

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

比如下圖：

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

應用上面這個android卡片設計準則來校驗下面這個卡片化設計APP

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

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

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

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

字體設計

正文：14 sp 或 16 sp

標題：24 sp 或更

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

移動設備上的卡片間距

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

卡片間留白：8 dp

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

內容留白邊距或空間大小：16 dp

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

如果你設計的720*1280尺寸的設計稿：1sp=1dp=2px

如果你設計的1080*1920尺寸的設計稿：1sp=1dp=3px

對應轉換就行。

如果還沒明白，可以再來下載一個符合Android界面設計使用卡片化布局的標準和規(guī)范的PSD對比學習下。

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

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