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