什么是卡片？卡片是含有圖片和文字在內(nèi)的小矩形模塊，它是用戶了解更多細(xì)節(jié)信息的「入口」。要平衡界面的美學(xué)和可用性，卡片基本是一個(gè)默認(rèn)選擇。因?yàn)榭ㄆ闷饋矸浅７奖?，還可以展示包含不同元素的內(nèi)容。

　　如何設(shè)計(jì)卡片

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

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

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

　　卡片式設(shè)計(jì)的使用場景

　　1. 信息流（feed流）

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

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

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

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

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

　　2. 發(fā)現(xiàn)頁

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

　　卡片的優(yōu)勢

　　設(shè)計(jì)恰當(dāng)?shù)脑?，卡片可以提?app 的用戶體驗(yàn)感。因?yàn)槠涔δ苄砸约巴庑蔚脑颍鼈兂闪擞脩艚缑娴囊粋€(gè)增值元素，對用戶來說，也更能憑直覺交互。

　　1. 易于理解的形式

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

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

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

　　2. 響應(yīng)式設(shè)計(jì)以及移動(dòng)界面設(shè)計(jì)

　　關(guān)于卡片，最重要的是它們基本上極度容易被掌控。不管在臺式桌面還是手機(jī)客戶端，加入卡片設(shè)計(jì)的效果都非常好，因?yàn)閮?nèi)容可以通過更易理解的卡片呈現(xiàn)給用戶。就響應(yīng)式設(shè)計(jì)而言，它是不錯(cuò)的選擇，因?yàn)橐詢?nèi)容盒子呈現(xiàn)的卡片可以方便地?cái)U(kuò)展或收縮。

　　最后，加入卡片，在跨平臺設(shè)備上設(shè)計(jì)出統(tǒng)一的美感也就不會(huì)步步維艱了。這也是為什么通過卡片可以在不同設(shè)備上輕松設(shè)計(jì)出相同的用戶體驗(yàn)感。