卡⽚式设计流⾏的秘密—看完这15个案例你就懂了！
随着Material Design的流⾏，卡⽚式设计⼏乎成为当前界⾯设计的主流模式，并且已经深⼊到各个⾏业、领域的UI设计当中。卡⽚作为信息载体，也使得卡⽚式UI成为现代⽹页设计和移动应⽤设计的⼀部分。相⽐传统单⼀的页⾯设计，卡⽚设计提供更多个性化的⽤户体验，使界⾯设计清晰平衡、富有美感、简约时尚⽽⼜具备良好可⽤性。⽽卡⽚作为容器，能够适应不同屏幕⼤⼩⽽不破坏信息的展⽰效果。
智能化的⽣活中⼏乎随处可见卡⽚式设计以及基于卡⽚的交互模式。作为设计师，需要考虑使⽤者在不同设备上的使⽤和阅读习惯。⽩天，他们在桌⾯设备浏览信息，休息时间切换到移动设备，⽽晚上则有可能选择平板电脑。所以，在卡⽚设计的前提下，应辅以相应的响应式设计，使得各种设备都能完美的呈现设计。⽽卡⽚布局的设计就⾮常符合这⼀要素。
所以今天摹客将为⼤家普及卡⽚设计的理念，整理⼀些优质的卡⽚式设计资源，希望能在设计上为你带来更多的思考和灵感。如果你对卡⽚式设计⾮常感兴趣，也可以免费下载从原型设计开始制作。
⼀、什么是卡⽚式设计？
卡⽚是含有图⽚和⽂字在内的⼩矩形模块，它是⽤户了解更多细节信息的⼊⼝。要平衡界⾯的美学和可⽤性，卡⽚基本是⼀个默认选择。因为卡⽚⽤起来⾮常⽅便，还可以展⽰包含不同元素的内容。
⼆、卡⽚式设计的优势是什么？
Google将它称之为“Inside Out design”（由内⽽外式），它的本质是更好的处理信息集合。那么卡⽚式设计具备哪些优势呢？
（1）增加空间利⽤率
在传统列表下，内容⼀般为纵向滚动操作，展⽰的内容有限。⽽采⽤卡⽚式的布局，在纵向的内容流⾥，还可以很好的增加横向滑动的内容区域。
（2） 提升可操作性
美食食谱网页界面ui设计灵感
卡⽚是⼀种拟物化元素，可以被覆盖、堆叠、移动、划动。这样能更好的拓展内容视觉深度和可操作性。
⽐如：iPhone⾃带的“提醒事项”APP，就是采⽤卡⽚堆叠的⽅式，⽤户可按照标题快速查⽬标备忘录，同时进⾏点击操作，打开或删除卡⽚内容。
（3）利于信息分层和整合
在卡⽚式设计中，⼀张卡⽚就是⼀个信息模块，⽤户即使快速浏览，也不会产⽣混乱。块状的卡⽚使得页⾯更加整齐美观，同⼀页⾯中卡⽚的不同⼤⼩，还区分了信息的重要等级。
三、优质卡⽚式设计实例赏析⽹页类卡⽚设计实例
1. Google Play – Material Design卡⽚
Google Play作为⾕歌出品的⼀款⽹页应⽤，不管是颜⾊搭配还是界⾯设计都遵循了Material design设计理念。整个⽹站的设计运⽤了⼤量的卡⽚设计。
相关阅读：
⽆论是⾸页推荐还是细分类别，模块化的展⽰使整个⽹站界⾯看起来整洁⼤⽅，⼗分具有条理性。配合上下、左右的滑动交互，给⽤户极强的操作感。
2. Quora
作为⼀个以信息展⽰为主的⽹站，Quora的设计⾸先考虑的是信息流的展⽰。如何在有限的版⾯内有
条不紊的展⽰⽹页内容且兼顾⽤户体验及友好性？Quora机智地使⽤了卡⽚设计。从⽤户习惯来讲，⽤户喜欢阅读成块的内容，⽽卡⽚将信息以区块的形式集中在⼀起，更适合阅读。
好处在于这种设计让内容不会以长篇⼤论的形式出现，避免因为内容太长让⽤户产⽣畏惧⼼理。简单明快的内容更容易引起⽤户兴趣，⽤户也因此能够选择是否要继续阅读下去。卡⽚将内容提取、优化为有意义的区块，⽽且不同类型、属性的内容可以在卡⽚上组合称为有机的、连贯的聚合体。
3. Linkedin