前言

“我要卡式的”，這是上一期客戶在和我聊需求的時(shí)候說(shuō)的第一個(gè)需求點(diǎn)。毫無(wú)疑問(wèn)，卡式不論是適應(yīng)PC還是手機(jī)都表現(xiàn)優(yōu)秀。從在線商城到社交媒體網(wǎng)站，卡式設(shè)計(jì)成為網(wǎng)頁(yè)設(shè)計(jì)中的一股強(qiáng)大風(fēng)潮且風(fēng)頭正勁。其中最重要的原因想必就是它的靈活性。

卡片，可以是任何形狀、顏色和形式。但是總的來(lái)說(shuō)，他們都包含了圖片、圖標(biāo)和一些基本的文字信息，例如標(biāo)題、用戶名和位置信息。

“然而，其風(fēng)靡起來(lái)的核心還在于其簡(jiǎn)單性。你很少見到復(fù)雜的卡片設(shè)計(jì)，它之所以出現(xiàn)的目的就是為了引導(dǎo)用戶去點(diǎn)擊它”

作為網(wǎng)頁(yè)設(shè)計(jì)師，你該如何使用卡片？當(dāng)在設(shè)計(jì)卡片時(shí)，你應(yīng)該注意些什么？下面讓我們來(lái)談?wù)劇?/p>是什么讓卡式設(shè)計(jì)勢(shì)不可擋**

當(dāng)提及實(shí)用性和美感，卡片式設(shè)計(jì)可謂當(dāng)仁不讓的雄踞上風(fēng)。以下所列的特性也許是它能勝出的原因。

1、響應(yīng)式

響應(yīng)式是個(gè)老生常談，它成為了一項(xiàng)硬性要求。大部分客戶都為各種層出不窮的移動(dòng)設(shè)備準(zhǔn)備好了響應(yīng)式方案，那么卡式就是如此應(yīng)運(yùn)而生。在滿足各種屏幕尺寸需要之上，卡式設(shè)計(jì)能非常便捷地幫助用戶焦距到特定的內(nèi)容，也讓設(shè)計(jì)師在設(shè)計(jì)時(shí)合理又簡(jiǎn)潔地進(jìn)行內(nèi)容的布局。

2、有序性

混亂不堪的網(wǎng)站令人頭疼，當(dāng)我們?cè)谡眄?yè)面不同種類的元素時(shí)，卡式設(shè)計(jì)就能為這些內(nèi)容的排版提供一種奇妙的有序性。這對(duì)于設(shè)計(jì)師和用戶來(lái)說(shuō)都是項(xiàng)利好。Kelsey Drake的網(wǎng)站也許能展示出這一特點(diǎn)。

3、易讀性

卡式設(shè)計(jì)一個(gè)非常重要的特性就是它們包含的信息十分簡(jiǎn)潔，這讓它們變得有趣且引人入勝，但這也讓網(wǎng)站內(nèi)容變得比較單一，很快就一覽無(wú)余。像NamesForChange.org這樣的網(wǎng)站就把每張卡片都設(shè)計(jì)得生動(dòng)且讓人理解起來(lái)毫不費(fèi)力。

4、為社交媒體平臺(tái)所青睞

想想一個(gè)社交媒體的網(wǎng)站是怎樣建立起來(lái)的？它們需要的是清晰易讀和快捷的展示方式。再考慮到卡式設(shè)計(jì)，你難道沒(méi)有發(fā)現(xiàn)這之間的聯(lián)系？最著名的卡式設(shè)計(jì)的例子就是Pinterest和Dribble啦！

5、平等性

卡式設(shè)計(jì)還有一個(gè)特性就是平等，這里的平等當(dāng)然不是絕對(duì)的，也就是說(shuō)，卡式設(shè)計(jì)里每張卡片，它在整個(gè)網(wǎng)頁(yè)中的重要性是差不多相同的。這也就讓大家省去了為內(nèi)容進(jìn)行等級(jí)排序的麻煩。不妨看看AHH的網(wǎng)站，你就能明白。

