江苏龙网

  1. 主页 > 生活百科 > >

卡片式布局的特点有哪些，卡片式设计的优点介绍

本文对卡片设计进行了梳理:从卡片设计的起源，到卡片设计的各种形式以及卡片设计的优缺点 。希望这篇文章能加深你对卡片设计的理解 。
01 卡片式设计的由来 设计来源于人类生活中早已存在的各种实物 。
比如显示器、手机、名片、信件等等，都是独立承载信息的卡片 。人们可以在不移动电影院的情况下，通过电视观看不同的内容载体 。这时候，电视就充当了内容载体的入口 。名片信的卡感更强 。你可以把一封信折叠起来，便于携带，然后在需要的时候把它展开，以便详细阅读 。
正是人类的生活早就充斥着“卡片式设计”，所以当我们手里有了“卡片式设计”，人们觉得用起来很方便，很熟悉 。
而我们现在使用的系统界面的卡片设计又是从哪里来的呢？
卡片设计最早的应用不是谷歌的材质设计，也不是苹果的iOS设计，而是palm webOS 。
2009年，palm发布了webOS系统的多任务管理和卡片窗口，在发布会上征服了所有观众 。可惜因为各种bug和过时的代码，没有办法在市场上领先 。但它也留下了一份优秀的遗产 。
2009年消费电子展
在webOS中，传统的程序概念被弱化，取而代之的是卡片系统 。的所有任务都以卡片的形式呈现 。任何时候你点击手势区域，你将进入卡片视图 。正在运行的任务显示在卡片中，这些任务以多窗口的形式呈现 。可以看到所有正在运行的任务，滑动切换，点击进入任务 。这种操作极其奇妙 。
更重要的是，webOS中多任务处理的流畅性可以得到很好的保证 。可以说webOS多任务是世界上最好的移动系统多任务平台 。
图片来自:蒂姆·施菲尔德
02 卡片式设计中的各种形态 环顾四周，其实我们使用的app都或多或少的使用了卡片设计，最常见的形式就是首页的轮播横幅 。
淘宝(左)，Appstore(右)
图形内容和视频内容都可以由卡片携带:
大众点评(左)，花瓣(右)
从系统级App任务界面到一个文字入口，卡片设计有不同的形状和品种 。它涵盖了几乎所有可以想到的设计 。
03 卡片式设计的优点 还有为什么那么多设计师热衷于卡片设计？当然，也有很多好处:
1. 独立、聚焦 因为设计会和其他内容有天然的断层，会更容易形成独立的视觉焦点 。
2. 轻便灵活 相比于从传统列表中点击进入内容详情页，直接点击卡片可以直接展开浏览详情，所以交互体验更轻，随时可以恢复卡片模式，非常灵活 。
Appstore主页
Appstore主页
3. 自由组合 参考淘宝首页和appstore首页可以看到，轮播广告、门户、推荐位、列表、文章等不同形式的内容，都可以通过卡片携带的方式自由排版组合 。没有死板的排版规则，对于设计师甚至客户端工程师来说都非常方便，没有各种限制 。
4. 多终端兼容性好 由于不同终端的屏幕不同，设计时需要设计兼容性 。例如，bootstrap框架在pc端是网格兼容的 。屏幕从540一直向上延伸，可以完美显示 。这里使用的是卡片设计，内容被包装在卡片容器中 。
自举卡网格
不仅一个设计兼容多个终端适用，甚至针对不同终端的重新设计也是品牌或设计元素的延伸 。如果能保持视觉模式基本一致，会减少很多学习成本 。
5. 多态操作 卡片是一种可操作性很强的设计模式，可以垂直滑动、水平滚动、点击上下拉伸、长按拖动等等 。
图片来自:Behance
6. 视觉舒适感 由于卡片本身顶部和底部的填充以及卡片之间的边距，卡片的设计往往有大量的空留白 。用光线投射形成合理的层次感，看起来既自然又舒适，对于贴近现实世界的设计，人们自然会有一种熟悉感和亲切感 。所以从视觉体验上来说，卡片设计也是完胜 。
图片来自:Behance
04 卡片式设计的缺点 尽管有种种优势，但我始终认为，世界上没有绝对完美的设计体验 。这也是人类从未停止探索交互体验和美感的原因 。卡片设计也有它的缺点:
浪费空间，导致一屏展现的信息量很少 不考虑卡片设计形式，单是卡片设计就比常见的列表设计占用了更多空的空间 。
图片来自:我自己
再加上很多不同内容(视频、图文)的卡片设计会和简单的列表有很大的不同，所以需要占用的空空间只会多很多 。
不适用使用卡片设计的场景 因为上面提到的缺点，有些场景不适合卡片设计 。
1)有连续上下文的内容，例如:文章翻页
具体请体验一下UC浏览器的阅读模式 。当你向上滑动翻页的时候，你会立刻告诉刷新的下一页的文字与上一页的文字无缝衔接 。沉浸式阅读不应该造成障碍或错误 。


推荐阅读


上一篇：苹果的备份文件在哪里打开，带你了解苹果手机的使用技巧

下一篇：天猫网店转让费是多少，店铺转让注意事项