卡片式设计流行的秘密 — 看完这15个案例你就懂了！

时间 2019-11-07

标签卡片设计流行秘密看完个案繁體版

原文原文链接

随着Material Design的流行，卡片式设计几乎成为当前界面设计的主流模式，而且已经深刻到各个行业、领域的UI设计当中。卡片做为信息载体，也使得卡片式UI成为现代网页设计和移动应用设计的一部分。相比传统单一的页面设计，卡片设计提供更多个性化的用户体验，使界面设计清晰平衡、富有美感、简约时尚而又具有良好可用性。而卡片做为容器，可以适应不一样屏幕大小而不破坏信息的展现效果。app

智能化的生活中几乎随处可见卡片式设计以及基于卡片的交互模式。做为设计师，须要考虑使用者在不一样设备上的使用和阅读习惯。白天，他们在桌面设备浏览信息，休息时间切换到移动设备，而晚上则有可能选择平板电脑。因此，在卡片设计的前提下，应辅以相应的响应式设计，使得各类设备都能完美的呈现设计。而卡片布局的设计就很是符合这一要素。ide

因此今天摹客将为你们普及卡片设计的理念，整理一些优质的卡片式设计资源，但愿能在设计上为你带来更多的思考和灵感。若是你对卡片式设计很是感兴趣，也能够免费下载Mockplus从原型设计开始制做。模块化

1、什么是卡片式设计？

卡片是含有图片和文字在内的小矩形模块，它是用户了解更多细节信息的入口。要平衡界面的美学和可用性，卡片基本是一个默认选择。由于卡片用起来很是方便，还能够展现包含不一样元素的内容。布局

2、卡片式设计的优点是什么？

Google将它称之为“Inside Out design”（由内而外式），它的本质是更好的处理信息集合。那么卡片式设计具有哪些优点呢？post

（1）增长空间利用率
优化

在传统列表下，内容通常为纵向滚动操做，展现的内容有限。而采用卡片式的布局，在纵向的内容流里，还能够很好的增长横向滑动的内容区域。网站

（2）提高可操做性
ui

卡片是一种拟物化元素，能够被覆盖、堆叠、移动、划动。这样能更好的拓展内容视觉深度和可操做性。设计

好比：iPhone自带的“提醒事项”APP，就是采用卡片堆叠的方式，用户可按照标题快速查找目标备忘录，同时进行点击操做，打开或删除卡片内容。3d

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

在卡片式设计中，一张卡片就是一个信息模块，用户即便快速浏览，也不会产生混乱。块状的卡片使得页面更加整齐美观，同一页面中卡片的不一样大小，还区分了信息的重要等级。

3、优质卡片式设计实例赏析

网页类卡片设计实例

1. Google Play – Material Design卡片

Google Play做为谷歌出品的一款网页应用，不论是颜色搭配仍是界面设计都遵循了Material design设计理念。整个网站的设计运用了大量的卡片设计。

不管是首页推荐仍是细分类别，模块化的展现使整个网站界面看起来整洁大方，十分具备条理性。配合上下、左右的滑动交互，给用户极强的操做感。

2. Quora

做为一个以信息展现为主的网站，Quora的设计首先考虑的是信息流的展现。如何在有限的版面内有条不紊的展现网页内容且兼顾用户体验及友好性？Quora机智地使用了卡片设计。从用户习惯来说，用户喜欢阅读成块的内容，而卡片将信息以区块的形式集中在一块儿，更适合阅读。

好处在于这种设计让内容不会以长篇大论的形式出现，避免由于内容太长让用户产生畏惧心理。简单明快的内容更容易引发用户兴趣，用户也所以可以选择是否要继续阅读下去。卡片将内容提取、优化为有意义的区块，并且不一样类型、属性的内容能够在卡片上组合称为有机的、连贯的聚合体。

3. Linkedin

根据费兹定律：点击目标越大，使用者的操做速度越快。领英的网站设计中，使用到了文字+图片+连接的方式。当以上全部的元素框选在同个卡片中时，面积较大的图片则是卡片的中心，而且也是整张卡片中最大的可点击范围（详细内容页面的进入点）。伴随鼠标移入与网页产生的交互，用户便可获得“可点击”的反馈。

4. Pinterest

做为早期的卡片式设计先驱者，Pinterest的瀑布流设计的页面设计方式为用户提供了无缝式的流畅体验。同时，减小点击步骤也能够极大限度的留住用户。卡片式设计和瀑布流的结合也就是常据说的卡片流了。

与领英的内容题图展现而且可点击相似，Pinterest图片流的每一整张图片都具备可点击性。Material Design中经常会让卡片拥有微妙的阴影，尤为是与鼠标交互的时候。这种设计是很是有道理的，阴影和深度会给予用户以视觉感知力，强化它的可见性，以及知觉上的“可点击性”。用户将鼠标移到图片上方便可获得这样的点击反馈。

5. Dribbble