談什么是卡片式設(shè)計(jì)?

卡片式設(shè)計(jì)

卡片，你或許不熟悉這個(gè)術(shù)語(yǔ)，但是你絕對(duì)不會(huì)對(duì)卡片的概念感覺(jué)陌生。現(xiàn)在，卡片在網(wǎng)頁(yè)設(shè)計(jì)中是普遍存在的，并且還將越來(lái)越流行。事實(shí)上，Google,Twitter和Facebook這三大受推崇的網(wǎng)頁(yè)全是這么設(shè)計(jì)的，所以至少粗略的看一下卡片是很值得的。但是，因?yàn)槲覀儾幌朐谶@淺談，所以讓我們直接深入地了解一下吧!

什么是卡片?

簡(jiǎn)單的回答，卡片就是交互信息的承載體，通常以矩形的方式呈現(xiàn)。就像信用卡或者棒球卡，網(wǎng)頁(yè)卡片以一個(gè)濃縮的形式提供了快速并且相關(guān)的信息。

所有的卡片特點(diǎn)就是交互性。不僅僅是他們提供了信息，而且他們用另外一種委婉的方式去要求一次互動(dòng)。卡片通常包括按鈕或者發(fā)布到社交媒體的方法。

什么不是卡片?

因?yàn)樾g(shù)語(yǔ)“卡片式設(shè)計(jì)”正處于初始階段，關(guān)于什么是卡片、什么不是卡片還有很多的問(wèn)題與疑惑。而不是所有人都叫它卡片這個(gè)事實(shí)增加了它的不確定性。一張卡片正如一個(gè)人名、一個(gè)模塊、或者一個(gè)肖像(在這就僅僅舉例幾個(gè))被人所知道。

或許有時(shí)，通過(guò)排除它不是什么來(lái)定義它更容易些，這樣反過(guò)來(lái)就知道它是什么了。一張卡片嚴(yán)格來(lái)說(shuō)不是一個(gè)設(shè)計(jì)。你不能簡(jiǎn)單的只是有一張紙，畫(huà)一些矩形在上面，然后就稱(chēng)每個(gè)矩形為一個(gè)卡片。但是，如果你樂(lè)意這樣叫的話(huà)是可以的，然而它并不適合這個(gè)文章中假定的定義。反而，一張卡片必須具有功能性、獨(dú)立性，并且有可翻動(dòng)性(用戶(hù)可以點(diǎn)擊，查看更多詳細(xì)內(nèi)容)。

現(xiàn)在我們可以看看Dr Phil 是怎么說(shuō)的。他說(shuō)過(guò)很著名的一句話(huà)就是：不論你把薄餅烤的多么光滑，它依然有兩面。查看卡片的需要注意的是：卡片有兩面。并不是說(shuō)卡片要有一個(gè)翻轉(zhuǎn)動(dòng)畫(huà)，相反地說(shuō)每張卡片呈現(xiàn)出的一個(gè)信息的概覽，并且每一張卡片給你進(jìn)一步參與的選擇(可點(diǎn)擊性)。一張卡片不僅僅是一條信息，它還總是可以讓人去做更多。

根據(jù)這個(gè)定義，一張卡片不能僅僅是好看，它還必須有用。

為什么你應(yīng)該使用卡片??

卡片能夠針對(duì)令人滿(mǎn)意的、特別的功能以不同的方式被使用。下面有一些讓你的設(shè)計(jì)中使用卡片的主要原因：

卡片能夠抓住眼球。相對(duì)于過(guò)度的無(wú)理由的文本，卡片是更好的選擇。

卡片是響應(yīng)式的。為手機(jī)瀏覽器的設(shè)計(jì)是必須的，卡片可以很好的幫助響應(yīng)式設(shè)計(jì)。

卡片易讀。因?yàn)樗鼈冇邢薜目臻g，卡片不能說(shuō)得太多。但是這是一件好事!讀者如果想要知道更多的話(huà)就會(huì)點(diǎn)擊它。

