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

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

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

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

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

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

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

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

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

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

網(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)列表式部署，它讓客戶感覺很簡易。

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

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

這種設(shè)計(jì)可以在手機(jī)端隨便很好的轉(zhuǎn)化?！?o:p>

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

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

對照上面The Verge的網(wǎng)頁截圖和下面的手機(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)人們手指使用。在觸屏上，使用它就像按動一個(gè)按鈕一樣不需要花費(fèi)多少精力。這個(gè)想法很簡易：點(diǎn)擊卡片，讓它與內(nèi)容交互。

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

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

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

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

卡片設(shè)計(jì)形式不斷的重塑自身以適應(yīng)新的挑戰(zhàn)，而響應(yīng)式和手機(jī)端或許會受最大的影響。就像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)容。你可能會看到更多小節(jié)的元素，比如自動更新內(nèi)容但是不會影響整個(gè)客戶體驗(yàn)。

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

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

2.深度的交互

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

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

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

3.尺寸

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

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

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

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

4.可穿戴的

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

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

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

要素

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

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