卡片式設計是產品常用的頁面設計手段之一，它自帶的分割屬性讓頁面布局更加清晰，也是頁面布局的利器。但是，分割也可能會影響用戶沉浸式的瀏覽體驗等問題。如何用好卡片式設計？本文作者對此進行了分析，與你分享。

近幾年，卡片式設計可以說是移動端產品中極為常見的設計形式了，甚至有很多互聯網大廠將卡片式設計納入設計語言，在各大APP中得到廣泛運用。

卡片式設計自帶分割屬性、讓界面更有層次感，能給人一種視覺上的享受，也因此讓其成為了頁面布局的利器，但它并非萬能，因分割的原因可能會影響用戶沉浸式的瀏覽體驗、造成橫向/縱向空間浪費等問題，需要根據實際場景和內容形式來確定，不要專門為了“卡片式”而設計。

很多設計師對卡片設計習以為常，但對于使用卡片的原因、視覺表現方式、優/缺點等并不是很了解。那么卡片到底該如何設計？需要注意哪些細節？筆者根據經驗并結合平時的一些思考，跟大家一起聊聊在設計中極易忽略的細則，希望能幫助大家提升卡片設計的精致感。

一、卡片式設計的定義1. 什么是卡片？

早在互聯網時代之前，卡片就出現在了我們生活中的方方面面，如名片、不干膠標簽、便利貼、會員卡…等，不管是何種類型的卡片，它都將代表著我們現實生活中的某個特定信息。

卡片指的是含有圖片或文本信息的容器，它將我們需要的信息歸納在一起、并形成獨立的個體，以至于后續被引用到線上界面中，同樣具有非常不錯的信息歸納效果。

2. 互聯網中的卡片式設計

卡片本身就是一個完整的信息區塊、并同時承載豐富的互動方式。在UI設計中，個性化和美感兼備的卡片式設計具有很強的易用性，它是一個UI設計組件，將標題、文本內容、圖形/圖片進行整合并模塊化，讓信息的表達更加直觀、操作也更便捷。

卡片式設計之所以能成為當今比較流行的趨勢，是因為它能讓界面信息更有層次感，從設計、交互、視覺以及用戶體驗等各方面來看，都有不錯的優點。站在用戶角度，即便不太理解卡片的概念（也不需要理解），但能快速知道如何使用它，相對來說，學習成本也是極低的。

二、卡片式設計價值1. 結構清晰

卡片在占用屏幕空間較少的情況下能夠將不同大小、不同類型的信息內容按邏輯進行分組呈現，使界面結構更加清晰。相比純粹的留白或分割線，卡片不僅對信息作出了分割，其本身還是一個獨立的容器，讓歸納組合后的信息能快速突出重點，將復雜內容簡單化處理。

卡片式布局整齊簡練，清晰的信息結構有助于用戶瀏覽，方便快速找到自己感興趣的內容，避免用戶產生一種費時或感覺內容超長的恐懼感，還能節省更多的時間成本。最常見的就是信息列表、圖文混排等，不僅做到了視覺上的美觀，也達到了平衡文字及圖片強弱的效果。

2. 場景拓展

卡片式設計有利于場景拓展，他能在信息不斷增/減的情況下、頁面依然能組成一個連貫的整體，在視覺上毫無違和感。例如支付寶在頭部插入的廣告引流入口、淘寶在節假日增加二層樓…等。

3. 空間擴展

卡片式設計一度打破了移動端多為縱向操作、原有傳統的列表式布局，在空間有限的移動端設備中，還能很好的利用橫向空間。將橫向滑動區域的最后一個卡片漏出一小部分（若隱若現才是誘惑），不僅能給予用戶更多選擇與期待，其空間利用率也得到了很好的擴展，在展示更多內容的情況下依然能保持模塊的整體性。

4. 突出重點

卡片式設計能很好的通過邊界襯托出內容的整體性，特別是在電商類產品中的首頁頭部、瓷片區、營銷引流區將其應用到了極致，即便在卡片數量較多的情況下，用戶依然能清晰的感知到內容的歸屬層級以及重要信息。

5. 兼容多端

卡片作為一個容器，它可以自由無限的等比縮放，非常適合響應式設計。在手機、iPad、電腦等屏幕尺寸復雜的情況下，通過放大縮小或增減縱向排列數量的方式配合響應式的斷點設計，讓同一界面在不同設備之間輕易的創造出一致性的視覺體驗。

6. 易于操作

卡片給人最直觀的感覺就是可以操作，它不用箭頭、按鈕或超鏈接等引導性的視覺元素提醒，節省了一定的頁面空間，還有著更大的操作熱區，無需做到精準點擊。卡片式設計很容易融入各種交出手勢，如單擊、雙擊、長按、拖動、滑動等，為用戶提供更多便捷的操作。

7. 跳轉流暢

