www.renewa的部落格

我一直相信，設計是為了解決用戶問題，卡片設計雖然應用的場景非常豐富，但是它在應用過程中也有很多局限性，接下來就讓我帶領大家了解一下我所了解的卡片設計，它的優缺點及適用的場景，以便大家可以更靈活的使用，為自己的設計增添色彩。

概念：卡片設計是包含圖像和文本資訊的小矩形，主要作為功能、內容資訊的入口，如果使用恰當可以很好的平衡用戶界面的設計美學和良好的可用性。

據說卡片設計鼻祖Metro的設計靈感來自於機場、地鐵指示牌。因為他們普遍具有以下特徵：

• 清晰直觀

• 簡單易懂

• 資訊糢塊化

對於我們這個年齡的小夥伴來說，最直觀的記憶就是小時候收集的各種零食內的卡片，據說集齊之後可以召喚神龍。這些卡片都包含了一個特定的主題資訊，像小當家泡麵裡的英雄卡，每個卡片代表一個英雄，這樣我們可以任意翻轉、移動卡片，多張卡片可以進行任意排列組合，以便我們對比各位英雄的技能指數。卡片在現實生活中的這種空間位移特徵和資訊承載特性，也被很好的使用在數字界面設計中，繼續發揮他們的作用。

最明顯的例子就是游戲中的英雄展示，看看上下對比，是不是感覺一糢一樣呢。

順帶提一句，雖然Metro是卡片設計的鼻祖，但卡片式設計卻是在微軟、穀歌的產品界面大量運用後流行開來的，現在這種設計風格在App、PC、平面、PPT等設計作品中都有廣泛使用，足以看到大家對這種設計風格的喜愛。

卡片設計的本質就是將資訊進行整合，有較強的交互能力。總結下來共有8個明顯的有點，下面我們來具體了解一下，深入認知才能靈活運用嘛~~

探探就是靈活運用卡片設計的優秀例子，它將左滑刪除右滑喜歡這種左右滑動的卡片交互方式帶到更多人的視野之中，並且在產品推廣過程中起到非常好的宣傳作用。

1. 增強點擊感

比較有代表性的就是諾基亞行動電話的win phone系統，系統桌面的所有功能都是通過不同色彩的方塊承載，就像是擴大版的按鈕，增強用戶點擊操作的欲望。

仔細想想IOS11控制中心的操作界面，也是以卡片方式展現的，相信選擇這種界面形式也是為了用戶可以快速與功能進行互動，所以種類多且功能複雜的入口類界面比較適合卡片方式。

2. 排版整齊

卡片將資訊、圖像歸類整合在一個方塊裡，清晰直觀，同時又可以避免頁面因為資訊多而散亂。卡片排列方式是按列或行的方式對齊展示，視線沿著橫向或者縱向瀏覽就能快速找到想要的資訊。

另外，這種固定大小的卡片也有利於柵格化排版，像Dribbble、Behance等設計類網站，為了用戶可以快速找到自己感興趣的內容，且可以更好的自適應都不約而同的選擇了這種設計方式。

3. 資訊糢塊化

卡片幾乎可以被用來容納任何形式的資訊。將資訊、圖像按維度分類整合到一個卡片裡，通過增加多維度的標題，將資訊進行清晰明確的分類，這樣可以有效減少用戶思考的時間，並能快速找到自己所需要的資訊。就像寫文章一樣，需要分章節，你可以輕松跳過不需要的章節內容，只讀你感興趣的部分。

PS. 根據糢塊類型的多少和易於識別的程度，選擇是否增添標題。

4. 包容性強

卡片幾乎可以被用來容納任何形式的資訊，比如用戶發表的動態，資源資訊，用戶資料卡片，輪播資訊，商品詳情等等；

承載操作功能，資訊糢塊之間有明顯的區分，視覺終點可以讓用戶有片刻停留，在此放置操作按鈕，有利於用戶操作。

比較典型的列子就是承載社交屬性的糢塊，像微博、淘寶、飛豬等動態類界面，都選擇的是卡片式設計；

6. 視覺上賞心悅目

卡片對圖片和色彩有很強的依賴性，在卡片設計中經常會使用豐富的顏色和漂亮的圖片。多項研究都已經指出圖片、色彩確實能提升網站或應用程序的設計效果和瀏覽體驗，因為他們都能夠快速有效地吸引用戶的註意力。

7. 嚮應式設計

卡片是一個內容容器，可以輕松進行放大、縮小，對於嚮應式的設計來說，卡片是一個非常合適的選擇。可以在多設備間創造出一致的體驗和美學效果，如下圖：

8. 為交互而設計

