一、卡片式設計的定義
1、什么是卡片？
早在互聯網時代之前，卡片就出現在了我們生活中的方方面面，如名片、不干膠標簽、便利貼、會員卡…等，不管是何種類型的卡片，它都將代表著我們現實生活中的某個特定信息。
卡片指的是含有圖片或文本信息的容器，它將我們需要的信息歸納在一起、并形成獨立的個體，以至于后續被引用到線上界面中，同樣具有非常不錯的信息歸納效果。
2、互聯網中的卡片式設計
卡片本身就是一個完整的信息區塊、并同時承載豐富的互動方式。在UI設計中，個性化和美感兼備的卡片式設計具有很強的易用性，它是一個UI設計組件，將標題、文本內容、圖形/圖片進行整合并模塊化，讓信息的表達更加直觀、操作也更便捷。
卡片式設計之所以能成為當今比較流行的趨勢，是因為它能讓界面信息更有層次感，從設計、交互、視覺以及用戶體驗等各方面來看，都有不錯的優點。站在用戶角度，即便不太理解卡片的概念（也不需要理解），但能快速知道如何使用它，相對來說，學習成本也是極低的。
二、卡片式設計價值
1、結構清晰
卡片在占用屏幕空間較少的情況下能夠將不同大小、不同類型的信息內容按邏輯進行分組呈現，使界面結構更加清晰。相比純粹的留白或分割線，卡片不僅對信息作出了分割，其本身還是一個獨立的容器，讓歸納組合后的信息能快速突出重點，將復雜內容簡單化處理。
卡片式布局整齊簡練，清晰的信息結構有助于用戶瀏覽，方便快速找到自己感興趣的內容，避免用戶產生一種費時或感覺內容超長的恐懼感，還能節省更多的時間成本。最常見的就是信息列表、圖文混排等，不僅做到了視覺上的美觀，也達到了平衡文字及圖片強弱的效果。
2、場景拓展
卡片式設計有利于場景拓展，他能在信息不斷增/減的情況下、頁面依然能組成一個連貫的整體，在視覺上毫無違和感。例如支付寶在頭部插入的廣告引流入口、淘寶在節假日增加二層樓…等。
3、空間擴展
卡片式設計一度打破了移動端多為縱向操作、原有傳統的列表式布局，在空間有限的移動端設備中，還能很好的利用橫向空間。將橫向滑動區域的最后一個卡片漏出一小部分（若隱若現才是誘惑），不僅能給予用戶更多選擇與期待，其空間利用率也得到了很好的擴展，在展示更多內容的情況下依然能保持模塊的整體性。
4、突出重點
卡片式設計能很好的通過邊界襯托出內容的整體性，特別是在電商類產品中的首頁頭部、瓷片區、營銷引流區將其應用到了極致，即便在卡片數量較多的情況下，用戶依然能清晰的感知到內容的歸屬層級以及重要信息。
5、兼容多端
卡片作為一個容器，它可以自由無限的等比縮放，非常適合響應式設計。在手機、iPad、電腦等屏幕尺寸復雜的情況下，通過放大縮小或增減縱向排列數量的方式配合響應式的斷點設計，讓同一界面在不同設備之間輕易的創造出一致性的視覺體驗。
6、易于操作
卡片給人最直觀的感覺就是可以操作，它不用箭頭、按鈕或超鏈接等引導性的視覺元素提醒，節省了一定的頁面空間，還有著更大的操作熱區，無需做到精準點擊?？ㄆ皆O計很容易融入各種交出手勢，如單擊、雙擊、長按、拖動、滑動等，為用戶提供更多便捷的操作。
7、跳轉流暢
卡片可通過縮放的形式充分利用動畫進行頁面跳轉，例如App Store“Today”頻道，點擊卡片后直接等比放大至全屏，給用戶一種還停留在當前頁面的錯覺，避免了傳統的跳轉頁面而造成的信息割裂感，流暢絲滑的過渡，給用戶更自然的交互體驗。
三、常見的卡片式設計樣式
1、四周留白
這種類型的卡片在UI設計中最為常見，柔和的圓角、邊緣陰影以及四周很自然的留白，讓內容模塊的存在感更加強烈，整個頁面信息的層級也更加清晰。
2、懸浮內容之上
懸浮型卡片并非模態彈窗，與其相比，懸浮卡片不需要主動操作觸發，可作為臨時控件或長期固定顯示，并且比模態彈窗能承載更多信息內容，可通過伸縮來定義卡片中的信息數量，或多、或少、或展示、或隱藏，在頁面中非常靈活。
例如高德地圖首頁，搜索框及右側的功能入口長期懸浮在地圖之上，而下方卡片中的內容會隨著高度的伸縮自動調節可展示的數量，非常實用。
3、通欄類型
通欄類型的卡片具有更強的視覺阻斷，對區分不同的功能模塊有不錯的效果，不過這種類型只通過頁面背景色保留上下邊間、且不會過多，不然頁面會顯得零散、雜亂。
四、卡片適用場景介紹
1、瀑布流
瀑布流主要正針對圖片較多、或以圖片為主的內容設計，它最大的優點是無需過于在意圖片的高度，最大限度的還原原始圖片效果。
卡片式設計的瀑布流對信息的組合、包容性更強，不僅能在單屏區域內顯示更多內容，同時又將每組信息組合作出了明確的劃分，在不破壞頁面整體性的基礎上也做到了相對獨立，如花瓣、Pinterest就是最好的例子。
2、信息流
信息流的展現方式主要以文字、圖片或視頻內容為主，是一種較長內容的媒介，不管哪種展現方式，其都需要用戶耗費較長時間的滑動、瀏覽來篩查對自己有用的信息。
卡片式設計將信息進行分塊處理，通過阻隔的方式快速告知用戶每個卡片的核心內容，便于用戶在長時間的滑動過程中也能快速識別重要信息。
3、左/右滑動
卡片式左右滑動組合在音樂、視頻類產品中用最為廣泛，因內容本身就圖片居多，也更適合卡片式設計，相比平鋪具有更強的層次感，對用戶的吸引力較強，尤其最右側漏出的一小部分內容營造出神秘的感覺，用戶會不由自主的想去滑動以求獲取更多信息。
4、優惠卡/券
卡/券設計實際是把生活中的實物映射到了UI設計中，通過模擬實物造型設計成卡片樣式，有效降低用戶的理解成本，并對其有了更直觀的感知，真實感尤為強烈。
5、突發事件/臨時提醒
對于用戶主動觸發或系統臨時發起的非固定性內容，利用卡片式設計會讓信息布局更靈活、視覺更突出，在不影響用戶使用的前提下，可出現在任何位置。
6、部分頁面頭圖
卡片式設計可以將個人中心、個人主頁、會員等頁面中的關鍵信息進行概括，并在頭部位置進行重點突出，不僅讓原本單個的內容形成整體，還能營造出沉浸式的氛圍。
五、卡片式設計原則及小技巧
1、一致性原則
為了保持界面設計的一致性，需要將卡片樣式納入設計規范，例如卡片是否通欄、是否需要設定圓角半徑、不同場景中卡片大小的劃分界限以及圓角數值的確定等，大部分情況下都需要遵循設計規范。
2、功能定位決定卡片形式
在同一產品中，雖然要遵循設計規范以確保一致性的視覺效果，但并非所有頁面都適合卡片式設計。
那么，到底是否需要采用卡片形式、使用哪種卡片類型？這還得根據頁面內容屬性及目標定位來決定。例如社交產品中的臨時會話列表、動態圈子使用卡片形式，很浪費縱向空間、甚至會顯得很“雞肋”，用分隔線或間距留白來區分信息組顯然更合適；但對于電商類型的產品，利用卡片將不同的商品分隔后又進行歸納，會更容易識別，信息的可讀性也會更強。
3、避免過多卡片嵌套
卡片式設計本身就包含了容器與背景的層級表現，為了保持內容的正常展示與用戶瀏覽體驗，避免在卡片中嵌套多層卡片，以免信息層級雜/亂而增加用戶的視覺負擔。
如果再同一卡片中需要再次區分多個信息組，可利用間距留白、分割線或淺色背景等元素屬性來區分，依然能達到想要的效果。
4、合理利用橫向空間
因為卡片內、外的雙向間距留白，在空間有限的移動端設備中，橫向空間利用率較低，因此除了合理的減小左右間距外，還可以適當利用左右滑動來擴充橫向隱性空間。
例如淘票票首頁，在1.5屏的范圍內，幾乎每個模塊都能橫向滑動查看更多內容，從用戶體驗角度出發，這是縱向空間無法比擬的。
5、降低縱向空間的浪費
卡片式設計不是目的，其主要是用來更好的區分信息層級、提升用戶瀏覽體驗，因為卡片要作為獨立空間的存在，必定會增加上下間距而導致頁面拉長，因此，如無必要，不必盲目采用卡片式設計。
例如美團APP的「首頁、電商、購物車、我的」4大主功能頁面都使用了卡片形式，而「消息」頁則采用分割線進行信息分組，試想一下，如果為了統一規范而使用卡片，不僅造成很強的割裂感、還會極大的浪費縱向空間。
6、長文表達不適合卡片
這點不用多說，新聞資訊類產品的內容詳情頁就是最好的證明，不管其他頁面是否采用卡片形式，但詳情頁并不會跟隨形式，一方面可以讓同屏展示更多內容、增加空間利用率，另一方面可減少無關元素對用戶產生的干擾、給予沉浸式的瀏覽體驗。
7、突出一個核心內容
很多時候，我們總會聽到PM說這個很重要、那個也很重要，都需要突出一點，殊不知當什么都突出了也說明什么都沒有突出。在單個卡片中，組始終牢記這個準則：一次只突出一個核心信息，以便于用戶快速、精準捕捉，切記不可貪多。
六、結語
卡片式設計之所有能快速流行起來且經久不衰， 其主要得益于自身的靈活性，尤其是在跨設備、跨屏幕上有著純天然的優勢，能忽略設備的差異給用戶提供更好的服務?？ㄆ⒉皇呛唵蔚臉邮皆O計，它是一種自由布局的設計語言，通過多種方式的信息組合、結合豐富的交互操作，給用戶創造出極致的使用體驗。
信息的呈現方式雖有不同，但最終的目的都是為了服務于內容，卡片式設計只是其中的一種形式而已，在設計過程中，我們需要根據內容結合實際情況作出合理的判斷，切勿拘泥于形式而忽略內容本身的重要性。
任何設計風格及展現形式都有可能成為歷史，卡片式設計也不會例外，但絕對不是這么快就結束，它依然值得我們去深究，力求打造更好的信息布局、更舒適的用戶體驗。
原文地址：能量眼球
作者：大漠飛鷹CYSJ
轉載請注明：學UI網》卡片式設計 | 掌握這些技法，快速提升界面效果！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司