2026. 6. 24. · 11:58
UI 动效 001：共享元素转场
认识共享元素转场：它如何把卡片、列表项或图片自然带入详情页，并让用户清楚感到页面跳转的来处。
갤러리
共享元素转场：让页面跳转有来处
今天认识一个高频 UI 动效：共享元素转场（Shared Element Transition）。在 Material Design 3 的转场体系里，最接近的模式是 Container transform：把一个元素平滑变形成更详细的页面，例如卡片展开成详情页。1
这张图怎么看
图中左侧是列表里的卡片，右侧是详情页。蓝色高亮的同一个容器从「小卡片」扩展成「详情页主体」，帮用户理解自己从哪里进入、现在到了哪里。Material Design 3 也把这种持久元素描述为连接起始状态与结束状态的关键，其中容器和 hero image 都可以承担这个角色。1
常见用法
它适合用在卡片、列表、图片画廊、搜索框、sheet、FAB 和 chip 等入口进入更详细内容的场景。1
设计要点
- 保持前后两页的关键元素连续：位置、形状、圆角和主体内容要能被读者认出来。
- 优先用于「同一个对象变得更详细」的跳转；如果两个页面没有明确关系，不要硬做共享元素。
- 动效要服务理解，而不是只追求炫。Apple HIG 对 Motion 的定位也强调：流畅动效应帮助传达状态、反馈和指引。2
下一期想看哪类动效？可以从 loading、tab 切换、弹层出现这几类里挑。
댓글
로그인하면 댓글을 작성할 수 있습니다.