在現(xiàn)實(shí)生活在，視覺(jué)信息一直很吸引人的眼球，卡片設(shè)計(jì)的應(yīng)用不僅僅只是一種趨向。

有數(shù)據(jù)顯示2014年 手機(jī)端操作率遠(yuǎn)遠(yuǎn)高于桌面端，網(wǎng)站設(shè)計(jì)都能很好的適應(yīng)小屏幕。這個(gè)答案就是：簡(jiǎn)易的界面風(fēng)格，比如：扁平化設(shè)計(jì)，極簡(jiǎn)設(shè)計(jì)，尤其是卡片設(shè)計(jì)比往年都要潮流。

網(wǎng)站設(shè)計(jì) 網(wǎng)站策劃 網(wǎng)站優(yōu)化 網(wǎng)站部署

好的卡片設(shè)計(jì)不會(huì)操作太多的加載時(shí)間，同時(shí)它也能在不同的屏幕上切換自如。小的模塊對(duì)于客戶來(lái)講更能吸引留意力（尤其在手機(jī)端），它在Pinterest上培養(yǎng)大家的習(xí)慣，然后在Facebook和Twitter上面推廣，卡片設(shè)計(jì)能應(yīng)用于各個(gè)范疇的網(wǎng)頁(yè)設(shè)計(jì)。

在這篇文章中，我們將會(huì)討論卡片設(shè)計(jì)的崛起：為何它們有用，它們?cè)鯓舆m應(yīng)于響應(yīng)設(shè)計(jì)和material design，在未來(lái)又會(huì)發(fā)生什么？

什么叫抽屜式設(shè)計(jì)？

為了理解抽屜式設(shè)計(jì)，你首先得先理解卡片是什么。

每一個(gè)卡片擁有屬于自己的信息。一張卡片能包括所有信息 — 視覺(jué)、文本、鏈接等等— 但是所有這些內(nèi)容都是一張卡片里面的內(nèi)容。

這種單獨(dú)填滿整個(gè)屏幕抽屜式展現(xiàn)信息的方式 被Guardian 叫做“抽屜形式”。它讓客戶更加徑直清晰的看到整個(gè)界面，也有益于客戶火速的尋找他們需要的信息。（最關(guān)鍵的是，這種方式可以有益于我們自己控制，下面的文章我會(huì)解釋為何。）

讓人覺(jué)得很有吸引力的是：它們操作的卡片界面是相互疊加的。

網(wǎng)站設(shè)計(jì) 網(wǎng)站策劃 網(wǎng)站優(yōu)化 網(wǎng)站部署

Trello 能讓客戶創(chuàng)立他們自己想要的任何卡片列表。所有人都能創(chuàng)立“to-do”卡片 ，同時(shí)可以根據(jù)自己的需求實(shí)行歸類。

Trello不僅讓卡片具備靈活性，而且還能被客戶隨便擺放。Trello的成功是由于相較于傳統(tǒng)列表式部署，它讓客戶感覺(jué)很簡(jiǎn)易。

UI卡片在手機(jī)端和響應(yīng)式設(shè)計(jì)中的應(yīng)用

正如上文提到的，卡片為響應(yīng)式框架提供了出色的兼容性，由于有些像Des Traynor把他叫做“網(wǎng)頁(yè)的未來(lái)

這種設(shè)計(jì)可以在手機(jī)端隨便很好的轉(zhuǎn)化。”

網(wǎng)站設(shè)計(jì) 網(wǎng)站策劃 網(wǎng)站優(yōu)化 網(wǎng)站部署

首先，它可以自己擴(kuò)展或者收縮去適應(yīng)任何屏幕的尺寸。設(shè)計(jì)師能夠很靈活的控制卡片的比例（幾組卡片可以更好的適應(yīng)彼此）。例如,你能夠設(shè)計(jì)固定的寬度和統(tǒng)一的間距來(lái)適應(yīng)可變化的高度。

對(duì)照上面The Verge的網(wǎng)頁(yè)截圖和下面的手機(jī)端截圖：

網(wǎng)站設(shè)計(jì) 網(wǎng)站策劃 網(wǎng)站優(yōu)化 網(wǎng)站部署

留意他們兩個(gè)的文本信息、圖像和顏色的風(fēng)格都是統(tǒng)一的?？ㄆO(shè)計(jì)讓客戶在不同的設(shè)備上有統(tǒng)一性的體驗(yàn)。

你能夠看到這個(gè)優(yōu)點(diǎn)在UXPin的e-book里面被借助。留意他們從手機(jī)端到全屏的界面是極其清晰的。

UXPin手機(jī)端界面：