數字卡片的使用方式可以跟現實中的卡片一樣，任意移動，翻轉，並且可以輕松實現變形，設計師可以充分發揮自己的創造力，在頁面設計中挖掘更多有趣且有用的動效，增強用戶與界面交互的趣味性。

                                     來自網路

1. 瀑布流

固定卡片寬度，高度隨圖片的大小進行自適應展示，用戶可以順著圖片展示的方向，找到自己喜歡的內容資訊，瀑布流非常適合圖片類型多樣，且尺寸大小不一的頁面展示用。

比較典型的例子就是Pinterest的設計展示，黃油相機和旅游類App中圖片展示的糢塊都會使用到。

2. 工作流

例如：Teambition，可以將工作按完成狀態進行分類展示，直觀清晰，便於多角色互動交流。

3. 彈層提示

卡片不僅可以作為內容的承載，也可以承載操作。

4. 控制面板

來到後臺界面的用戶，一般會有明確的目標，來直接尋找自己需要的數據資訊，卡片將資訊組織成符合邏輯的分組，根據特定的上下文進行排序，以便用戶快速高效的找到自己需要的資訊集合

5. 十字軸交互糢塊

因為卡片特別適合交互，同時比較容易引起用戶的註意力，所在縱向列表的資訊間增加的十字軸交互糢塊特別適合用卡片設計。

口碑附近糢塊裡，在卡片內嵌十字交互卡片的形式還是第一次註意到，電商類為了節省空間展示更多內容解鎖了卡片設計的更多新用法。

6. 單一內容糢塊

功能單一的糢塊，為了讓頁面不至於太簡單，多數情況下會選擇卡片設計風格增強視覺表現，比如優惠券，卡包等等。

7.  游戲類產品主界面

游戲類界面跟電視主屏幕比較相似，都是為用戶提供的資訊入口，且會使用豐富的顏色來進行糢塊的區分，這樣用戶可以方便用戶輕松找到自己需要的資訊。

上文提到過設計最終是為了解決問題和實現更好的商業目標。卡片式設計能在一定程度上保證美感，但並不是所有的產品糢塊都適合使用，我們一起來看看下面這個例子。

栗子🌰：

Goal News和Live Scores這兩款應用進行卡片設計上線後，希望用戶可以有不錯的反應，但最終的結果是差強人意的。用戶主要抱怨的點在於一屏之內能夠所能顯示的文章數。

eg. 「我只是想迅速、簡單地瀏覽一下新聞而已，搞這麼多圖片，還要向下滾動那麼深」

      「想要掃完所有的新聞就不得不欣賞完這些大圖...根本沒辦法快速瀏覽完所有已更新的新聞」

通過數據監測研究，發現卡片設計存在以下3個明顯缺點：

1. 卡片阻隔資訊連貫性

研究發現，卡片設計風格的產品中，用戶對菜單的點擊量增大，可能是因為，當用戶發現沒辦法快速瀏覽大量的內容時就會選擇使用菜單去尋找符合他們需求的內容。

2. 卡片式增加滾動的深度

尤其是大投影的大間距的卡片樣式，所占據的空間高度比間隔線的列表增加20%~40%。在資訊大爆炸的時代，用戶只想快速獲取自己需要的內容資訊，只要在前幾個卡片中沒發現他們想要的內容，基本上就會離開。

3. 視野中文章的數量減少

卡片需要色塊間隔，很多時候會需要大投影來凸出視覺樣式，占據的頁面空間會比間隔線列表大好多，這樣同樣的視圖範圍內顯示的文章就會變少，所以那些需要用戶快速瀏覽、對比的資訊就不適合卡片式設計。

「穀歌的搜尋結果頁面也許可以設計的更美觀，但這樣就意味著每個頁面呈現更少的搜尋結果」   — Greenbot

所以新聞、資訊類糢塊不適合使用卡片式排列方式；還有某些內容單一數量較多的糢塊，比如通訊錄；因為用戶在這些糢塊中的共同目標是：快速瀏覽、輕松獲取資訊摘要，進行上下對比，以判斷是否要進入詳情頁面查看，所以緊密的資訊結構更利用用戶判斷。

結語

最後還是那句話，設計是為了解決用戶的問題，任何設計風格都沒有好壞之分，設計師需要判斷的是這個風格是否適合產品功能的用戶需求，通過了解卡片式設計風格，我們發現卡片設計適用於的單一功能糢塊內容展示、資訊糢塊分類、十字交互糢塊、控制面版、資訊流、工作流功能糢塊設計。大家可以根據這些優點對卡片式使用方式進行更多的探索，或者將某種樣式發揚光大，就像探探一樣..更多設計網站： https://www.designnow.com.hk/