老板讓做個卡片式設(shè)計，花瓣看不了我上哪里找參考？
花瓣不在的第三天，想它...想它...想它...
卡片式設(shè)計（Card Design）作為2018年UI設(shè)計的大趨勢之一，已經(jīng)深深植根于互聯(lián)網(wǎng)世界當中。
作為承載信息的“容器”，卡片式設(shè)計能夠包含文本、媒體和按鈕等元素，而且能夠適應(yīng)不同設(shè)備、屏幕尺寸，平衡用戶界面和用戶體驗之間的關(guān)系。
什么是卡片式設(shè)計？
就像是名片一樣，一個小小的矩形，里面有圖片和文字，卡片式設(shè)計能夠作為用戶獲取信息的切入點，既美觀又不失可用性。由于卡片式設(shè)計能夠顯示包含不同的元素內(nèi)容，也易于使用，所以現(xiàn)在不少界面默認選擇用卡片式設(shè)計。
卡片式設(shè)計的優(yōu)點？
增加空間利用率
傳統(tǒng)的列表樣式，需要我們不斷往下滾動才能看到更多內(nèi)容，而且顯示的內(nèi)容有限。但用卡片式布局，即使是瀑布流，通過水平滑動也能顯示更多內(nèi)容。
提高可操作性
卡片不僅僅是能夠展示信息，同時卡片式設(shè)計還具有可以被覆蓋、折疊、移動和滑動的特點。如此一來，更有利于擴展內(nèi)容的視覺深度和可操作性了。
像是iPhone的通知中心，就是使用堆疊的卡片式設(shè)計，同類型的消息會被折疊起來，可以幫助用戶迅速找到自己想要的東西，只需要點擊就能打開，或者通過滑動刪除。
方便信息集成
卡片式設(shè)計，除了能盡可能展現(xiàn)信息以外，其實還具有“邏輯”，即使我們超快速瀏覽頁面，也不會因信息多而感到混亂?？ㄆ皆O(shè)計將界面用塊狀分割開來，讓頁面更加整潔、賞心悅目。一個頁面中各種卡片大小不一，信息的層次結(jié)構(gòu)立馬就被區(qū)分開來了。
個性化的用戶體驗
比起傳統(tǒng)的UI設(shè)計，卡片式UI相對簡單直觀，最大的優(yōu)勢是它讓整個界面更加清晰、平衡和簡潔，同時又沒有影響App的功能。
優(yōu)秀的卡片式設(shè)計
Google Play
Google Play是一個很好的例子，整個網(wǎng)站的色調(diào)都遵循著Google的風格?？ㄆ皆O(shè)計在網(wǎng)站里隨處可見，模塊化讓整個網(wǎng)站看起來井井有條。
Quora
作為一個內(nèi)容網(wǎng)站，Quora用卡片式設(shè)計解決了如何在有限的布局內(nèi)平衡顯示內(nèi)容和用戶體驗。用卡片將信息組合成每個小模塊，便于用戶閱讀。
點擊目標越大，用戶的操作越快，Linkedin展示內(nèi)容的格式就是文本、圖片、鏈接，當一張卡片都具備這些元素的時候，中心的圖片就成為了整個卡片上最大的可點擊區(qū)域。
作為卡片式設(shè)計的先驅(qū)，Pinterest的瀑布流頁面設(shè)計為用戶提供了一種流暢無縫的瀏覽體驗。盡可能減少點擊次數(shù)，很大程度上留住了用戶。跟Linkedin，Pinterest的每個圖片都是可以點擊的，在鼠標停留在頁面圖片的時候，圖片就會有微妙的陰影、顏色變化，引導用戶點擊。
Dribbble
經(jīng)驗表明，圖片能夠快速吸引用戶的注意力。由于每天都有很多設(shè)計師上傳自己的創(chuàng)意，Dribbble選擇了使用卡片式設(shè)計來展現(xiàn)每個作品。
Instagram里面所有圖像都是以正方形發(fā)布的，這樣可以將瀑布流布局中的圖像寬度標準化。
Trello
Trello運用卡片式UI將內(nèi)容分類，優(yōu)化了用戶管理任務(wù)和工作的方式。
Airbnb
Airbnb一直專注于用視覺效果來吸引用戶，卡片式設(shè)計簡單直觀，有利于改善用戶體驗和區(qū)分每個內(nèi)容。Airbnb還采用無框設(shè)計，將統(tǒng)一和重復的信息相結(jié)合，內(nèi)容顯示有一個標準的模式展現(xiàn)。
除了這些例子，Dribbble上還有很多優(yōu)秀的卡片式UI供我們參考學習。
卡片式的UI設(shè)計，不僅僅是頁面上的控件，它還是創(chuàng)建高質(zhì)量內(nèi)容和提供好的用戶體驗的重要布局元素。上面的例子展示了卡片式設(shè)計的最佳實踐，最為當下UI設(shè)計的常態(tài)風格，再不掌握連跳槽的資格都沒有啊( ′▽｀)
匯包裝，一站解決產(chǎn)品包裝定制需求，18年經(jīng)驗/包裝盒定制廠家，一分鐘就給到您產(chǎn)品的包裝預算，萬款案例讓您快速做出決策，最快看到樣品及量產(chǎn)所需時間，讓您產(chǎn)品銷量開始暴增！
