在本文中，我將闡述卡片設計對UI設計師意味著什麼，評價三個流行的卡片式服務。
網頁和手機應用正徹底地從頁面轉向個性化體驗，這些新的體驗建立在許多單個內容的聚合上，而這些內容目前以卡的形式來呈現。卡片式的交互方式正在廣泛傳播，無論是新聞網站或是外賣應用，你都可以看到幾乎無處不在的「電子卡片」。
如果你對設計自己的卡片式用戶界面感興趣，可以免費下載並體驗Adobe的Experience Design CC。
卡片是什麼？卡片通常是指那些包含一定圖片和文本信息在內的長方形，作為查看更多詳細信息的一個入口。因為看起來如同真實世界中的卡片一樣，在界面設計中的卡片具有非常棒的隱喻效果。
早在網際網路和行動裝置出現之前，卡片就在我們身邊無處不在了——商業名片、棒球卡片，甚至便利貼。 因此，對於用戶來講，我們能更直觀地意識到這些卡片就像在現實生活中一樣代表著一定的信息。
棒球卡片是現實生活中一個很好的例子：你想知道的棒球運動員的基本信息都包含在一張小卡片的正反面。
卡片的優點卡片式設計可以應用於各種環境，正確運用的話它們可以改善APP的用戶體驗。 以下是一些例子，說明為什麼卡片有益於你的用戶界面。
良好的內容組織卡片在佔用較少屏幕空間的情況下將信息有組織的劃分到不同的區域中。用戶喜歡信息分塊，因為它有助於快速瀏覽：它可以讓用戶避免閱讀讓他們覺得恐懼和費時的超長段落，讓用戶更快地抓住其感興趣的部分。類似於文本段落是對語句的組織結果，卡片聚集多樣的信息形成一個連貫的內容體。
卡片上的信息布局整齊簡練。
摘要性的格式易於消化卡片幾乎可以被用來容納任何形式的信息，其摘要性的信息屬性也易於用戶快速消化。用戶通過卡片可以很容易地訪問到他們感興趣的內容。進而讓用戶願意參與到對卡片的瀏覽和操作中來。
用戶可以快速瀏覽、滑動卡片。
視覺上賞心悅目基於卡片式的設計通常都嚴重依賴於其視覺效果。而卡片本身又對圖片有很強的依賴性。多項研究都已經指出圖片確實能夠提升網站或應用程式的設計效果和瀏覽體驗，因為圖片能夠快速有效地吸引用戶的注意力。因此，在卡片中如果能突出使用圖片，那自然會對用戶產生更強的吸引力。
卡片以視覺信息取悅用戶。
易於響應式的設計關於卡片最重要的事情是它們幾乎是可以無限變形的。卡片式的設計在桌面電腦和行動裝置都工作良好，因為它以更易於用戶消化的方式向其呈現內容。正因為卡片作為一個內容容器，能很容易的放大或縮小，所以對於響應式的設計來說，卡片是一個非常合適的選擇。卡片在多設備間能創造出一個一致獨立的美學效果，這就是為什麼它能在不同設備間如此容易的創建出一致體驗的原因。
卡片非常適合響應式和移動端設計。
為手指而設計卡片完全適合手指操作，看起來似乎也是專為移動端所創造的樣式。數字卡片的使用和現實中的卡片一樣，為用戶提供了舒適的體驗。用戶無需思考如何操作，很容易理解翻轉卡片查看更多信息或滑動查看更多卡片。
卡片幾乎是無限可操作的：他們可以充分利用動畫和運動。（動圖）
卡片式設計的最佳案例卡片式設計的精髓在於桌面端和行動裝置的交集設計，在互動性和可用性之間尋求平衡點。然而成功的卡片式設計需要具備清爽乾淨的美學特徵，並且能讓用戶直接輕鬆地交互。
瀑布流卡片出現在一個瀑布流中時，便能夠創建出一系列符合自然時間軸的事件。例如Facebook在news feed中呈現最近時間段內容的快速預覽。Facebook的news feed是以卡片區分內容的無止境的瀑布流。卡片在這裡的關鍵是分解內容，它們將內容分離成無止境的瀑布流，並使內容易於分享。這種交互模式促使用戶樂於分享平臺的信息。
Facebook是卡片式設計易於承載信息的很好案例。
易於發現感興趣的內容卡片可以使相關內容自然展示，讓用戶挖掘自己感興趣的內容，設計師無不知曉的設計創意平臺Behance就是這麼做的。卡片式設計是最適合藝術創意類平臺展示的方式。
Behance採用卡片式布局打造直觀的用戶界面。
Tinder是國外的一款手機交友APP，它的卡片模式利用探索發現的機制，讓用戶習慣去探索更多內容，從而使Tinder成為最流行的移動端應用之一。Tinder的交互模式很簡單：向左滑動表示不感興趣，向右滑動表示感興趣。這種卡片式交互模式令人好奇又上癮，因為用戶不得不繼續滑動看看下一個到底怎麼樣。
工作流卡片很容易將一定範圍內的任務進行歸類。Trello這個任務管理應用就做得很好：工作板是卡片式的模塊，每個卡片代表了不同類型的任務。
Trello的工作板上充滿了卡片。
對話框卡片是內容的承載器，因此對於展現操作行為也是很適合的。參考iOS本身的AirDrop服務，當你接收到信賴的數據傳輸請求時，桌面會彈出提示卡片，請求你接受或拒絕傳輸。蘋果的截圖針對於照片，但開發者可以把優惠券、歌曲或是網絡連接等的任何東西放在卡片上。
控制面板當卡片式設計用來組織不同類型的內容時，它的精確度極高。使用卡片，你可以將信息組織成符合邏輯的分組，並可以根據特定的上下文進行排序。對於一個需要分組的集合而言, 合理利用不同類型的卡片比起傳統列表項 + 分割線 + 標題的視覺效率要高太多。
基於卡片的設計語言2010年，微軟推出了Metro設計語言。Metro的一個關鍵設計原則是更好的關注應用的內容，而這是通過採用扁平化元素、排版和卡片來實現的。一個Metro卡片不僅僅是單純的設計元素，它還提供了必要的內容與交互。
卡片設計的更多細節簡約當你準備設計卡片時，簡約應當是你始終牢記的一個準則。Carrie Cousins對此有一個很好的建議：卡片可以在設計中包含多個元素，但是最好每次都突出其中的一個內容或信息。這樣設計能使用戶選擇起來更精準，也使得內容得以分享。
ReaLync的列表是卡片形式，以此來顯示最重要的地方信息。
卡片和響應式設計我們都知道響應式設計的重要性，要讓自己的應用和頁面在不同尺寸的屏幕上運行自如。當我們為不同屏幕設計時，應當充分利用屏幕特徵和卡片裡的內容屬性，這樣才能根據屏幕的大小快速、輕鬆地調整內容。卡片式設計與響應式框架兼容性良好，它可以輕鬆適應不同的屏幕尺寸，自適應地進行展示。
數位化後的卡片可以以不同的方式進行操控，這是其一大優勢。例如在行動裝置上，卡片可以橫向或縱向排列。
手機端豎屏的Verge
電腦端的Verge
同一個布局下，卡片通常限制寬度，但不限制高度。最大高度限制於展示平臺的可視空間高度，但有時也是可以擴展的。
卡片和排版關於卡片設計的一切都應易於閱讀和理解。設計師應當視可讀性為重要目標：
選擇簡單且易於辨別的字體，以及對比度良好的配色方案（純色背景上的文本要與背景有足夠的對比度，保證文本清晰可見）。嘗試控制字體數量，對於大多數卡片，一種字體就足夠了。結語希望你能了解為什麼卡片式設計變得如此流行，並且相信這個趨勢也會長盛不衰。這種趨勢不會那麼快結束，卡片式設計將會是APP設計的大勢所趨。卡片式設計的極佳可用性是其經久不衰的原因。卡片並不只是徒有外表，它是設計統一體驗的最自由的布局形式。如今人們獲取信息速度越來越快，卡片能忽略設備的差異給用戶提供更好的服務。這也是以用戶體驗為中心的設計。
原文作者：Nick Babich
原文地址：https://www.smashingmagazine.com/2016/10/designing-card-based-user-interfaces/
翻譯：ued_ui
譯文地址：攜程設計委員會
收藏已收藏 | {{ postmeta.bookmark }} 點讚已贊 | {{ postmeta.postlike }}