在界面设计中，卡片作为常用设计方式之一，较好地平衡了视觉美感和功用性，在帮助界面从单一信息展示页跨入更个性的体验转变中，发挥着重要作用。
1 什么是卡片
物理世界中，卡片是用以承载信息的独立矩形薄片。例如电话卡、明信片、身份证、扑克等均属此类，其具有外形小巧、方便灵活、内部信息独立、易分发等特点。
物理世界中的卡片
转至虚拟世界，卡片一般由信息内容和操作组成，卡片外部主要呈现该卡片包含的最重要（最具吸引力）信息和操作，卡片内部再进行详细阐述，提升用户浏览和操作效率。如我们常见的Pinterest、Instagram等都采用了卡片式布局的方式来处理和展示信息。
2 为什么卡片好用
1. 极佳的隐喻：卡片是我们物理世界中常见的信息载体，当它延伸至虚拟世界后，其信息结构和交互方式更容易被感知和理解。
Calendar by whitton
2. 极强的内容组织力：卡片间相互独立，归纳组合相同维度内容，区分并聚合不同维度的内容，形成清晰连贯的内容组合。
Fabulous-一款帮助养成良好习惯的应用
3.屏幕拓展：同形态的卡片排列，欲露未露的一部分可暗示用户滑动查看更多（猎物奖励原理，也鼓励用户下意识地滑动以获取更多信息），提高空间利用率。
4.统一性：卡片近乎无穷无尽的变化和组合形式决定了其可以根据承载设备的尺寸，轻松扩展或者收缩，有利于构建跨设备的统一美学性。
Kitchen Stories-一款介绍美味佳肴的菜谱应用
5.抓住注意力：通过模拟景深的效果来表达内容信息的层级关系，突出重点内容（拉开与背景环境的差异），具有空间感（吸引力）。
6.灵活性：正因为卡片内容的相互独立，决定了卡片间可以随意组合、动态呈现重点，帮助用户更有效地获取对其有用的信息。
7. 强大的交互性、操作性，视觉深度，例如陌陌删名牌，app store首页卡片通过扩展收缩的手势来开关详情页。该部分可借助移动端的自然手势交互方法进行设计。
最美有物（滑动浏览）+积目（左右滑，选择喜欢或不喜欢）
3 卡片怎么用
适用
A、流：流是根据一定规则抽离出信息库中的部分信息，重新排列组合呈现给用户的信息组合。信息块内部信息类别丰富且操作多样，信息块之间独立分散，如Pinterest。
B、发现探索类：在该场景下，信息多含有较强的视觉效果，以卡片的形式展现，可使用户更沉浸于当前内容，如最美有物首页。
C、独立的信息块：当需要单独呈现某信息时，卡片作为容器的作用就发挥了出来。例如，iPhone待机状态下，出现的通知组，独立呈现、互不干扰、单独操作；常见的弹窗也属于此列。
不适用
卡片虽然具有以上优点，却也因此而具有信息密度较低、占空间的特点。
在设计中，当页面内容属于未承载很多操作且同质化时，可直接使用列表代替，例如新闻推荐页，每个信息组仅由结构化的文本和图片的组成，完全可用简单的网格代替。
虎嗅App
网友评论