正如同你所看到的，充滿魅力的卡片式設(shè)計(jì)已經(jīng)不僅僅是設(shè)計(jì)趨勢了，它早已流行開來。這種設(shè)計(jì)手法的流行很大程度上是得益于占據(jù)主流的移動(dòng)端，響應(yīng)式設(shè)計(jì)成為標(biāo)準(zhǔn)配置，簡約、扁平和極簡比以往任何時(shí)候都受歡迎，卡片式設(shè)計(jì)自然而然成為了大家的選擇。

使用卡片式設(shè)計(jì)的UI在加載速度和跨設(shè)備、跨屏幕兼容上有著天然的優(yōu)勢，也更加實(shí)用，更小的流量消耗無疑迎合了移動(dòng)端用戶的需求。從早已投入卡片式設(shè)計(jì)的Pinterest 到主流社交媒體Facebook和Twitter，卡片式設(shè)計(jì)幾乎覆蓋了所有了主流領(lǐng)域的網(wǎng)站。

在今天的文章中，我們將探討一下卡片式界面模式，它到底有什么特異之處，它又是如何同響應(yīng)式設(shè)計(jì)和Material Design 兼容，又有著怎樣的未來。

容器模型

為了了解這種設(shè)計(jì)模式，你首先要了解卡片作為容器本身的特性。

我們通常所說的卡片式設(shè)計(jì)中的卡片，是信息的容器，每個(gè)卡片都承載著屬于自己的內(nèi)容?？ㄆ艹休d著幾乎所有類型的內(nèi)容——多媒體、文本、鏈接，等等，而這所有的信息都經(jīng)由卡片，被收納到統(tǒng)一的主題之下。

這些承載著信息的容器將屏幕填滿，這種設(shè)計(jì)模式被稱之為“容器模型”。這樣的設(shè)計(jì)提供了更加清爽、更易于理解的界面，更貼合快速瀏覽的需求，讓用戶可以更直接地尋求他們想要的東西。而這種設(shè)計(jì)還有一個(gè)重要的優(yōu)勢，就是更符合手勢操作的需求。

實(shí)用而富有吸引力：卡片式UI模式的好處是多重的

Trello 允許用戶創(chuàng)建創(chuàng)建任意想要的卡片，團(tuán)隊(duì)中每個(gè)人都能創(chuàng)建一個(gè)“待辦事項(xiàng)”卡片，并且按照需求來歸類。

這不僅呈現(xiàn)出卡片的靈活性，也展示了它潛藏的組織性。Trello 是成功的，它的成功是立足于卡片式設(shè)計(jì)的靈活運(yùn)用，同傳統(tǒng)的事務(wù)管理方式區(qū)別了開來。

卡片式設(shè)計(jì)與移動(dòng)端和響應(yīng)式設(shè)計(jì)

正如上述提到的，卡片式設(shè)計(jì)和響應(yīng)式框架有著良好的兼容性，Des Traynor 甚至將它稱之為“網(wǎng)絡(luò)的未來”。這種設(shè)計(jì)充分地打通了桌面端和移動(dòng)端，接下來我們仔細(xì)分析一下為什么。

首先，卡片柵格系統(tǒng)能夠隨著整個(gè)框架的膨脹和收縮，以適配斷點(diǎn)和屏幕尺寸。設(shè)計(jì)師可以輕松而靈活地控制卡片的高寬比，從而創(chuàng)造出不同的響應(yīng)模式。比如，你可有設(shè)置寬度固定，高度可變，設(shè)定卡片之間的寬度保持一致。

看一下Theverge 的桌面端和移動(dòng)端的網(wǎng)頁樣式吧，卡片式設(shè)計(jì)讓網(wǎng)頁跨設(shè)備瀏覽具備了一致的體驗(yàn)。UXPin的免費(fèi)素材庫也提供了相關(guān)的資源，注意布局從移動(dòng)端轉(zhuǎn)化到桌面端的時(shí)候是怎么變化的。

卡片式設(shè)計(jì)的另外一個(gè)優(yōu)勢，就是可以輕松兼容手勢操作。在觸摸屏上，卡片式的設(shè)計(jì)不需要額外的按鈕來控制，當(dāng)你需要操控其中的內(nèi)容的時(shí)候，直接通過卡片來進(jìn)行交互就好了。

