【編者按】文章來自百度MUX翻譯小組，應作者要求，如文章已獲雷鋒網授權轉載，也請保留原標題。
Facebook仍是內容驅動型卡片設計的優秀案例，並將繼續引領更多基於新聞和博客的功能設計。
譯者註：本文譯自UXPin出品的電子書Mobile Design Book of Trends 2015&2016的第六章Bite-Sized Cards。這本電子書結合豐富案例講述了2015-2016年間重要的移動設計趨勢，共含6章節：靈巧的手勢操作、層級化的移動界面、雋永的字體排印、扁平化設計、愉悅的微交互、小卡片。本文將來分享小卡片設計。註：以下圖片全部來自UXPin。
對於APP設計，2015儼然是卡片設計年。從網站到移動應用，不同屏幕尺寸的卡片無處不在，卡片展現形式與實物相似。通過手指滑動，用戶可以輕鬆地在卡片容器中翻閱。
（Photo credit: Trello）
無論你是否意識到這一點，卡片會長期存在下去。
坦白說，卡片式風格似乎只是為APP而生。你無法想像現在有多少APP正在使用卡片式設計。讓我們做一個小實驗：拿起你的手機，打開你看到的前10個應用，有多少用了卡片設計呢？
我們已經知道卡片式設計統治了移動端，接下來讓我們深入了解如何實際使用它們吧。
卡片式布局將信息分布在一系列矩形卡片容器中，如圖像、文本、按鈕、連結等。這些卡片可以分層或移動，並依據屏幕尺寸自適應適配，如果你將手機橫豎屏切換，卡片將堆疊降落為新的卡片隊列。
卡片是整齊的信息容器。正如電子書《Web UI現狀和未來趨勢：卡片設計模式》中所言，最好把每個卡片視為單一的想法或基本動作。
（Photo credit: Apple AirDrop）
讓我們來看看蘋果設備上常見的AirDrop功能。當有數據傳入時，一個卡片式通知會彈出，你可以選擇接受或拒絕傳輸數據。無論是手機、平板電腦或筆記本電腦，雲傳輸功能均以同樣的交互模式實現，這意味著用戶很容易對操作行為有一定預期，知道如何使用。
雖然卡片最近才流行開來，這個設計倒並不新。Pinterest奠定了卡片作為主要設計模式的地位，而很多其他公司緊隨其後實踐卡片設計。
（Photo credit: Tinder）
卡片式設計越來越流行的原因之一，在於它與手機屏幕的兼容性。根據屏幕尺寸自適應卡片大小，與大多數移動用戶場景都完美匹配，而矩形的審美也符合UI設計。
細想卡片的設計，它幾乎完美適配了手機屏幕的大小和形狀。由於存在多種不同型號的屏幕尺寸，所以這裡的卡片尺寸並不是一個精確的數值，而是一個極具代表性的長寬比。
卡片式設計的精髓在於桌面端和行動裝置的交集設計，在互動性和可用性之間尋求平衡點。正如我們在《移動界面模式》中首次描述過的，跨越不同的設備，卡片式設計創建了一個更為一致的體驗。在響應式設計中尤其是這樣，卡片作為「內容容器」可以輕鬆地放大縮小（像重新堆疊擺放箱子一樣）。
對於卡片，它們普遍有2種用途：作為界面或作為界面流的中斷（通常以廣告的形式）。
1. 卡片作為界面
有時你甚至看不到卡片的設計形態，因為它們和屏幕完美重合。但如果你仔細看，仍然可以識別出它採用卡片式設計。
卡片式界面通常整體作為一個可觸元素。無論點擊或滑動屏幕上任意位置，都可進行操作。在遊戲界面中應用卡片式設計也是一個亮點。
（Photo credit: Trivia Crack）
以流行的Trivia Crack舉例，主屏幕用一系列的卡片承載每場比賽和對手信息，它還巧妙的嵌入了一個卡片廣告。某種程度上，這些卡片提升了遊戲的境界層次。採用卡片堆疊的方式，讓遊戲容易使用和理解。
2. 卡片作為界面流的中斷
卡片式設計也經常以向下滑動覆蓋屏幕的方式，用於移動端或APP內廣告。與界面式卡片不同的是，這些卡片包含兩種連結——強連結和弱連結。點擊強連結跳轉產品廣告頁。點擊弱連結返回上一個界面，一般來說弱連結很難被點擊。
（Photo credit: Trivia Crack in-app advertising）
讓我們以Trivia Crack為例。跳轉頁面後，包含靜態圖像、聲音、視頻和各種信息的卡片廣告充滿屏幕，促使你購買這些付費應用。
從用戶體驗來看，廣告與整體界面的和諧度比較高。雖然這樣廣告會佔滿屏幕，但並不會給用戶造成太多困擾，因為你僅僅在屏幕卡片頂端疊加了廣告卡片，你可以關閉或者忽略它。
卡片幫助用戶快速瀏覽信息，用視覺風格一致的廣告提供直接的商業價值。
卡片是可容納幾乎任何內容的設計「容器」。 卡片可以承載不同類型的內容，因而成為內容型網站和APP的完美容器——這種通用的框架不會拒絕任何內容。
（Photo credit: Card Star）
卡片的元素可以包含：
• 照片
• 文本
• 視頻
• 優惠券
• 音樂
• 付款信息
• 註冊或表單
• 遊戲數據
• 社交媒體流或分享
• 獎勵信息
• 連結
• 以上元素的組合
用卡片承載內容信息層次簡單易懂，讓用戶易於瀏覽滑動。典型布局中的卡片，就像上文舉例的Card Star，屏幕中每張卡片地位相等，不存在一個卡片主導其他的情況。多張卡片井然有序排列，用戶自主選擇他們想點擊的卡片進行操作。
卡片最適宜拇指操作。這聽起來非常原始，對不對？但這卻是移動端卡片設計流行和易用的最重要原因。
用戶認為卡片簡單易懂的原因在於數字界面卡片來源於實物卡片。想想你如何玩撲克牌，你可以堆疊、展開、翻轉、摺疊它們，並把他們放在另一個容器裡。 數字卡片具有同樣行為方式，用戶不必考慮事情如何發生，自然而然的創建舒適的用戶體驗。
在數字領域的應用程式中，卡片式設計提升了操作行為體驗。這個隱喻實現了現實和虛擬的無縫銜接。
（Photo credit: Tumblr ——left， Google Now ——right）
根據UI設計師Chris Tse的關於卡片的演講所說，當用戶與卡片進行交互時，可以分成幾種行為模式。卡片通常會做三件事：記錄信息、用信息吸引用戶或提醒用戶信息。根據卡片內容元素，將卡片進一步細化為不同類型容器：
想想Medium如何使用卡片快速瀏覽，然後採用線性流程交付故事的細節。
（Photo credit: Medium）
採用網格或瀑布流布局時，使用淡入效果展現卡片，會讓用戶覺得好玩和身在其中。看看下面Spotify的卡片模式：當你向左或向右滑動，展現符合你口味的歌曲。
（Photo credit: Spotify Android App）
（Photo credit: Spotify Android App）
在下面的WeChat示例中，請注意界面如何使用接近性原則創建卡片，靠得非常近的用戶頭像和文本自然地形成了一張張卡片。這兩個元素並沒有相連，但通過物體間的相對距離，我們認為互相靠近的兩個元素看起來屬於一組。
（ Photo credit: WeChat）
例如，用Evernote你可以創建不同筆記或待辦事項的卡片。當你刪除它們時，剩餘的卡片按照初始順序重新排列。
（Photo credit: Evernote）
現在，讓我們從多設備視角考慮卡片。在應用中，卡片作為承載內容的容器存在，不同用戶可以在其他應用、設備上瀏覽查看。回想一下AirDrop的示例中，用戶之間可以傳輸信息卡片。
就像現實世界中的卡片一樣，對設計師和用戶而言，卡片很容易組織。當你設計卡片時，需要做一些重要的決定：卡片用什麼尺寸合適？你希望營造哪種視覺風格？
說到容器尺寸，通用的幾個選擇有：小尺寸、摘要形式的卡片；中等尺寸的卡片（在屏幕中佔有相當一部分面積或者允許在一屏內展現多張卡片）；全屏卡片；疊在其他界面元素之上的彈出式卡片。
（Photo credit: Yahoo! Fantasy）
Yahoo! Fantasy應用中，幾種卡片形式都有。首屏展現球員名單，每個球員的名字是一張小卡。點擊人名會彈出一張幾乎全屏大小的卡片，這張新卡上有詳盡的球員信息。切換到新聞流標籤頁可以看到全屏的卡片流，在這裡用戶能看到他關心的聯盟或球隊的最新頭條。
這些不同的卡片方便的讓用戶了解他們在閱讀什麼類型的內容、他們正處於應用中的什麼位置。舉個例子，彈出式卡片可被理解為額外信息，比如之前提到的詳細球員信息卡。
（Photo credit: CNN）
卡片在視覺美觀度上也在進化。儘管總體趨勢是在減少視覺「噱頭」，理解設計的演化過程以及為什麼一些設計模式一直存活下來，依然非常重要。
（Photo credit: Pinterest）
（Photo credit: Order Ahead）
（Photo credit: Hotel Tonight）
（Photo credit: Flipboard）
最後，能讓卡片真正行之有效的，是良好的設計和可用性。由於卡片式設計能夠承載各種類型的內容，你需要精通從色彩到圖像應用等方方面面內容。在規劃和設計這種類型界面時，設計理論就是你最好的朋友。
UX設計師Erik D. Kennedy在一篇超讚的文章中以實用的方式詳解了設計理論基礎。以下是我們認為最適用於卡片設計模式的原則：
仔細考慮如何利用陰影和漸變讓元素感覺「像真的一樣」，這在卡片設計中尤為重要。如果陰影投在所有邊和角上，那可就把卡片載體的物理感毀了。
首先在沒顏色的條件下開展設計，這樣會讓你聚焦在最重要的東西上——可用性和內容本身。按Kennedy所述，你應該最後一步增添顏色，並且是有意識有目的地增加。
先給卡片一些空間呼吸，然後慢慢縮小。正如我們在《網頁設計留白之禪》一書中所描述的，在組織和分隔元素時，留白是設計師的利器。
這可能稍微有點棘手。一定要選用清晰銳利的圖片作為背景。為了讓文本看起來足夠清楚，你可以在文本下使用深色蒙層、把文本放在一個框裡、或者把背景作模糊處理。
利用大號粗體和小號稍細文本的對比吸引用戶的注意力。卡片設計中，簡單的文字排版效果通常最好，比如使用一組無襯線字體，在卡片標題使用粗體、卡片正文使用常規體。
通過給卡片一些美感上的潤色，你的卡片會看上去既熟悉又富有創意。諸如陰影之類的元素，在很大程度上能幫助用戶聯想到實體卡片。
你可能能感受到卡片式設計越來越受歡迎，而且這一趨勢並不會很快終結。這意味著會有更多卡片風格的應用和界面，包括使用更多的層級化卡片的設計、長得不那麼像卡的卡片、扁平化卡片的復興、重內容型網站大量使用卡片設計等等。
Material Design特色的層級化卡片設計將作為主力撲面而來。層級化會以兩種形式出現：
（Photo credit: Google Maps）
Google Maps利用層級化的卡片幫助用戶瀏覽。在上面左圖的示例中，有一張展現位置的底圖，界面上下分別有一張卡片：頂部的卡片標示出當前的地理位置，底部的卡片通過向上滑動，覆蓋於底圖之上，展開承載這一位置的詳細信息（右圖）。
設計師還會尋求一些新方式讓卡片變得不那麼像卡片。較常見的視覺模式是：一張大圖或視頻縮略圖，緊跟著是標題和摘要，把這些作為一個整體的大卡片。
（Photo credit: Shazam）
卡片式設計很有可能會吸納其它的設計趨勢而演化，如使用英雄頭圖或在圖像上增加按鈕。
卡片的輪廓和框架會保留，設計卻會不斷變化，特別是大卡片的設計。一些應用已經開始這樣做了，比如上圖示例的Shazam，把卡片與其它元素（如文本和按鈕）在同一容器中堆疊。這樣設計很潮，同時可用性也很好。
扁平化設計從未過時，這種風格的演化持續影響著卡片設計。扁平化風格的卡片將使用大量色彩、流線型的文字排版、精巧的設計來幫助用戶瀏覽內容。
7-Minute Workout應用就具備這種特色，它用一行行彩色卡片來展現。每張小卡都可以展開成一張大卡，承載涵蓋圖片、文字、視頻的運動練習指導。
（Photo credit: The 7-Minute Workout）
更多的內容導向型網站可能會遷移到卡片風格的界面。這是目前組織大量內容的最好方式。這種封裝方式幾乎是「類報紙的」，每條內容都呈現在一個小格子裡，隨時可供用戶瀏覽查看。
（Photo credit: Facebook）
Facebook仍是內容驅動型卡片設計的優秀案例，並將繼續引領更多基於新聞和博客的功能設計。作為人們獲取大量信息內容的主要平臺之一，不出意外地，他們的卡片風格界面和模式會鼓勵其它產品跟隨。
最後，卡片化趨勢會保持下去，並繼續成為移動應用的經典設計模型。訣竅在於，在通用設計語言基礎上開始尋求更有趣的方式，來把卡片融合到應用中去。
以下是乾貨：資源和工具
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
10. Boring Cards Free UI Kit
Via：Mobile Design Book of Trends 2015&2016
譯文僅作學習用途，如有其它用途請聯繫原作者。譯文轉載請註明：本文來自MUX原創翻譯，雷鋒網(公眾號：雷鋒網)發布，譯文作者：MUX翻譯小組。
Keep calm and be awesome.
雷鋒網原創文章，未經授權禁止轉載。詳情見轉載須知。