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）
卡片在視覺美觀度上也在進化。儘管總體趨勢是在減少視覺“噱頭”，理解設計的演化過程以及為什麼一些設計模式一直存活下來，依然非常重要。
- 瀑布流的形式起源於Pinterest，現在仍非常流行，但這種形式通常在視覺上缺乏辨識度。
（Photo credit: Pinterest）
- 微軟的Metro風格、扁平化卡片是最早針對APP和移動設備的設計嘗試之一。Metro風格現在並不常見了，但扁平化這一趨勢繼續發揚光大，並演化成為一種受歡迎的卡片樣式。
（Photo credit: Order Ahead）
- 宮格是一種有效的經典佈局，卡片被整齊封裝在容器中，這樣保證了很大的靈活性。
（Photo credit: Hotel Tonight）
- 雜誌風格卡片開始在更多應用中湧現，尤其在新聞網站或需要展現大量文本的應用中。Flipboard、CNN和Newsify都使用這種風格。
（Photo credit: Flipboard）
從美學角度來思考
最後，能讓卡片真正行之有效的，是良好的設計和可用性。由於卡片式設計能夠承載各種類型的內容，你需要精通從色彩到圖像應用等方方面面內容。在規劃和設計這種類型介面時，設計理論就是你最好的朋友。
UX設計師Erik D. Kennedy在一篇超贊的文章中以實用的方式詳解了設計理論基礎。以下是我們認為最適用於卡片設計模式的原則：
- 瞭解光影特性。
仔細考慮如何利用陰影和漸變讓元素感覺“像真的一樣”，這在卡片設計中尤為重要。如果陰影投在所有邊和角上，那可就把卡片載體的物理感毀了。
- 確保UI在黑白灰單色調中也能看清。
首先在沒顏色的條件下開展設計，這樣會讓你聚焦在最重要的東西上——可用性和內容本身。按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仍是內容驅動型卡片設計的優秀案例，並將繼續引領更多基於新聞和部落格的功能設計。作為人們獲取大量資訊內容的主要平臺之一，不出意外地，他們的卡片風格介面和模式會鼓勵其它產品跟隨。
最後，卡片化趨勢會保持下去，並繼續成為行動應用的經典設計模型。訣竅在於，在通用設計語言基礎上開始尋求更有趣的方式，來把卡片融合到應用中去。
以下是乾貨：資源和工具
譯文僅作學習用途，如有其它用途請聯繫原作者。譯文轉載請注明：本文來自MUX原創翻譯，雷鋒網發佈，譯文作者：MUX翻譯小組。
Keep calm and be
awesome.
0 comments:
張貼留言