从实用到美观，这30个出色的卡片设计案例，带你掌握UI设计秘诀

Material Design流行着，卡片式设计差不多成了当下界面设计的主流模式，且已深入到各个行业、领域的UI设计里，卡片当作信息载体，让卡片式UI成了现代网页设计与移动应用设计的一部分，相较于传统单一的页面设计，卡片设计给出更多个性化的用户体验，使界面设计清晰平衡、富有美感、简约时尚还具备良好可用性，并且卡片作为容器，能适应不同屏幕大小而不破坏信息的展示效果。

生活智能化的状况下卡片式设计以及基于卡片的交互模式几乎在任何地方都能见到。身为设计师，要对使用者于不同设备上的使用习惯以及阅读习惯予以考虑。白天的时候，他们在桌面设备那儿浏览信息，到了休息时间就切换至移动设备，而晚上则存在选平板电脑的可能性。所以，在进行卡片设计的基础条件下，应当用相应的响应式设计作为辅助，让各种设备都能够将设计完美呈现出来。而卡片布局的设计是极其契合这一要素的 。

所以，今日摹客会给大伙普及卡片设计的理念，梳理一些优质的卡片式设计资源，期望能于设计方面给你带去更多的思考以及灵感。要是你对卡片式设计极感兴趣，同样能够免费下载Mockplus从原型设计着手制作 。

一、什么是卡片式设计？

在内含有图片与文字的小矩形模块是卡片，它是让用户去了解更多细节信息的入口。要对界面的美学以及可用性予以平衡，卡片基本上是一个默认的选择。由于卡片使用起来极为便利，并且能够展示涵盖不同元素的内容 。

二、卡片式设计的优势是什么？

Google把它称作“Inside Out design”（由内而外式），其本质是对信息集合进行更优处理。那么卡片式设计拥有哪些优势呢？

（1）增加空间利用率

传统列表情形下，内容通常是纵向滚动的操作状态，所展示的内容存在一定限度。然而采用卡片式布局，于纵向的内容流动之中，能够很好地增添横向滑动的内容专区。

（2） 提升可操作性

卡片属于一种拟物化元素类别，它具备的特性是能够被覆盖，能够被堆叠，能够被移动，能够被划动，通过如此这般的情况，能够在更大程度上拓展内容视觉深度以及可操作性句号。

举个例子，像iPhone自身所带的那个“提醒事项”APP，它运用的是卡片堆叠这种方式，用户能够依照标题迅速去查找目标备忘录，与此同时开展点击这个动作，以此来将卡片内容打开或者删除。

（3）利于信息分层和整合

于卡片式设计里头，一张卡片即为一个信息模块，哪怕用户迅速浏览，亦不会出现混乱状况。块状的卡片致使页面愈发整齐美观，同一页面之中卡片的各异大小，还对信息的重要等级予以区分 。

三、优质卡片式设计实例赏析网页类卡片设计实例

谷歌应用商店，材质设计卡片，一个是谷歌应用商店，另一个是材质设计卡片 。

谷歌推出的网页应用之中的Google Play，在颜色搭配层面以及界面设计方面，均依照Material design设计理念来进行打造。整个网站的设计，大量运用了卡片设计这种方式。

对于Material Design配色存在以为困难的情况而言，有11条设计资源能够为你提供灵感，这属于相关阅读范围 。

不论首页推荐，还是细分类别，模块化的呈现致使整个网站界面看上去整齐得体，极具条理性，搭配上下、左右的滑动交互，给予用户极强的操作感受。

2. Quora

首先，Quora是一个以信息展示为主的网站，从用户习惯角度而言，用户喜欢阅读成块的内容，而卡片能将信息以区块方式集中到一处，更契合阅读需求，那么其设计首先考量的便是信息流的展示，并且要思索怎样在有限的版面里条理清晰地展出网页内容，同时兼具用户体验以及友好性，对此，Quora巧妙地运用了卡片设计。

好处是，这样的设计使得，内容不会以长篇大论的样式呈现，避免因内容过长，致使用户产生畏惧心理。简单且明快的内容，更易于引发用户兴趣，用户由此能够抉择是否继续阅读下去。卡片把内容提取、优化成有意义的区块，并且不同类型、属性的内容，能够在卡片上组合成为有机的、连贯的聚合体。

3. Linkedin

依据费兹定律，点击目标越大，使用者操作速度就越快。领英网站设计里，采用了文字加图片加链接的方式。当上述所有元素框选在同一个卡片中时，面积较大的图片是卡片的中心，还是整张卡片中最大的可点击范围，也就是详细内容页面的进入点。随着鼠标移入与网页产生交互，用户能得到“可点击”的反馈。

4. Pinterest

以早期卡片式设计而言曾是先驱者的Pinterest，其瀑布流设计所形成的页面设计方式，给用户予以了无缝式的流畅体验，并且，减少点击步骤能够极大限度地留住用户，卡片式设计与瀑布流的结合，就是平常听闻的卡片流 。

像领英那样能展示内容题图且可点击，Pinterest的图片流里，每一张完整的图片具备可被点击的特性。在MaterialDesign当中，常常会让卡片带有微妙的阴影，特别是在与鼠标进行交互之时。如此的设计颇有道理，阴影还有深度会赋予用户视觉感知能力，增强其可见程度，以及知觉层面的“可点击性”。用户把鼠标移到图片上方就能获得这样的点击反馈。

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汽车机械师应用在其中，是这样的链接形式，没错的，就是它，https://dribbble.com/shots/5306051-AR。

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

设计师：刘狗蛋

继续浏览有关 卡片式设计UI设计 的文章