卡片式設計大未來 Part2

編按:卡片式設計 有哪些精采案例? Material Design 目前有哪些應用?在未來,可應用的設計範疇除了網頁以外,還可延伸至哪些領域?在《 卡片式設計 大未來Part2》將一一說明,並在最後提供幾個相關資源與工具供各位參考。

當你開始進行 卡片式設計,你得設法在小小的螢幕內放進各種元素。應用合適的顏色、風格、間距,讓一切看起來很和諧。此外,別忘了卡片的大小和範圍。雖然有些設計可容許過大的卡片設計,但多數要求思考較小的卡片尺寸設計(如手機)以符合嚴格的框架規範。

工作管理 app - Trello 是個應用卡片式介面設計的好例子。在這個平台裡,可以用卡片來組織內容,並使得資訊更容易被找到及使用。

trello 的 卡片式設計

Photo credit: https://trello.com/

 

個人作品展示平台 - Contently,使用 卡片式設計 ,將無數的展示連結以有效、好用的方式呈現。每一篇文章透過卡片串連,卡片以圖片與一段敘述組成,其中也包含了 Shares、Tweets、Likes 等按鈕。這是一個完美的範例,示範如何將大量的資訊放進小卡並兼顧直覺、人性化的使用介面。

Contently 的 卡片式設計

Photo credit: https://carriecousins.contently.com/

 

卡片式設計 的未來

卡片式的介面設計將不斷地持續演化、前進。你有可能會在響應式網站、app 上發現各種創新的卡片應用。例如:Material Design 的「paper-like」對於 Android app 設計上的影響。

 

Material Design

Photo credit: http://www.google.com/design/spec/components/cards.html

 

Material Design 把卡片定義為「一種含有各式入口的小卡,這些入口都可以連結到更多相關資訊」。也就是說,在卡片的單一主題中,包含了圖片、文字、連結。

Google Doc 可能是目前使用 卡片式設計 最廣泛的應用。儘管目前所提到的功能細節已經使人眼花撩亂了,但 Material Design 能讓內容、設計、互動清楚地呈現。卡片式設計 天生就具有互動的特性,而互動設計也是一門目前快速發展的設計學科。要是未來更多 卡片式設計 應用在影片或自動更新的內容上,我們完全不會意外。

儘管多數設計師只將卡片做為與內容連結的媒介,但當卡片式所呈現的資訊各自地互動時,它其實可以做更多與 Material Design 一樣的使用性,如氣象預報中,新數據與剛更新的數據自動排序。Windows Phone 的使用者已經習慣這卡片式的互動型態,但將來很有可能觸及到更廣大的 android 使用者。

 

HOW arkitekter

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 種額外免費的資源和工具:

  1. Tutorial: How to Build a Card Interface with Sketch App 3 - 讓你學習如何透過 Sketch (一個嶄新又受歡迎的網頁設計軟體)去創造屬於你獨特的簡易卡片風格
  2. “Implementing the Card UI Pattern in Phone/HTML5 Applications” by DZone — 只要你知道如何設計具有美感的卡片,就是時候在設計中嵌入程式碼了。這篇文章可以讓你了解如何進行。
  3. “Getting Started with jQuery Masonry” by Creative Bloq — 這個插件 (plugin) 對於網頁設計者及工程師而言,可以很神奇的幫助他們創造格線及卡片式風格,執行簡單又方便。
  4. CardStack - 這個開放程式碼可以讓在嵌入卡片時,外觀有如響應式網頁般,且運作時有如行動版應用程式,就好比是一個可以重複分享、使用的檔案。
  5. 10 Material Design Cards for Web in CSS and HTML - 如 Material Design 的使用持續在成長,卡片設計理念會更加熱門。
  6. Polymer 以 HTML 程式架構客製化封裝和可互操作的元素
  7. Masonry - Javascript 套件庫,有各式瀑布流模板
  8. “How We Used Card Sorting to Design a Style Guide for Web Developers and UX Designers” by Optimal Workshop讓你瞭解這項科技背後的理論依據。
  9. Bootcards以 Bootstrap 製作而成,應用 卡片式設計,並考量多螢幕的 UI 架構平台。
  10. “Why Cards Are the Future of Ads And the Web” by Dan Ucko為何選擇 卡片式設計?為何 卡片式設計 能在付費內容平台特別成功?讓這篇文章來告訴你。

 

※還沒看過卡片式設計大未來 Part1 嗎?按這裡了解更多。

※本文編譯自 The Next WebThe future of cards in Web design 一文,文章及圖片已獲得作者 Jerry Cao 授權。

 

本文章所屬設計大舌頭與作者所有,未經授權,不得轉載!如需轉載,煩請通知

訂閱設計大舌頭

隨時關注第一手 UX、UI、科技、設計新知

Facebook
LinkedIn
Telegram
Twitter