Card DESIGN

卡片式設計 大未來 Part1

你是否常發現網站(如下圖)中有這樣的一塊又一塊的圖形設計?這稱之為「卡片」,近年來 卡片式設計 在網站上越來越常見。但別搞錯了,卡片式設計並非一種流行趨勢或花招,事實上,它正是因為非常實用而受到歡迎!

卡片式設計

 

在這篇文章裡,你將會了解對於一個網頁 UI 設計師而言,卡片式設計的意涵是什麼、優缺點、最佳實務,以及未來卡片式設計將如何演進,同時推薦一些網路上的資源給大家。

Site Inspire

Photo credit: Site Inspire

使用卡片式設計的優缺點

就像任何設計的技巧一樣,卡片式設計 Card Design 的介面並非是萬靈丹。卡片式設計甚至能讓設計師們能為此爭論不休一整天。

卡片式設計強調視覺化呢?還是著重在互動呢?
是過時還是新潮的概念呢?
到底使用者喜歡這樣的設計方式嗎?

卡片式設計可說是討論度非常高的一種設計的技巧。無論是線上商城 Bezar、房屋仲介網 Realtor,甚至是主題式設計社群網站 Dribble,你會發現卡片式設計已被發揮的淋漓盡致。

 

bezar.com

Photo credit: https://bezar.com/#_=_

 

retailer.com

Photo credit: http://www.realtor.com/realestateandhomes-search/Los-Angeles_CA

 

dribble.com

Photo credit: dribbble.com

 

看完這三個簡單的範例之後,讓我們來認識卡片式設計的優缺點吧!

 

卡片式設計 的優點

1. 響應式特性讓卡片的設計有發揮空間

矩形的卡片設計能順利與行動裝置的形狀搭配,因此無論哪種裝置都能讓用戶獲得一致的體驗(讓介面更簡單、易懂、意使用)。

2. 超級適合內容具有累積性的網站

特別是當你想要在同一個視窗檢視多個資訊,卡片式設計特別能符合這樣的需求。(編按:例如許多新聞媒體網站)

3. 區塊式的文章呈現方式,讓使用者更容易瀏覽與點擊

在一個標準的格式之下,卡片能清楚呈現同一層網站層級之下的多樣內容,一張卡片只表達一種想法。讓使用者在瀏覽上享有更充分的便利與自由。

4. 有利於使用者把文章分享到社群網站上

別忘了在卡片式設計網站上使用分享功能,搭配 Hover-to-reveal 功能讓分享更迅速!

5. 風格多元

卡片式設計基本上就是結合扁平、極簡的元素。當我們使用窗格式網站設計,卡片可以變化為瀑布流樣式雜誌風格,這時候就要看您的使用者喜愛哪種風格了。

 

使用卡片式設計的缺點

1. 這種設計實在是太常見了

許多網站的設計讓人覺得好像是盜版的 FACEBOOK 或 Pinterest,感覺好像在哪裡看過。「Web Design of Human Eye 」一書曾提過,厲害的網站設計能讓人覺得網站具有原創性,以及似曾相識感。

2. 需要使用者投入互動

卡片式設計並非只是一種視覺上的效果,而是要讓使用者感到使用經驗更佳、網站更好用。

3. 視覺上的負擔

卡片式設計網站的資訊量通常都非常的多,會對使用者感官產生負荷。這時候,可以考慮用雜誌風格來改善這個問題。

4. 有時會造成反效果

成功的卡片式設計需要縝密的心思以及一定的技術水準,否則網站排版時,會產生不必要的空間。每張卡片都需要讓圖像、標題、次標題達到最佳視覺平衡,否則還不如使用原本的標準格式模板。

 

卡片式設計的最佳實務

或許每個網頁設計師都會同意-卡片式設計並非如想像中那麼簡單。製作卡片式設計介面需要有清楚的審美觀,且要能讓使用者很直觀的執行每個動作。也就是說,好的卡片式設計需要兼具美觀與易用原則。

 

Elite Model Management

Photo credit: Elite Model Management

好的卡片式設計是簡潔而簡單的,也同時能讓使用者感到內容豐富。一個成功的卡片式設計網站需要兼具上述兩者特性。

卡片式設計不需要遵守一系列規矩。對於一個即將要開始進行卡片式介面設計的人而言,所有該需要知道的就是基本的設計原則就夠了。在此,我們可以把卡片式設計拆解成七個基本元素:

1. 使用「留白」

根據「Zen of White Space in Web UI design」,「留白」才能適當的安置每張卡片。

2. 一張卡片一則資訊

要把一張卡片想成是一種「Call to action」。那到底要有多少資訊才恰當呢?Pinterest 的資訊分量是可以參考的-包含圖片、使用者、分類、釘選、加入最愛等(當然有些功能是可以從拉出的頁面點選的)

3. 選擇清晰又鮮明的圖片

卡片中的圖片通常不大,因此剪裁時更需要注意保留圖片要傳達的訊息。我們建議圖片占整張卡片的比重為50%~75%,把其他部分留給文字及留白。

4. 簡單的排版

雖然設計花俏的標題常引人注目,但是在小小一張卡片中會受到限制。對於一個新手而言,卡片的標題試試中型大小的「無襯線體 sans-serif」、內文則用一般大小吧!

5. 創造令人驚喜的細節

動畫、影片、圓框、獨特的顏色…精心設計小細節,就可以讓你的網站跟其他設計師不一樣!把這些效果想像成香料-只要加一點點,而非過度花俏雜亂,否則會讓人覺得你的設計太過求好切而本末倒置囉。

6. 開放式的格點

設計時記得讓每張卡片的間格都一致,並嘗試各種大小與斷點吧!

7. 好用,而且要比使用者再多想一步

再度聲明,卡片式設計不只是種視覺效果,更要讓使用者覺得更直觀好用。誠如我們在「Interaction Design of Best Practice」所提及-費茲法則(Fitt’s Law)再適用於這也不過了:創造大量且有留白的超連結吧!(編按:Paul Fitt 為提出人機介面設計的心理學家,所提出的法則廣泛應用於使用者介面設計上)

優秀的卡片式設計無非是確切地去實踐最根本的設計原則(或許這也是它困難之處)。請記得,每張卡片的介面功能與其設計是同等重要的。

 

卡片式設計大未來 Part2

※如想了解更多有關卡片式設計的技巧可參考 UXPin 所編輯的 The Curated Collection of Web UI Design Techniques

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

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

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

分享此文: