智能化的生活中幾乎隨處可見卡片式設(shè)計(jì)以及基于卡片的交互模式。作為設(shè)計(jì)師，需要考慮使用者在不同設(shè)備上的使用和閱讀習(xí)慣。白天，他們?cè)谧烂嬖O(shè)備瀏覽信息，休息時(shí)間切換到移動(dòng)設(shè)備，而晚上則有可能選擇平板電腦。所以，在卡片設(shè)計(jì)的前提下，應(yīng)輔以相應(yīng)的響應(yīng)式設(shè)計(jì)，使得各種設(shè)備都能完美的呈現(xiàn)設(shè)計(jì)。而卡片布局的設(shè)計(jì)就非常符合這一要素。


　　所以今天為大家普及卡片設(shè)計(jì)的理念，整理一些優(yōu)質(zhì)的卡片式設(shè)計(jì)資源，希望能在設(shè)計(jì)上為你帶來(lái)更多的思考和靈感。


　　一、什么是卡片式設(shè)計(jì)?


　　卡片是含有圖片和文字在內(nèi)的小矩形模塊，它是用戶了解更多細(xì)節(jié)信息的入口。要平衡界面的美學(xué)和可用性，卡片基本是一個(gè)默認(rèn)選擇。因?yàn)榭ㄆ闷饋?lái)非常方便，還可以展示包含不同元素的內(nèi)容。


　　二、卡片式設(shè)計(jì)的優(yōu)勢(shì)是什么?


　　Google將它稱之為“InsideOutdesign”(由內(nèi)而外式)，它的本質(zhì)是更好的處理信息集合。那么卡片式設(shè)計(jì)具備哪些優(yōu)勢(shì)呢?


　　(1)增加空間利用率


　　在傳統(tǒng)列表下，內(nèi)容一般為縱向滾動(dòng)操作，展示的內(nèi)容有限。而采用卡片式的布局，在縱向的內(nèi)容流里，還可以很好的增加橫向滑動(dòng)的內(nèi)容區(qū)域。


　　(2)提升可操作性


　　卡片是一種擬物化元素，可以被覆蓋、堆疊、移動(dòng)、劃動(dòng)。這樣能更好的拓展內(nèi)容視覺深度和可操作性。


　　比如：iPhone自帶的“提醒事項(xiàng)”APP，就是采用卡片堆疊的方式，用戶可按照標(biāo)題快速查找目標(biāo)備忘錄，同時(shí)進(jìn)行點(diǎn)擊操作，打開或刪除卡片內(nèi)容。


　　(3)利于信息分層和整合


　　在卡片式設(shè)計(jì)中，一張卡片就是一個(gè)信息模塊，用戶即使快速瀏覽，也不會(huì)產(chǎn)生混亂。塊狀的卡片使得頁(yè)面更加整齊美觀，同一頁(yè)面中卡片的不同大小，還區(qū)分了信息的重要等級(jí)。


　　三、優(yōu)質(zhì)卡片式設(shè)計(jì)實(shí)例賞析


　　網(wǎng)頁(yè)類卡片設(shè)計(jì)實(shí)例


　　1.GooglePlay–MaterialDesign卡片


　　GooglePlay作為谷歌出品的一款網(wǎng)頁(yè)應(yīng)用，不管是顏色搭配還是界面設(shè)計(jì)都遵循了Materialdesign設(shè)計(jì)理念。整個(gè)網(wǎng)站的設(shè)計(jì)運(yùn)用了大量的卡片設(shè)計(jì)。


　　無(wú)論是首頁(yè)推薦還是細(xì)分類別，模塊化的展示使整個(gè)網(wǎng)站界面看起來(lái)整潔大方，十分具有條理性。配合上下、左右的滑動(dòng)交互，給用戶極強(qiáng)的操作感。


　　2.Quora


　　作為一個(gè)以信息展示為主的網(wǎng)站，Quora的設(shè)計(jì)首先考慮的是信息流的展示。如何在有限的版面內(nèi)有條不紊的展示網(wǎng)頁(yè)內(nèi)容且兼顧用戶體驗(yàn)及友好性?Quora機(jī)智地使用了卡片設(shè)計(jì)。從用戶習(xí)慣來(lái)講，用戶喜歡閱讀成塊的內(nèi)容，而卡片將信息以區(qū)塊的形式集中在一起，更適合閱讀。


　　好處在于這種設(shè)計(jì)讓內(nèi)容不會(huì)以長(zhǎng)篇大論的形式出現(xiàn)，避免因?yàn)閮?nèi)容太長(zhǎng)讓用戶產(chǎn)生畏懼心理。簡(jiǎn)單明快的內(nèi)容更容易引起用戶興趣，用戶也因此能夠選擇是否要繼續(xù)閱讀下去?？ㄆ瑢?nèi)容提取、優(yōu)化為有意義的區(qū)塊，而且不同類型、屬性的內(nèi)容可以在卡片上組合稱為有機(jī)的、連貫的聚合體。


　　3.Linkedin


　　根據(jù)費(fèi)茲定律：點(diǎn)擊目標(biāo)越大，使用者的操作速度越快。領(lǐng)英的網(wǎng)站設(shè)計(jì)中，使用到了文字+圖片+鏈接的方式。當(dāng)以上所有的元素框選在同個(gè)卡片中時(shí)，面積較大的圖片則是卡片的中心，并且也是整張卡片中最大的可點(diǎn)擊范圍(詳細(xì)內(nèi)容頁(yè)面的進(jìn)入點(diǎn))。伴隨鼠標(biāo)移入與網(wǎng)頁(yè)產(chǎn)生的交互，用戶即可得到“可點(diǎn)擊”的反饋。


