卡片式设计相信大家对于这个名词大家都不陌生啦，卡片式设计是近几年很流行的设计趋势，并且广泛的运用到各个行业领域的UI设计中
卡片式设计，Google将它称之为“Inside Out design（由内而外式）”，它的本质是更好的处理信息集合
那么今天我们就来整理一下卡片式设计的特点和好处！
什么是卡片式设计？
卡片式设计我们可以简单的理解成是：矩形+信息，卡片就是交互信息的承载体
卡片式设计的好处有什么？
* 区分和整合信息
* 提升用户的可操作性
* 增加界面空间的利用
01：区分和整合信息
利用卡片式设计有利于我们对不同信息内容进行有序的整理，每一个卡片矩形承载的信息分为一个版块，可以使界面保持一致性，并且使整个界面看起来更加的有序，不同大小的卡片还可以区分层级的重要性，也会使整个界面设计更加美观！
案例1：
我们常用的app，京东的“我的”界面，以及淘宝的“我的”界面
（京东）
（淘宝）
这两个界面都采用了卡片式的设计方法，将个人基本信息分为一个版块，会员入口也是单独分为一个小的卡片，以及下面的订单等信息都是按照不同的版块做了明显的区分，用户一看到每一个版块就很快明白哪一个版块承载的是什么信息，也能很快的找到自己想要使用的功能版块，
案例2：
还有京东和淘宝的购物车也都是采用同样的卡片式设计
（京东）
（淘宝）
京东和淘宝的购物车界面都是按照商家的商品分类放在一个卡片内，以商家为区分的要素，
只针对京东和淘宝这两个大家常用的APP我们就会发现很多页面都是采用卡片式设计的方法，包括首页商品的展示，以及淘宝的“微淘”界面，“我的订单”界面等等，我这里可就不再截图给大家展示啦！细心的小伙伴肯定也都注意到啦！
那么就直接给大家看一些其它作品运用卡片式设计是怎么区分和整合信息的吧！
案例欣赏：
dribbble by Zihad-Islam
花瓣
以及很多网页设计界面也是采用了卡片式设计的方式
案例欣赏：
（站酷）
（花瓣）
（dribbble）
02：提升用户的可操作性
卡片是一种拟物化元素，可以被覆盖、堆叠、移动、划动。这样能更好的拓展内容视觉深度和可操作性。并且增添了用户的操作兴趣，更加有趣味性，使人机交互更加紧密！
案例一：
途家首页的“优质PRO”版块的设计就采用了卡片设计的“堆叠”
效果，滑动看下一个卡片信息，采用精美的大图卡片形式，精简的文字介绍使整个卡片更加美观，精致，吸引用户，点击和滑动！
案例二：
“支付宝”的银行卡的显示也是同样的采用了“堆叠”的卡片样式设计，极大的利用了页面的空间
案例欣赏：
（花瓣）
（花瓣）
03：增加界面空间的利用
其实上面第二条也同样的达到了增加界面空间的利用的作用，
此外在传统列表下，内容一般为纵向滚动操作，展示的内容有限。而采用卡片式的布局，在纵向的内容流里，还可以增加横向滑动的内容区域。合理的运用界面有限的空间展示出重要的信息，并且可以增添趣味性
案例一：
同样我们在“途家”首页也就可以看到运用横滑动的卡片式设计的效果，一般都是采用矩形背景+图片+文字，或者矩形背景+文字的组合方式，左右滑动为界面节省了不少的空间，并且利用横向滑动卡片式设计将同一类的信息展示在统一层级，更加聚集，明确，不会显得混乱
(途家）
（途家）
案例二：
“脉脉”首页的“你可能感兴趣的主题”版块同样也是采用横向滑动的卡片式设计方式
案例欣赏：
同样的案例还有很多我就不一一列举啦还是来欣赏一些优秀的卡片式设计吧！
（花瓣）
（花瓣）
（花瓣）
不同的卡片样式的设计和运用会带来不一样的视觉效果，并且使界面的层级划分清晰明了，需要根据实际界面需求情况选择不一样的卡片样式展示！
在选择使用卡片式设计的时候也是需要考虑你的页面信息是否适合采用卡片式设计，不同需求条件下选择不一样的设计样式，效果就会不一样，深刻理解需求才能选择最好的设计样式来匹配！
好啦！今天到这里又要结束啦，在这里祝大家中秋快乐，玩的愉快吧！
加班整理出来的文章分享就免费给个小心心吧！
点击右下角“在看”以及分享给更多的设计爱好者吧！😍
欢迎关注“设计小余”公众号
和我一起探寻设计之路！
作者：设计小余（余小梅）
本文由 @设计小余 原创发布。未经许可，禁止转载。
往期好文推荐
—
网友评论