行動裝置時代的創意畫布:卡片式設計

我們正在見證一次網頁設計的重構,告別之前累贅的頁面和網址,迎接由眾多個體內容組成的全新的個性化體驗。隨著行動技術的發展,行動裝置的普及,以及史無前例的數據獲取方式(透過 API 和 SDK),傳統的內容被分拆成個體進行重新聚合,呈現給使用者統一的體驗。
評論
評論

本文來自 insideintercom.io,略有刪改。

卡片正在迅速成為行動裝置的最佳設計模式

我們正在見證一次網頁設計的重構,告別之前累贅的頁面和網址,迎接由眾多個體內容組成的全新的個性化體驗。隨著行動技術的發展,行動裝置的普及,以及史無前例的數據獲取方式(透過 API 和 SDK),傳統的內容被分拆成個體進行重新聚合,呈現給使用者統一的體驗。

c02

這種內容的聚合方式是根據:

  • 內容消費的主體,以及他/她的興趣、喜好和行為。
  • 他/她的地理位置和環境背景
  • 他/她的朋友的興趣、喜好和行為
  • 目標廣告生態環境

如果說這個時代的主要媒介是手機和平板等行動裝置的話,那這個時代的主要設計模式將注定是卡片式設計。請看以下案例:

Twitter Card

c03

Twitter 在今年 4 月份推出了支援更多媒體類型的 Twitter Card。在推出的新 Twitter card 功能中,Twitter 可以讓開發者在單個 Tweet 上顯示展示型相本、媒體播放器以及與 app 的深層連接等。

Google Now

c04

以 Google Now 為代表,Google 全線產品都努力趨向簡潔,在其中,「卡片」這一併不新鮮的概念成了 Google 最重視的元素。(推薦閱讀: 卡片的設計正像病毒一樣席捲 Google

Pinterest 和 Spotify 等產品

c05

Pinterest(上圖左)的內容以卡片呈現,Spotify 新推出的 Discover 功能(上圖右)也採用了卡片式設計,Facebook 也在向卡片式風格發展,iOS 7 中也採用了大量卡片式設計,如 app 切換和 AirDrop。

卡片作為一種媒介

c06

卡片式設計正在席捲科技產品界,但其實作為一種內容的宣傳媒介,卡片已經存在很長時間。公元 9 世紀的中國曾使

用卡片來玩遊戲,17 世紀時,倫敦的商人利用卡片來招攬生意,18 世紀時,歐洲貴族家庭的僕人會用卡片向主人介紹即將登門拜訪的貴賓,而人們交換名片的傳統也已持續數百年。

我們會互贈生日卡片、賀卡,我們的錢包裡塞滿了信用卡、金融卡和會員卡(當然還有身分證和駕照)。我們會玩各種卡片遊戲:撲克牌、大富翁等等,各種球星卡也成為了童年美好的回憶。

在電腦技術沒廣泛普及之前,空中管理中心會使用卡片來調度飛機,即使現在,有些仍然是在這麼做。電影拍攝中使用的故事板也是採用了卡片格式,同漫畫相似,每一張圖(卡片)都代表了一個電影中的場景。相片又何嘗不是一張張的卡片呢?每張相片都是一張講述著獨特故事的卡片。另外還有旅途中寄往親朋好友的明信片等等。

c07

卡片在商業領域的運用就更不是新鮮事了,最常見的就是大大小小的優惠券了。我們都乾過從產品包裝盒或是報刊雜誌上剪下角落的優惠券這種事吧?逛街的時候,各種推銷人員向你發放優惠券,家裡信箱也塞滿了扔不完的由許多優惠券組成的傳單。

卡片易於操作

c08

除了

其作為訊息媒介的光榮傳統之外,卡片最重要的一個特徵是易於操作。上圖是 Samuel Couto 在 Dribbble 上發表的作品。在現實世界中,卡片可以翻面(呈現更多內容),可以折疊(呈現概述的內容),也可以展開(呈現具體內容),可以將很多卡片堆起來以節省空間,可以將它們分類、分組。

在虛擬卡片的設計中,我們同樣可以運用這些特點,同時我們還可以利用動畫和行動效果來將其發揚光大。我們可以提示卡片背面的內容,或提示卡片可以展開。我們可以在卡片中嵌入多媒體內容、照片、影片和音樂。這裡能發揮的空間很大。

對於行動裝置以及各種尺寸的螢幕來說,卡片是完美的設計形式。如下圖所示,在手機上,卡片通常以垂直方式展現(如訊息流),在平板上,卡片也可以水平方式呈現(當平板橫置時,可添加一欄新內容),卡片的高度可根據內容進行調整。

c09

卡片是新的創意畫布

可以預見的是,產品和交互設計師們將更多地使用卡片式設計風格,營銷人員和廣告創意人員也不例外。隨著社交媒體熱度不減,並滲透進我們生活中許多服務領域,佔據我們越來越多的時間,伴隨而來的將是更大規模的廣告投放。而不論是社交媒體平台,還是廣告方,內容都將以卡片式設計為主來呈現。看看如今的 Facebook、Twitter、Pinterest、Instagram 和 LINE 等,沒有一個不投奔卡片式設計陣營的。對我來說,卡片式設計將是設計和創作藝術領域的 Next Big Thing。

SOURCE: insideintercom.io


精選熱門好工作

產品經理 (PM, PO)

VeryBuy非常勸敗
臺北市.台灣

獎勵 NT$20,000

資深前端工程師 - Solution (Senior Frontend Engineer)

iKala 愛卡拉
臺北市.台灣

獎勵 NT$20,000

iOS工程師

Omlet Arcade 美商歐姆雷特
臺北市.台灣

獎勵 NT$20,000

評論