編者按：新浪微博新版一來，同學們都知道到卡片式設計是腫么回事，但卡片式設計可不光是表面功夫，如何讓卡片保持條理清晰的同時不致呆板僵硬呢？如果能讓卡片融入網站全局，而且錯落有致就更棒了，今天我們精選一組卡片式設計的優質網站，來向高手學習咯！

新浪微博新版的設計過程，親歷者說：《水器相形！新版微博設計錄》

隨著大家對交互設計越來越重視，卡片式設計------這一并不新穎的設計方式又得到了設計師們的重新審視。

顧名思義，卡片式設計就是將網頁中的成分用卡片的形式呈現出來。這里所說的卡片不能只是單純的理解為有一張紙，紙上有一個矩形。

舉個例子，能稱得上卡片式的設計最起碼應該像撲克牌一樣直截了當。一個圖案、一個文字，雖然內容并不多，但已經很清楚的表達出這張卡片的含義了。

每一次卡片式網頁設計都必須展示出基本的信息概述，與此同時，在每一張卡片上也應該為用戶保留共同參與的機會。基于此，我們能夠初步認同，卡片式設計反饋的不僅是一條有用的資訊，更需要能讓用戶融入其中，并且做更多的事。

以下是AnyForWeb為大家搜集的卡片式網頁設計，希望能讓設計師們將卡片式設計更合理的運用在網頁設計中。

1. Collectiwe的網站設計比較特別，呈現出了折紙的效果。設計師利用折痕將每一個模塊清晰的劃分開來，在無形中巧妙的形成了一張張卡片式的網頁設計，這一設計讓用戶在瀏覽時也更有空間感。

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

3. 卡片式設計在電子商務網站的商品詳情頁中是最為常見的了，幾乎全部的電商網站都沒有辦法避免利用卡片式設計，這的確不失為是一種在小區域內反映出盡可能充足信息的最佳方式。

4. 這個案例用卡片式的設計表達出了一種圖解的效果，這不僅讓用戶更容易理解，在內容的表達上起到了重要的作用，也讓整個頁面看起來更加生動活潑。

5. 這個網站從整體布局上來看不只有卡片式設計的元素，也有Metro風格的痕跡。每個方塊基本上按照圖片、文字解說和小圖標的順序排列著，順序讓用戶在瀏覽時有條不紊，排列方式又讓網站看起來毫不單調。

6. 從Hix Design的網站中我們可以看出，要讓卡片式設計很和諧的融入網站全局十分重要。卡片式設計的最大特點就是會讓整個網站的布局和條理變得很清楚，但這有可能也會造成卡片的獨立性太強，導致與整體風格格格不入。

7. Living edge總體來說是一個簡潔清新的網站，卡片式設計對營造一個簡約風格的網站也的確很有效果。

8. 這是一個宣傳瑜伽運動課程的網站。設計師采用了一邊案例圖片一邊解說的方式，讓對此有興趣的用戶更便于理解，圖文并茂的方式也讓案例本身更具煽動力和代表性，淡淡的色彩同時增加了網站的親和力。

9. 這個網站第一眼會給我們一種創意型網站的感覺，這也可能是黃黑色搭配獨有的魅力。卡片式設計在網頁中顯得錯落有致，讓整齊和凌亂和平的并存著。

卡片式設計的精髓正在于讓用戶與網頁產生自主互動，讓網頁好看好用兩不誤！

看網站就能學到好多姿勢的酷站推薦！

驚為天站的日式網頁設計風格！
《有家的感覺！一組體貼溫暖的日式網站設計欣賞》

排版弱必備！一邊看網站一邊輕松學排版！
《圖文搭配網頁不累！如何讓圖文混排好看又好用？》

特別漲姿勢的信息圖相關網站！
《絕對精品！15個有趣的網頁設計相關的信息圖》

原文地址：anyforweb

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

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