好的卡片設(shè)計(jì)不會使用太多的加載時間，同時它也能在不同的屏幕上切換自如。小的模塊對于用戶來說更能吸引注意力（尤其在移動端），它在Pinterest上培養(yǎng)大家的習(xí)慣，然后在Facebook和Twitter上面推廣，卡片設(shè)計(jì)能應(yīng)用于各個領(lǐng)域的網(wǎng)站設(shè)計(jì)。

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

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

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

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

　　這種獨(dú)立填滿整個屏幕抽屜式展現(xiàn)信息的方式 被Guardian 叫做“抽屜模式”。它讓用戶更加直接清晰的看到整個界面，也有利于用戶快速的尋找他們需要的信息。（最重要的是，這種方式能夠有利于我們自己控制，下面的文章我會解釋為什么。）

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

　　Trello 能讓用戶創(chuàng)建他們自己想要的任何卡片列表。所有人都能創(chuàng)建“to-do”卡片 ，同時能夠按照自己的需求進(jìn)行分類。

　　Trello不僅讓卡片具有靈活性，而且還能被用戶隨意擺放。Trello的成功是因?yàn)橄噍^于傳統(tǒng)列表式布局，它讓用戶感覺很簡單。

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

　　正如上文提到的，卡片為響應(yīng)式框架提供了出色的兼容性，因?yàn)橐恍┫馜es Traynor把他叫做“網(wǎng)頁的未來。

　　這種設(shè)計(jì)能夠在移動端隨意很好的轉(zhuǎn)換。”

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

　　比較上面The Verge的網(wǎng)頁截圖和下面的移動端截圖：

　　注意他們兩個的文本信息、圖像和顏色的風(fēng)格都是一致的。卡片設(shè)計(jì)讓用戶在不同的設(shè)備上有一致性的體驗(yàn)。

　　你可以看到這個優(yōu)勢在UXPin的e-book里面被利用。注意他們從移動端到全屏的界面是非常清晰的。

　　UXPin移動端界面：

　　UXPin全屏的界面：

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

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

　　卡片和Material Design

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

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

　　卡片設(shè)計(jì)模式不斷的重塑自身以適應(yīng)新的挑戰(zhàn)，而響應(yīng)式和移動端也許會受最大的影響。就像2015&2016網(wǎng)頁設(shè)計(jì)趨勢 描述的那樣，這種設(shè)計(jì)流行的轉(zhuǎn)變是因?yàn)?Material Design 在安卓系統(tǒng)里面的應(yīng)用。

　　1.技術(shù)

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

　　視頻能更換圖片（設(shè)計(jì)師思考這個問題很多年了）也許會變得很流行。Use Your Interface（上圖），這些GIF動畫功能讓整個頁面體驗(yàn)非常愉悅。

　　2.深度的交互

　　在不久的將來，卡片也許能夠變得更加的有創(chuàng)意。就像我們看見 Material Design，它非常依賴個人的交互，隨著自動排序和實(shí)時更新等功能的更新（比如天氣預(yù)報(bào)）。

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

　　3.尺寸

　　圖片并列的布局趨勢，也讓卡片更好的使用大尺寸屏幕。

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

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

　　4.可穿戴的

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

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

　　要點(diǎn)

　　在所有的媒介和設(shè)備上，卡片設(shè)計(jì)已經(jīng)成為設(shè)計(jì)常用的一種方式。他們當(dāng)前的形式可能會隨著技術(shù)的發(fā)展隨著技術(shù)有所改變，但是他們確實(shí)是存在的。

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

　　當(dāng)前，卡式的網(wǎng)站建設(shè)以精簡，重點(diǎn)內(nèi)容突出的表達(dá)形式受到用戶的歡迎，跟著趨勢走的網(wǎng)站必然不會被淘汰。

網(wǎng)站關(guān)鍵詞：網(wǎng)站建設(shè)  網(wǎng)站設(shè)計(jì)  網(wǎng)站制作  上海網(wǎng)站建設(shè)  上海網(wǎng)站設(shè)計(jì)  上海網(wǎng)站制作  上海網(wǎng)絡(luò)公司  網(wǎng)站建設(shè)上海  上海做網(wǎng)站  上海建設(shè)網(wǎng)站  上海做網(wǎng)站公司  上海建網(wǎng)站公司  上海高端網(wǎng)站建設(shè)  上海手機(jī)網(wǎng)站建設(shè)  怎么建設(shè)網(wǎng)站  如何建設(shè)網(wǎng)站  營銷網(wǎng)站建設(shè)  品牌網(wǎng)站建設(shè)  網(wǎng)站建設(shè)方案  響應(yīng)式網(wǎng)站建設(shè)  外貿(mào)網(wǎng)站建設(shè)  公司網(wǎng)站建設(shè)  建設(shè)網(wǎng)站  網(wǎng)站建設(shè)服務(wù)  高端網(wǎng)站建設(shè)  網(wǎng)站優(yōu)化服務(wù)  上海網(wǎng)站公司  企業(yè)網(wǎng)站設(shè)計(jì)  官網(wǎng)制作  官網(wǎng)建設(shè)  官網(wǎng)設(shè)計(jì)  網(wǎng)站建設(shè)公司  網(wǎng)站設(shè)計(jì)公司  網(wǎng)站制作公司