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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

對照上面The Verge的網(wǎng)頁截圖和下面的手機端截圖：

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

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

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

UXPin手機端界面：

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

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

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

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

卡片設(shè)計的未來

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

1.技術(shù)

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

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

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

2.深度的交互

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

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

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

3.尺寸

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

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

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

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

4.可穿戴的

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

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

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

要素

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

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