卡片式設(shè)計(jì)（類(lèi)metro風(fēng)格）探討

2014/2/20 8:52:13來(lái)源：淘寶ued

生活中我們會(huì)接觸到各式各樣的卡片。比如直截了當(dāng)?shù)膿淇?，一個(gè)圖案，一個(gè)文字，很清晰傳達(dá)出這張卡片所代表的含義。

又比如名片，小小的卡片上需要短時(shí)間讓一個(gè)陌生人認(rèn)識(shí)你，需要提煉哪些信息來(lái)實(shí)現(xiàn)：姓名，電話，職位，公司等。

卡片作為普遍使用的信息傳達(dá)的承載樣式，它具有以下這些特點(diǎn)：

1.內(nèi)容體量——輕便易攜；

2.信息層次——簡(jiǎn)單易懂；

3.整體包裝——分類(lèi)獨(dú)立；

這種輕巧、簡(jiǎn)潔的實(shí)物設(shè)計(jì)形式也被慢慢移植到虛擬設(shè)計(jì)的應(yīng)用當(dāng)中，比如pc端的網(wǎng)頁(yè)、移動(dòng)端的app設(shè)計(jì)。

二、卡片式設(shè)計(jì)的由來(lái)

現(xiàn)在卡片式設(shè)計(jì)的應(yīng)用場(chǎng)景非常廣泛，我們常見(jiàn)的就是瀏覽器上的選項(xiàng)卡了，瀏覽器把我們?yōu)g覽的網(wǎng)頁(yè)做成一個(gè)一個(gè)卡片的樣子，我們可以來(lái)抽取，可以移動(dòng)，亦可以單個(gè)刪除，若干個(gè)選項(xiàng)卡還可以獨(dú)立成堆棧，顯得非常方便。

在我們身邊常用產(chǎn)品中使用卡片式設(shè)計(jì)最有代表的應(yīng)該是google旗下的各種產(chǎn)品——chrome、google now、google+、google play…應(yīng)該說(shuō)是google把卡片式設(shè)計(jì)發(fā)揚(yáng)光大，并用到極致。

無(wú)怪乎，

”Android的用戶體驗(yàn)負(fù)責(zé)人MatiasDuarte坦誠(chéng)：

沒(méi)人說(shuō)過(guò)卡片是我們發(fā)明的，我們只是把這種隨處可見(jiàn)的設(shè)計(jì)搬到了移動(dòng)互聯(lián)網(wǎng)領(lǐng)域而已，它和實(shí)體卡片一樣，從始至終都是為了解決一樣的設(shè)計(jì)問(wèn)題。”

那卡片式設(shè)計(jì)真如matias所述，是google的發(fā)明嗎？其實(shí)最早開(kāi)始使用卡片式設(shè)計(jì)的產(chǎn)品應(yīng)該是palm web os，盡管web os幾易其主，但不能掩蓋它曾經(jīng)在卡片式設(shè)計(jì)上獨(dú)到的應(yīng)用，至今仍影響著android、乃至ios系統(tǒng)的設(shè)計(jì)。

卡片式設(shè)計(jì)在web os上的應(yīng)用主要是多任務(wù)的管理：

webOS中，傳統(tǒng)意義上的程序概念被弱化，取而代之的是卡片系統(tǒng)。所有的任務(wù)均以卡片的形式出現(xiàn)。任何時(shí)候點(diǎn)擊手勢(shì)區(qū)，都會(huì)進(jìn)入卡片視圖。卡片視圖中展現(xiàn)出正在運(yùn)行的任務(wù)，這些任務(wù)以多窗口的形式呈現(xiàn)。你可以看到正在運(yùn)行的全部任務(wù)，可以通過(guò)滑動(dòng)進(jìn)行切換，點(diǎn)擊后進(jìn)入任務(wù)，這樣一種操作方式，是極其美妙的。更為重要的是webOS 中的多任務(wù)的流暢度可以得到很好的保證，可以說(shuō)webOS的多任務(wù)是世界上最好的移動(dòng)系統(tǒng)多任務(wù)平臺(tái)。

這種多任務(wù)管理的卡片式設(shè)計(jì)隨后也被運(yùn)用在了最新的ios7的設(shè)計(jì)中

三、卡片式設(shè)計(jì)的運(yùn)用范圍

現(xiàn)有的卡片式設(shè)計(jì)主要用來(lái)解決三類(lèi)問(wèn)題：

1、信息分類(lèi)。比如google＋，把feed信息做成卡片樣式易于瀏覽，pc端和移動(dòng)端都有實(shí)現(xiàn)，常見(jiàn)的瀑布流式布局的信息展示其實(shí)也是一種卡片布局。

2、導(dǎo)航。比如evernote或vu里的卡片，類(lèi)似傳統(tǒng)tab欄的功能來(lái)區(qū)分不同的內(nèi)容和功能，在移動(dòng)端使用居多，跟手勢(shì)操作結(jié)合，易于理解和操作。

3.任務(wù)管理。比如web os和ios7多任務(wù)的管理，運(yùn)用在移動(dòng)端居多。

由此可以看出卡片式設(shè)計(jì)在移動(dòng)端和pc端都有涉及，在移動(dòng)端使用面更廣。

以上是對(duì)卡片式設(shè)計(jì)的初探，簡(jiǎn)明概要的介紹了卡片式設(shè)計(jì)的前世今生，怎么樣合理使用卡片式設(shè)計(jì)還是跟產(chǎn)品密切相關(guān)，接下來(lái)會(huì)再去深入了解。

[教程作者：admin]

關(guān)鍵詞：卡片式設(shè)計(jì) metro風(fēng)格設(shè)計(jì) metro設(shè)計(jì)

免責(zé)聲明：本站文章系圖趣網(wǎng)整理發(fā)布，如需轉(zhuǎn)載，請(qǐng)注明出處，素材資料僅供個(gè)人學(xué)習(xí)與參考，請(qǐng)勿用于商業(yè)用途！
本文地址：http://m.pkvc.cn/tutorial/di1897.html

上一篇:設(shè)計(jì)的骨骼（一）

下一篇:跨界混搭的產(chǎn)品設(shè)計(jì)

您可能還喜歡

這些是最新的

最熱門(mén)的教程

卡片式設(shè)計(jì)（類(lèi)metro風(fēng)格）探討

您可能還喜歡

網(wǎng)頁(yè)教程分類(lèi)