關注▲Clip設計夾後台回復「進群」加入設計成長群
設計夾的第129篇文章分享
卡片是產品中常見的設計組件之一。通過卡片，可以將不同的內容分層次組合在一起。卡片式設計自帶簡約和易用的屬性，能讓頁面看起來更有秩序感。
卡片作為常用的UI組件，通常由標題、內容描述、圖像、按鈕等元素組成。
通過分析卡片的構成、卡片設計關鍵點來全面總結卡片設計方法！
1) 卡片與背景形成對比
為了更好地區分卡片和背景，可以給卡片填充顏色、添加淺色描邊、添加陰影等讓卡片與背景有區分。
2) 選擇合適的字號
內容可讀性由字體的選擇和字號的大小決定。例如，下面兩個卡片有一樣的布局，但右邊卡片的內容更有層次感，更容易識別。
通過選擇合適的字號大小，能讓整個卡片在視覺上變得均衡，每部分內容有對比，但又很協調，主次關係明確。
設計提示：
標題：通常使用20px-36px，具體大小需要根據卡片使用場景靈活選擇。
副標題：字號應該比標題小2px-10px，以便於區分內容的主次。
正文：字體大小保持在14px-16px。
3）建立統一的間距規範
在頁面中，元素間的間距是劃分內容、建立層次結構的重要因素。
如果想讓頁面的設計保持一致性，避免出現混亂，就需要建立統一的間距規範，並讓所有頁面都按照這個間距規範執行。
設計保持統一後，後期開發也會更友好。
設計提示：
4）使用骨架屏加載內容
現在很多產品採用與頁面布局匹配的骨架屏作為loading過渡，這樣有助於減少用戶對加載內容的不確定性。
對比下面的兩個加載樣式能看到，右側的骨架屏加載樣式能讓用戶知道接下來的頁面中會出現卡片，更好地傳達內容。
更多骨架屏加載樣式：
5）定義卡片的高度
卡片通常以一組的形式出現在頁面中，水平、垂直方向都要保持對齊，這樣頁面才會看起來更規範。
但每個卡片的內容可能不一樣，例如有的卡片4行文字，有的卡片只有1行文字。
6）使用網格進行卡片布局
網格是基於卡片布局的基礎，有助於一致地排版內容。
對於不同的顯示設備，如pc端、pad端和移動端，採用不同的網格列數和寬度，保持內容在不同屏幕尺寸上做到響應式變化。
7）創建具有不同內容的卡片設計
當卡片中有標題、內容、圖片、按鈕等多種元素時，需要考慮標題與圖片的位置關係、標題和內容的長短等。
例如卡片頂部是標題時，考慮到標題字數不確定，我們可以在卡片上方保持至少能容納兩行標題的空間，卡片內的圖片和按鈕的位置保持不變。
這樣既能讓標題差異化的展示，還不破壞卡片內其他內容的位置，整組卡片放在一起也更整齊。
8）定義卡片的交互狀態
當用戶與卡片進行交互時，卡片需要呈現特定的視覺反饋。常見的卡片狀態包括默認、懸浮(pc端)、激活、選中等。
Web卡片設計示例
1) 產品列表頁
亞馬遜、阿里、eBay等電商網站都使用卡片來展示產品。通常，產品卡片由產品圖片、標題、價格、折扣和按鈕組成，點擊卡片跳轉到產品詳情頁。
2) 內容網站
例如Behance、Bribbble等內容平台、BBC等新聞平台，或者Unsplash這類圖片網站，都使用基於卡片的布局表示每個內容事，這樣用戶可以快速瀏覽、比較和選擇想要觀看的內容。
3) 數據看板
數據看板中展示了如何使用卡片對相關信息進行分組，用戶更方便比較和分析界面中的數據。
4) 協作工具
卡片是靈活的組件，可以組合成不同類型的小組件。Figma、Framer等協作工具使用卡片展示項目和文件。
這種類型的卡片設計簡潔、功能性更強，點擊卡片能訪問更多與文件相關的操作。
以上是8條設計師必備的卡片式設計指南,希望通過這些設計指南能讓大家更熟練地掌握並運用卡片式設計～
慢慢來比較快，如覺得有幫助，
請點個讚&在看，謝謝！
添加微信,邀你進設計成長群⭐️
🔥文章合集
致2020：設計文章合集
留言列表