卡片設計風靡源自於material design，卡片設計的出現打破了傳統設計一成不變的排版布局，大大提升了版面的利用率，製造了更多的驚喜，卡片設計的優勢有哪些呢，一起來了解一下。
頁面卡片是用於存放信息的整潔的小容器。在平衡清晰美觀與簡單易用性之間，它們幾乎成為默認選項。最初由Pinterest和Facebook之類的服務引入，Pinterest提出了一個想法，即有關一個主題的所有最相關信息都可以組織到一個容器中，如今，卡片的影響力已分散到多個行業，使用頁面卡片有以下幾個好處。
卡片像個容器，可以把不同類別的內容放在不同的卡片中，不僅能很好的區別內容，還能保持界面的統一性。例如，傳統列表，內容一般為縱向滾動，展示內容有限，而採用卡片式的滑動設計方式，則很好的解決了空間有限的問題。卡片像個容器，可以把不同類別的內容放在不同的卡片中，不僅能很好的區別內容，還能保持界面的統一性。
每一個卡片的內容都代表一個分類，都是一個載體，承載一定的內容，歸納一個類別的信息。每一個卡片都是不同的緯度，相對獨立，又有關聯，通過卡片的大小歸納內容信息，更有秩序性。卡片在設計中的運用非常廣泛，可以被覆蓋、滑動、堆疊，具有更好的可擴展性和可操作性。例如：Apple store IOS11 通過多卡片大小的分類將不同緯度的內容有規律的展示出來，提高了版面的利用率的同時，也提升了設計的格調。最美應用運用卡片的設計方式向用戶傳達了一頁只看一個應用的理念，結合左右滑動的形式，使得應用別出心裁。
在合理使用頁面卡片之後，可以改善應用的用戶體驗。在本文中，將提供5種有用的卡片技術，並提供一些有用的示例。
頁面卡片中的所有內容應僅涉及一個想法。卡片在一個設計中可以包含多個元素，但是每個元素都應僅關注信息或內容的一點。這使用戶有機會選擇他們想要關注的內容部分。
遵循《費茨定律》，允許用戶單擊/點擊卡的任何部分，而不僅僅是文本連結或圖像。較大的觸摸區域可顯著提高觸控螢幕設備和基於滑鼠的設備的可用性。
提示：這是一個很好的設計細節，在卡片中使用輕微的陰影，以顯示深度，給用戶一個明顯的提示，這個地方是可以點擊的。
為了讓卡片展示設計的新穎性和出色的可用性。通過給卡片一些美學上的修飾，設計師需要讓卡片的設計既熟悉又富有創意。
對於卡片的實際設計，設計師需要關注以下方面：
大量利用圖像是基於頁面卡片設計的優勢。研究證實，圖像可以提升設計水平。因此，強調使用圖像使基於卡片的設計對用戶更具吸引力。
陰影和漸變在使用戶與卡片相對應方面起了很大的作用，就像日常生活匯總物理對應物一樣。但是，設計師需要仔細考慮如何使用陰影和漸變：如果陰影在各個角落和側面都投射，那麼卡作為物理對象的錯覺就會毀了。設計師還可以使用文本來吸引用戶的注意。關於卡片設計的所有內容都應該易於閱讀和理解，應該設計成具有最大的可讀性：
頁面卡片通常很短，並且提供了指向更多詳細信息的連結入口，而不是完整詳細信息本身。當設計師嘗試在卡片中放入太多內容時，會導致卡片開始變得太寬或太長，由於它不再像卡片一樣，它會失去其原始的隱喻。
設計師可以在上圖看到基於卡片的用戶界面的示例。注意中心的卡片。這裡的問題是它充滿了信息，這使掃描變得困難。
如果正確使用動畫，則可以極大地改善用戶體驗。它可以幫助人們在基於卡的界面中定位自己，並為每張卡建立不同狀態之間的視覺關係。
視覺提示可幫助用戶更好地了解如何與用戶界面進行交互。當設計師需要演示設計中某些功能的運行方式時，可以使用這種動畫類型。
視覺反饋在UI設計中非常重要。之所以起作用，是因為它吸引了用戶對確認的自然渴望。在現實生活中，對象會響應我們的互動，這就是人們期望事物起作用的方式。對於桌面應用程式或網站，設計師可以使用懸停效果來表明該元素是交互式的。懸停動畫增加了可發現性的水平，同時使體驗更加有趣。
使用懸停效果，還可以顯示選項。在下面的示例中，懸停效果允許用戶進行顏色標記，回復，轉發或刪除消息。
該動畫在預覽和詳細視圖之間創建過渡：用戶選擇一個項目（卡片），並立即看到與該選擇相關聯的詳細信息。這裡的挑戰是確保用戶感覺自己停留在給定的上下文中。
例如，動畫可幫助設計師將縮略圖與其詳細視圖相關聯。
卡片就是新的創意畫布。它們不僅是外觀，而且是創建豐富內容體驗的最靈活的布局格式之一。
往期精彩內容
【一戰成名】2018考研衝刺救命班 【必看】暑假結束你的快題應該畫成這樣 這些仿生設計你一定要看2018 暑假手繪第1天就畫成這樣，就說你怕不怕！ 手繪課程2天教學成果 馬克筆原圖教你如何上色 5天你就可以畫成這樣2018 設計手繪課程第6天作品 第2天竟然達到這樣 小版面及優秀馬克筆手繪 暑假結束你的馬克筆應該畫成這樣 第10天手繪效果必看 【必備】騰訊課堂工業設計手繪基礎網課來啦！ 【純乾貨】這樣的手繪讓我毫無抗拒！ 寒假你的手繪應該畫成這樣！寒假課程學生作品展示 NCDC學員北理2017年135分考研快題-曲別針回憶稿 【純乾貨】暑假結束你的考研版面要畫成這樣！ 哮喘吸入器·產品設計手繪演示視頻 考前70天手繪快題要畫到這個水平！十一課程成果展 20分鐘教你學會彩鉛工具表達技巧【純乾貨】 遠離PPT排版，你只差這篇排版攻略 手繪一直沒有進步，那是你不懂「刻意練習」法則 【手繪乾貨】彩鉛工具表達技巧-簡單形體教學示範
北京大學 武漢理工大學設計學博士經驗分享 2018北京理工大學設計學手繪最高分 2018北京理工大學（工業設計工程史論第二） 2018同濟大學 2018東華大學（3個月考研成功） 2018廣州美術學院 2018大連理工大學 2018深圳大學 2018河北工業大學初試第一 2018華東理工大學 2018河海大學 2018廣東工業大學 北京工業大學第二名 華南理工大學初試第一名成功之路 大連理工大學 北京理工大學 北京理工大學設計學395分學霸經驗分享 四川大學 武漢理工大學 同濟大學 西北工業大學 NCDC學員北理2017年135分考研快題-曲別針回憶稿 18年經驗分享陸續更新中……有一個地方只有我們知道-新易設計坊 考研還是出國？無問對錯，適合自己就是最好的選擇！ 【效率翻倍】新易考研自習室來啦！全國首家，始於2014年
【上百個網站全拿走】學工業設計這些好用的工具你一定得知道 【純乾貨】如何準備一份優秀的工業設計作品集（上） 如何準備一份優秀的工業設計作品集（下） 2018年新易設計坊暑假精品作品集課程正式發布！ 地表最強|工業設計留學攻略 國外學生作品集 | 作品集分享——值得一看的草圖與分析部分 產品設計十部曲1—如何尋找「設計點」？ 產品設計十部曲2——產品設計「前期分析」需要做什麼？ 產品設計十部曲3—產品設計市場調研怎麼做？ 去中央美術學院看畢設 【精品作品集成果展】這樣的作品集複試錄取率高達96% 有一個地方只有我們知道-新易設計坊 清華美院本科生畢業展！
（點擊圖片試試）
（點擊圖片試試）
（點擊圖片試試）
新易設計坊官方微博