10
| 本文作者： 訾竣喆 | 2015-11-20 11:14 |
【編者按】本文編譯自thenextweb，原文作者CARRIE COUSINS
如今，全屏化的卡片式設(shè)計(jì)幾乎無(wú)處不在，這種設(shè)計(jì)語(yǔ)言有其獨(dú)特的美感。不管你是如何看待卡片式設(shè)計(jì)這個(gè)概念的，卡片化都已成為了當(dāng)今應(yīng)用程序設(shè)計(jì)的潮流趨勢(shì)。卡片式設(shè)計(jì)似乎天生就是為了應(yīng)用程序而存在著的一種獨(dú)特的設(shè)計(jì)風(fēng)格。如今，絕大部分的應(yīng)用程序都在使用卡片式設(shè)計(jì)，而這種卡片式設(shè)計(jì)也自有其在移動(dòng)端領(lǐng)域的絕對(duì)優(yōu)勢(shì)。
讓我們做一個(gè)小實(shí)驗(yàn)：拿起您的手機(jī)，打開(kāi)排列靠前的十個(gè)應(yīng)用程序，看看其中有多少采用了卡片式設(shè)計(jì)呢？
現(xiàn)在就讓我們深入分析，看看在實(shí)際應(yīng)用下它們是如何被合理使用的。
卡片式的布局能夠把信息、圖像、文本、按鈕、鏈接等一系列數(shù)據(jù)整合到各種矩形方框中。這些模塊可以分層或移動(dòng)，并都傾向于調(diào)整到全屏幕尺寸。如果你把它滑動(dòng)到手機(jī)的一側(cè)，它就會(huì)和其它的卡片堆疊在一起。
卡片能夠合理利用空間，清爽的列出全部信息。而就像“2015年和2016年手機(jī)設(shè)計(jì)流行趨勢(shì)”所指出的那樣，最好的設(shè)計(jì)思路其實(shí)就是把每個(gè)卡片作為一個(gè)獨(dú)立整體來(lái)設(shè)計(jì)。
接下來(lái)我們看看實(shí)例。首先，我們來(lái)看看蘋(píng)果設(shè)備的AirDrop功能。當(dāng)用戶(hù)有數(shù)據(jù)傳入時(shí)，手機(jī)會(huì)彈出一個(gè)卡片式的通知，用戶(hù)可以選擇接受或拒絕——無(wú)論用戶(hù)做出何種選擇，只需要一個(gè)操作即可。這種操作邏輯與平板電腦或計(jì)算機(jī)都是相通的，而這就意味著用戶(hù)能夠很容易地理解這種操作邏輯。
卡片式設(shè)計(jì)在最近一段時(shí)間已經(jīng)可以用“泛濫”來(lái)形容了。在Pinterest第一次給用戶(hù)帶來(lái)了這種清爽的卡片式設(shè)計(jì)之后，很多公司都緊隨其后推出了自己的卡片式交互設(shè)計(jì)，于是這股卡片化主導(dǎo)的設(shè)計(jì)潮流就這么火了起來(lái)。
而卡片式設(shè)計(jì)能夠成為流行趨勢(shì)的一個(gè)最重要的原因就是——卡片式設(shè)計(jì)能夠完美利用手機(jī)屏幕的空間，不但界面清爽，內(nèi)容也一目了然。在大多數(shù)的交互場(chǎng)景下，卡片式設(shè)計(jì)與移動(dòng)應(yīng)用程序簡(jiǎn)直是絕配。而矩形的設(shè)計(jì)也能夠完美體現(xiàn)出UI設(shè)計(jì)的簡(jiǎn)潔美。
我們可以試著腦補(bǔ)一下，看看還有能跟卡片式設(shè)計(jì)一樣，與手機(jī)屏幕完美匹配的其他設(shè)計(jì)語(yǔ)言嗎？
卡片式設(shè)計(jì)可以說(shuō)就是桌面設(shè)備和移動(dòng)設(shè)備之間的設(shè)計(jì)交點(diǎn)，能夠?qū)⒖山换バ院涂捎眯酝昝廊诤显谝黄稹?/p>
無(wú)論是何種設(shè)備，卡片式設(shè)計(jì)都能提供一致的體驗(yàn)感受。在響應(yīng)式設(shè)計(jì)思維方面，因?yàn)榭ㄆ皆O(shè)計(jì)是作為“內(nèi)容存儲(chǔ)的介質(zhì)”，所以可以輕松地向上或向下擴(kuò)展，而在與之交互時(shí)，這種優(yōu)勢(shì)便能夠淋漓盡致地體現(xiàn)出來(lái)。
卡片式設(shè)計(jì)有兩種最常見(jiàn)的形式——卡片式界面以及卡片式嵌入內(nèi)容。
有時(shí)候，雖然軟件使用的是卡片式設(shè)計(jì)，但其實(shí)你根本無(wú)法察覺(jué)到——因?yàn)樗鼈円呀?jīng)被全屏化了。但是如果你仔細(xì)觀察的話(huà)，還是可以看出其中卡片式設(shè)計(jì)的一些特征。
卡片式界面通常會(huì)融合單點(diǎn)式觸控設(shè)計(jì)的元素，也就是說(shuō)，點(diǎn)擊或滑動(dòng)屏幕上的任何地方都會(huì)做出相應(yīng)的動(dòng)作。因此，卡片式設(shè)計(jì)也經(jīng)常被用于游戲界面上。
以最近在美區(qū)APP Store比較流行的小游戲Trivia Crack（益智闖關(guān)類(lèi)小游戲）為例，主界面其實(shí)就是由許多卡片構(gòu)成，卡片上面顯示了游戲中的一些比賽以及競(jìng)爭(zhēng)對(duì)手。仔細(xì)看的話(huà)，還能發(fā)現(xiàn)它在頂部還嵌入了一個(gè)廣告（巧妙地偽裝成了卡片），而且，在這款游戲中，卡片收集也是游戲中的一個(gè)重要的部分。這種卡片式設(shè)計(jì)使得游戲更容易操作，并且從玩家角度來(lái)講也更容易理解。
卡片式嵌入廣告在移動(dòng)應(yīng)用程序中也是很常見(jiàn)的，一般會(huì)隨著程序中的某個(gè)動(dòng)作觸發(fā)并下拉覆蓋大部分或是整個(gè)屏幕。
與卡片式界面風(fēng)格所不同的是，這種卡片式廣告包含兩個(gè)鏈接，一種所占面積非常大，另一種則非常小。點(diǎn)擊到覆蓋面積大的那個(gè)鏈接，它就會(huì)帶你到廣告中的產(chǎn)品那里去——一般都是跳轉(zhuǎn)到網(wǎng)頁(yè)鏈接上，如果是iOS系統(tǒng)的話(huà)還會(huì)繼續(xù)跳轉(zhuǎn)到APP Store中；而那個(gè)占地比較小而且極為不起眼的區(qū)域（一般就是個(gè)小的×號(hào)）就會(huì)帶你回到原來(lái)的界面中（當(dāng)然，還有些比較惡心的廣告不管用戶(hù)點(diǎn)擊哪里都會(huì)跳轉(zhuǎn)到廣告中的產(chǎn)品，甚至是直接跳轉(zhuǎn)到下載鏈接自動(dòng)下載，這種我們暫時(shí)先不予討論）。
我們繼續(xù)以Trivia Crack為例。在你成功觸發(fā)廣告后，廣告會(huì)占滿(mǎn)整個(gè)屏幕。這就是卡片式設(shè)計(jì)的應(yīng)用之一（雖然用戶(hù)會(huì)很反感）。這些廣告窗口可以包含任何圖像、聲音、視頻以及文字信息，用以說(shuō)服你點(diǎn)擊廣告上的推薦產(chǎn)品。
從一個(gè)用戶(hù)的體驗(yàn)的角度來(lái)看，這種卡片式廣告感覺(jué)更像是集成在了界面之中。即使廣告可能占據(jù)整個(gè)屏幕，這也不會(huì)打破程序內(nèi)部整體的協(xié)調(diào)性，因?yàn)檫@其實(shí)就相當(dāng)于在應(yīng)用程序頂層新打開(kāi)了一個(gè)卡片。
卡片式設(shè)計(jì)能夠幫助用戶(hù)快速瀏覽信息，這種在視覺(jué)上“能夠和應(yīng)用程序內(nèi)部基調(diào)保持一致”的廣告能夠直接帶來(lái)更加可觀的商業(yè)價(jià)值。
使用卡片式設(shè)計(jì)的優(yōu)勢(shì)就在于——這一“容器”幾乎可以容納所有類(lèi)型的內(nèi)容。卡片可以與不同類(lèi)型的內(nèi)容進(jìn)行搭配，而這種設(shè)計(jì)語(yǔ)言對(duì)于那些以?xún)?nèi)容為主的網(wǎng)站和應(yīng)用程序簡(jiǎn)直稱(chēng)得上是絕配。因?yàn)闆](méi)有什么內(nèi)容是卡片所裝不進(jìn)去的。
卡片所能容納的內(nèi)容元素真的非常多，比如：照片、文本、視頻、優(yōu)惠券、音樂(lè)、付款信息、注冊(cè)表格、游戲數(shù)據(jù)、社交媒體流、共享文件、獎(jiǎng)勵(lì)信息以及鏈接等等等等…
卡片式設(shè)計(jì)能夠把這些內(nèi)容有機(jī)的結(jié)合起來(lái)。而且對(duì)于用戶(hù)而言，這種卡片也易于快速瀏覽和閱讀。畢竟誰(shuí)也不會(huì)盯著一個(gè)廣告看上半天，廣告商所能把握的時(shí)機(jī)只有那一瞬間的轉(zhuǎn)眸。
卡片是用來(lái)翻閱的。這聽(tīng)起來(lái)似乎是理所當(dāng)然的對(duì)吧？但這看似平常的邏輯卻是卡片能夠在現(xiàn)實(shí)社會(huì)普及開(kāi)來(lái)的關(guān)鍵原因，同時(shí)這也是卡片式設(shè)計(jì)在移動(dòng)應(yīng)用領(lǐng)域的最大優(yōu)勢(shì)所在。
作為2015年的移動(dòng)設(shè)計(jì)趨勢(shì)，這股潮流很可能繼續(xù)蔓延到2016年。就像UXPin所說(shuō)的那樣，卡片式設(shè)計(jì)能夠方便用戶(hù)使用的根本原因就是——卡片化的數(shù)字界面能夠在現(xiàn)實(shí)中得到映射，用戶(hù)很容易就能夠融入其中。試想一下，在現(xiàn)實(shí)中你是如何玩撲克牌的——你可以將它們摞起來(lái)、鋪展開(kāi)、翻轉(zhuǎn)、折疊，或是放在撲克牌盒子里。
而卡片化的數(shù)字界面具有著與現(xiàn)實(shí)中的卡片相同的性質(zhì)，這是一種天然的優(yōu)勢(shì)，這能夠給用戶(hù)帶來(lái)一個(gè)舒適的體驗(yàn)。因?yàn)橛脩?hù)不必再思考到底該如何操作了，手到擒來(lái)。
設(shè)計(jì)者也能夠充分利用用戶(hù)的這種現(xiàn)實(shí)中的思維慣性來(lái)設(shè)計(jì)操作邏輯，從而實(shí)現(xiàn)在應(yīng)用中的無(wú)縫連接與轉(zhuǎn)換。而當(dāng)用戶(hù)與卡片進(jìn)行交互時(shí)，他們就會(huì)自然融入到這種固有的行為模式之中。
以上這些就是著名的UI設(shè)計(jì)師Chris Tse所說(shuō)的，卡片式設(shè)計(jì)能夠做的三件事：記錄信息、用信息挑逗用戶(hù)、或者用信息提醒用戶(hù)。
那么，我們進(jìn)一步分解來(lái)看看，不同類(lèi)型的內(nèi)容元素是如何放到這些卡片中的：
如何使卡片在數(shù)據(jù)流中進(jìn)行推送的過(guò)程中，形成一種自然的“時(shí)間軸”對(duì)于用戶(hù)體驗(yàn)而言是很重要的。先使用卡片來(lái)做一個(gè)吸引人的概括，之后再把故事的細(xì)節(jié)娓娓道來(lái)是一種不錯(cuò)的思路。
卡片可以把想要推送的相關(guān)內(nèi)容，非常自然的呈現(xiàn)在用戶(hù)眼前。如果能把廣告加入淡入的效果，給人以出牌的這種感覺(jué)的話(huà)，用戶(hù)肯定不會(huì)像現(xiàn)在這樣對(duì)廣告感到如此反感。我們可以看看Spotify的卡片效果：用戶(hù)只需要向左或向右滑動(dòng)，就可以找到符合口味的歌曲，這種酣暢的感覺(jué)能夠給使用者以一種愉悅的享受。
由于卡片是能夠自成一體的，所以他們能夠完美地把正在進(jìn)行的對(duì)話(huà)容納進(jìn)去。接下來(lái)我們以微信為例，我們可以看到其中包含了多個(gè)矩形窗口用于對(duì)話(huà)，雖然各個(gè)對(duì)話(huà)框之間的間距非常小，但是它們之間并沒(méi)有相接，就在這點(diǎn)滴之間蘊(yùn)含著一種十分微妙的美學(xué)。（雖然兩人的頭像各在屏幕的一邊，但是我們的心已經(jīng)靠在了一起）
卡片能夠非常輕松地把待辦事項(xiàng)進(jìn)行歸類(lèi)。在這里我們拿Evernote舉例，用戶(hù)可以給不同的待辦事宜選項(xiàng)卡里創(chuàng)建不同的注釋。當(dāng)你把某個(gè)小卡片刪除后，剩余的“牌”將自動(dòng)重新回到原來(lái)的位置。
現(xiàn)在，讓我們?cè)購(gòu)亩嘣O(shè)備的角度來(lái)看看卡片式設(shè)計(jì)。雖然這種卡片內(nèi)容經(jīng)常會(huì)被限定在一個(gè)特定的應(yīng)用程序內(nèi)，但是其實(shí)卡片也是可以在應(yīng)用、設(shè)備甚至用戶(hù)之間移動(dòng)的。在這里我們可以回想一下蘋(píng)果的AirDrop應(yīng)用是如何把數(shù)據(jù)從一個(gè)用戶(hù)發(fā)送給另一個(gè)用戶(hù)的。
在現(xiàn)實(shí)中也是一樣，卡片很容易設(shè)計(jì)和使用。當(dāng)涉及到卡片的實(shí)際設(shè)計(jì)時(shí)，你有時(shí)需要做一些重要的取舍。在這里我們可以拿SIM卡舉例，就你而言，你覺(jué)得SIM卡設(shè)計(jì)成多大尺寸是比較合適的？又該以怎樣的設(shè)計(jì)語(yǔ)言去設(shè)計(jì)SIM卡的外觀呢？
我們?cè)倩氐揭苿?dòng)應(yīng)用程序領(lǐng)域。當(dāng)考慮到的卡片大小尺寸的問(wèn)題時(shí)，目前最流行的選擇無(wú)非三種：小尺寸卡片，用于對(duì)內(nèi)容進(jìn)行簡(jiǎn)單的描述；中等尺寸，占屏幕的一部分，可允許多個(gè)卡片顯示在屏幕中;全尺寸卡片，覆蓋整個(gè)屏幕，可以彈出覆蓋在其他元素的頂部。
Yahoo! Fantasy這一應(yīng)用就充分利用了所有的這三種卡片尺寸。第一個(gè)畫(huà)面顯示了一個(gè)球員名單，其中每個(gè)球員的名字都是一張牌。點(diǎn)擊其中一個(gè)名字，就會(huì)彈出一個(gè)幾乎占滿(mǎn)整個(gè)屏幕的新卡片，卡片中有該球員詳細(xì)的資料。進(jìn)入到新聞界面時(shí)，應(yīng)用就會(huì)全屏展開(kāi)最近該球隊(duì)在聯(lián)賽中的新聞。這些不同尺寸的卡片能夠讓用戶(hù)清楚的了解到他們正在看哪類(lèi)的內(nèi)容。
卡片化設(shè)計(jì)同樣蘊(yùn)含著美學(xué)。微軟的Metro界面就是用扁平式卡片把應(yīng)用程序展現(xiàn)在用戶(hù)面前。雖然微軟在Win10中不再那么依賴(lài)Metro風(fēng)格的卡片了，但是這股卡片式設(shè)計(jì)的潮流卻絲毫沒(méi)有退卻。應(yīng)用程序里也開(kāi)始出現(xiàn)了各類(lèi)雜志風(fēng)格的卡片，特別是在新聞網(wǎng)站這種包含有大量的文字信息的地方，比如Flipboard、CNN和Newsify。
那么，為什么說(shuō)卡片的設(shè)計(jì)感十足且十分易于使用的呢？這是由于如果設(shè)計(jì)者想要使用卡片式設(shè)計(jì)的話(huà)，就必須有能力對(duì)所有能夠放進(jìn)卡片中的內(nèi)容加以修飾和潤(rùn)色——從文字的排版到顏色的搭配再到圖片的使用，都必須能夠稱(chēng)得上專(zhuān)家才可以駕馭。而設(shè)計(jì)理論就是設(shè)計(jì)師在規(guī)劃和制作這種卡片時(shí)的良師益友。
UX的設(shè)計(jì)師Erik D. Kennedy寫(xiě)了一篇非常棒的文章（一共分為兩部），這篇文章打破了許多傳統(tǒng)的設(shè)計(jì)觀念。以下是我們認(rèn)為在這篇文章中最適用于卡片式設(shè)計(jì)的幾條規(guī)則：
了解光線(xiàn)的物理性質(zhì)：設(shè)計(jì)師應(yīng)仔細(xì)考慮如何使用陰影和漸變，使元素看起來(lái)更加真實(shí)。這對(duì)于卡片式設(shè)計(jì)而言是非常重要的，因?yàn)樗婕暗搅丝ㄆ摹罢鎸?shí)感”。如果陰影投在各個(gè)角落邊上的話(huà)，這種卡片式的體驗(yàn)可能就會(huì)被破壞掉。
確保UI在黑白兩色下能夠正常使用：設(shè)計(jì)的第一步就是要拋棄顏色。這將能夠讓你明確地把設(shè)計(jì)重點(diǎn)放在實(shí)用性和內(nèi)容上。根據(jù)Kennedy的說(shuō)法，設(shè)計(jì)師應(yīng)該在設(shè)計(jì)的最后一步再添加顏色，顏色對(duì)UI設(shè)計(jì)只是起到點(diǎn)綴的作用。
不要吝嗇使用留白：請(qǐng)先給你的卡片一些空白的空間，之后再去慢慢縮減這部分空白。正如我們?cè)凇熬W(wǎng)頁(yè)設(shè)計(jì)中留白的禪學(xué)”中所描述的那樣，“負(fù)空間”是幫助你“組織和分離各種必要與不必要元素”的良師益友。
掌握分層文字的藝術(shù)：這可能并不是那么容易掌握的。一定要使用一個(gè)明確的、清晰的圖像作為背景。為了確保文本看起來(lái)效果更好一些，你可以使用一個(gè)黑暗的色調(diào)來(lái)進(jìn)行疊加——把文字放進(jìn)一個(gè)“盒子”里，或者是嘗試虛化背景圖。
知道如何創(chuàng)建與排版對(duì)比：無(wú)論是猶豫用大卡片還是小卡片，或是糾結(jié)用更多的文字還是更少的文字進(jìn)行組合，其實(shí)最重要的是要把這些元素有機(jī)的配合起來(lái)，達(dá)到吸引用戶(hù)注意這一最終目標(biāo)。其實(shí)，在卡片式設(shè)計(jì)上簡(jiǎn)單的排版往往效果最好。通過(guò)給卡片加以美化潤(rùn)色，來(lái)使得用戶(hù)對(duì)卡片更加熟悉，而且這種方式也并不失創(chuàng)意。例如，把陰影元素加進(jìn)卡片中的話(huà)就會(huì)使用戶(hù)感到更加親切自然。
你可能已經(jīng)感覺(jué)到卡片式的設(shè)計(jì)在移動(dòng)領(lǐng)域越來(lái)越流行，而且這股潮流并不會(huì)在短時(shí)間內(nèi)消失。這意味著更多的應(yīng)用程序會(huì)出現(xiàn)卡片式界面，更多的開(kāi)始使用有層次的卡片來(lái)設(shè)計(jì)。
谷歌地圖就使用了分層卡片式設(shè)計(jì)來(lái)幫助用戶(hù)瀏覽。我們可以來(lái)看下面的例子，左圖中包含一個(gè)位于頂層的地址輸入框和位于下層的全屏化地圖。右圖中位于頂端（或者說(shuō)底部）的卡片顯示的是該地方的實(shí)景圖，幫助你確定你所搜索的位置，而屏幕下方（或者說(shuō)頂層）的卡片則擴(kuò)展顯示了地址的具體細(xì)節(jié)。
設(shè)計(jì)人員如今的目標(biāo)是找尋新的方式來(lái)進(jìn)一步簡(jiǎn)化卡片的數(shù)量。第一種方式就是把一些常見(jiàn)的美學(xué)圖案融合進(jìn)圖片、視頻或標(biāo)題之中，第二種方式就是通過(guò)將主文本堆疊起來(lái)，來(lái)使元素之間相互覆蓋。
卡片式設(shè)計(jì)也可能還會(huì)有其他的設(shè)計(jì)趨勢(shì)，例如在標(biāo)題或圖片上添加按鈕。
雖然扁平化的設(shè)計(jì)從來(lái)沒(méi)有真正的走出風(fēng)格過(guò)，但是它的發(fā)展將激勵(lì)卡片式設(shè)計(jì)繼續(xù)發(fā)展?？ㄆ皆O(shè)計(jì)將更多的加入顏色的碰撞、流線(xiàn)型的排版以及更精妙的小設(shè)計(jì)，以幫助用戶(hù)更好的瀏覽內(nèi)容。
而那些以?xún)?nèi)容為主的網(wǎng)站很可能也會(huì)漸漸開(kāi)始應(yīng)用卡片式界面。因?yàn)?，就目前而言，卡片式設(shè)計(jì)對(duì)于信息量比較大的內(nèi)容都是絕配，沒(méi)有之一。
Facebook仍然是內(nèi)容驅(qū)動(dòng)型卡片設(shè)計(jì)的一個(gè)范例。而且，F(xiàn)acebook將繼續(xù)領(lǐng)導(dǎo)卡片式設(shè)計(jì)的潮流，并與更多的新聞和博客交流合作，并能夠最終促使它們也使用這種設(shè)計(jì)語(yǔ)言。作為業(yè)界領(lǐng)袖，人們能夠在Facebook里發(fā)現(xiàn)大量的卡片式設(shè)計(jì)語(yǔ)言，這并不奇怪，因?yàn)镕acebook本身就是以?xún)?nèi)容為主的應(yīng)用程序，而它的卡片式界面和模式將會(huì)鼓勵(lì)越來(lái)越多的應(yīng)用程序相繼效仿。
相關(guān)閱讀：
為簡(jiǎn)潔犧牲實(shí)用性，蘋(píng)果的設(shè)計(jì)理念是否真的跑偏了？
移動(dòng)app交互設(shè)計(jì)：如何把“手勢(shì)流”裝進(jìn)手機(jī)
雷峰網(wǎng)原創(chuàng)文章，未經(jīng)授權(quán)禁止轉(zhuǎn)載。詳情見(jiàn)轉(zhuǎn)載須知。
