原來這就是卡片式設(shè)計流行的秘密

時間：2023-09-27 11:48:02 | 來源：網(wǎng)站運營

時間：2023-09-27 11:48:02 來源：網(wǎng)站運營

原來這就是卡片式設(shè)計流行的秘密：隨著Material Design的流行，卡片式設(shè)計幾乎成為當前界面設(shè)計的主流模式，并且已經(jīng)深入到各個行業(yè)、領(lǐng)域的UI設(shè)計當中?？ㄆ鳛樾畔⑤d體，也使得卡片式UI成為現(xiàn)代網(wǎng)頁設(shè)計和移動應(yīng)用設(shè)計的一部分。




相比傳統(tǒng)單一的頁面設(shè)計，卡片設(shè)計提供更多個性化的用戶體驗，使界面設(shè)計清晰平衡、富有美感、簡約時尚而又具備良好可用性。而卡片作為容器，能夠適應(yīng)不同屏幕大小而不破壞信息的展示效果。




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

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




一、什么是卡片式設(shè)計？

卡片是含有圖片和文字在內(nèi)的小矩形模塊，它是用戶了解更多細節(jié)信息的入口。要平衡界面的美學和可用性，卡片基本是一個默認選擇。因為卡片用起來非常方便，還可以展示包含不同元素的內(nèi)容。










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

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

（1）增加空間利用率

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







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

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







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










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

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

1. Google Play – Material Design卡片







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

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




2. Quora







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

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




3. Linkedin







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


4. Pinterest







作為早期的卡片式設(shè)計先驅(qū)者，Pinterest的瀑布流設(shè)計的頁面設(shè)計方式為用戶提供了無縫式的流暢體驗。同時，減少點擊步驟也可以極大限度的留住用戶?？ㄆ皆O(shè)計和瀑布流的結(jié)合也就是常聽說的卡片流了。

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




5. Dribbble







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

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




移動應(yīng)用類卡片設(shè)計實例

6. Instagram

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




7. Trello







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




8. Airbnb







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




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

9. AR Car Mechanic App設(shè)計師：Maciej Dyjak地址：https://dribbble.com/shots/5306051-AR-Car-Mechanic-App










10. Travel Article Page

設(shè)計師：Faria

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










11. Travel App

設(shè)計師：Hippie Mao

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










12. Cate APP

設(shè)計師：劉狗蛋

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










13. Resto Friends App Exploration

設(shè)計師：Masudur Rahman

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










14. Experimentation Analysis:Performance Summary

設(shè)計師：Uber Design

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




15. Customized Furniture Shopping App

設(shè)計師：Jack W.

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










結(jié) 語

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













文章來源：摹客（ID：Mockplus）

作者：Grace原文鏈接：https://mp.weixin.qq.com/s/b6mjdh0ilUJTObJCg_NLLw