本文对卡片设计进行了梳理:从卡片设计的起源，到卡片设计的各种形式以及卡片设计的优缺点。希望这篇文章能加深你对卡片设计的理解。
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浏览器的阅读模式。当你向上滑动翻页的时候，你会立刻告诉刷新的下一页的文字与上一页的文字无缝衔接。沉浸式阅读不应该造成障碍或错误。
2)依赖文本进行阅读的简单重复的内容，如:文章列表、聊天列表
今日头条(左)、微信(右)
3)需要同时在多个列表中获取和比较的内容，比如:搜索结果
JD.COM(左)、淘宝(右)
在这些页面中使用卡片设计会降低阅读效率，使设计失去优势。
本文来自热恋少女投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/603288.html
微信扫一扫 
