編按:卡片式設計 有哪些精采案例? 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 種額外免費的資源和工具:
※還沒看過卡片式設計大未來 Part1 嗎?按這裡了解更多。
※本文編譯自 The Next Web 中 The future of cards in Web design 一文,文章及圖片已獲得作者 Jerry Cao 授權。
本文章所屬設計大舌頭與作者所有,未經授權,不得轉載!如需轉載,煩請通知。