另外一個(gè)優(yōu)點(diǎn)是怎樣讓卡片適應(yīng)人們手指使用。在觸屏上，使用它就像按動(dòng)一個(gè)按鈕一樣不需要花費(fèi)多少精力。這個(gè)想法很簡(jiǎn)易：點(diǎn)擊卡片，讓它與內(nèi)容交互。

像菲茨定律適應(yīng)于網(wǎng)站設(shè)計(jì)展示那樣，點(diǎn)擊區(qū)域越大就越容易相互用途。還記得我們有多少次掙扎在移動(dòng)設(shè)備上點(diǎn)擊有些文本鏈接么？

Material Design很依賴卡片式設(shè)計(jì)，卡片描述在Material Design指南里值得你去尋找一個(gè)好的解釋

網(wǎng)站設(shè)計(jì) 網(wǎng)站策劃 網(wǎng)站優(yōu)化 網(wǎng)站部署

卡片設(shè)計(jì)的未來(lái)

卡片設(shè)計(jì)形式不斷的重塑自身以適應(yīng)新的挑戰(zhàn)，而響應(yīng)式和手機(jī)端或許會(huì)受最大的影響。就像2015&2016網(wǎng)站設(shè)計(jì)趨向 描述的那樣，這種設(shè)計(jì)潮流的轉(zhuǎn)型是由于 Material Design 在安卓系統(tǒng)里面的應(yīng)用。

1.技術(shù)

卡片不可能永遠(yuǎn)是靜態(tài)的。隨著網(wǎng)絡(luò)性能的提升，也可以支持更豐富的多媒體內(nèi)容。你可能會(huì)看到更多小節(jié)的元素，比如自動(dòng)更新內(nèi)容但是不會(huì)影響整個(gè)客戶體驗(yàn)。

網(wǎng)站設(shè)計(jì) 網(wǎng)站策劃 網(wǎng)站優(yōu)化 網(wǎng)站部署

視頻能變換圖片（設(shè)計(jì)師考慮這個(gè)問(wèn)題許多年了）或許會(huì)變?yōu)楹艹绷鳌se Your Interface（上圖），這些GIF動(dòng)畫(huà)功能讓整個(gè)頁(yè)面體驗(yàn)極其愉悅。

2.深度的交互

在不久的將來(lái)，卡片或許可以變?yōu)楦拥挠袆?chuàng)意。就像我們看見(jiàn) Material Design，它極其依賴個(gè)人的交互，隨著自動(dòng)排序和即時(shí)更新等功能的更新（比如天氣預(yù)報(bào)）。

網(wǎng)站設(shè)計(jì) 網(wǎng)站策劃 網(wǎng)站優(yōu)化 網(wǎng)站部署

Windows手機(jī)里面已經(jīng)著手應(yīng)用卡片式自動(dòng)歸類方式，很有可能其他移動(dòng)手機(jī)也會(huì)操作這種方式。

3.尺寸

圖片并列的部署趨向，也讓卡片更好的操作大尺寸屏幕。

大卡片上能部署更多的小節(jié)和復(fù)雜的字體，它從視覺(jué)上讓客戶感覺(jué)很舒服。大小卡片交替的時(shí)候，大卡片在視覺(jué)上更讓人感覺(jué)舒服。

網(wǎng)站設(shè)計(jì) 網(wǎng)站策劃 網(wǎng)站優(yōu)化 網(wǎng)站部署

Arkitekter（如上圖）是如何應(yīng)用大尺寸和中等尺寸作為信息部署的。一些卡片有鏈接，一些卡片是靜態(tài)的信息。大小不同的卡片體現(xiàn)方式，讓整個(gè)頁(yè)面更有呼吸感。

4.可穿戴的

多虧了谷歌眼鏡，它讓卡片的UI設(shè)計(jì)在穿戴設(shè)備上奠定了基本。

網(wǎng)站設(shè)計(jì) 網(wǎng)站策劃 網(wǎng)站優(yōu)化 網(wǎng)站部署

盡管有許多人認(rèn)為谷歌眼鏡會(huì)失敗，但是也有一部分人認(rèn)為它有市場(chǎng)。不管如何，穿戴設(shè)備的UI設(shè)計(jì)必須要很好的借助空間來(lái)設(shè)計(jì)，而卡片設(shè)計(jì)是它最實(shí)用的選取。

要素

在所有的媒介和設(shè)備上，卡片設(shè)計(jì)已經(jīng)成為設(shè)計(jì)慣用的一種方式。他們現(xiàn)在的模式可能會(huì)隨著技術(shù)的成長(zhǎng)有所改變，但是他們確實(shí)是存在的。

畢竟，這些部署并不是一個(gè)表格。別忘了，在不久前卡片只是一張包括內(nèi)容的紙片而已。