大家在UI設(shè)計(jì)中愛用卡片嗎？??無論是b端產(chǎn)品還是c端產(chǎn)品，卡片式設(shè)計(jì)幾乎無處不在，卡片已然是我們在UI設(shè)計(jì)中最常見的樣式了，今天我們就來一起詳細(xì)的了解一下UI設(shè)計(jì)中的卡片樣式吧~
01?.
什么是卡片？
我們可以把卡片理解為一個(gè)容器，承載聚合不同的信息內(nèi)容。在我們的日常生活中卡片樣式也是特別多的，比如交通卡、銀行卡、名片等，在卡片上聚集了某類信息，方便我們查看與攜帶。
在UI設(shè)計(jì)中我們也將卡片作為容器，去承載不同的信息內(nèi)容，如圖片、文字等，我們稱之為卡片式設(shè)計(jì)。
02?.
卡片式設(shè)計(jì)的優(yōu)點(diǎn)
很多設(shè)計(jì)師都喜歡采用卡片樣式。利用卡片區(qū)分內(nèi)容模塊，減少分割線使用，讓界面更加清爽、透氣，除此之外，卡片樣式還具有以下優(yōu)點(diǎn)：
聚焦內(nèi)容：采用卡片包裹的形式，將信息聚會(huì)在卡片里，方便用戶閱讀。
直觀易理解：通過不同的卡片樣式，將信息內(nèi)容進(jìn)行模塊劃分，用戶可以直觀地區(qū)分信息層級(jí)，高效獲取內(nèi)容。
更具吸引力：卡片的設(shè)計(jì)樣式更加靈活、豐富，同時(shí)具備多種交互形式，具有更強(qiáng)的視覺沖擊力與趣味性。
增加空間利用率：卡片可以采用堆疊、橫向排列、上下滑動(dòng)等布局形式，還可以收縮、折疊，節(jié)約大量空間，增加屏幕利用率。
03?.
UI設(shè)計(jì)中常見的卡片樣式
Feed流
Feed流是很經(jīng)典的卡片式設(shè)計(jì)。ins、facebook、小紅書等都是采用feed流的設(shè)計(jì)形式，F(xiàn)eed流卡片常應(yīng)用在資訊、電商、社交產(chǎn)品中，通過卡片形式將內(nèi)容呈現(xiàn)給用戶，同時(shí)用戶也能很好地區(qū)分不同的信息模塊。
瀑布流
瀑布流也是很經(jīng)典、很常見的卡片式設(shè)計(jì)。通過卡片形式源源不斷的將內(nèi)容無差別的呈現(xiàn)給用戶，常見于圖庫、社交產(chǎn)品中。
左右滑動(dòng)卡片
左右滑動(dòng)卡片增加界面Z軸利用率，讓頁面更具層次感。左右滑動(dòng)卡片常見于社交、視頻、音樂類產(chǎn)品中。用戶橫向滑動(dòng)展示更多內(nèi)容，提升界面空間使用率。
堆疊式卡片
堆疊式卡片能讓用戶對同類型內(nèi)容進(jìn)行快速篩選，配合交互手勢，減少用戶閱讀同類型內(nèi)容的疲倦感，增加趣味性，提升用戶使用體驗(yàn)。最經(jīng)典的就是陌陌的無感「左滑」，喜歡「右滑」。
卡券
卡券設(shè)計(jì)也是UI設(shè)計(jì)中很常見的卡片設(shè)計(jì)樣式，卡券設(shè)計(jì)實(shí)際是現(xiàn)實(shí)中卡券的映射設(shè)計(jì)，通過視覺映射讓用戶直觀的感受到有福利優(yōu)惠、有折扣，刺激用戶。常見于電商、外賣等產(chǎn)品中。
功能導(dǎo)航卡片
卡片也通常用來聚合產(chǎn)品各功能服務(wù)入口，起著導(dǎo)航與流量分發(fā)作用。常見于首頁金剛區(qū)、服務(wù)頁、個(gè)人中心頁面中。
04?.
提升卡片精致度的小技巧
使用圓角
在信息識(shí)別方面，圓角比直角更加容易識(shí)別，在閱讀體驗(yàn)上，圓角形式會(huì)更流暢，更易閱讀。
輕投影
投影會(huì)增加界面層級(jí)感，卡片的投影效果一定要輕、且要有位移偏移。不要把卡片投影做得太實(shí)，平均分散在卡片周圍，不然看起來就很重，不夠精致。
添加質(zhì)感紋理
在進(jìn)行卡片式設(shè)計(jì)時(shí)，會(huì)出現(xiàn)信息少，排版后卡片很空不平衡的情況，或者想突出強(qiáng)調(diào)某一個(gè)卡片時(shí)，我們可以添加一些質(zhì)感、紋理，讓卡片更豐富飽滿，看起來也會(huì)更加精致。但需要注意添加的元素一定要弱，不要搶了主體信息的層級(jí)。
05?.
總結(jié)
卡片式設(shè)計(jì)是UI設(shè)計(jì)中常見的設(shè)計(jì)樣式，卡片會(huì)讓界面信息層級(jí)更加清晰直觀，節(jié)約界面空間...除此之外，卡片設(shè)計(jì)形式靈活多樣，有很多能讓設(shè)計(jì)師發(fā)揮視覺創(chuàng)意的空間，備受設(shè)計(jì)師們的喜歡，但我們也應(yīng)記住無論哪一種設(shè)計(jì)形式都是為我們的信息內(nèi)容服務(wù)的，切記為了美觀、追求形式而忽略了內(nèi)容呈現(xiàn)～
