引言：

从实体世界中的身份证、银行卡、名片到数字界面中的信息容器，“卡片”这一形态在UI设计中的演进已跨越十余年。卡片化UI设计的核心逻辑在于将信息封装为独立、自包含的内容单元，以模块化的方式规整信息、清晰划分视觉层级，同时拥有造型、色彩、空间光影等丰富的改造空间。相比传统列表式布局，卡片式设计不仅让内容更具区域分割感，还赋予了界面更强的层次感与滑动体验。卡片化设计最早可追溯至Pinterest引入的卡片概念——将某主题相关的所有信息纳入一个信息盒子。随后，Google Now将卡片作为最显眼的功能载体，启发了从“知识图谱”搜索结果到Google+资料几乎所有的界面设计。Facebook、Spotify乃至iOS 7的应用切换界面，都大量采用了卡片式设计。如今，卡片化UI早已超越单纯的“容器”功能，演变为融合业务特征、空间层次、动态交互的复合设计语言。卡片设计的核心价值是构建界面空间层次，而进阶设计的关键，就是深挖纵向Z轴的视觉表现力。从闲鱼的业务特征化卡片到嘀嗒出行的结构嵌合卡片，从HarmonyOS的3D互动卡片到长虹魔方桌面的自定义卡片生态——卡片正在从“信息载体”进化为“体验载体”。本次研究围绕卡片化UI设计展开，梳理核心设计逻辑、创新方向与落地案例，探索卡片这一经典UI模式在当代产品中的无限可能。

01

闲鱼

Design by：闲鱼设计团队（阿里巴巴）

在租房频道，闲鱼将“业务特征图形化”做到了极致。传统租房板块多以“文字+普通卡片”呈现，用户需先阅读文字才能识别功能；闲鱼则直接将“房屋结构”转化为视觉符号——卡片上用简化的房屋轮廓图标替代传统标签，配合“RENT”英文标识，让用户一眼就能关联“租房”业务。这种设计通过图形化大幅降低了信息识别成本，同时独特的视觉符号也加深了用户对产品的记忆度。设计启示在于：UI设计不是孤立的视觉创作，而是业务的“视觉转译”——把抽象的业务属性转化为直观的图形符号，才能让设计既服务业务，又形成差异化记忆点。

在副业栏目（如游戏指导、情绪聊愈、心理咨询），闲鱼则采用了“异形卡片+多层结构”的设计。每张卡片的右上角都做了凹陷处理，将功能图标嵌入凹陷处，形成“卡片-图标”的第一层关联；同时每张异形卡片下方又叠加了一层浅色调的背景卡片，通过色彩深浅和轮廓差异，形成“背景卡片-异形卡片-图标”的三层结构。这种设计不仅让每个副业模块的边界更清晰，还通过Z轴层级的差异，避免了多模块排列的呆板感。核心可展示界面包括租房频道列表页、副业栏目卡片流、个人中心服务入口。整套设计证明：当多个同类模块并列时，与其在平面上做颜色区分，不如在Z轴上做层级设计——通过异形造型、背景衬托等方式构建多层结构，既能提升界面的空间感，又能强化模块的差异化。

02

嘀嗒出行

Design by：嘀嗒出行设计团队

嘀嗒采用“超椭圆头像”，并将其与个人信息卡片的左上角凹陷处精准匹配——头像的边缘与卡片凹陷完美贴合，仿佛“嵌”在卡片里。这种设计既突出了头像这个核心元素，又避免了传统布局中头像与卡片之间的负空间浪费，让整体结构更紧凑饱满。同时，卡片内信用分、小红花、好评率等信息围绕头像有序排布，视觉流自然且不杂乱。设计启示在于：个人中心的差异化，无需复杂的色彩或动效，从“结构适配”入手即可。让核心元素（如头像）与容器（如卡片）形成视觉关联，既能解决空间利用问题，又能做出独特的设计感。

嘀嗒出行的卡片化设计远不止于个人中心的结构创新。在优惠券与福利场景中，卡片同样扮演着核心角色——每张优惠券被封装为独立的卡片单元，面额、使用条件、有效期等信息在卡片内有序排布。无论是“出行优享卡”、“学生专享周卡”，还是多款打车优惠券，卡片化的信息组织形式让用户能够在滑动中快速浏览、对比、决策，大幅降低了复杂优惠规则下的认知负荷。这种将信息“装进卡片”的设计，正是卡片化UI最基础却最广泛的应用范式。

03

HarmonyOS 6

Design by：华为HarmonyOS设计团队

HarmonyOS 6“互动卡片”的核心优势在于“交互维度的延伸”。以鸿蒙版优酷视频的“AI陪伴卡片”为例，其设计并未止步于平面UI。卡片中的3D河马形象拥有极高的立体质感，不仅能随着用户的点击做出挥手、跳跃等动作，还设计了特别的“出框”效果——河马的身体会自然地探出卡片边界，仿佛要从屏幕走出来。点击“与我聊天”即可直达少儿频道，与河马语音聊天、听故事、看动画。鸿蒙版咪咕视频适配的“赛事卡片”同样令人印象深刻——只要轻点卡片，一段流畅的3D踢球动画就会直接呈现，让用户在桌面上就能感受到浓厚的赛事氛围。此外，鸿蒙版航班管家的互动卡片能通过点击3D人偶触发炫酷的信息查询动效；鸿蒙版小红书的“摸鱼一刻”和“桌面好友”互动卡片主打情绪价值；酷狗音乐的桌面卡片在切歌时还会触发“换唱片”动效。