本文格式為Word版，下載可任意編輯——網(wǎng)頁設(shè)計(jì)中的卡式設(shè)計(jì)網(wǎng)頁設(shè)計(jì)中的卡式設(shè)計(jì)

卡片，可以是任何外形、顏色和形式。但是總的來說，他們都包含了圖片、圖標(biāo)和一些根本的文字信息，例如標(biāo)題、用戶名和位置信息。"然而，其流行起來的核心還在于其簡樸性。你很少見到繁雜的卡片設(shè)計(jì)，它之所以展現(xiàn)的目的就是為了引導(dǎo)用戶去點(diǎn)擊它'，作為網(wǎng)頁設(shè)計(jì)師，你該如何使用卡片?當(dāng)在設(shè)計(jì)卡片時，你理應(yīng)留神些什么?下面讓我們來談?wù)劇?/p>

是什么讓卡式設(shè)計(jì)勢不成擋

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

1、響應(yīng)式

響應(yīng)式是個老生常談，它成為了一項(xiàng)硬性要求。大片面客戶都為各種層出不窮的移動設(shè)備打定好了響應(yīng)式方案，那么卡式就是如此應(yīng)運(yùn)而生。在得志各種屏幕尺寸需要之上，卡式設(shè)計(jì)能分外便捷地扶助用戶焦距到特定的內(nèi)容，也讓設(shè)計(jì)師在設(shè)計(jì)時合理又干脆地舉行內(nèi)容的布局。

2、有序性

混亂不堪的網(wǎng)站令人頭疼，當(dāng)我們在整理頁面不同種類的元素時，卡式設(shè)計(jì)就能為這些內(nèi)容的排版供給一種奇異的有序性。這對于設(shè)計(jì)師和用戶來說都是項(xiàng)利好。KelseyDrake的網(wǎng)站可能能表示出這一特點(diǎn)。

3、易讀性

卡式設(shè)計(jì)一個分外重要的特性就是它們包含的信息特別干脆，這讓它們變得好玩且引人入勝，但這也讓網(wǎng)站內(nèi)容變得對比單一，很快就一覽無余。像NamesForC這樣的網(wǎng)站就把每張卡片都設(shè)計(jì)得生動且讓人理解起來毫不吃力。

4、為社交媒體平臺所青睞

想想一個社交媒體的網(wǎng)站是怎樣建立起來的?它們需要的是明顯易讀和快捷的表示方式。再考慮到卡式設(shè)計(jì)，你莫非沒有察覺這之間的聯(lián)系?最出名的卡式設(shè)計(jì)的例子就是Pinterest和Dribble啦!

5、對等性

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

6、通用性

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

卡式設(shè)計(jì)中我們理應(yīng)留神什么

來到重點(diǎn)了!作為UI設(shè)計(jì)師，假設(shè)你要運(yùn)用到卡片式風(fēng)格的話，有這些地方是你需要留神的以下是我的閱歷之談

1、留白

留白是老話題，但卡式設(shè)計(jì)會分外輕易疏忽這個問題，由于你的留神力焦點(diǎn)都在卡片上面，一不提防你就陷入到了一片混亂里。你務(wù)必善用留白或者也叫負(fù)空間。不僅是卡片外的空間，甚至卡片內(nèi)部，對于產(chǎn)品表示以外的空間也需要精心的處理。看看Danishcompany網(wǎng)站的產(chǎn)品表示就運(yùn)用留白，將網(wǎng)站做得分外流暢自然。

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

卡式設(shè)計(jì)帶來了干脆，但與此同時也務(wù)必強(qiáng)調(diào)一點(diǎn)，那就是內(nèi)容的豐富性。這在確定根基上務(wù)必保證頁面能供給足夠多的頁面內(nèi)容來引導(dǎo)用戶，否那么用戶只會感到茫然。[SilkTricky]SilkTricky的網(wǎng)站完備地平衡了干脆性和內(nèi)容豐富性，它讓兩個相鄰卡片之間共同表示同一內(nèi)容，一圖一文，又削減掉頁面因平鋪的畫面而顯出的單調(diào)。它還利用了"VIEW'的高亮按鈕來指點(diǎn)和吸引用戶點(diǎn)擊進(jìn)入細(xì)致。

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

卡式設(shè)計(jì)有其重復(fù)性，但并不意味著它務(wù)必得單調(diào)沉悶。別怕給你的工程中增加點(diǎn)吸引人的天性化的東西。客戶可能不熱愛而反對掉，但它增加了你為創(chuàng)作所付出的一種可能性。炫目的小動畫、別具一格的配色風(fēng)格或者是讓人耳目一新的字體，這些都值得去嘗試。就像WhiteFrontier這個網(wǎng)站所做的努力一樣。

4、使用網(wǎng)格

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

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

飛屋從卡式設(shè)計(jì)開頭之初就在好多