卡片式設(shè)計探討

0 評論 6326 瀏覽 9 收藏 5 分鐘

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

又比如名片,小小的卡片上需要短時間讓一個陌生人認(rèn)識你,需要提煉哪些信息來實現(xiàn):姓名,電話,職位,公司等。
卡片作為普遍使用的信息傳達(dá)的承載樣式,它具有以下這些特點:

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

2.信息層次——簡單易懂;

3.整體包裝——分類獨立;

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

二、卡片式設(shè)計的由來

現(xiàn)在卡片式設(shè)計的應(yīng)用場景非常廣泛,我們常見的就是瀏覽器上的選項卡了,瀏覽器把我們?yōu)g覽的網(wǎng)頁做成一個一個卡片的樣子,我們可以來抽取,可以移動,亦可以單個刪除,若干個選項卡還可以獨立成堆棧,顯得非常方便。
在我們身邊常用產(chǎn)品中使用卡片式設(shè)計最有代表的應(yīng)該是google旗下的各種產(chǎn)品——chrome、google now、google+、google play…應(yīng)該說是google把卡片式設(shè)計發(fā)揚光大,并用到極致。

無怪乎,
“Android的用戶體驗負(fù)責(zé)人MatiasDuarte坦誠:
沒人說過卡片是我們發(fā)明的,我們只是把這種隨處可見的設(shè)計搬到了移動互聯(lián)網(wǎng)領(lǐng)域而已,它和實體卡片一樣,從始至終都是為了解決一樣的設(shè)計問題。”
那卡片式設(shè)計真如matias所述,是google的發(fā)明嗎?其實最早開始使用卡片式設(shè)計的產(chǎn)品應(yīng)該是palm web os,盡管web os幾易其主,但不能掩蓋它曾經(jīng)在卡片式設(shè)計上獨到的應(yīng)用,至今仍影響著android、乃至ios系統(tǒng)的設(shè)計。
卡片式設(shè)計在web os上的應(yīng)用主要是多任務(wù)的管理:

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

901-1305201H925N7

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

ios

三、卡片式設(shè)計的運用范圍
現(xiàn)有的卡片式設(shè)計主要用來解決三類問題:

1、信息分類。比如google+,把feed信息做成卡片樣式易于瀏覽,pc端和移動端都有實現(xiàn),常見的瀑布流式布局的信息展示其實也是一種卡片布局。

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

vu

3.任務(wù)管理。比如web os和ios7多任務(wù)的管理,運用在移動端居多。

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

總結(jié)

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

作者:淘寶UED團(tuán)隊

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!