卡片式設計流行的祕密 — 看完這15個案例你就懂了！

隨着Material Design的流行，卡片式設計幾乎成爲當前界面設計的主流模式，而且已經深刻到各個行業、領域的UI設計當中。卡片做爲信息載體，也使得卡片式UI成爲現代網頁設計和移動應用設計的一部分。相比傳統單一的頁面設計，卡片設計提供更多個性化的用戶體驗，使界面設計清晰平衡、富有美感、簡約時尚而又具有良好可用性。而卡片做爲容器，可以適應不一樣屏幕大小而不破壞信息的展現效果。

智能化的生活中幾乎隨處可見卡片式設計以及基於卡片的交互模式。做爲設計師，須要考慮使用者在不一樣設備上的使用和閱讀習慣。白天，他們在桌面設備瀏覽信息，休息時間切換到移動設備，而晚上則有可能選擇平板電腦。因此，在卡片設計的前提下，應輔以相應的響應式設計，使得各類設備都能完美的呈現設計。而卡片佈局的設計就很是符合這一要素。

因此今天摹客將爲你們普及卡片設計的理念，整理一些優質的卡片式設計資源，但願能在設計上爲你帶來更多的思考和靈感。若是你對卡片式設計很是感興趣，也能夠免費下載Mockplus從原型設計開始製做。

1、什麼是卡片式設計？

卡片是含有圖片和文字在內的小矩形模塊，它是用戶瞭解更多細節信息的入口。要平衡界面的美學和可用性，卡片基本是一個默認選擇。由於卡片用起來很是方便，還能夠展現包含不一樣元素的內容。

2、卡片式設計的優點是什麼？

Google將它稱之爲「Inside Out design」（由內而外式），它的本質是更好的處理信息集合。那麼卡片式設計具有哪些優點呢？

（1）增長空間利用率

在傳統列表下，內容通常爲縱向滾動操做，展現的內容有限。而採用卡片式的佈局，在縱向的內容流裏，還能夠很好的增長橫向滑動的內容區域。

（2） 提高可操做性

卡片是一種擬物化元素，能夠被覆蓋、堆疊、移動、划動。這樣能更好的拓展內容視覺深度和可操做性。

好比：iPhone自帶的「提醒事項」APP，就是採用卡片堆疊的方式，用戶可按照標題快速查找目標備忘錄，同時進行點擊操做，打開或刪除卡片內容。

（3）利於信息分層和整合

在卡片式設計中，一張卡片就是一個信息模塊，用戶即便快速瀏覽，也不會產生混亂。塊狀的卡片使得頁面更加整齊美觀，同一頁面中卡片的不一樣大小，還區分了信息的重要等級。

3、優質卡片式設計實例賞析

網頁類卡片設計實例

1. Google Play – Material Design卡片

Google Play做爲谷歌出品的一款網頁應用，不論是顏色搭配仍是界面設計都遵循了Material design設計理念。整個網站的設計運用了大量的卡片設計。

相關閱讀：Material Design配色難？11條設計資源給你靈感！

不管是首頁推薦仍是細分類別，模塊化的展現使整個網站界面看起來整潔大方，十分具備條理性。配合上下、左右的滑動交互，給用戶極強的操做感。

2. Quora

做爲一個以信息展現爲主的網站，Quora的設計首先考慮的是信息流的展現。如何在有限的版面內有條不紊的展現網頁內容且兼顧用戶體驗及友好性？Quora機智地使用了卡片設計。從用戶習慣來說，用戶喜歡閱讀成塊的內容，而卡片將信息以區塊的形式集中在一塊兒，更適合閱讀。

好處在於這種設計讓內容不會以長篇大論的形式出現，避免由於內容太長讓用戶產生畏懼心理。簡單明快的內容更容易引發用戶興趣，用戶也所以可以選擇是否要繼續閱讀下去。卡片將內容提取、優化爲有意義的區塊，並且不一樣類型、屬性的內容能夠在卡片上組合稱爲有機的、連貫的聚合體。

3. Linkedin

