大家好啊~又到了周三这个尴尬的日子，向后看已经上了两天班疲惫感与日俱增，向前看还得再熬两天，周末似乎遥遥无期，简直无力感MAX。
这时候，老板进来雪上加霜了：“你这个界面不行啊？”别冲动，稳住！现在你只需要告诉他：“老板，我这个用了material desisn的卡片式设计，配合iOS毛玻璃效果和2dp的标准圆角。”ok fine，现在你可以优雅地去吃午饭不用加班了。
是谁给你的在老板面前装X的勇气？当然是这篇详细介绍卡片式设计的文章了。欢迎大家强势围观！
缘起：material design
material design是Google推出的一种用现实世界的物理关系去表现界面交互的设计语言。Google选择了“卡片”作为承载信息的方式，卡片是一种容器，并且能够适应不同屏幕大小而不破坏信息的展示效果。“卡片”之间可以像生活中纸片一样，重叠、分割、推动（表现在ui界面上是滑动）。
卡片式设计的核心优点
1. 利于信息分层和整合
在卡片式设计中，一张卡片就是一个信息模块，用户即使快速浏览，也不会产生混乱。块状的卡片使得页面更加整齐美观，同一页面中卡片的不同大小，还区分了信息的重要等级。
2. 拥有更好的交互体验
对于卡片式设计，用户不止下滑、上拉等传统的交互手势，卡片之间可以分离、拼合、滑入滑出，能够实现对现实世界更真实的交互模拟。
3. 兼容性极强
响应式设计对移动端来说非常重要，因为它意味着在多种尺寸的移动设备上是否能获得一致的浏览效果。
卡片的分类
传统卡片
传统移动端卡片由一张图片、提示文字和按钮构成，且卡片四周均有留白。图片迅速抓住用户的注意力，文字进行描述，按钮承担用户点击、点赞等交互行为。
相应地，网页端卡片则是将不同的信息从原本的版式中解构，让一个个“信息块”变得更加明显。用阴影和留白来表现卡片的立体感。
通栏卡片
与传统卡片相比，通栏卡片没有了左右两端留白，可显示图片、文字的空间更大，卡片与背景的关系用一条背景色块抽象表现。它更像一种在极简列表式和卡片式设计之间的折中选择，既保留了卡片式的分层方式和强交互性，又使页面变得更简洁。
但通栏卡片的视觉冲击和趣味性较弱，比较适用于以文字为主要信息的页面，或者页面本身层次较多内容丰富的情况。
穿插卡片（水平滚动卡片）
水平滚动的卡片也很常见，比如下厨房、豆瓣等app。
它最大的特点就是解决了卡片式信息浪费空间的缺点，用户通过水平滚，原本只能放置一张卡片的空间被极大扩展，并且可以通过“查看更多”按钮获得更多卡片信息。
穿插卡片打破了竖直滚动页面的单一交互行为，让用户拥有了多样的浏览选择。与之相类似的卡片交互方式是叠加。用户的滑动行为，就像打开一副扑克牌，用过淘宝旧版“每日店铺推荐”的朋友印象应该比较深刻。
卡片流
这两年特别流行的一种页面布局方式就是瀑布流，这种设计能够带来极为流畅的浏览体验，同时减少点击步骤以最大限度留住用户。卡片式设计和瀑布流的结合就是卡片流了，一个经典的例子就是pinterest。
但卡片流的缺点也很突出，永远的向上滑动更新永远无法浏览到尽头，这实际上会让用户陷入无限而冗杂的信息之中。因此现在多数移动端采用的的卡片流往往是可以下拉到底端的，并配合水平滚动卡片来在页面中展示更多信息。
卡片式的新发展
卡片式设计在2014年提出，但至今app界面仍然热衷于使用这种方式，这一定程度上说明了卡片式设计良好的适应性和生命力。
那么，现在流行的卡片式设计又有什么特征呢？
1.使用圆角
有研究显示，用户点击圆形按钮的次数要远超方形按钮——圆形具有更强的吸引力和亲和力。尤其在ios系统圆角风格大热后，卡片也越来越多地使用圆角。
2.用背景模糊替代投影
这也是苹果引领的设计潮流变化——我们都很熟悉的苹果控制面板“毛玻璃”效果。当用投影表现卡片空间感的方式泛滥后，ui设计师开始尝试模糊背景来凸显卡片。
淘宝最新一版会员卡页面就采用了背景模糊效果。
3.卡片和图片不再是两个层级
卡片不再作为展示图片文字的背板，而是将信息融入卡片中。一种做法是卡片采用渐变色彩，另一种则是使用背景照片，无论哪一种，文字都是直接展示在卡片上的，卡片的嵌套模式由三层变成了两层。
微信公众号改版后，也使用了背景照片的方式。
卡片式设计似乎朝着两种方向发展，一种是尽量用圆角、投影、丰富的色彩来增强“卡片”拟物，另一种则是更加极简，卡片的概念隐匿于线条、大量留白之中。我们对于后者，往往第一时间无法判断出这实际上是一种卡片式设计。但观察其归纳分类信息的方式就可以明白，这实际上是卡片式设计的套路。
小编对于卡片式设计的分析可能还不够全面，欢迎有不同看法的小伙伴留言交流。
本文地址：
http://www.njanyou.cn/news/1818.html
Tag：
专业服务：
南京网站制作,
南京网站制作公司,
南京网站建设公司
联系电话：025-65016872
上一篇：
职场新人必须要学的Excel技巧（下）
下一篇：
拼多多砍价3块10刀，14块50刀？独家揭秘套路局中局！不要做了别人的羊毛！
