懸浮卡片主要用於功能集合或者頁面內容擴展場景，目的是提升頁面的操作效率。
例如蘋果iOS 14系統裡的來電小窗，採用的懸浮卡片設計，當來電或喚醒時，不再佔用全屏幕的使用，提升了頁面的使用效率。
3、通欄卡片
三 為什麼要用卡片式設計
1、有利於信息分層和整合
相較於無邊框設計或者分割線布局，卡片可以進行信息歸納組合，劃分出更加清晰的組織結構，實現複雜內容的簡化處理，讓用戶感知到內容的歸屬層級，加強用戶對內容的感知。
需要注意的一點是作為獨立的卡片單元往往要有足夠的空間留白，可以添加一點投影增加層次感，能使閱讀上更加舒適。
例如「京東-我的」頁面，在老版本中採用了通欄卡片，整個頁面信息結構已經比較清晰了。但是隨著頁面內容的增多，在新版本中頁面內容全部採用了邊距卡片的形式，並且融合了橫版卡片和豎版卡片兩種方式，增強了內容的獨立性，層級更加清晰。
同時邊距卡片形式有利於場景的拓展，例如「京東-我的」頻道在11.11期間，插入了11.11活動樓層，在視覺表現上毫無違和感。
2、整齊的柵格化排版，適配性強
將文字信息、圖像歸類整合到一個容器裡，分布成不同的卡片模塊。內容通過卡片整合梳理更易理解呈現給用戶。不僅有利於柵格化的排版，還對於後期多平臺的響應式設計提供很大的優勢，卡片可以更方便地擴展收縮內容，並且在保證跨平臺設備之間的統一性及其美感時更為便捷。
3、提高空間利用率
使用傳統列表時，需要保持垂直向下滾動才能獲取更多內容，並且顯示的內容有限。使用卡片式設計，可以通過XYZ三個方向的進行內容擴展和疊加，提升了空間利用率，即使在垂直內容流中，也可以通過水平滑動來顯示更多內容。
比如脈脈首頁縱向的信息流裡增加了橫向的滑動內容，Y方向主要為「點擊」操作實現卡片內容的擴展，避免與縱向的滑動手勢操作產生衝突。
Z軸可以疊加無數的的卡片內容，實際上是在暗示用戶去操作，發現其感興趣的內容，擴展性更強。就好比實際生活中，我們拿到一疊名片去尋找自己需要的那幾張。
4、能夠提升界面的可操作性
卡片作為獨立的模塊，可以融入各種交互方式，為用戶提供更加快捷的操作，大大增強了用戶對於設計的體驗感和豐富視覺體驗。例如：翻轉可以呈現更多內容、摺疊可以簡述概括內容、展開可以詳細展示具體內容、堆疊可以進行信息的分組歸類。App Store 中的「今日」頻道中的卡片，點擊可以直接顯示APP詳細信息，相比頁面跳轉方式，給用戶帶來了更加自然的交互體驗。5、能夠提升視覺體驗
卡片設計會影響到頁面整體的信息層級以及視覺動線變化。卡片式設計通常很依賴視覺元素，很強的視覺元素正是卡片式設計的一種優勢。
有研究確認圖片能夠提升網站和APP的設計質量，因為圖片可以快速有效的吸引用戶的注意力。
比如我們熟知的Dribble和Behance，面向設計師等創意類作品的人群，提供作品在線服務，供網友查看的交流類網站。要展示這類內容，基於卡片的設計是再合適不過的選擇了。
圖來源於Dribble卡片設計的基礎規則，相信大家多多少少都有所了解，不同平臺的規範差異性不會有太大本質上的區別，更多的差異主要在處理技巧和方式上，這裡分享下卡片式設計的方法。
1、圓角的規則
圓角的設定實際上沒有太多的原則問題，只要符合整體的風格調性即可。當然不同的圓角也能表達出不同的質感，大圓角表達柔和、小圓角表達硬朗。
以卡片的圓角作為基礎的參考值往內推算整體的圓角使用規範，卡片與卡內的元素形成合理的比例規則。
2、投影深度
投影的視覺效果會直接影響著整體卡片的質感，太深太大的投影會顯得整體卡片過於厚重，太淺太小的投影則顯得過度生硬，因此合理的數值比例則可以讓卡片看起來自然有質感。給大家分享一組數值規律，我們可以按1:2或1:3，例如Y軸偏移10px，模糊度則設定為20或30px，這樣成比例的數值出來的效果會較為自然，如下圖：
3、邊距的設定
在設定卡片式的邊距時可以適當應用刪格系統，刪格系統解決了一些基礎的板式問題，有助於提升設計的規範性，讓設計更加有跡可循。讓邊距與內容形成固定的關係，這樣可以幫助整體的卡片設計更加具有細節和規則。
4、標題文字大小和重量
標題主要用於簡短的說明每個模塊的內容，並且在長頁面瀏覽中起到引導和定位的作用。但當字體較小時，用戶會傾向於「細讀」；而字體較大時，用戶更傾向於「跳讀」。如果字體粗細使用錯誤，會影響可用性和美觀性。
標題與正文字號大小差異建議在6-10px，這樣可以更好的拉開差異，讓標題更具有標題感。
卡片式設計會給人一種視覺上的享受，也能對於界面具有層次感。但不能為了卡片式設計而卡片式設計，要能更好的應用到界面場景中。
1、避免過多層級
從整體來說，卡片式的設計本身就是增加了基礎背景的層級表現，為了保證內容展示和瀏覽體驗，不建議在卡片上再二次疊加塊狀式設計。特別是單個卡片中，避免多個卡片並排展示，造成內容展示過於碎片化，增加用戶的瀏覽負擔。
如果在項目中遇到內容層級需要多層級的表現，我們可以通過利用拉通分割線和利用淺色背景底色，這兩種方法來區分內容層級。
由於卡片必須要增加上下間距形成獨立空間，會導致頁面的長度增加。因此對於內容結構相似的模塊，如非必須，不要盲目採用卡片形式。例如通訊錄，微信朋友圈、商品搜索列表頁面等，採用了簡單的分割線進行內容區分。既避免了頁面空間的浪費，又提高了用戶的瀏覽效率。
3、信息要簡單
當你想到卡片式設計時，簡潔一定是其精髓。「每張卡片只承載一個信息」你可以把卡片設計囊括了各種元素，但每張卡片只能包含一個信息或者內容，這可以讓用戶選擇自己想要的內容去閱讀或者分享 。
4. 把握好界面的分區，避免過於擁擠的排版
卡片設計具有獨特的視覺空間感，但卡片與卡片之間也會有分隔，因此在設計時更應該對內容進行歸納，避免產生過多的小塊卡片而導致排版過於擁擠、凌亂或者內容不夠寬度展現的情況。
六 總結
END