卡是可共享的?？ㄆ棺x者能夠快速并輕松地通過(guò)社交、手機(jī)和郵件平臺(tái)分享出內(nèi)容。

你應(yīng)該怎么使用卡片?

使用卡片的最主要的一點(diǎn)是與用戶(hù)互動(dòng)并且讓用戶(hù)自主互動(dòng)。

交互的類(lèi)型有很多，關(guān)鍵是你想怎么去培養(yǎng)和你的網(wǎng)站游客的關(guān)系。針對(duì)你自己的網(wǎng)站回答這個(gè)問(wèn)題，把自己作為UI/UX設(shè)計(jì)師，想想你怎樣去和你的網(wǎng)站游客互動(dòng)，他們又會(huì)怎樣與你互動(dòng)。

讓我們看看4大使用卡片的主要網(wǎng)站。每一個(gè)都有強(qiáng)大的特點(diǎn)。

Facebook

Facebook的文章列表區(qū)就是卡片式設(shè)計(jì)的。每張卡片都突出了內(nèi)容、、一種喜歡的方式、分享，并且還可以添加評(píng)論。它還增加了網(wǎng)站的社會(huì)影響力。你能夠看到有多少人點(diǎn)贊、分享或者評(píng)論，這些都將影響你的網(wǎng)站的信譽(yù)。有一種簡(jiǎn)潔不唐突的方式是提供下拉菜單，其中包含了隱藏、取消關(guān)注、舉報(bào)垃圾郵件等選項(xiàng)。

特點(diǎn)：很明顯，F(xiàn)acebook是一個(gè)激勵(lì)用戶(hù)去積極參與，并且愿意與網(wǎng)站保持聯(lián)系。他們更想要你不去思考取消關(guān)注或者從你的文章列表區(qū)隱藏某些卡片(這樣網(wǎng)站會(huì)丟失一些關(guān)注、瀏覽量)。

你能以相同的方式使用卡片——設(shè)置卡片去鼓勵(lì)積極的交互。

Google Now

我們?cè)缫阎拦雀枋强ㄆ皆O(shè)計(jì)的最好的網(wǎng)站。一些APP在它的基本架構(gòu)中卡片早已起了很大的作用，例如Gmail Promotions和Google Glass。Goole Now還要更進(jìn)一步、完整地采用卡片式設(shè)計(jì)。這個(gè)產(chǎn)品是一個(gè)虛擬個(gè)人助手，它會(huì)提醒你朋友的生日、查看本地的交通和天氣、告訴你看什么電視。

特點(diǎn)：大多數(shù)卡片需要?jiǎng)幼鳎纾耗阈枰騻€(gè)小盹兒、看看郵件、慶祝生日，這樣它才好去提醒你。在你的卡片底部實(shí)施一個(gè)交互申請(qǐng)能夠提高訪問(wèn)者的積極性，因?yàn)槟阍谝龑?dǎo)他們進(jìn)行下一個(gè)動(dòng)作。

Pinterest

你知道它正在來(lái)臨。Pinterest最突出的特點(diǎn)是使用了到現(xiàn)在為止最受歡迎的卡片式設(shè)計(jì)之一。大量的模仿者正在使它越來(lái)越受歡迎。Pinterest是一個(gè)視覺(jué)化的采集板，它允許客戶(hù)去采集、添加圖片到虛擬的板面上。在一張卡片上逗留給了用戶(hù)選擇去采集、發(fā)送、點(diǎn)贊或者編輯(如果它已經(jīng)保存在你的采集面板)。點(diǎn)擊采集可以給你更多的選擇，包括訪問(wèn)這張圖片的網(wǎng)址。

特點(diǎn)：鼠標(biāo)在某張卡片停留就可以給出選項(xiàng)這點(diǎn)可以很好地發(fā)出互動(dòng)請(qǐng)求，并且還不用模糊卡片的圖像。