6、通用性

卡式設(shè)計(jì)幾乎可以用于任何行業(yè)任何用途，它的創(chuàng)作彈性非常大。在設(shè)計(jì)風(fēng)格上可以說(shuō)沒(méi)有任何定論，給了設(shè)計(jì)師非常大的可發(fā)揮的創(chuàng)意空間。就拿Futurefabric.co.uk這個(gè)網(wǎng)站來(lái)說(shuō)，設(shè)計(jì)師利用了卡式設(shè)計(jì)去展示他的不同類型的作品。

卡式設(shè)計(jì)中我們應(yīng)該注意什么

來(lái)到重點(diǎn)了！作為UI設(shè)計(jì)師，如果你要運(yùn)用到卡片式風(fēng)格的話，有這些地方是你需要注意的（以下是我的經(jīng)驗(yàn)之談）

1、留白

留白是老話題，但卡式設(shè)計(jì)會(huì)非常容易忽略這個(gè)問(wèn)題，因?yàn)槟愕淖⒁饬裹c(diǎn)都在卡片上面，一不小心你就陷入到了一片混亂里。你必須善用留白（或者也叫負(fù)空間）。不僅是卡片外的空間，甚至卡片內(nèi)部，對(duì)于產(chǎn)品展示以外的空間也需要謹(jǐn)慎的處理?？纯碊anish company網(wǎng)站的產(chǎn)品展示就運(yùn)用留白，將網(wǎng)站做得非常流暢自然。

2、細(xì)節(jié)

卡式設(shè)計(jì)帶來(lái)了簡(jiǎn)潔，但與此同時(shí)也必須強(qiáng)調(diào)一點(diǎn)，那就是內(nèi)容的豐富性。這在一定基礎(chǔ)上必須保證頁(yè)面能提供足夠多的頁(yè)面內(nèi)容來(lái)引導(dǎo)用戶，否則用戶只會(huì)感到茫然。Silk%20Tricky的網(wǎng)站完美地平衡了簡(jiǎn)潔性和內(nèi)容豐富性，它讓兩個(gè)相鄰卡片之間共同展示同一內(nèi)容，一圖一文，又削減掉頁(yè)面因平鋪的畫面而顯出的單調(diào)。它還利用了“VIEW”的高亮按鈕來(lái)提醒和吸引用戶點(diǎn)擊進(jìn)入詳細(xì)。

3、來(lái)點(diǎn)不一樣的

卡式設(shè)計(jì)有其重復(fù)性，但并不意味著它必須得單調(diào)沉悶。別怕給你的項(xiàng)目中增加點(diǎn)吸引人的個(gè)性化的東西?？蛻粢苍S不喜歡而否決掉，但它增加了你為創(chuàng)作所付出的一種可能性。炫目的小動(dòng)畫、別具一格的配色風(fēng)格或者是讓人耳目一新的字體，這些都值得去嘗試。就像White Frontier這個(gè)網(wǎng)站所做的努力一樣。

4、使用網(wǎng)格

這一條其實(shí)不用多說(shuō)，想要讓網(wǎng)頁(yè)看上去更協(xié)調(diào)，網(wǎng)格可謂功不可沒(méi)。

飛屋輕網(wǎng)站卡式設(shè)計(jì)范例

飛屋從卡式設(shè)計(jì)開始之初就在很多地方嘗試了這一風(fēng)格，下面展示一系列輕網(wǎng)站中卡式設(shè)計(jì)的樣例。

DEMETER

MEROPE

THOTH

ATHENA

SEAWEE

別怪我沒(méi)提醒，以上網(wǎng)站均為免費(fèi)開源！網(wǎng)站的申請(qǐng)地址可以點(diǎn)擊這里，或者進(jìn)入到飛屋的輕網(wǎng)站頻道。

后記

卡式設(shè)計(jì)的延伸幾乎無(wú)窮盡，打開你的PS，看看你能想出多少個(gè)卡式設(shè)計(jì)的布局呢？