您當(dāng)前位置：圖趣網(wǎng)（Tuquu） >> 網(wǎng)頁設(shè)計(jì)教程 >> 設(shè)計(jì)理論 >> 瀏覽設(shè)計(jì)教程

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

2014/2/20 8:52:13來源：淘寶ued
生活中我們會(huì)接觸到各式各樣的卡片。比如直截了當(dāng)?shù)膿淇?，一個(gè)圖案，一個(gè)文字，很清晰傳達(dá)出這張卡片所代表的含義。
business-card1
       又比如名片，小小的卡片上需要短時(shí)間讓一個(gè)陌生人認(rèn)識(shí)你，需要提煉哪些信息來實(shí)現(xiàn)：姓名，電話，職位，公司等。
      卡片作為普遍使用的信息傳達(dá)的承載樣式，它具有以下這些特點(diǎn)：
       1.內(nèi)容體量——輕便易攜；
      2.信息層次——簡單易懂；
      3.整體包裝——分類獨(dú)立；
       這種輕巧、簡潔的實(shí)物設(shè)計(jì)形式也被慢慢移植到虛擬設(shè)計(jì)的應(yīng)用當(dāng)中，比如pc端的網(wǎng)頁、移動(dòng)端的app設(shè)計(jì)。
 
二、卡片式設(shè)計(jì)的由來
       現(xiàn)在卡片式設(shè)計(jì)的應(yīng)用場景非常廣泛，我們常見的就是瀏覽器上的選項(xiàng)卡了，瀏覽器把我們?yōu)g覽的網(wǎng)頁做成一個(gè)一個(gè)卡片的樣子，我們可以來抽取，可以移動(dòng)，亦可以單個(gè)刪除，若干個(gè)選項(xiàng)卡還可以獨(dú)立成堆棧，顯得非常方便。

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

gugejia   

 
      無怪乎，
      ”Android的用戶體驗(yàn)負(fù)責(zé)人MatiasDuarte坦誠：

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

      那卡片式設(shè)計(jì)真如matias所述，是google的發(fā)明嗎？其實(shí)最早開始使用卡片式設(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)擊手勢區(qū)，都會(huì)進(jìn)入卡片視圖?？ㄆ晥D中展現(xiàn)出正在運(yùn)行的任務(wù)，這些任務(wù)以多窗口的形式呈現(xiàn)。你可以看到正在運(yùn)行的全部任務(wù)，可以通過滑動(dòng)進(jìn)行切換，點(diǎn)擊后進(jìn)入任務(wù)，這樣一種操作方式，是極其美妙的。更為重要的是webOS 中的多任務(wù)的流暢度可以得到很好的保證，可以說webOS的多任務(wù)是世界上最好的移動(dòng)系統(tǒng)多任務(wù)平臺(tái)。
901-1305201H925N7
    
      這種多任務(wù)管理的卡片式設(shè)計(jì)隨后也被運(yùn)用在了最新的ios7的設(shè)計(jì)中
 
ios
三、卡片式設(shè)計(jì)的運(yùn)用范圍
      現(xiàn)有的卡片式設(shè)計(jì)主要用來解決三類問題：
      1、信息分類。比如google＋，把feed信息做成卡片樣式易于瀏覽，pc端和移動(dòng)端都有實(shí)現(xiàn)，常見的瀑布流式布局的信息展示其實(shí)也是一種卡片布局。
      2、導(dǎo)航。比如evernote或vu里的卡片，類似傳統(tǒng)tab欄的功能來區(qū)分不同的內(nèi)容和功能，在移動(dòng)端使用居多，跟手勢操作結(jié)合，易于理解和操作。
vu
 
       3.任務(wù)管理。比如web os和ios7多任務(wù)的管理，運(yùn)用在移動(dòng)端居多。
     由此可以看出卡片式設(shè)計(jì)在移動(dòng)端和pc端都有涉及，在移動(dòng)端使用面更廣。
 
總結(jié)
 
          以上是對卡片式設(shè)計(jì)的初探，簡明概要的介紹了卡片式設(shè)計(jì)的前世今生，怎么樣合理使用卡片式設(shè)計(jì)還是跟產(chǎn)品密切相關(guān)，接下來會(huì)再去深入了解。
[教程作者：admin]
關(guān)鍵詞：卡片式設(shè)計(jì) metro風(fēng)格設(shè)計(jì) metro設(shè)計(jì)
免責(zé)聲明：本站文章系圖趣網(wǎng)整理發(fā)布，如需轉(zhuǎn)載，請注明出處，素材資料僅供個(gè)人學(xué)習(xí)與參考，請勿用于商業(yè)用途！
本文地址：http://irelandcustomcontracting.com/tutorial/di1897.html
設(shè)計(jì)的骨骼（一）
跨界混搭的產(chǎn)品設(shè)計(jì)
圖趣網(wǎng)微信
建議反饋
×