將費(fèi)茨定律應(yīng)用在網(wǎng)頁設(shè)計(jì)上：鍵盤所覆蓋的區(qū)域越大，交互就越容易。而卡片不就像是一個(gè)大號的按鈕么？我們有多少次糾結(jié)于網(wǎng)頁上尺寸過小的鏈接？

卡片與Material Design

Material Design 很大程度上依賴于卡片，整套設(shè)計(jì)規(guī)范和思想深深地植根于卡片的隱喻。如果你很想嘗試一把卡片式設(shè)計(jì)，直接拿Material Design 來試手是個(gè)不錯(cuò)的選擇。

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

由于卡片式設(shè)計(jì)擁有高度的可塑性，響應(yīng)式和APP設(shè)計(jì)可能是受到它影響最大的領(lǐng)域。已被Material Design 高度規(guī)范化的Android 平臺上，APP則開始大規(guī)模地使用卡片式設(shè)計(jì)了。

1、技術(shù)革新

卡片可能在不久的未來真正靈活地動(dòng)起來。而隨著網(wǎng)絡(luò)性能的提升，卡片中所容納的多媒體內(nèi)容將會(huì)更加豐富。你可能會(huì)看到更加詳細(xì)的內(nèi)容，甚至可以在不影響體驗(yàn)的前提下，自動(dòng)更新內(nèi)容。

以往靜態(tài)的圖片可能會(huì)被靈活的視頻所替代，這種設(shè)計(jì)會(huì)逐步流行開來?，F(xiàn)在有些設(shè)計(jì)師會(huì)使用GIF圖替代靜態(tài)的圖片，給人的體驗(yàn)就已經(jīng)提升很多了。

2、深入互動(dòng)

在未來，卡片的功能可能會(huì)遠(yuǎn)超現(xiàn)在的鏈接的功用，擁有更多、更富有創(chuàng)意的屬性。正如同我們在Material Design 中能看到的卡片，卡片內(nèi)的獨(dú)立交互將會(huì)越來越多，花樣更加豐富。

Windows Phone 中的卡片已經(jīng)可以自動(dòng)排序了，這樣的新功能可能會(huì)延續(xù)到更多的領(lǐng)域，滲透更多的用戶群。

3、尺寸變化

卡片尺寸通常是“越大越好”，所以更大的卡片將可以容納更多的細(xì)節(jié)和復(fù)雜的排版，這意味著今后的UI將會(huì)有更加愉悅的視覺設(shè)計(jì)。小卡片和大卡片交替使用，分工明確，你會(huì)體會(huì)到更加自由的設(shè)計(jì)空間。

How Arkitekter 就將不同尺寸的卡片變?yōu)閷?dǎo)航的一部分，有的成為了鏈接，有的則只是提供靜態(tài)信息。

4、可穿戴設(shè)備

感謝谷歌眼鏡，卡片式設(shè)計(jì)已經(jīng)成為了可穿戴設(shè)備的UI設(shè)計(jì)的標(biāo)配了。雖然現(xiàn)在的谷歌眼鏡的發(fā)展處于相對停滯的階段，也有人認(rèn)為它在企業(yè)市場還有機(jī)會(huì)，但是它總體而言，為可穿戴設(shè)備的UI設(shè)計(jì)開辟了一條新的道路。

結(jié)語

無疑卡片式設(shè)計(jì)已經(jīng)是幾乎所有媒體和設(shè)備的中流砥柱了。隨著技術(shù)的發(fā)展，整個(gè)局面會(huì)隨之改變，但是方向并不會(huì)被扭轉(zhuǎn)，卡片式設(shè)計(jì)是大勢所趨?，F(xiàn)在的卡片式設(shè)計(jì)并不復(fù)雜，但是未來它有多少可能性，就得看你有多大的腦洞了。

【你必須知道的設(shè)計(jì)趨勢】

用戶體驗(yàn)設(shè)計(jì)趨勢：
《設(shè)計(jì)行業(yè)大起底！圖說2015用戶體驗(yàn)行業(yè)調(diào)查報(bào)告》

配色搭配趨勢：
《業(yè)界良心！2015年最優(yōu)秀的20款網(wǎng)站配色方案（附配色工具）》

網(wǎng)頁設(shè)計(jì)趨勢：
《你知道了嗎？2015年網(wǎng)頁設(shè)計(jì)的9大趨勢》

原文地址：designmodo
原文作者：Jerry Cao
優(yōu)設(shè)譯文：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請尊重版權(quán)和譯者成果，轉(zhuǎn)摘請附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量104萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com