卡片可通過縮放的形式充分利用動畫進行頁面跳轉，例如App Store“Today”頻道，點擊卡片后直接等比放大至全屏，給用戶一種還停留在當前頁面的錯覺，避免了傳統的跳轉頁面而造成的信息割裂感，流暢絲滑的過渡，給用戶更自然的交互體驗。

三、常見的卡片式設計樣式1. 四周留白

這種類型的卡片在UI設計中最為常見，柔和的圓角、邊緣陰影以及四周很自然的留白，讓內容模塊的存在感更加強烈，整個頁面信息的層級也更加清晰。

2. 懸浮內容之上

懸浮型卡片并非模態彈窗，與其相比，懸浮卡片不需要主動操作觸發，可作為臨時控件或長期固定顯示，并且比模態彈窗能承載更多信息內容，可通過伸縮來定義卡片中的信息數量，或多、或少、或展示、或隱藏，在頁面中非常靈活。

例如高德地圖首頁，搜索框及右側的功能入口長期懸浮在地圖之上，而下方卡片中的內容會隨著高度的伸縮自動調節可展示的數量，非常實用。

3. 通欄類型

通欄類型的卡片具有更強的視覺阻斷，對區分不同的功能模塊有不錯的效果，不過這種類型只通過頁面背景色保留上下邊間、且不會過多，不然頁面會顯得零散、雜亂。

四、卡片適用場景介紹1. 瀑布流

瀑布流主要正針對圖片較多、或以圖片為主的內容設計，它最大的優點是無需過于在意圖片的高度，最大限度的還原原始圖片效果。

卡片式設計的瀑布流對信息的組合、包容性更強，不僅能在單屏區域內顯示更多內容，同時又將每組信息組合作出了明確的劃分，在不破壞頁面整體性的基礎上也做到了相對獨立，如花瓣、Pinterest就是最好的例子。

2. 信息流

信息流的展現方式主要以文字、圖片或視頻內容為主，是一種較長內容的媒介，不管哪種展現方式，其都需要用戶耗費較長時間的滑動、瀏覽來篩查對自己有用的信息。

卡片式設計將信息進行分塊處理，通過阻隔的方式快速告知用戶每個卡片的核心內容，便于用戶在長時間的滑動過程中也能快速識別重要信息。

3. 左/右滑動

卡片式左右滑動組合在音樂、視頻類產品中用最為廣泛，因內容本身就圖片居多，也更適合卡片式設計，相比平鋪具有更強的層次感，對用戶的吸引力較強，尤其最右側漏出的一小部分內容營造出神秘的感覺，用戶會不由自主的想去滑動以求獲取更多信息。

4. 優惠卡/券

卡/券設計實際是把生活中的實物映射到了UI設計中，通過模擬實物造型設計成卡片樣式，有效降低用戶的理解成本，并對其有了更直觀的感知，真實感尤為強烈。

5. 突發事件/臨時提醒

對于用戶主動觸發或系統臨時發起的非固定性內容，利用卡片式設計會讓信息布局更靈活、視覺更突出，在不影響用戶使用的前提下，可出現在任何位置。

6. 部分頁面頭圖

卡片式設計可以將個人中心、個人主頁、會員等頁面中的關鍵信息進行概括，并在頭部位置進行重點突出，不僅讓原本單個的內容形成整體，還能營造出沉浸式的氛圍。

五、卡片式設計原則及小技巧1. 一致性原則

為了保持界面設計的一致性，需要將卡片樣式納入設計規范，例如卡片是否通欄、是否需要設定圓角半徑、不同場景中卡片大小的劃分界限以及圓角數值的確定等，大部分情況下都需要遵循設計規范。

2. 功能定位決定卡片形式

在同一產品中，雖然要遵循設計規范以確保一致性的視覺效果，但并非所有頁面都適合卡片式設計。

那么，到底是否需要采用卡片形式、使用哪種卡片類型？這還得根據頁面內容屬性及目標定位來決定。例如社交產品中的臨時會話列表、動態圈子使用卡片形式，很浪費縱向空間、甚至會顯得很“雞肋”，用分隔線或間距留白來區分信息組顯然更合適；但對于電商類型的產品，利用卡片將不同的商品分隔后又進行歸納，會更容易識別，信息的可讀性也會更強。

3. 避免過多卡片嵌套

卡片式設計本身就包含了容器與背景的層級表現，為了保持內容的正常展示與用戶瀏覽體驗，避免在卡片中嵌套多層卡片，以免信息層級雜/亂而增加用戶的視覺負擔。

如果再同一卡片中需要再次區分多個信息組，可利用間距留白、分割線或淺色背景等元素屬性來區分，依然能達到想要的效果。

4. 合理利用橫向空間

因為卡片內、外的雙向間距留白，在空間有限的移動端設備中，橫向空間利用率較低，因此除了合理的減小左右間距外，還可以適當利用左右滑動來擴充橫向隱性空間。