Card DESIGN

卡片式設計大未來 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 Web 中 The future of cards in Web design 一文,文章及圖片已獲得作者 Jerry Cao 授權。

 

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

如果你也喜歡我們的文章,請 Follow 我們的 Facebook 專頁,每天都會分享許多精選文章!

分享此文: