你是否常發現網站（如下圖）中有這樣的一塊又一塊的圖形設計？這稱之為「卡片」，近年來 卡片式設計 在網站上越來越常見。但別搞錯了，卡片式設計並非一種流行趨勢或花招，事實上，它正是因為非常實用而受到歡迎！
在這篇文章裡，你將會了解對於一個網頁 UI 設計師而言，卡片式設計的意涵是什麼、優缺點、最佳實務，以及未來卡片式設計將如何演進，同時推薦一些網路上的資源給大家。
Photo credit: Site Inspire
使用卡片式設計的優缺點
就像任何設計的技巧一樣，卡片式設計 Card Design 的介面並非是萬靈丹。卡片式設計甚至能讓設計師們能為此爭論不休一整天。
卡片式設計強調視覺化呢？還是著重在互動呢？
是過時還是新潮的概念呢？
到底使用者喜歡這樣的設計方式嗎？
卡片式設計可說是討論度非常高的一種設計的技巧。無論是線上商城 Bezar、房屋仲介網 Realtor，甚至是主題式設計社群網站 Dribble，你會發現卡片式設計已被發揮的淋漓盡致。
Photo credit: https://bezar.com/#_=_
Photo credit: http://www.realtor.com/realestateandhomes-search/Los-Angeles_CA
Photo credit: dribbble.com
看完這三個簡單的範例之後，讓我們來認識卡片式設計的優缺點吧！
卡片式設計 的優點
1. 響應式特性讓卡片的設計有發揮空間
矩形的卡片設計能順利與行動裝置的形狀搭配，因此無論哪種裝置都能讓用戶獲得一致的體驗（讓介面更簡單、易懂、意使用）。
2. 超級適合內容具有累積性的網站
特別是當你想要在同一個視窗檢視多個資訊，卡片式設計特別能符合這樣的需求。（編按：例如許多新聞媒體網站）
3. 區塊式的文章呈現方式，讓使用者更容易瀏覽與點擊
在一個標準的格式之下，卡片能清楚呈現同一層網站層級之下的多樣內容，一張卡片只表達一種想法。讓使用者在瀏覽上享有更充分的便利與自由。
4. 有利於使用者把文章分享到社群網站上
別忘了在卡片式設計網站上使用分享功能，搭配 Hover-to-reveal 功能讓分享更迅速！
5. 風格多元
卡片式設計基本上就是結合扁平、極簡的元素。當我們使用窗格式網站設計，卡片可以變化為瀑布流樣式或雜誌風格，這時候就要看您的使用者喜愛哪種風格了。
使用卡片式設計的缺點
1. 這種設計實在是太常見了
許多網站的設計讓人覺得好像是盜版的 FACEBOOK 或 Pinterest，感覺好像在哪裡看過。「Web Design of Human Eye 」一書曾提過，厲害的網站設計能讓人覺得網站具有原創性，以及似曾相識感。
2. 需要使用者投入互動
卡片式設計並非只是一種視覺上的效果，而是要讓使用者感到使用經驗更佳、網站更好用。
3. 視覺上的負擔
卡片式設計網站的資訊量通常都非常的多，會對使用者感官產生負荷。這時候，可以考慮用雜誌風格來改善這個問題。
4. 有時會造成反效果
成功的卡片式設計需要縝密的心思以及一定的技術水準，否則網站排版時，會產生不必要的空間。每張卡片都需要讓圖像、標題、次標題達到最佳視覺平衡，否則還不如使用原本的標準格式模板。
卡片式設計的最佳實務
或許每個網頁設計師都會同意－卡片式設計並非如想像中那麼簡單。製作卡片式設計介面需要有清楚的審美觀，且要能讓使用者很直觀的執行每個動作。也就是說，好的卡片式設計需要兼具美觀與易用原則。
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 為提出人機介面設計的心理學家，所提出的法則廣泛應用於使用者介面設計上）
優秀的卡片式設計無非是確切地去實踐最根本的設計原則（或許這也是它困難之處）。請記得，每張卡片的介面功能與其設計是同等重要的。
※如想了解更多有關卡片式設計的技巧可參考 UXPin 所編輯的 The Curated Collection of Web UI Design Techniques。
※本文編譯自 The Next Web 中 The future of cards in Web design 一文，文章及圖片已獲得作者 Jerry Cao 授權。
本文章所屬設計大舌頭與作者所有，未經授權，不得轉載！如需轉載，煩請通知。
