編者按：新浪微博新版一來(lái)，同學(xué)們都知道到卡片式設(shè)計(jì)是腫么回事，但卡片式設(shè)計(jì)可不光是表面功夫，如何讓卡片保持條理清晰的同時(shí)不致呆板僵硬呢？如果能讓卡片融入網(wǎng)站全局，而且錯(cuò)落有致就更棒了，今天我們精選一組卡片式設(shè)計(jì)的優(yōu)質(zhì)網(wǎng)站，來(lái)向高手學(xué)習(xí)咯！

新浪微博新版的設(shè)計(jì)過(guò)程，親歷者說(shuō)：《水器相形！新版微博設(shè)計(jì)錄》

隨著大家對(duì)交互設(shè)計(jì)越來(lái)越重視，卡片式設(shè)計(jì)------這一并不新穎的設(shè)計(jì)方式又得到了設(shè)計(jì)師們的重新審視。

顧名思義，卡片式設(shè)計(jì)就是將網(wǎng)頁(yè)中的成分用卡片的形式呈現(xiàn)出來(lái)。這里所說(shuō)的卡片不能只是單純的理解為有一張紙，紙上有一個(gè)矩形。

舉個(gè)例子，能稱(chēng)得上卡片式的設(shè)計(jì)最起碼應(yīng)該像撲克牌一樣直截了當(dāng)。一個(gè)圖案、一個(gè)文字，雖然內(nèi)容并不多，但已經(jīng)很清楚的表達(dá)出這張卡片的含義了。

每一次卡片式網(wǎng)頁(yè)設(shè)計(jì)都必須展示出基本的信息概述，與此同時(shí)，在每一張卡片上也應(yīng)該為用戶保留共同參與的機(jī)會(huì)?；诖?，我們能夠初步認(rèn)同，卡片式設(shè)計(jì)反饋的不僅是一條有用的資訊，更需要能讓用戶融入其中，并且做更多的事。

以下是AnyForWeb為大家搜集的卡片式網(wǎng)頁(yè)設(shè)計(jì)，希望能讓設(shè)計(jì)師們將卡片式設(shè)計(jì)更合理的運(yùn)用在網(wǎng)頁(yè)設(shè)計(jì)中。

1. Collectiwe的網(wǎng)站設(shè)計(jì)比較特別，呈現(xiàn)出了折紙的效果。設(shè)計(jì)師利用折痕將每一個(gè)模塊清晰的劃分開(kāi)來(lái)，在無(wú)形中巧妙的形成了一張張卡片式的網(wǎng)頁(yè)設(shè)計(jì)，這一設(shè)計(jì)讓用戶在瀏覽時(shí)也更有空間感。

2. 這是一個(gè)比較中規(guī)中矩的卡片式網(wǎng)頁(yè)設(shè)計(jì)，圖片和文字也被劃分的很清楚，很有效的減少了用戶思考的時(shí)間，能第一時(shí)間就找到自己所需要的部分。但這樣的做法在美觀度上可能會(huì)有所欠缺，網(wǎng)站看起來(lái)會(huì)顯得比較沉悶。

3. 卡片式設(shè)計(jì)在電子商務(wù)網(wǎng)站的商品詳情頁(yè)中是最為常見(jiàn)的了，幾乎全部的電商網(wǎng)站都沒(méi)有辦法避免利用卡片式設(shè)計(jì)，這的確不失為是一種在小區(qū)域內(nèi)反映出盡可能充足信息的最佳方式。

4. 這個(gè)案例用卡片式的設(shè)計(jì)表達(dá)出了一種圖解的效果，這不僅讓用戶更容易理解，在內(nèi)容的表達(dá)上起到了重要的作用，也讓整個(gè)頁(yè)面看起來(lái)更加生動(dòng)活潑。

5. 這個(gè)網(wǎng)站從整體布局上來(lái)看不只有卡片式設(shè)計(jì)的元素，也有Metro風(fēng)格的痕跡。每個(gè)方塊基本上按照?qǐng)D片、文字解說(shuō)和小圖標(biāo)的順序排列著，順序讓用戶在瀏覽時(shí)有條不紊，排列方式又讓網(wǎng)站看起來(lái)毫不單調(diào)。

6. 從Hix Design的網(wǎng)站中我們可以看出，要讓卡片式設(shè)計(jì)很和諧的融入網(wǎng)站全局十分重要?？ㄆ皆O(shè)計(jì)的最大特點(diǎn)就是會(huì)讓整個(gè)網(wǎng)站的布局和條理變得很清楚，但這有可能也會(huì)造成卡片的獨(dú)立性太強(qiáng)，導(dǎo)致與整體風(fēng)格格格不入。

7. Living edge總體來(lái)說(shuō)是一個(gè)簡(jiǎn)潔清新的網(wǎng)站，卡片式設(shè)計(jì)對(duì)營(yíng)造一個(gè)簡(jiǎn)約風(fēng)格的網(wǎng)站也的確很有效果。

8. 這是一個(gè)宣傳瑜伽運(yùn)動(dòng)課程的網(wǎng)站。設(shè)計(jì)師采用了一邊案例圖片一邊解說(shuō)的方式，讓對(duì)此有興趣的用戶更便于理解，圖文并茂的方式也讓案例本身更具煽動(dòng)力和代表性，淡淡的色彩同時(shí)增加了網(wǎng)站的親和力。

9. 這個(gè)網(wǎng)站第一眼會(huì)給我們一種創(chuàng)意型網(wǎng)站的感覺(jué)，這也可能是黃黑色搭配獨(dú)有的魅力。卡片式設(shè)計(jì)在網(wǎng)頁(yè)中顯得錯(cuò)落有致，讓整齊和凌亂和平的并存著。

卡片式設(shè)計(jì)的精髓正在于讓用戶與網(wǎng)頁(yè)產(chǎn)生自主互動(dòng)，讓網(wǎng)頁(yè)好看好用兩不誤！

看網(wǎng)站就能學(xué)到好多姿勢(shì)的酷站推薦！

驚為天站的日式網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格！
《有家的感覺(jué)！一組體貼溫暖的日式網(wǎng)站設(shè)計(jì)欣賞》

排版弱必備！一邊看網(wǎng)站一邊輕松學(xué)排版！
《圖文搭配網(wǎng)頁(yè)不累！如何讓圖文混排好看又好用？》

特別漲姿勢(shì)的信息圖相關(guān)網(wǎng)站！
《絕對(duì)精品！15個(gè)有趣的網(wǎng)頁(yè)設(shè)計(jì)相關(guān)的信息圖》

原文地址：anyforweb

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量85萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：