UI范 - 如何做好 UI 卡片式設計，今天終於知道了！－鑽石舞台

卡片式設計對於我們來說並不陌生，從設計類網站上或市場上的一些APP中也會看到很多的卡片式設計的案例，卡片式設計也是UI設計中最常用的方式之一。

在平時結合實際卡片式設計項目中的得到了一些思考進行總結並歸納出一些卡片式設計的小知識點。同時希望自己通過本次的總結進行知識沉澱，以及跟大家一起探討下卡片式的設計。

來源於日常

在現實生活中的卡片式設計可以說是無處不在，例如身份證、交通卡、銀行卡、名片、便利貼、撲克牌、遊戲卡......諸如此類的生活常見品都是以卡片的方式存在，其共同點都使用一個容器中承載着內容，並且具有「便攜性、信息簡潔和相對獨立性」。

UI設計中卡片的使用場景

在項目設計之初我分析了一些使用卡片設計的App，並且從中整理總結了幾個較為常見的卡片式設計的使用場景。

Feed流

卡片式的feed流設計是一種非常常見的設計，早在前幾年Facebook、Google+等產品就使用了這一方式，Feed流作為一種長內容的媒介，用戶需要長時間的滑動看內容並篩選有效信息，卡片式設計很好的解決了內容與內容的區塊分隔，讓用戶在長屏幕滑動中依舊可以很好的明確每一塊的內容。

實際案例-淘寶微淘

瀑布流設計

瀑布流的出現讓單屏區域內顯示了更多的內容，而內容較多的情況下，使用卡片式設計較好的對內容進行了區域劃分，讓左右上下的內容從整體中具有相對的獨立性。

實際案例-Pinterest

左右滑動組合型內容

卡片式設計具有較強的層次感，相比於拉通平鋪更能呈現內容可滑動感受，並且塊狀化的設計讓內容具有較高的區域分割感。

實際案例-QQ音樂

Tips提醒

作為非界面固定內容，卡片式設計可以讓tips提醒設計變得更自由，在符合用戶體驗的基礎上，它可以出現在任何我們想要它出現的位置。

實際案例-淘票票會員提醒

結合手勢的單塊可互動內容

若頁面中有且只有一個主內容，並且需要用戶進行快速篩選時，可考慮這種結合卡片式設計與手勢設計的方式。大大增強了用戶對於設計的體驗感知和豐富視覺表現。

實際案例-探探首頁

卡券類設計

卡券類的設計實際上是一種物化映射的過程，我們在現實中看到的卡券造型，結合卡片式的擬物化設計，讓用戶在屏幕上可以更直觀的感知，提升了設計的代入感。

實際案例-京東領券中心

集合型功能入口

集合型功能入口往往會有多個入口，使用卡片式設計讓入口形成一個區域整體，可以做到既統一又相對獨立。

實際案例-淘寶微淘關注賬號

個人主頁頂部內容卡片

個人主頁的設計往往會在氛圍上營造沉浸感，卡片式的設計可以把關鍵信息進行概括收歸，讓原本單個的內容形成一個整體。

實際案例-美團外賣會員

規則探討

基礎的卡片設計規則，相信大家在一些系統級別的設計指導規範中也或多或少都能了解到，不同平台的規範差異性其實不會有太多本質性的區別，更多的是處理技巧或方式的差異，而每個設計師對其理解的角度也會具有一些差異化，這裡分享下我對於卡片式設計的一些基礎想法。

1.卡片的質感打磨

同樣的卡片設計，不同的人做出來的感受可能會有差別，而表達卡片質感的主要關鍵基礎點在於：卡片形體、投影深度、卡片顏色對比，我們需要了解這些基礎知識點之後，再結合實際的APP風格進行設計。

卡片形體

就像圖標的圖形設計一樣，不一樣的形體也能表達出不一樣的氣質，因此在設計的時候我們需要依據整體的風格進行表達。異形卡片的設計，可以讓原有方方正正的卡片表達出差異化，從造型上打破一些傳統的處理方式，再結合一些IP人物元素可以更加深入的表達出具體的內容氛圍。