　　4.Pinterest


　　作為早期的卡片式設(shè)計(jì)先驅(qū)者，Pinterest的瀑布流設(shè)計(jì)的頁(yè)面設(shè)計(jì)方式為用戶提供了無(wú)縫式的流暢體驗(yàn)。同時(shí)，減少點(diǎn)擊步驟也可以極大限度的留住用戶。卡片式設(shè)計(jì)和瀑布流的結(jié)合也就是常聽說(shuō)的卡片流了。


　　與領(lǐng)英的內(nèi)容題圖展示并且可點(diǎn)擊類似，Pinterest圖片流的每一整張圖片都具有可點(diǎn)擊性。MaterialDesign中常常會(huì)讓卡片擁有微妙的陰影，尤其是與鼠標(biāo)交互的時(shí)候。這種設(shè)計(jì)是非常有道理的，陰影和深度會(huì)給予用戶以視覺感知力，強(qiáng)化它的可見性，以及知覺上的“可點(diǎn)擊性”。用戶將鼠標(biāo)移到圖片上方即可得到這樣的點(diǎn)擊反饋。


　　5.Dribbble


　　提到卡片式設(shè)計(jì)，不得不說(shuō)的就是設(shè)計(jì)師們鐘愛的Dribbble。作為一個(gè)在線的創(chuàng)意內(nèi)容展示網(wǎng)站，Dribbble匯集了大量的視覺作品—圖片。而基于卡片的設(shè)計(jì)通常主要依靠視覺設(shè)計(jì)，使用大量圖片就是卡片設(shè)計(jì)的一大亮點(diǎn)。


　　研究發(fā)現(xiàn)已證實(shí)，圖片可以提升網(wǎng)頁(yè)或app的整體設(shè)計(jì)，因?yàn)閳D片可以快速有效地吸引用戶的注意力。所以，加入圖片也使得基于卡片的設(shè)計(jì)更加引人入勝。那么，要展示這類內(nèi)容，基于卡片的設(shè)計(jì)對(duì)于Dribbble來(lái)說(shuō)是再合適不過(guò)的選擇了。


　　移動(dòng)應(yīng)用類卡片設(shè)計(jì)實(shí)例


　　6.Instagram


　　在移動(dòng)應(yīng)用界面設(shè)計(jì)中，卡片作為容器的作用更加凸顯出來(lái)了。Instagram作為一個(gè)以圖片為主的應(yīng)用，所有圖片以正方形發(fā)布，保證了圖片在feed流里的寬度，撐滿全屏，從而看起來(lái)很整體。除圖片外，卡片也承載了文字和功能信息，三者組合在一起形成完整的功能模塊。


　　7.Trello


　　卡片式設(shè)計(jì)能夠幫助用戶更好地進(jìn)行列表歸類。Trello的成功也是源自于它采用的卡片式設(shè)計(jì)。卡片式的任務(wù)列表可以靈活運(yùn)用，使其很好地作用于用戶，幫助用戶管理任務(wù)和工作。這也是Trello與傳統(tǒng)的事務(wù)管理方式最大的一個(gè)區(qū)別。


　　8.Airbnb


　　作為一款房屋租賃軟件，Airbnb的設(shè)計(jì)重點(diǎn)在于視覺設(shè)計(jì)?？ㄆO(shè)計(jì)的簡(jiǎn)約性和條理性對(duì)于增加用戶體驗(yàn)而言已經(jīng)足夠，并且也可以很好的對(duì)每一條內(nèi)容做區(qū)分。而Airbnb的設(shè)計(jì)在卡片的基礎(chǔ)上，采用了無(wú)框設(shè)計(jì)，統(tǒng)一并且重復(fù)的信息元素使內(nèi)容更具有規(guī)律性，也給人營(yíng)造出比較整體的感覺。


　　Dribbble優(yōu)秀卡片設(shè)計(jì)案例欣賞


　　9.ARCarMechanicApp


　　設(shè)計(jì)師：MaciejDyjak


　　10.TravelArticlePage


　　設(shè)計(jì)師：Faria


　　11.TravelApp


　　設(shè)計(jì)師：HippieMao


　　12.CateAPP


　　設(shè)計(jì)師：劉狗蛋


　　13.RestoFriendsAppExploration


　　設(shè)計(jì)師：MasudurRahman


　　14.ExperimentationAnalysis:PerformanceSummary


　　設(shè)計(jì)師：UberDesign


　　15.CustomizedFurnitureShoppingApp


　　設(shè)計(jì)師：JackW.


　　結(jié)語(yǔ)


　　卡片是UI設(shè)計(jì)師發(fā)揮創(chuàng)意的畫板。它不僅僅是一個(gè)擬物化的卡片UI控件，還是創(chuàng)建優(yōu)質(zhì)內(nèi)容，營(yíng)造優(yōu)質(zhì)用戶體驗(yàn)的重要布局手段?？戳艘陨?5個(gè)優(yōu)質(zhì)的卡片式UI設(shè)計(jì)實(shí)例，希望你能從中思考并且得到更多設(shè)計(jì)靈感。