Twitter

Twitter的卡片是帶有多媒體的微博附著在上面。這個(gè)媒體就可能是一張照片、4張照片的集合、一個(gè)視頻、一段音頻等。這些視覺(jué)化的卡片在無(wú)盡的文本、標(biāo)簽海洋中特別能抓住眼球。

特點(diǎn)：前面和中心，Twitter鼓勵(lì)回復(fù)消息、轉(zhuǎn)發(fā)和收藏點(diǎn)贊，但是類(lèi)似于Facebook，它隱藏了一些消極的交互，例如不回復(fù)和封鎖。同樣的，在你的卡片設(shè)計(jì)中，最好主要關(guān)注你最想要人們?nèi)プ鍪裁础?/p>

卡片式設(shè)計(jì)的6大案例

既然你已經(jīng)看了泰斗是如何在他們的設(shè)計(jì)中使用卡片的，那現(xiàn)在就來(lái)看看現(xiàn)在每天，像你我一樣的設(shè)計(jì)師在他們的作品中是如何結(jié)合使用卡片的。

Roman Shkolny想象用戶(hù)的郵件接收界面使用卡片，這樣可以將接收郵件的列表視覺(jué)化。在這個(gè)案例里，郵件能夠直接堆疊在對(duì)話(huà)框里。鼠標(biāo)在某張卡片上停留就可以看到顏色標(biāo)簽、進(jìn)行回復(fù)、前進(jìn)、刪除和更多的選項(xiàng)。

Barthelemy Chalvet 設(shè)計(jì)的Move Product 高度地使用了卡片，而你可以對(duì)卡片進(jìn)行選擇、刪除或者保存下來(lái)以便以后瀏覽。彈出式廣告的卡片給了用戶(hù)更多的提示性。

Coke’s Ahh.com大膽地使用了大量卡片，一些矩形，但大多是正方形的，一些有活力但卻不失格式、規(guī)律性。如果你點(diǎn)擊每一張卡片，它會(huì)翻頁(yè)給你2個(gè)互動(dòng)的請(qǐng)求：添加到列表或者現(xiàn)在播放。

受歡迎的設(shè)計(jì)師都喜歡逛Dribble，一個(gè)卡片式設(shè)計(jì)的網(wǎng)站。每張卡片提供了關(guān)于多少瀏覽者點(diǎn)擊這張卡片的瀏覽量，多少人喜歡它，還有有多少評(píng)論被列舉出來(lái)。當(dāng)用戶(hù)的鼠標(biāo)停留在卡片上，就可以看到一張圖片的預(yù)覽，同時(shí)也可以下載數(shù)據(jù)。

Silktricky 是我最喜歡的卡片式設(shè)計(jì)，因?yàn)樗苡腥ぁ？ㄆ慕换?、看著它們?duì)你的選擇做出的響應(yīng)，讓整個(gè)設(shè)計(jì)感覺(jué)很直觀。

Vox用他們稱(chēng)為的卡片堆積進(jìn)入了一個(gè)卡片游戲。類(lèi)似于滑動(dòng)顯示，卡片堆積提供了一個(gè)關(guān)于特別的主題的全方位信息。每一個(gè)獨(dú)特的卡片都致力于回答一個(gè)主題特定的一面?？ㄆ强煞窒淼?，因?yàn)樗鼈兊目煽s變的尺寸大小，卡片也是容易消耗的。

總結(jié)

卡片是讓你的設(shè)計(jì)更加全面、人性化、更有互動(dòng)性的最好方式。它們非常值得你去了解、使用。

既然你已經(jīng)了解了卡片式設(shè)計(jì)，你會(huì)在你的設(shè)計(jì)中使用嗎?

分享文章：談什么是卡片式設(shè)計(jì)?
文章URL：http://www.bm7419.com/news/173582.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站收錄、網(wǎng)頁(yè)設(shè)計(jì)公司、外貿(mào)建站、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)