在这篇文章中，创作者对卡片式设计开展了整理：从卡片式设计的来历、到卡片式设计的各种各样形状和卡片式设计的优点和缺点，期待根据该文可以加重你对卡片式设计的了解。
01 卡片式设计的来历
卡片设计来自早就存有于人们日常生活的各类实际物件。
举例说明，显示屏、手机上、个人名片，一封信、这些，全是单独承重信息内容的一个个卡片。大家不用把影院搬离就可以借助电视机收看到不一样的具体内容媒介，此刻电视机当做的是具体内容媒介的通道。而名片盒信件这类卡片感就更强了，你能把一封信折叠式下去，便捷带上，直到必须的过程中再屈伸起来，开展详尽阅读文章。
恰好是人们日常生活早就弥漫着“卡片设计”，因此在我们手上的机器设备页面拥有“卡片式设计”的情况下，大家反倒感觉应用的时候很便捷和有了解感。
而人们目前用的操作界面的卡片式设计来自哪里呢？
最开始运用卡片式设计并并不是google 的Material Design 也不是iPhone的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）必须与此同时获得而且较为好几条列表开展非常的具体内容，例如：百度搜索
京东商城（左）、淘宝网（右）
以上这种网页页面采用了卡片式设计会造成读书高效率减少，使设计丧失优点。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
