什么是卡片？卡片是含有圖片和文字在內的小矩形模塊，它是用戶(hù)了解更多細節信息的「入口」。要平衡界面的美學(xué)和可用性，卡片基本是一個(gè)默認選擇。因為卡片用起來(lái)非常方便，還可以展示包含不同元素的內容。

　　如何設計卡片

　　在同一頁(yè)面布局中，卡片寬度應保持不變，但高度可以相應調整?？ㄆ畲蟾叨认抻谠撈脚_可用空間的高度，但也可以臨時(shí)延伸。例如，在顯示評論框的時(shí)候?？ㄆ叨燃瓤晒潭?，又可調整。

　　從設計角度來(lái)看，卡片各角最好是圓角，并且最好稍有一點(diǎn)陰影。圓角使卡片看起來(lái)更像一個(gè)內容塊，陰影則可以反映出深度。

　　這些元素在沒(méi)有分散用戶(hù)注意力的前提下，能給設計帶來(lái)一些視覺(jué)亮點(diǎn)。另外，還能給人一種卡片像是要從頁(yè)面中跳出來(lái)的感覺(jué)。除此之外，還可以加入動(dòng)畫(huà)和動(dòng)效。

　　卡片式設計的使用場(chǎng)景

　　1. 信息流（feed流）

　　信息流常見(jiàn)的展現形式包括以文字為主、以圖片為主和以視頻為主。文字為主的形式多出現在資訊類(lèi)的產(chǎn)品中，例如知乎、汽車(chē)之家等。優(yōu)點(diǎn)是可識別強、信息簡(jiǎn)潔明確，通過(guò)對標題簡(jiǎn)潔的處理能快速告訴用戶(hù)卡片上的核心內容，吸引用戶(hù)快速點(diǎn)擊閱覽。

　　圖片為主的形式使用最多的要屬Pinterest、花瓣這類(lèi)網(wǎng)站，相較于文字，圖片瀏覽的速度更快，一圖勝千言，圖片相較于文字具有更強的視覺(jué)沖擊力和感染力，更能吸引用戶(hù)的注意力和點(diǎn)擊。多數的設計中信息流的呈現形式主要是上下豎向滾動(dòng)，在Plus X的網(wǎng)頁(yè)設計中，采用了橫向滑動(dòng)的形式。

　　圖片信息為主的卡片整齊劃一地展現出來(lái)，見(jiàn)慣了上下滾動(dòng)的設計，這種左右滑動(dòng)的操作能為用戶(hù)帶來(lái)煥然一新的使用體驗。

　　短視頻的快速流行為信息流注入了新鮮的活力。視頻信息流的形式在淘寶直播、抖音等移動(dòng)端產(chǎn)品中應用較多，視頻畫(huà)面通常占滿(mǎn)全屏，最大限度地利用卡片式設計。視頻具備圖片與文字不具有的動(dòng)感，滿(mǎn)足視聽(tīng)體驗，帶來(lái)強烈的感官沖擊力。

　　沉浸式的界面設計讓用戶(hù)能夠持續不斷地瀏覽內容，同時(shí)只需要上下滑動(dòng)這種簡(jiǎn)單的操作方式便可切換視頻，適用人群廣泛。

　　2. 發(fā)現頁(yè)

　　卡片式設計本質(zhì)上是不同信息的集合處理。越來(lái)越多的產(chǎn)品在發(fā)現頁(yè)面會(huì )使用不同尺寸的卡片組合來(lái)突出重點(diǎn)信息，卡片靈活的排列組合也讓頁(yè)面變得更加規范。

　　卡片的優(yōu)勢

　　設計恰當的話(huà)，卡片可以提升 app 的用戶(hù)體驗感。因為其功能性以及外形的原因，它們成了用戶(hù)界面的一個(gè)增值元素，對用戶(hù)來(lái)說(shuō)，也更能憑直覺(jué)交互。

　　1. 易于理解的形式

　　卡片是一個(gè)可以裝入任何內容的設計盒子。將不同內容置于卡片之中，可以方便用戶(hù)理解。

　　這樣一來(lái)，用戶(hù)可以輕松了解其最關(guān)注的內容。這也使用戶(hù)可以通過(guò)各種方式來(lái)交互。

　　包含不同內容形式的卡片集。圖片來(lái)源：Material Design

　　2. 響應式設計以及移動(dòng)界面設計

　　關(guān)于卡片，最重要的是它們基本上極度容易被掌控。不管在臺式桌面還是手機客戶(hù)端，加入卡片設計的效果都非常好，因為內容可以通過(guò)更易理解的卡片呈現給用戶(hù)。就響應式設計而言，它是不錯的選擇，因為以?xún)热莺凶映尸F的卡片可以方便地擴展或收縮。

　　最后，加入卡片，在跨平臺設備上設計出統一的美感也就不會(huì )步步維艱了。這也是為什么通過(guò)卡片可以在不同設備上輕松設計出相同的用戶(hù)體驗感。