網站設計新潮流：卡片式設計火起來了！從線上商店到社交媒體網站，卡片式設計正迅速成為網站設計的火熱趨勢之一。由于手機等移動設備用戶不斷增加，人們越來越傾向于在網站中使用卡片式設計。一方面，卡片式設計可以將不同大小、不同媒介形式的內容以統一的方式進行混合呈現，實現了圖文的完美結合，另一方面，卡片式設計可以在PC端和手機等多種不同的設備上保持協調一致的感官效果，提供優質的用戶體驗。在響應式網站中用好卡片式設計能夠有效擴大網站影響力，提高品牌知名度，增加網站流量。所以今天就帶大家了解一下什么是卡片式設計，為什么這種設計這么受歡迎以及怎樣更好的使用卡片式設計。
先來了解一下什么是網站設計中的卡片式設計?
卡片式設計，顧名思義，就是將網站中的各種信息組織成卡片，每一張卡片有著屬于自己的信息。一張卡片可以以不同的形式、顏色呈現，不過一般而言，每張卡片會包含一張圖片或一個圖標，再加上一些基本信息，比如標題、文本等。在這些信息之中，圖片是卡片式設計的重中之重。這是因為人是視覺動物，在卡片式設計中使用圖片更能瞬間抓住用戶的眼球;一圖頂千言，高質的圖片更具說服力，往往令精妙的文案也區居第二。卡片式設計的優勢就在于以簡單的方式實現了信息和內容的高度融合。火爆一時的瀑布流就是卡片式設計的一個分支，國外的Pinterest網站是卡片式設計應用的典型。
為什么卡片式設計這么火?
1.響應式設計
現在移動端流量超過PC端早已經不是什么新聞了。在現在這個時代，一個網站必須在不同設備上都有良好的呈現，才有可能獲得大眾的歡迎和喜愛。卡片式設計似乎就是為了這一目的而生的。它對于移動端有著良好的兼容性，使用這種設計我們可以將圖片、文本等整合到卡片中，而這些卡片有靈活的高度和寬度，可以根據屏幕的尺寸，快速重組網站的內容元素，在大屏幕上是橫直的，在小屏幕顯示垂直。總而言之，卡片式是很好的響應式設計，能夠同時適用于PC端和移動端。
2.排版整齊
當我們查看任何帶有卡片式設計的網站時，最直觀的一個感受就是整齊有序。卡片式設計常常會有一個龐大的柵格系統，以保持每張卡片在尺寸和間隙上的一致性。這種規則的柵格系統往往是基于一定的信息框架的，在做分屏式設計時我們也提到過信息框架的建立有助于網站內容有邏輯的分門別類，卡片式設計也是一樣。對設計師來說，卡片能夠幫助他們有效組織網站的內容，對網站上的各個元素進行合理布局，而對用戶來說，整齊劃一的卡片格局也方便他們快速獲取自己想要的信息，體驗更順暢。下圖是知名的創意作品展示社區Dribble的網站，它很好的應用了卡片式設計，讓用戶體驗更加簡單直觀。
3.簡單易讀
卡片式設計還有一個重要的特征就在于簡單易讀。因為每一張卡片只是某個功能或內容的入口點，主要展示摘要而不是所有細節。而且卡片的空間都是有限的，一般不會包含太多信息，這要求文本必須簡單易讀，要能夠激發用戶的興趣，吸引用戶點擊進入瀏覽。如果你試圖在卡片上放太多內容的話，它就會變得又寬又長，這就失去了卡片的意義了。NamesForChange.org這個網站是一個很好的栗子，每一張卡片只放置圖片或幾行文字，不僅簡單易讀而且還能夠引發用戶的互動。
4.適合社交媒體
提起使用卡片式設計的社交媒體網站，相信大家應該都不會陌生!Facebook，Twitter、騰訊等都采取這種設計方式，它們一般還會在卡片式內容上添加點贊、分享、評論等功能，使用無休止的瀑布流，以達到與用戶的互動。而卡片式設計使用戶互動更簡單，甚至將主動權給了用戶，他們可以根據簡單易讀的摘要確認自己是否想要瀏覽全文，快速獲取自己感興趣的內容。難怪社交媒體網站這么偏愛卡片式設計。
5.容納各種形式的元素
卡片式設計很大程度上是靈活的，它能夠整合各種形式的內容，圖片、文本、動畫效果、視頻、按鈕、鏈接等。只有你想不到的，沒有它包含不了的。而且在網站中使用卡片式設計時，也沒有一定的規則。雖然在前面提到柵格系統的整齊有序，即使你不按照橫列或豎列進行也沒有關系，因為卡片本身就是基于幾何美的，就是有規則的，所以充分發揮你的想象力吧，給各項元素來個別出心裁的組合吧。以Futurefabric.co.uk為例，它利用卡片式設計展示了許多不同風格的元素。
6.直觀的可操作性
對于手機等觸屏設備的用戶來說，網站上的卡片式設計讓他們覺得更直觀，更有想要點擊的欲望。一張卡片傳遞一個信息，想要了解詳情就直接點擊瀏覽，不想深入只需向左、向右滑動，查閱其他的內容。還有的網站需要用戶向上或向下進行拖動實現內容的加載。在移動設備上人們更加習慣手勢操作，因此卡片式設計在手機等觸屏設備上的操作性很高。
怎樣更好發揮卡片式設計的作用?
看完上面的栗子，我們已經知道卡片式設計的很多好處。是不是已經心動了?但是要想在自己的網站中用好卡片式設計，我們還需要注意以下幾點。
結合正負空間
在卡片式設計中，我們首先要避免網站的雜亂無章。就像我們前面談到的，卡片可以容納各種形式的元素，尤其是在PC端上顯示時(全部顯示出來)，各種形式的元素可能會讓用戶感覺網站混亂、擁擠。所以，我們需要利用正負空間讓整體布局賞心悅目。簡單來說，負空間就是指文字、圖案本身所占用空間之外的空間，比如字間距和元素周圍的空白，而正空間是相對于負空間而言的，結合正負空間就是重點把握圖案、文字、背景組合的好壞，既要突出網站核心信息又要保證視覺感官的一致。丹麥的Helbak ceramics在這一點上就做的很好，適當的留白同有趣的圖案相得益彰，整個網站給人舒適、柔和的感覺。
注意每個細節
卡片式設計就是為了保持網站的簡潔明了，這意味著卡片上的每個細節都很重要，不管是圖片、文本、鏈接還是按鈕。一顆老鼠屎會壞了一鍋湯，一個不恰當的元素會影響一張卡片的效果，進而破壞網站的整體布局。Silk Tricky實現了文本和圖片的平衡，既能有效吸引用戶又足夠美觀大方。它還使用了"瀏覽"圖標，給訪客提供引導。
加點"香料"
雖然卡片式設計很重要的一個特征就是排版整齊，這并不意味著每張卡片都是一成不變、毫無生氣的。我們可以在卡片上添加一些元素，比如吸引人的動畫、獨特的配色或是大膽的字體，給每張卡片以截然不同的風格，讓網站個性化十足。White Frontier就是個性化網站的典型。
使用網格
如果你沒有太多時間或精力給自己的網站添加個性化元素或排版，那就使用網格吧。在卡片式設計中，這是最容易、最簡單的一項準則。很多人都采用這一方法，因為它可以保證卡片上各項元素的整齊一致，讓網站更具統一美，而且不論屏幕尺寸的大小它能完美的適應。
用戶優先
不管我們想要將網站做成哪種風格，時尚潮流也好，平淡樸素也罷，最重要的堅持用戶優先。我們只有結合網站行業特性，考慮目標用戶的喜愛偏好，才能做出讓他們眼前一亮的網站。與此同時，注重網站的可讀性，將最重要的信息準確無誤的傳遞給用戶，將他們的注意力吸引到行為引導按鈕上。Theclymb.com就選擇使用了干凈整潔的布局，卡片易于理解，導航元素也很清晰，方便用戶體驗。
在內容為皇的網站世界里，信息的組織和呈現形式也很重要。在這點上卡片式設計是很好的選擇，用戶可以通過它快速獲取有效信息。不過，并不是所有的網站都適合卡片式設計，比如對于一些新聞或數據類的網站來說，列表式的設計方式可能更加緊湊，更能夠滿足用戶的基本需求。所以在網站中使用卡片式設計還是應該"對癥下藥"，三思而后行"。 |
您現在的位置： 
