F2.08.1cards for heterogeneous independent units设计
卡片适合异构且可独立消费的内容
别名: 卡片布局 · card layout · 信息卡
概念解释
一张卡片说的是:这个矩形是一个完整对象,你可以单独看完、单独动手,不必先读邻居。房源、菜谱、一个人——内部结构可以不同(有的有图,有的有地图,有的有视频),彼此又不是必须按顺序读完的步骤。异构加上可独立消费,卡片才赚回它那一圈框。
结账步骤、同一批邮件、同一张表的行,对象并不独立,结构也不异构。给它们套卡,框会跟顺序和比较作对。瀑布流解决的是变高媒体怎么堆,和「这是不是一个对象」不是一件事。
机制
框是共同区域:框里的东西先被看成一个客体。客体感对「选一个去用」有帮助,对「沿一列字段往下比」有害,因为框打断了跨卡片的列对齐。异构内容在表格行里放不下(地图和视频没有同一套单元格),卡片允许每张内部自定结构,作为交换,你失去了跨项扫描。
独立消费意味着拿掉邻居,这一张仍能被理解。若理解依赖「它是第三步」或「它左边那张的续」,框就是在撒谎。
边界
仪表盘上的指标卡看起来像卡片,但常常要并排比较数字,严格说是「带框的单元格」。一旦比较是主任务,框要弱,数字要对齐成列。媒体浏览用卡片当容器可以,若高度完全随图走,已经滑向瀑布流,阅读顺序问题归那边。
小数量(两三张)的异构对象,卡片几乎总是对的。上百张同结构对象,即使每张「可独立打开」,比较和扫描会压过客体感。
怎么落地
- 问两句:藏起其他张,这一张还能否被理解和操作?内部字段是不是同一套图式?前者否或后者是,就不要用卡片当主布局。
- 用卡片的模块,把主键(图或标题)放进框里完整呈现,动作也落在这一张上,而不是依赖页级工具条才能完成「消费」。
- 验证:打印一组卡片,每次只露一张给没看过产品的人,问「这是什么、你能对它做什么」。说不出对象、或必须问「前面是什么」的,卡片在假装独立。再把同构的那些抽出来排成表,看比较是否立刻变容易——变容易就说明它们不该靠卡片活。