卡片式設(shè)計的變遷
說到卡片大家都不陌生。日常生活中我們都接觸過哪些卡片呢？細(xì)細(xì)留意實際上我們每天無時無刻不被卡片所包圍著。例如出門必備的公交卡、身份證、銀行卡、各種票據(jù)、甚至路邊的指示牌等。
那么卡片的共同特征可以歸結(jié)為包含一組特定相關(guān)聯(lián)信息數(shù)據(jù)的集合?？ㄆǔＪ钦疵?，可以翻轉(zhuǎn)的。具備移動使用的功能，即具有可交互性。通常起到歸納總結(jié)和提示信息的作用，給我們的生活提供了巨大的便利。
在互聯(lián)網(wǎng)時代的到來，卡片也走進(jìn)了熒屏，其實最早應(yīng)用卡片式設(shè)計并非google 的material design 和蘋果的IOS design，而是palm webOS。在webOS中，傳統(tǒng)意義上的程序概念被弱化，取而代之的是卡片系統(tǒng)。所有的任務(wù)均以卡片的形式出現(xiàn)。任何時候點擊手勢區(qū)，都會進(jìn)入卡片視圖。相信webOS的出現(xiàn)對日后卡片式設(shè)計以及人機(jī)交互的運用起到了重要的墊定基礎(chǔ)。
此外在PC端影響力較大的圖片分享網(wǎng)站 Pinterest率先的使用，使得近年來卡片式設(shè)計越來越流行。網(wǎng)絡(luò)巨頭Facebook和Twitter在自己的PC端和移動端紛紛采用了卡片式設(shè)計布局。
不得不說以 Google Now 為代表，全線產(chǎn)品趨向簡潔。當(dāng)時“卡片”已是并不新鮮的概念了，卻成為谷歌最重視的元素。
隨后谷歌將卡片結(jié)合紙張材質(zhì)的概念，進(jìn)行了擴(kuò)展定義，即我們現(xiàn)在看到的Material Design設(shè)計規(guī)范。將卡片賦予了紙張的材質(zhì)，基于網(wǎng)格的布局、響應(yīng)動畫與過渡、填充、深度效果（如光線和陰影）。設(shè)計師馬蒂亞斯·杜爾特解釋說：“與真正的紙張不同，我們的數(shù)字材質(zhì)可以智能地擴(kuò)大和變形。材質(zhì)具有實體的表面和邊緣。接縫和陰影表明組件的含義。”
webOS作為優(yōu)秀的卡片式操作系統(tǒng)并沒有銷聲匿跡，而是被LG在此基礎(chǔ)上更加靈活的設(shè)計自己的智能電視操作系統(tǒng)，也就是如今萬眾矚目的卡片式LG智能電視系統(tǒng)。相信以后還會有更進(jìn)一步的發(fā)展。
卡片式設(shè)計的優(yōu)點
1、信息系統(tǒng)性歸納和獨立
我們可以將同類信息進(jìn)行系統(tǒng)性的歸納，并整理到一張卡片內(nèi)做為獨立的單元進(jìn)行展示。
需要注意的一點是作為獨立的卡片單元往往要有足夠的空間留白，或者可以添加一點投影增加層次感，能使閱讀上更加舒適。
2、更順暢直觀的操作
生活中的卡片可以翻面、折疊、展開、堆疊。
例如：翻面可以呈現(xiàn)更多內(nèi)容、折疊可以簡述概括內(nèi)容、展開可以詳細(xì)展示具體內(nèi)容、堆疊可以進(jìn)行信息的分組歸類。
卡片采用堆疊式的形式時，實際上是在暗示用戶去操作，發(fā)現(xiàn)其感興趣的內(nèi)容。就好比實際生活中，我們拿到一疊名片去尋找自己需要的那幾張。
在設(shè)計虛擬卡片時，我們同樣可以運用這些特點，同時我們還可以結(jié)合動畫和移動效果增強(qiáng)交互體驗。可發(fā)揮的空間還很大，例如我們還可以在卡片中嵌入多媒體內(nèi)容：比如照片、視頻和音樂等。
3、整齊的柵格化排版
將文字信息、圖像歸類整合到一個方塊里，分布成不同的卡片模塊。有利于柵格化的排版。對于后期多平臺的自適應(yīng)提供很大的優(yōu)勢。
4、瀑布流的自由組合布局
雖然整齊的柵格化布局有它的優(yōu)勢，但是自由組合的布局給設(shè)計師和程序員提供了相當(dāng)大的便利，不用再為圖片比例不對需要裁剪而發(fā)愁。瀑布流的流行給用戶帶來了視覺的輕松和自由。
5、新的創(chuàng)意畫布
卡片式是有創(chuàng)造性的新設(shè)計。它不只是僅供一看的，是一種可以創(chuàng)建豐富內(nèi)容的用戶體驗的靈活布局模式。
卡片式設(shè)計的不適用性
卡片式雖然有這么多好處和優(yōu)點，但同樣有著不適用的場景。
1、內(nèi)容過多小空間展示時
Google曾經(jīng)對搜索結(jié)果頁進(jìn)行過AB測試?？ㄆ綐邮礁迂S富多彩，但卡片式增加了滾動的深度，每頁瀏覽的的信息仍然較少。
Material Design建議的是列表是“可快速掃描”，適合顯示類似的重復(fù)的內(nèi)容。
這里卡片的使用分散了用戶注意力，不能快速掃描。這些列表項也不能忽略，所以把它們放在不同的卡片上是難以理解的，不利于沉浸式閱讀。這里運用列表式（磁貼）的形式更為合理。
2、內(nèi)容容易區(qū)分并被感知
當(dāng)內(nèi)容空間大量重復(fù)容易區(qū)分，容易感知的時候，卡片在圖片庫中沒有必要使用。網(wǎng)格磁貼是表現(xiàn)圖片庫的干凈輕量的方法。
3、卡片內(nèi)容過長的界面
在信息量過大的時候，勢必要增加排版的長度，這時候就要避免使用卡片式設(shè)計。因為卡片式設(shè)計對頁面空間的消耗非常大，內(nèi)容之間的界限非常明顯。當(dāng)用戶進(jìn)行沉浸式閱讀時候，這樣的界定打斷了原有的閱讀節(jié)奏，使人產(chǎn)生反感。強(qiáng)制使用就違背了卡片式設(shè)計信息集中，極簡的設(shè)計原則。
所以當(dāng)進(jìn)行長文本的陳述或者強(qiáng)關(guān)聯(lián)閱讀類內(nèi)容（非操作類）進(jìn)行排列時，盡量避免使用卡片形式設(shè)計。（試想想，當(dāng)你在念一封信的時候，把里面的每一段內(nèi)容都給你重新用另一封信包裝起來......)
小結(jié)
作為UI設(shè)計師，雖然我們都喜歡最新的流行趨勢，但是在實際運用過程中還是要考慮好其適用場景。在運用的時候可以更加靈活，例如下面豌豆莢的搜索結(jié)果頁。
雖然豌豆莢這個頁面并沒有使用卡片式設(shè)計，而是采用了列表式設(shè)計。但是在用戶點擊安裝按鈕的時候，磁貼發(fā)生了翻轉(zhuǎn)。這似乎與常規(guī)交互不符，但是實際使用下來覺得還是比較流暢的，不失為一種創(chuàng)新。
例如得到app的今日學(xué)習(xí)頁面，當(dāng)日進(jìn)入的時候會看到一張卡片，當(dāng)用戶上滑瀏覽下面的內(nèi)容時，卡片會發(fā)生折疊。雖然這種運用略為生硬，但是在當(dāng)天第一次進(jìn)入的時候才會顯示。采用現(xiàn)實中卡片折疊的屬性，不失為一種合理性。
以上小例子僅為拋磚引玉，希望我們在設(shè)計下一個主頁或歸檔頁面時能打破原有設(shè)計思路，更好的結(jié)合和運用卡片式設(shè)計。
