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