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