10
| 本文作者： 百度MUX | 2016-01-05 16:44 |
【編者按】文章來自百度MUX翻譯小組，應(yīng)作者要求，如文章已獲雷鋒網(wǎng)授權(quán)轉(zhuǎn)載，也請(qǐng)保留原標(biāo)題。
Facebook仍是內(nèi)容驅(qū)動(dòng)型卡片設(shè)計(jì)的優(yōu)秀案例，并將繼續(xù)引領(lǐng)更多基于新聞和博客的功能設(shè)計(jì)。
譯者注：本文譯自UXPin出品的電子書Mobile Design Book of Trends 2015&2016的第六章Bite-Sized Cards。這本電子書結(jié)合豐富案例講述了2015-2016年間重要的移動(dòng)設(shè)計(jì)趨勢(shì)，共含6章節(jié)：靈巧的手勢(shì)操作、層級(jí)化的移動(dòng)界面、雋永的字體排印、扁平化設(shè)計(jì)、愉悅的微交互、小卡片。本文將來分享小卡片設(shè)計(jì)。注：以下圖片全部來自UXPin。
對(duì)于APP設(shè)計(jì)，2015儼然是卡片設(shè)計(jì)年。從網(wǎng)站到移動(dòng)應(yīng)用，不同屏幕尺寸的卡片無處不在，卡片展現(xiàn)形式與實(shí)物相似。通過手指滑動(dòng)，用戶可以輕松地在卡片容器中翻閱。
（Photo credit: Trello）
無論你是否意識(shí)到這一點(diǎn)，卡片會(huì)長期存在下去。
坦白說，卡片式風(fēng)格似乎只是為APP而生。你無法想象現(xiàn)在有多少APP正在使用卡片式設(shè)計(jì)。讓我們做一個(gè)小實(shí)驗(yàn)：拿起你的手機(jī)，打開你看到的前10個(gè)應(yīng)用，有多少用了卡片設(shè)計(jì)呢？
我們已經(jīng)知道卡片式設(shè)計(jì)統(tǒng)治了移動(dòng)端，接下來讓我們深入了解如何實(shí)際使用它們吧。
卡片式布局將信息分布在一系列矩形卡片容器中，如圖像、文本、按鈕、鏈接等。這些卡片可以分層或移動(dòng)，并依據(jù)屏幕尺寸自適應(yīng)適配，如果你將手機(jī)橫豎屏切換，卡片將堆疊降落為新的卡片隊(duì)列。
卡片是整齊的信息容器。正如電子書《Web UI現(xiàn)狀和未來趨勢(shì)：卡片設(shè)計(jì)模式》中所言，最好把每個(gè)卡片視為單一的想法或基本動(dòng)作。
（Photo credit: Apple AirDrop）
讓我們來看看蘋果設(shè)備上常見的AirDrop功能。當(dāng)有數(shù)據(jù)傳入時(shí)，一個(gè)卡片式通知會(huì)彈出，你可以選擇接受或拒絕傳輸數(shù)據(jù)。無論是手機(jī)、平板電腦或筆記本電腦，云傳輸功能均以同樣的交互模式實(shí)現(xiàn)，這意味著用戶很容易對(duì)操作行為有一定預(yù)期，知道如何使用。
雖然卡片最近才流行開來，這個(gè)設(shè)計(jì)倒并不新。Pinterest奠定了卡片作為主要設(shè)計(jì)模式的地位，而很多其他公司緊隨其后實(shí)踐卡片設(shè)計(jì)。
（Photo credit: Tinder）
卡片式設(shè)計(jì)越來越流行的原因之一，在于它與手機(jī)屏幕的兼容性。根據(jù)屏幕尺寸自適應(yīng)卡片大小，與大多數(shù)移動(dòng)用戶場(chǎng)景都完美匹配，而矩形的審美也符合UI設(shè)計(jì)。
細(xì)想卡片的設(shè)計(jì)，它幾乎完美適配了手機(jī)屏幕的大小和形狀。由于存在多種不同型號(hào)的屏幕尺寸，所以這里的卡片尺寸并不是一個(gè)精確的數(shù)值，而是一個(gè)極具代表性的長寬比。
卡片式設(shè)計(jì)的精髓在于桌面端和移動(dòng)設(shè)備的交集設(shè)計(jì)，在互動(dòng)性和可用性之間尋求平衡點(diǎn)。正如我們?cè)凇兑苿?dòng)界面模式》中首次描述過的，跨越不同的設(shè)備，卡片式設(shè)計(jì)創(chuàng)建了一個(gè)更為一致的體驗(yàn)。在響應(yīng)式設(shè)計(jì)中尤其是這樣，卡片作為“內(nèi)容容器”可以輕松地放大縮?。ㄏ裰匦露询B擺放箱子一樣）。
對(duì)于卡片，它們普遍有2種用途：作為界面或作為界面流的中斷（通常以廣告的形式）。
1. 卡片作為界面
有時(shí)你甚至看不到卡片的設(shè)計(jì)形態(tài)，因?yàn)樗鼈兒推聊煌昝乐睾?。但如果你仔?xì)看，仍然可以識(shí)別出它采用卡片式設(shè)計(jì)。
卡片式界面通常整體作為一個(gè)可觸元素。無論點(diǎn)擊或滑動(dòng)屏幕上任意位置，都可進(jìn)行操作。在游戲界面中應(yīng)用卡片式設(shè)計(jì)也是一個(gè)亮點(diǎn)。
（Photo credit: Trivia Crack）
以流行的Trivia Crack舉例，主屏幕用一系列的卡片承載每場(chǎng)比賽和對(duì)手信息，它還巧妙的嵌入了一個(gè)卡片廣告。某種程度上，這些卡片提升了游戲的境界層次。采用卡片堆疊的方式，讓游戲容易使用和理解。
2. 卡片作為界面流的中斷
卡片式設(shè)計(jì)也經(jīng)常以向下滑動(dòng)覆蓋屏幕的方式，用于移動(dòng)端或APP內(nèi)廣告。與界面式卡片不同的是，這些卡片包含兩種鏈接——強(qiáng)鏈接和弱鏈接。點(diǎn)擊強(qiáng)鏈接跳轉(zhuǎn)產(chǎn)品廣告頁。點(diǎn)擊弱鏈接返回上一個(gè)界面，一般來說弱鏈接很難被點(diǎn)擊。
（Photo credit: Trivia Crack in-app advertising）
讓我們以Trivia Crack為例。跳轉(zhuǎn)頁面后，包含靜態(tài)圖像、聲音、視頻和各種信息的卡片廣告充滿屏幕，促使你購買這些付費(fèi)應(yīng)用。
從用戶體驗(yàn)來看，廣告與整體界面的和諧度比較高。雖然這樣廣告會(huì)占滿屏幕，但并不會(huì)給用戶造成太多困擾，因?yàn)槟銉H僅在屏幕卡片頂端疊加了廣告卡片，你可以關(guān)閉或者忽略它。
卡片幫助用戶快速瀏覽信息，用視覺風(fēng)格一致的廣告提供直接的商業(yè)價(jià)值。
卡片是可容納幾乎任何內(nèi)容的設(shè)計(jì)“容器”。 卡片可以承載不同類型的內(nèi)容，因而成為內(nèi)容型網(wǎng)站和APP的完美容器——這種通用的框架不會(huì)拒絕任何內(nèi)容。
（Photo credit: Card Star）
卡片的元素可以包含：
? 照片
? 文本
? 視頻
? 優(yōu)惠券
? 音樂
? 付款信息
? 注冊(cè)或表單
? 游戲數(shù)據(jù)
? 社交媒體流或分享
? 獎(jiǎng)勵(lì)信息
? 鏈接
? 以上元素的組合
用卡片承載內(nèi)容信息層次簡(jiǎn)單易懂，讓用戶易于瀏覽滑動(dòng)。典型布局中的卡片，就像上文舉例的Card Star，屏幕中每張卡片地位相等，不存在一個(gè)卡片主導(dǎo)其他的情況。多張卡片井然有序排列，用戶自主選擇他們想點(diǎn)擊的卡片進(jìn)行操作。
卡片最適宜拇指操作。這聽起來非常原始，對(duì)不對(duì)？但這卻是移動(dòng)端卡片設(shè)計(jì)流行和易用的最重要原因。
用戶認(rèn)為卡片簡(jiǎn)單易懂的原因在于數(shù)字界面卡片來源于實(shí)物卡片。想想你如何玩撲克牌，你可以堆疊、展開、翻轉(zhuǎn)、折疊它們，并把他們放在另一個(gè)容器里。 數(shù)字卡片具有同樣行為方式，用戶不必考慮事情如何發(fā)生，自然而然的創(chuàng)建舒適的用戶體驗(yàn)。
在數(shù)字領(lǐng)域的應(yīng)用程序中，卡片式設(shè)計(jì)提升了操作行為體驗(yàn)。這個(gè)隱喻實(shí)現(xiàn)了現(xiàn)實(shí)和虛擬的無縫銜接。
（Photo credit: Tumblr ——left， Google Now ——right）
根據(jù)UI設(shè)計(jì)師Chris Tse的關(guān)于卡片的演講所說，當(dāng)用戶與卡片進(jìn)行交互時(shí)，可以分成幾種行為模式。卡片通常會(huì)做三件事：記錄信息、用信息吸引用戶或提醒用戶信息。根據(jù)卡片內(nèi)容元素，將卡片進(jìn)一步細(xì)化為不同類型容器：
敘述：卡片以瀑布流形式出現(xiàn)，同時(shí)創(chuàng)建事件發(fā)展的時(shí)間軸。
想想Medium如何使用卡片快速瀏覽，然后采用線性流程交付故事的細(xì)節(jié)。
（Photo credit: Medium）
發(fā)現(xiàn)：卡片能讓相關(guān)內(nèi)容自然地呈現(xiàn)出來。
采用網(wǎng)格或瀑布流布局時(shí)，使用淡入效果展現(xiàn)卡片，會(huì)讓用戶覺得好玩和身在其中?？纯聪旅鍿potify的卡片模式：當(dāng)你向左或向右滑動(dòng)，展現(xiàn)符合你口味的歌曲。
（Photo credit: Spotify Android App）
（Photo credit: Spotify Android App）
對(duì)話：由于卡片是相對(duì)獨(dú)立的，他們能夠完美展示正在進(jìn)行的對(duì)話。
在下面的WeChat示例中，請(qǐng)注意界面如何使用接近性原則創(chuàng)建卡片，靠得非常近的用戶頭像和文本自然地形成了一張張卡片。這兩個(gè)元素并沒有相連，但通過物體間的相對(duì)距離，我們認(rèn)為互相靠近的兩個(gè)元素看起來屬于一組。
（ Photo credit: WeChat）
工作流：卡片可以將待辦事項(xiàng)快速歸類。
例如，用Evernote你可以創(chuàng)建不同筆記或待辦事項(xiàng)的卡片。當(dāng)你刪除它們時(shí)，剩余的卡片按照初始順序重新排列。
（Photo credit: Evernote）
現(xiàn)在，讓我們從多設(shè)備視角考慮卡片。在應(yīng)用中，卡片作為承載內(nèi)容的容器存在，不同用戶可以在其他應(yīng)用、設(shè)備上瀏覽查看。回想一下AirDrop的示例中，用戶之間可以傳輸信息卡片。
就像現(xiàn)實(shí)世界中的卡片一樣，對(duì)設(shè)計(jì)師和用戶而言，卡片很容易組織。當(dāng)你設(shè)計(jì)卡片時(shí)，需要做一些重要的決定：卡片用什么尺寸合適？你希望營造哪種視覺風(fēng)格？
說到容器尺寸，通用的幾個(gè)選擇有：小尺寸、摘要形式的卡片；中等尺寸的卡片（在屏幕中占有相當(dāng)一部分面積或者允許在一屏內(nèi)展現(xiàn)多張卡片）；全屏卡片；疊在其他界面元素之上的彈出式卡片。
（Photo credit: Yahoo! Fantasy）
Yahoo! Fantasy應(yīng)用中，幾種卡片形式都有。首屏展現(xiàn)球員名單，每個(gè)球員的名字是一張小卡。點(diǎn)擊人名會(huì)彈出一張幾乎全屏大小的卡片，這張新卡上有詳盡的球員信息。切換到新聞流標(biāo)簽頁可以看到全屏的卡片流，在這里用戶能看到他關(guān)心的聯(lián)盟或球隊(duì)的最新頭條。
這些不同的卡片方便的讓用戶了解他們?cè)陂喿x什么類型的內(nèi)容、他們正處于應(yīng)用中的什么位置。舉個(gè)例子，彈出式卡片可被理解為額外信息，比如之前提到的詳細(xì)球員信息卡。
（Photo credit: CNN）
卡片在視覺美觀度上也在進(jìn)化。盡管總體趨勢(shì)是在減少視覺“噱頭”，理解設(shè)計(jì)的演化過程以及為什么一些設(shè)計(jì)模式一直存活下來，依然非常重要。
瀑布流的形式起源于Pinterest，現(xiàn)在仍非常流行，但這種形式通常在視覺上缺乏辨識(shí)度。
（Photo credit: Pinterest）
微軟的Metro風(fēng)格、扁平化卡片是最早針對(duì)APP和移動(dòng)設(shè)備的設(shè)計(jì)嘗試之一。Metro風(fēng)格現(xiàn)在并不常見了，但扁平化這一趨勢(shì)繼續(xù)發(fā)揚(yáng)光大，并演化成為一種受歡迎的卡片樣式。
（Photo credit: Order Ahead）
宮格是一種有效的經(jīng)典布局，卡片被整齊封裝在容器中，這樣保證了很大的靈活性。
（Photo credit: Hotel Tonight）
雜志風(fēng)格卡片開始在更多應(yīng)用中涌現(xiàn)，尤其在新聞網(wǎng)站或需要展現(xiàn)大量文本的應(yīng)用中。Flipboard、CNN和Newsify都使用這種風(fēng)格。
（Photo credit: Flipboard）
最后，能讓卡片真正行之有效的，是良好的設(shè)計(jì)和可用性。由于卡片式設(shè)計(jì)能夠承載各種類型的內(nèi)容，你需要精通從色彩到圖像應(yīng)用等方方面面內(nèi)容。在規(guī)劃和設(shè)計(jì)這種類型界面時(shí)，設(shè)計(jì)理論就是你最好的朋友。
UX設(shè)計(jì)師Erik D. Kennedy在一篇超贊的文章中以實(shí)用的方式詳解了設(shè)計(jì)理論基礎(chǔ)。以下是我們認(rèn)為最適用于卡片設(shè)計(jì)模式的原則：
了解光影特性。
仔細(xì)考慮如何利用陰影和漸變讓元素感覺“像真的一樣”，這在卡片設(shè)計(jì)中尤為重要。如果陰影投在所有邊和角上，那可就把卡片載體的物理感毀了。
確保UI在黑白灰單色調(diào)中也能看清。
首先在沒顏色的條件下開展設(shè)計(jì)，這樣會(huì)讓你聚焦在最重要的東西上——可用性和內(nèi)容本身。按Kennedy所述，你應(yīng)該最后一步增添顏色，并且是有意識(shí)有目的地增加。
慷慨地留白。
先給卡片一些空間呼吸，然后慢慢縮小。正如我們?cè)凇毒W(wǎng)頁設(shè)計(jì)留白之禪》一書中所描述的，在組織和分隔元素時(shí)，留白是設(shè)計(jì)師的利器。
掌握疊加文本的技巧。
這可能稍微有點(diǎn)棘手。一定要選用清晰銳利的圖片作為背景。為了讓文本看起來足夠清楚，你可以在文本下使用深色蒙層、把文本放在一個(gè)框里、或者把背景作模糊處理。
了解如何利用文字排版創(chuàng)造對(duì)比。
利用大號(hào)粗體和小號(hào)稍細(xì)文本的對(duì)比吸引用戶的注意力。卡片設(shè)計(jì)中，簡(jiǎn)單的文字排版效果通常最好，比如使用一組無襯線字體，在卡片標(biāo)題使用粗體、卡片正文使用常規(guī)體。
通過給卡片一些美感上的潤色，你的卡片會(huì)看上去既熟悉又富有創(chuàng)意。諸如陰影之類的元素，在很大程度上能幫助用戶聯(lián)想到實(shí)體卡片。
你可能能感受到卡片式設(shè)計(jì)越來越受歡迎，而且這一趨勢(shì)并不會(huì)很快終結(jié)。這意味著會(huì)有更多卡片風(fēng)格的應(yīng)用和界面，包括使用更多的層級(jí)化卡片的設(shè)計(jì)、長得不那么像卡的卡片、扁平化卡片的復(fù)興、重內(nèi)容型網(wǎng)站大量使用卡片設(shè)計(jì)等等。
Material Design特色的層級(jí)化卡片設(shè)計(jì)將作為主力撲面而來。層級(jí)化會(huì)以兩種形式出現(xiàn)：
分層作為精巧的容器分隔元素，比如陰影元素，能夠把卡片從背景中分離出來。
分層使得卡片元素可堆疊，這樣用戶可以一張張翻過去，而不是傳統(tǒng)地滾動(dòng)。
（Photo credit: Google Maps）
Google Maps利用層級(jí)化的卡片幫助用戶瀏覽。在上面左圖的示例中，有一張展現(xiàn)位置的底圖，界面上下分別有一張卡片：頂部的卡片標(biāo)示出當(dāng)前的地理位置，底部的卡片通過向上滑動(dòng)，覆蓋于底圖之上，展開承載這一位置的詳細(xì)信息（右圖）。
設(shè)計(jì)師還會(huì)尋求一些新方式讓卡片變得不那么像卡片。較常見的視覺模式是：一張大圖或視頻縮略圖，緊跟著是標(biāo)題和摘要，把這些作為一個(gè)整體的大卡片。
（Photo credit: Shazam）
卡片式設(shè)計(jì)很有可能會(huì)吸納其它的設(shè)計(jì)趨勢(shì)而演化，如使用英雄頭圖或在圖像上增加按鈕。
卡片的輪廓和框架會(huì)保留，設(shè)計(jì)卻會(huì)不斷變化，特別是大卡片的設(shè)計(jì)。一些應(yīng)用已經(jīng)開始這樣做了，比如上圖示例的Shazam，把卡片與其它元素（如文本和按鈕）在同一容器中堆疊。這樣設(shè)計(jì)很潮，同時(shí)可用性也很好。
扁平化設(shè)計(jì)從未過時(shí)，這種風(fēng)格的演化持續(xù)影響著卡片設(shè)計(jì)。扁平化風(fēng)格的卡片將使用大量色彩、流線型的文字排版、精巧的設(shè)計(jì)來幫助用戶瀏覽內(nèi)容。
7-Minute Workout應(yīng)用就具備這種特色，它用一行行彩色卡片來展現(xiàn)。每張小卡都可以展開成一張大卡，承載涵蓋圖片、文字、視頻的運(yùn)動(dòng)練習(xí)指導(dǎo)。
（Photo credit: The 7-Minute Workout）
更多的內(nèi)容導(dǎo)向型網(wǎng)站可能會(huì)遷移到卡片風(fēng)格的界面。這是目前組織大量內(nèi)容的最好方式。這種封裝方式幾乎是“類報(bào)紙的”，每條內(nèi)容都呈現(xiàn)在一個(gè)小格子里，隨時(shí)可供用戶瀏覽查看。
（Photo credit: Facebook）
Facebook仍是內(nèi)容驅(qū)動(dòng)型卡片設(shè)計(jì)的優(yōu)秀案例，并將繼續(xù)引領(lǐng)更多基于新聞和博客的功能設(shè)計(jì)。作為人們獲取大量信息內(nèi)容的主要平臺(tái)之一，不出意外地，他們的卡片風(fēng)格界面和模式會(huì)鼓勵(lì)其它產(chǎn)品跟隨。
最后，卡片化趨勢(shì)會(huì)保持下去，并繼續(xù)成為移動(dòng)應(yīng)用的經(jīng)典設(shè)計(jì)模型。訣竅在于，在通用設(shè)計(jì)語言基礎(chǔ)上開始尋求更有趣的方式，來把卡片融合到應(yīng)用中去。
以下是干貨：資源和工具
1. CardStack Open Source Embeddable Card Runtime
2. “The Complete Guide to an Effective Card-Style Interface Design”by Design Shack
3. Google Material Design: Cards
4. “Card Architecture and Card Design” by Taylor Davidson
5. Card User Interfaces Gallery by Khoi Vinh on Pinterest
6. “7 Rules for Creating Gorgeous UI” by Erik D. Kennedy
7. Case Study: How The Guardian Uses the Container Model and Cards
8. Mobile Interface Design Patterns
9. “How Cards Are Taking Over Web Design” by Jerry Cao for The Next Web
Via：Mobile Design Book of Trends 2015&2016
譯文僅作學(xué)習(xí)用途，如有其它用途請(qǐng)聯(lián)系原作者。譯文轉(zhuǎn)載請(qǐng)注明：本文來自MUX原創(chuàng)翻譯，雷鋒網(wǎng)發(fā)布，譯文作者：MUX翻譯小組。
Keep calm and be awesome.
雷峰網(wǎng)原創(chuàng)文章，未經(jīng)授權(quán)禁止轉(zhuǎn)載。詳情見轉(zhuǎn)載須知。
