編按：卡片式設計 有哪些精采案例？ Material Design 目前有哪些應用？在未來，可應用的設計範疇除了網頁以外，還可延伸至哪些領域？在《 卡片式設計 大未來Part2》將一一說明，並在最後提供幾個相關資源與工具供各位參考。
當你開始進行 卡片式設計，你得設法在小小的螢幕內放進各種元素。應用合適的顏色、風格、間距，讓一切看起來很和諧。此外，別忘了卡片的大小和範圍。雖然有些設計可容許過大的卡片設計，但多數要求思考較小的卡片尺寸設計（如手機）以符合嚴格的框架規範。
工作管理 app － Trello 是個應用卡片式介面設計的好例子。在這個平台裡，可以用卡片來組織內容，並使得資訊更容易被找到及使用。
Photo credit: https://trello.com/
個人作品展示平台 － Contently，使用 卡片式設計 ，將無數的展示連結以有效、好用的方式呈現。每一篇文章透過卡片串連，卡片以圖片與一段敘述組成，其中也包含了 Shares、Tweets、Likes 等按鈕。這是一個完美的範例，示範如何將大量的資訊放進小卡並兼顧直覺、人性化的使用介面。
Photo credit: https://carriecousins.contently.com/
卡片式設計 的未來
卡片式的介面設計將不斷地持續演化、前進。你有可能會在響應式網站、app 上發現各種創新的卡片應用。例如：Material Design 的「paper-like」對於 Android app 設計上的影響。
Photo credit: http://www.google.com/design/spec/components/cards.html
Material Design 把卡片定義為「一種含有各式入口的小卡，這些入口都可以連結到更多相關資訊」。也就是說，在卡片的單一主題中，包含了圖片、文字、連結。
Google Doc 可能是目前使用 卡片式設計 最廣泛的應用。儘管目前所提到的功能細節已經使人眼花撩亂了，但 Material Design 能讓內容、設計、互動清楚地呈現。卡片式設計 天生就具有互動的特性，而互動設計也是一門目前快速發展的設計學科。要是未來更多 卡片式設計 應用在影片或自動更新的內容上，我們完全不會意外。
儘管多數設計師只將卡片做為與內容連結的媒介，但當卡片式所呈現的資訊各自地互動時，它其實可以做更多與 Material Design 一樣的使用性，如氣象預報中，新數據與剛更新的數據自動排序。Windows Phone 的使用者已經習慣這卡片式的互動型態，但將來很有可能觸及到更廣大的 android 使用者。
Photo credit: http://www.howarkitekter.se/
儘管設計師多半專注在手機尺寸的卡片類型，但是大尺寸卡片設計在大眾市場仍是持續成長。特別是亮色系搭配粗體字的大尺寸卡片，以有趣的方式使網頁設計更有重點並創造獨特的視覺觀點。
一種大、小尺寸卡片的搭配設計可以讓讀者在一開始就聚焦於特定的內容上，並於所有卡片中產生視覺上的層次感。如上圖所示， HOW arkitekter 使用了混合的大尺寸卡片，這些卡片中，有些是連結，有些是直觀資訊。當使用者在瀏覽網站時，這些卡片可以協助導覽並提供重要資訊。
亮色系搭配簡單的字型可讓使用者輕鬆的閱讀內容。而大尺寸、雙側留空的的設計在卡片式風格上是一種新的嘗試。
Photo credit: https://developers.google.com/glass/design/style
從 Google Glass 開始，卡片式設計 肯定會在穿戴式裝置上有ㄧ席之地。雖然 Google Glass 普遍被視為失敗的消費品，但仍有可能在專業市場中存活。雖然未來還是個未知數，但不用懷疑的是：它的操作介面是倚賴 卡片式設計 。即使未來產品可能會失敗，但有趣的是在這些設計過程中所學到的教訓如何被應用於其他 AR 產品上（或是推廣到廣泛的 app 設計上）。
去觀察怎樣的科技還仍在發展，或是舊的科技如何再次被翻新，真的是很有趣的一件事情！畢竟，別忘了，卡片式設計 在我們賦予他們數位連結的設計功能時，在現實中也僅僅只是幾張紙而已。
※如果想知道更多以卡片為基礎的網頁設計，原文作者提供免費的 e-book: The Curated Collection of Design Techniques: Cards & Minimalism 該書包含了70頁的建議，舉了43個關於如何創造卡片式以及極簡風格的網頁設計例子。
10 種額外免費的資源和工具:
- Tutorial: How to Build a Card Interface with Sketch App 3 － 讓你學習如何透過 Sketch (一個嶄新又受歡迎的網頁設計軟體)去創造屬於你獨特的簡易卡片風格
- “Implementing the Card UI Pattern in Phone/HTML5 Applications” by DZone — 只要你知道如何設計具有美感的卡片，就是時候在設計中嵌入程式碼了。這篇文章可以讓你了解如何進行。
- “Getting Started with jQuery Masonry” by Creative Bloq — 這個插件 (plugin) 對於網頁設計者及工程師而言，可以很神奇的幫助他們創造格線及卡片式風格，執行簡單又方便。
- CardStack － 這個開放程式碼可以讓在嵌入卡片時，外觀有如響應式網頁般，且運作時有如行動版應用程式，就好比是一個可以重複分享、使用的檔案。
- 10 Material Design Cards for Web in CSS and HTML － 如 Material Design 的使用持續在成長，卡片設計理念會更加熱門。
- Polymer － 以 HTML 程式架構客製化封裝和可互操作的元素
- Masonry － Javascript 套件庫，有各式瀑布流模板
- “How We Used Card Sorting to Design a Style Guide for Web Developers and UX Designers” by Optimal Workshop － 讓你瞭解這項科技背後的理論依據。
- Bootcards － 以 Bootstrap 製作而成，應用 卡片式設計，並考量多螢幕的 UI 架構平台。
- “Why Cards Are the Future of Ads And the Web” by Dan Ucko － 為何選擇 卡片式設計？為何 卡片式設計 能在付費內容平台特別成功？讓這篇文章來告訴你。
※還沒看過卡片式設計大未來 Part1 嗎？按這裡了解更多。
※本文編譯自 The Next Web 中 The future of cards in Web design 一文，文章及圖片已獲得作者 Jerry Cao 授權。
本文章所屬設計大舌頭與作者所有，未經授權，不得轉載！如需轉載，煩請通知。
