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

 

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

其他人也看了這些 ...

訂閱設計大舌頭

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

Share on facebook
Facebook
Share on linkedin
LinkedIn
Share on telegram
Telegram
Share on twitter
Twitter