溫馨提示：細讀本文需要7分鐘，速度需3分鐘。
想必大家都會對寶麗來青睞有加，經典的寶麗來包含白色的框架和底部可書寫的空間，有沒有聽起來很耳熟的感覺？如今叱吒社交媒體的Instagram、Twitter、Pinterest的展示，就彷彿是一張張寶麗來固定在牆上。當然，網頁設計佈局中的卡片式形式，並不是基於80歲的寶麗來，這也只是小編的臆想。
最早開始使用卡片式形式的是palm web os，弱化程序概念，採用卡片式展示形式，所有的任務都是一個個的卡片的轉換。2012年，谷歌總裁拉里·佩奇操刀決定的Googel Now——一項典型採用卡片式設計的跨設備產品使得卡片式佈局初露鋒芒，2014年Material Design的提出，它結合卡片式設計，又結合現實世界裡紙張的隱喻，統一了Google在設計上的表達，從而展示出一種強烈的風格。
Palm web os
也是基於此，卡片式佈局如同春日梨花，滿滿的鋪開在屏幕之上，直至今日。那麼，流行了這麼多年的卡片式佈局為何經久不衰呢？它有什麼樣的“過人之處”呢？
1、互動性
卡片式佈局常被形容作為一個內容容器，這是因為它很容易被放大或者縮小。同樣的設計佈局在不同大小的點子設備中能夠展示出一致的美學效果，另一個方面，卡片的拉伸及陰影動作伴隨著用戶的手指拉伸動作，這樣的一種操作方式，是極其美妙的。
Dribbble
2、設計的靈活性
卡片式設計的靈活性讓設計師的工作變得更加簡單，卡片式填充給了設計師更多的自由，它允許許多不同的內容同步、清晰的呈現，以瀑布流為例，上傳排列能夠節省更多的設計時間，當然，如果你厭煩了瀑布流，不規則對稱的卡片佈局也能帶給用戶更多的新鮮感。
The vinyl factory
3、優秀的用戶體驗
用戶體驗無疑是每個設計師都十分重視的因素，在卡片式佈局中，對用戶體驗有了明顯的提升，因此才受到廣大用戶的喜愛，其中兩個方面是值得大家探索的：一是通常卡片式設計會讓用戶持續地瀏覽網站，並不斷的下拉更新，讓用戶在網站中停留的時間更長，持續不斷地提升轉化率；二是圖片的相關性，以Pinterest為例，以用戶所搜索的關鍵詞為基準，為用戶即時分享更多同類信息。
We occupy
4、視覺上的賞心悅目
卡片式設計必須以圖片來取悅用戶，我們一直在說卡片帶給設計師的便捷，當然也有些麻煩需要我們處理，尤其當你發現甲方給的圖片真的“有點難看”的時候，因為很多研究表明圖片是能夠提升網站的效果和瀏覽體驗，你可以嘗試突出使用某張圖片，或者以不對稱的形式來吸引用戶，同樣也能帶給他們愉悅的視覺感受。
Extended play
卡片式佈局如此的受大家的喜愛，千篇一律自然不能滿足用戶的百變口味，這裡分享幾個特立獨行的佈局案例，看看能不能給你的設計帶來一點兒靈感？
Pinterest（小編還能打開Pinterest，打我呀~）
https://www.pinterest.com/
首先說到這個網站，當然，它的設計在現在看來並不是多麼的“特立獨行”，但是它可是瀑布流佈局的鼻祖呢，每個故事都有自己的區域，包含了圖片和數據信息，能夠幫助用戶快速的瀏覽內容，小編覺得最讚的視覺效果就是無論多麼華麗或樸素的圖片，都可以使整個界面保持乾淨、整潔和平衡。
CircularChaos
https://site.uplabs.com/posts/circularchaos
UpLabs網站是一個彙集了網站前端作品設計、iOS UI設計的資源站點，也是小編經常逛的收藏夾網站，這裡介紹的是CircularChaos的作品。結合了Material Design中的漸變色系和卡片式，讓整個頁面變得大膽、時尚，導航在左邊清晰、自然的展示，碰撞出平衡的視覺構圖效果。
Google Newsstand Navigation Pattern
Aurélien Salomon
卡片式App界面展示，使用gif的動效演繹，能夠有效的處理所有內容。這種雜誌攤的設置、獨特的色彩、動態的演示，這一切被精心設計的小細節，就讓作品變得不一樣。卡片的交互，能夠直觀的體現出你的選擇。
Uplabs
https://material.uplabs.com/
柵格化在卡片中的重要性不言而喻，Dribbble和Behance這種大牌的設計作品展示網站使用的是較規整的柵格卡片，Material Up則打亂了這種視覺平衡，呈現一種凌亂的美學。依舊把重點放在圖片上，標題、作者和類別較其他兩個網站有了更多的空間。同時使用光滑的陰影和小動態來增加整體影響力。
Iffr
https://iffr.com/
這個網站比較小眾，是（荷蘭）鹿特丹國際電影節官網，首先，這類電影、畫廊類網站會有超凡的視覺效果，使用高飽和度的色塊和誇張的紋理進行卡片填充，讓整個網站變得時尚感十足，在交互方面，每一個卡片都有一個微小的體驗變化，當鼠標光標放在其上時，圖片會拉近，圓形的色塊也會變成方形，這些視覺上的變化更加能夠吸引用戶的眼球，增加停留時間。
卡片式佈局看上去簡單，卻又有許多的細節可以設計變化，只要你掌握好一點，就可以創造出區別於別人的好的作品。而這一切都需要你多看、多練，記住，好的設計用戶會用數據告訴你，甲方會用人民幣來報答你~
卡片式設計在網頁設計中一直佔據著獨領風騷的地位，不是優秀的設計師都不輕易上手，畢竟做好它的難度遠高於普通網頁。
------
商業轉載請聯繫作者獲得授權，非商業轉載請註明出處！
關注優秀網頁設計官方微信號：youshege；和百萬設計師一起來學習設計吧