投影深度

投影的視覺效果，會直接影響着整體卡片的質感，太深太大的投影會顯得整體卡片過於厚重，太淺太小的投影則顯得過度生硬，因此合理的數值比例則可以讓卡片看起來自然有質感。在項目中我常用的一組數值規律是1:2或1:3，例如Y軸偏移10px，模糊度則設定為20或30px，這樣成比例的數值出來的效果會較為自然，如下圖：

卡片顏色對比

卡片與背景的顏色對比會影響這卡片的整體質感，在設計時我們需要把握好卡片與底色的對比，不同的明暗對比出來的質感也會有差異。這裡有兩點建議：1.卡片色與背景色不宜太過接近或使用同一顏色，因為會影響卡片整體的空間質感或使得卡片的邊緣銳度下降；2.深色背景上，儘量讓卡片與背景色在同一色系或者明度不要差異太大，避免過於突兀。

2.邊距的設定

在使用卡片式設計時，經常會糾結邊距的設定，寬邊還是窄邊？多少像素更為合適？經常我會帶着這種疑問去設計。

基於內容的簡單規則

卡片式設計作為設計的表現形式，最終是為了承載內容，因此邊距的寬窄也需要依賴於實際內容的判斷。結合我在項目中的嘗試分享以下幾點：

多窄少寬

卡片內容較多是使用窄邊距，讓卡片具有足夠的空間來展現內容，內容較少則可以考慮採用寬邊距來打造整體的視覺空間感，如下圖app store和淘寶的設計對比。當然這只是一個建議，實際還得具體問題具體分析。

再如一些瀑布流、宮格、橫滑模塊較多的APP的設計亦是如此，在內容較多的情況下會把邊距壓縮到最小的合理間距。

內外成比例

以最外邊為基礎值往裡設計，間距以固定比例進行縮減，雖然沒有刪格來得規範，但也可以讓設計變得有跡可循。

基於刪格

刪格系統解決了一些基礎的板式問題，有助於提升設計的規範性，讓設計更加有跡可循。在設定卡片式的邊距時可以適當應用刪格系統，讓邊距與內容形成固定的關係，這樣可以幫助整體的卡片設計更加具有細節和規則。

4.卡片的標題設定

標題的設定主要考慮以下幾點：1.是在卡片內還是卡片外；2.標題的字號設定多少更合適；3標題是否加粗？

卡片內或外的對比

在項目設計中讓我較為糾結的是：標題應該在卡片內還是卡片外？通過了一些案例的嘗試之後，我總結了一個規則（需要依據內容的形態而進行設計）：當卡片內容是獨立的模塊或模塊中只有一個大標題時可設定在卡片內；當卡片內容是以組合呈現或者具有延續性內容時設定在卡片外，形成最外層的主標題。

標題的字號設定

標題主要作用為2點：1.簡短說明每個模塊的內容；2.讓用戶在長頁面瀏覽中起到引導、定位的作用。通過一些嘗試發現：1.當內容較少時，並不需要太大的字號即可起到標題的作用；2.當內容較多時，較小的標題字號則容易被沉入內容中，讓用戶在瀏覽的過程中難以發現，而導致信息獲取缺失；3.標題應該與正文字號大小差異建議在6-10px，這樣可以更好的拉開差異，讓標題更具有標題感。

字體是否加粗

常規思維下我們都會對標題進行加粗，我在實際中的經驗得到的總結是：需要看手機系統或不同廠商的機型。我在項目之初都對標題進行了加粗，但後續在跟進還原時看到的效果並不理想，特別是Android的機型上，因為我們使用的是系統默認字體，android系統很多字體並未對系統進行優化，而是使用微軟雅黑，微軟雅黑在android系統上再加粗，就會顯得整個系統的外輪廓特別粗糙，最後我們依據不同的機型進行了差異化的選擇。