根據費茲定律：點擊目標越大，使用者的操做速度越快。領英的網站設計中，使用到了文字+圖片+連接的方式。當以上全部的元素框選在同個卡片中時，面積較大的圖片則是卡片的中心，而且也是整張卡片中最大的可點擊範圍（詳細內容頁面的進入點）。伴隨鼠標移入與網頁產生的交互，用戶便可獲得「可點擊」的反饋。

4. Pinterest

做爲早期的卡片式設計先驅者，Pinterest的瀑布流設計的頁面設計方式爲用戶提供了無縫式的流暢體驗。同時，減小點擊步驟也能夠極大限度的留住用戶。卡片式設計和瀑布流的結合也就是常據說的卡片流了。

與領英的內容題圖展現而且可點擊相似，Pinterest圖片流的每一整張圖片都具備可點擊性。Material Design中經常會讓卡片擁有微妙的陰影，尤爲是與鼠標交互的時候。這種設計是很是有道理的，陰影和深度會給予用戶以視覺感知力，強化它的可見性，以及知覺上的「可點擊性」。用戶將鼠標移到圖片上方便可獲得這樣的點擊反饋。

5. Dribbble

提到卡片式設計，不得不說的就是設計師們鍾愛的Dribbble。做爲一個在線的創意內容展現網站，Dribbble聚集了大量的視覺做品—圖片。而基於卡片的設計一般主要依靠視覺設計，使用大量圖片就是卡片設計的一大亮點。

研究發現已證明，圖片能夠提高網頁或 app 的總體設計，由於圖片能夠快速有效地吸引用戶的注意力。因此，加入圖片也使得基於卡片的設計更加引人入勝。那麼，要展現這類內容，基於卡片的設計對於Dribbble來講是再合適不過的選擇了。

移動應用類卡片設計實例

6. Instagram

在移動應用界面設計中，卡片做爲容器的做用更加凸顯出來了。Instagram做爲一個以圖片爲主的應用，全部圖片以正方形發佈，保證了圖片在feed流裏的寬度，撐滿全屏，從而看起來很總體。除圖片外，卡片也承載了文字和功能信息，三者組合在一塊兒造成完整的功能模塊。

7. Trello

卡片式設計可以幫助用戶更好地進行列表歸類。Trello的成功也是源自於它採用的卡片式設計。卡片式的任務列表能夠靈活運用，使其很好地做用於用戶，幫助用戶管理任務和工做。這也是Trello與傳統的事務管理方式最大的一個區別。

8. Airbnb

做爲一款房屋租賃軟件，Airbnb的設計重點在於視覺設計。卡片設計的簡約性和條理性對於增長用戶體驗而言已經足夠，而且也能夠很好的對每一條內容作區分。而Airbnb的設計在卡片的基礎上，採用了無框設計，統一而且重複的信息元素使內容更具備規律性，也給人營造出比較總體的感受。

Dribbble優秀卡片設計案例欣賞

9. AR Car Mechanic App

設計師：Maciej Dyjak

地址：https://dribbble.com/shots/5306051-AR-Car-Mechanic-App

10. Travel Article Page

設計師：Faria

地址：https://dribbble.com/shots/5278735-Travel-Article-Page

11. Travel App

設計師：Hippie Mao

地址：https://dribbble.com/shots/5270259-Travel-App

12. Cate APP

設計師：劉狗蛋

地址：https://dribbble.com/shots/5020742-Cate-APP

13. Resto Friends App Exploration

設計師：Masudur Rahman

地址：https://dribbble.com/shots/5093616-Resto-Friends-App-Exploration-02

14. Experimentation Analysis:Performance Summary

設計師：Uber Design

地址：https://dribbble.com/shots/4965024-Experimentation-Analysis-Performance-Summary

15. Customized Furniture Shopping App

設計師：Jack W.

地址：https://dribbble.com/shots/4611632-Customized-Furniture-Shopping-App

結語

卡片是UI設計師發揮創意的畫板。它不只僅是一個擬物化的卡片UI控件，仍是建立優質內容，營造優質用戶體驗的重要佈局手段。看了以上15個優質的卡片式UI設計實例，但願你能從中思考而且獲得更多設計靈感。