木梓設計整理編輯（ID：umthink365）
來源：medium（作者:Nick Babich)
卡是存放信息的盒子容器。最近，這個簡單的UI組件已成為Web和移動設計的重要組成部分-當前市場上可用的應用程式或網站都使用卡。卡片使內容和功能更易於發現，並且在任何屏幕尺寸（從大電視屏幕到行動裝置的小屏幕）上都看起來不錯。
在本文中，我們將回顧卡片的概念，並為設計師提供一些實用技巧。
Card是一個UI組件，其中包含有關單個主題的內容和操作。一張卡片可以包含幾種不同的元素，但是它們都應該圍繞一個主題。通常，該卡可作為概述和更詳細信息的入口。
當涉及視覺設計時，卡片可以有很多不同的布局，儘管沒有嚴格的規則，但是典型的卡片布局具有以下要素：
意象。可縮放以適合容器頂部區域的圖像或視頻。
標題
簡短的摘要。單位簡介。
動作（可選）。與單位關聯的動作。
卡片布局示例UI卡設計原理精心設計的卡片可以使用戶更輕鬆地掃描可用信息。好的卡片設計是：
高效的。避免卡片外來信息或操作過多。每張卡片僅應包含基本信息和操作。
有意義的。每張卡都應包含有助於用戶做出決定的信息。
清除。卡的布局會影響其感知方式。每張卡均由內容塊（如文本和圖像等元素）組成。內容塊應以清楚表明層次的方式放置在卡上。
獨立的。一張卡應該獨立存在，而不必依賴其他卡。一張卡不能分成多張卡。
變革的。卡片可以變形以顯示其他內容。
反應靈敏。卡片可以調整大小以適合可用空間。
卡更適合瀏覽信息而不是搜索。當設計帶有卡片的布局時，關鍵思想是允許用戶快速消化大部分內容並深入他們的興趣。
Pinterest使用卡片允許用戶瀏覽內容並深入了解他們的興趣。圖片由Pinterest當用戶需要比較多個選項時（例如，當用戶需要在電子商務頁面上比較幾種產品時），卡不是正確的選擇。由於卡僅提供有限數量的內容，因此使用戶的比較過程更加困難。最好使用列表或網格視圖。
基於卡的設計通常嚴重依賴視覺效果（圖像或視頻），因為視覺效果是用戶掃描卡時首先注意到的。選擇相關的圖像非常重要-可以一目了然地傳達單元含義的圖像。請注意，圖形將按比例縮放，因此請確保在你為其設計的所有平臺上預覽它們。
用戶需要閱讀的所有內容都應作為文本包含在內。卡片應提供有關特定單位的信息摘要。不要使用卡片來顯示長文本。而是提供簡短的概述，並確保他們鼓勵用戶進行更多探索。
通常，建議對卡中的文本使用sans-serif字體，因為這樣的文本在大屏幕和小屏幕上看起來都一樣好。
Google的Roboto字體。圖片由Material Design設計UI元素應始終傳達其含義。用戶應該僅通過查看就知道如何與特定的UI元素進行交互。在卡片設計方面，陰影效果有助於指示卡片-輕微的陰影表示整個卡片都是可點擊的。
陰影的輕微下降有助於指示卡片UI元素如果你打算顯示卡片的集合，請考慮對集合中的所有卡片使用相同的視覺屬性。
GlebKuznetsov✈的卡片3D界面動畫如果UI卡包含交互式元素，則必須清楚地指示此類元素。Material Design建議使用視覺分隔器分隔卡片中的各個區域。分隔線可以是可見的（例如在下面的示例中，用1像素線分隔各個部分）。
可視分隔符（1）用於分隔靜態內容和交互式元素。圖片由Material Design設計或者可以使用空格創建它們（鄰近的格式塔定律表明，彼此靠近放置的項目被視為已分組）。在每個塊周圍使用空格，以使用戶更容易分隔不同的部分。
空格用於將帶有動作「接受」和「拒絕」動作的部分與靜態內容分開。Alex Arutuynov的醫生預約應用App卡中的內容可能高於最大可用屏幕空間。在這種情況下，卡上的內容不應滾動。否則，您可能會產生不可預測的滾動行為（在滾動中滾動）。
避免卡內滾動。圖片由Material Design設計如上所述，卡是可轉換的UI組件-它們可以轉換以顯示其他內容。該卡應展開以在屏幕上顯示其他信息。當涉及到動畫過渡時，建議避免花哨的動畫效果，例如，翻轉這種效果需要過多的關注，並且當用戶定期看到這種效果時會很快變得煩人。
避免使用翻頁卡效果，特別是對於大尺寸的卡。翻錄卡塞繆爾·庫託如果你打算在移動設計中使用卡片，請考慮支持點擊和滑動手勢。輕擊可用於更改卡片的狀態（即，將卡片展開以從預覽狀態變為詳細狀態）。
Cuberto的 3D汽車演示滑動可用於在集合中的卡之間導航。
分享最新鮮的設計文章！提供最優質的設計服務！
合作微信：2762076706
Our Work ★★★★★
平面設計 / LOGO設計 / UI設計 / 互動設計 / 三維建模 /
海報設計 / 易拉寶 / 三折頁 / 宣傳單 / 畫冊 / 產品包裝 /
網站設計 / APP設計 / H5設計 / ICON設計 / 小程序設計
木梓設計
微信號 :umthink1080
抖音/頭條：木梓設計