卡片設計常用於移動端產品，具有很好的視覺效果，可以說是頁面佈局的神器。
墨刀素材廣場作品——攝圖app
不管是什麼類型的產品和場景，它都完全合適。
墨刀素材廣場作品——旅遊娛樂原型
今天，我們想跟刀友們分享Alex Zlatkus寫的一篇文章，主要內容是講述了卡片設計的演變、卡片設計的種類以及他們是如何影響作者的，一起來看看吧～
前情提要
我最近被任命重新設計以下篩選結果頁面：
1.篩選用戶（創意）結果：
2.項目的篩選結果：
這些結果的呈現形式看起來像是卡片（而非列表項）。
我不知道這是否就是最佳的設計方式，所以我決定基於此做一些研究，便有了這篇文章。
開始研究
經過我的多番論證，發現大多數產品顯示搜索結果都是採取列表形式，並非卡片。
搜索的列表包含兩個操作（“查看個人資料”和“關注”）
資料來源：Strava
但我越是研究得越深入，就越明白卡片和列表是融合一體的，所以頁面顯示結果時他們是都可以使用的，
演變過程
當Pinterest開始以類似拼貼的格式使用卡片時，卡片就成爲了主流。
Pinterest目前的卡片設計的成果
它的不統一佈局更適合瀏覽新內容，而不是回顧搜索/過濾的結果
正如它的名字所展示的那樣，卡片最初是根據紙牌的尺寸和深度設計的。
事實上，這也是2016年尼爾森·諾曼集團（Nielson Norman Group）對卡片的定義：
一種UI設計模式，將相關信息分組在一個看起來像撲克牌的靈活大小的容器中。
尼爾森-諾曼集團在2016年的卡片例子
但是，卡片很快就變成了新的非卡片形狀：
來源：目標網
去掉了背後陰影的卡片：
以 "卡片"的形式推薦連接
來源：LinkedIn
然後是懸浮卡片：
卡片的圖像和它的文字周圍沒有邊框
來源：Spotify
隨着時間的流逝，人們不需要用卡片的具體形式，以此類比來了解什麼是卡片以及如何與它們交互。
那麼，此時，卡片和列表有什麼區別？卡片因爲通常包含照片，所以方便“瀏覽”著稱，而列表則是文本密集的，非常適合“搜索”。、
讓我們以 Medium 爲例：
上有一個列表項，下有一張卡片
在移動應用中，用戶可以滾動瀏覽“每日推薦閱讀”，並首先顯示列表項。
當他們繼續滾動時（可以說現在處於沉浸狀態），他們會看到卡片。但如果用戶進行手動搜索，則僅顯示列表項。
p.s 這些卡片實際上是存檔項目的列表，卡片或列表只是因爲用戶在這個頁面的操作不一樣，則展示不一樣。
Medium 列表項和卡片之間的唯一區別，就是圖片的大小。
當前狀態
所以，目前看來，卡的定義是這樣的：
一種UI設計模式，它將相關信息集中在一個尺寸很大的容器中，從而培養瀏覽器的思維模式，並且一次只允許看到少數結果。
從視覺角度看，一張卡就是一個大的列表。從用例角度來看，當用戶的處於好奇或想要修改狀態時，卡片設計會脫穎而出。
卡片還是列表
問題不是“我應該採用卡片設計還是列表設計？”
你應該這樣問：
我希望每個組件的視覺權重有多大？
我的用戶想要在此時有什麼樣的體驗？
根據這些答案，你可能會創造一些看起來很像卡片或者列表的東西，或者你會找到一些令你滿意的中間值。
墨刀素材廣場作品——神奇交互三部曲第一期
回到重新設計
我瞭解到，我的用戶並不會進行明確地搜索，他們通常根據自己的區域進行篩選，並瀏覽一些有趣的項目或者創意。
更重要的是，用戶研究的結果表明，人們不介意滾動瀏覽內容，並且喜歡看更大的照片，並且不用下拉，這讓我想到可以進行以下設計：
1.有推理的設計
篩選用戶（創意）結果
像Instagram一樣，照片主導了用戶點擊結果的決定，也決定了圖像的大小。
不管是想要繼續鑽研該內容還是僅僅瀏覽一下圖片的用戶，白色的間隔空間都能滿足他們的需求。
經過多年的用戶進化和學習，我發現這種設計不僅能用而且還使簡約風格得到滿足。
項目篩選結果
類似於上面的設計，用戶可以點擊照片的任意部分進行放大查看，同時滑動照片或者點擊用戶名片都會連接到相應的頁面。
這就引發了用戶更多的參與度，因爲每一個部分都可以有結果，相比之下，原來的設計讓用戶猜測什麼是可點擊的，什麼是不可點擊的。
2.新舊設計比較
檢驗
由於我在一家小公司工作，要檢驗設計（不僅僅是用戶測試）歸根結底是看是否有其他應用也在做同樣的事情。
結果發現這些設計與很多款軟件都看起來十分相似。😏
分別是YouTube和AirBnb的首頁和發現部分：
就是這樣！很高興聽到人們對這些設計的看法😎。
我重新設計的應用叫做Connective，這是一款超級棒的應用，人們可以在這裏進行交流。
當然，卡片設計也不止運用在移動端的產品中，它可以作爲網格運用在Web的導航中。
網格包含一系列可展開可收縮的圖像，它是另一種視覺上出彩的結構，讓你可以組合相關元素，把主題和用戶體驗流程可視化。
像這樣：
該原型使用墨刀製作
網格中的圖像提供了大面積的可點擊對象，使網格成爲移動UI導航的理想形式。
它們還用於許多以展示圖片爲主的網站，並且其邏輯適應強的佈局，卡片網格非常適合響應式導航！
百看不如一試，趕快來墨刀製作一個你喜歡的卡片設計吧～
本文作者： Alex Zlatkus