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