在这篇文章中，创作者对卡片式设计进行了整理：从卡片式设计的来历、到卡片式设计的各种各样形状和卡片式设计的优缺点，期待根据该文可以增加你对卡片式设计的了解。
01 卡片式设计的来历
卡片设计来自早就存在于人类生活的各种各样实际物件。
举例说明，显示屏、手机上、个人名片，一封信、这些，全是单独承重信息内容的一个个卡片。大家无需把影院搬离就能通过电视观看到不一样的信息质粒载体，此刻电视机当做是指具体内容媒介的通道。而名片盒信件这类卡片感就更强了，你可以把一封信伸缩下去，方便携带，直到需要的时候再屈伸起来，开展详尽阅读文章。
恰好是人类生活早就弥漫着“卡片设计”，因此在我们手上的机器设备页面拥有“卡片式设计”的情况下，大家反倒感觉运用下去很方便和有熟悉感。
而现在我们用的操作界面的卡片式设计来自哪里呢？
最开始运用卡片式设计并不是是google 的Material Design 也不是苹果公司的iOS Design，而是palm webOS。
2009年palm公布的webOS系统软件的多个任务管理方法和卡片式对话框征服了发布会现场的所有的观众们。遗憾由于各种各样BUG和源代码的老旧造成没办法在行业市场占好主动权。但是却也留下很优秀的财产。
2009年CES新品发布会
webOS中，传统定义里的程序流程定义被减弱，取代它的是指卡片系统软件。每一个每日任务均以卡片的类型产生。任何时刻点一下动作区，都是会进到卡片主视图。卡片主视图中展现出正在运行的每日任务，这种每日任务以多用户的方式展现。你能够看见正在运行的所有目标，能通过滚动开展转换，点一下后进入每日任务，那样一种操作方式，是非常奇妙的。
更为重要的是webOS 里的多个任务的流畅度能够获得非常好的保障，可以这么说webOS的多个任务是世界上最好的移动系统多个任务服务平台。
照片来源于：Tim Schofield
02 卡片式设计里的各种各样形状
远远望去，实际上大家应用的app多多少少都有用到卡片式的设计，最常见的一种形状乃是主页的滚屏Banner
淘宝网（左）、Appstore（右）
无论是文图具体内容还是视频内容都能通过卡片开展承重：
大众点评网（左）、花瓣儿（右）
大到系统级的App任务界面，小到一个文字内容，卡片式设计的千姿百态，各种各样。基本上涵盖了全部能想起的设计。
03 卡片式设计的优势
而为什么那么多设计师热衷卡片式设计呢？自然是由于优势很多：
1. 单独、对焦
卡片设计由于会跟别的具体内容有自然的断块，因此会比较容易产生单独的视觉效果聚焦点。
2. 轻巧灵便
相较于从传统列表点一下进具体内容宝贝详情，卡片能直接点一下进行立即访问详细信息，交互体验更加轻，并且随时可以修复卡片方式，十分灵便。
Appstore主页
Appstore主页
3. 随意搭配
参照淘宝主页和appstore主页看得出，不一样形状的具体内容比如滚屏广告宣传、通道、橱窗推荐、列表、文章内容根据承重于卡片当中，还可以实现随意排版设计组成。没了呆板的排版设计标准，针对设计师乃至手机客户端技术工程师而言，全是十分的便捷，少了各种各样限定。
4. 多终端兼容模式好
不一样终端设备因为显示屏的不一样，造成做设计的情况下应该做设计适配。例如bootstrap架构在pc端的栅格数据适配。显示屏从540一直往上面拓展，都可以极致表明。这儿运用的恰好是卡片式设计，用卡片器皿裹住具体内容。
Bootstrap card grid
不单单是一设计适配多终端的情形可用，即便是对于不一样终端设备重新做设计都是应该做知名品牌或是设计原素的拓宽。如果能维持款式的视觉效果基本一致，会降低许多的培训成本费。
5. 多态性实际操作
卡片是可执行性十分弱的设计方式，能够竖向滚动，能够横着翻转，能够点一下开展左右屈伸，还能够长按拖拽这些。
照片来源于：Behance
6. 视觉效果舒适度
卡片设计因为卡片自身的左右Padding（内边距）和卡片间的Margin（外间隔），通常含有很充裕的区域留白艺术。再加上根据轻投射产生有效的质感，看起来既肯定又舒服，并且针对贴近真实的世界的设计，人要顺理成章造成熟悉感和亲近感。因此从视觉体验上，卡片式设计都是完爆。
照片来源于：Behance
04 卡片式设计的缺陷
虽然有这么多的优势，但是我一直都觉得世界上是没有绝对很好的设计感受。因此我们对交互体验和艺术美的探寻步伐才是从并没有停过。而卡片式设计也是有它缺陷：
消耗室内空间，造成一屏呈现的数据量非常少
撇开卡片设计形状不用说，只是卡片设计自身就比一般列表的设计必须占有更多的是室内空间。
照片来源于：自己
再加上许多卡片设计不一样的具体内容（短视频、文图）都会跟纯粹的列表有较大的差异，因此要占有的区域会只多不少。
不适合应用卡片设计的情景
由于有上边提及的缺陷，因此有一些情景也不适合用卡片式设计了。
1）前后文具备持续性的具体内容，比如：文章内容换页
实际请感受下UC浏览器的护眼模式，上滑换页的情况下，会立刻讲更新出去的下一页文本无缝连接上一页的文本，沉浸式体验阅读是最好不要造成阻拦或是断块的。
2）取决于文字开展阅读文章的，简单，反复的具体内容，比如：文章内容列表、闲聊列表
今日今日头条（左）、手机微信（右）
3）必须与此同时获得而且较为好几条列表开展较为的具体内容，比如：百度搜索
京东商城（左）、淘宝网（右）
以上这种网页页面使用了卡片式设计会造成阅读文章高效率减少，使设计丧失优点。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
