APP 设计灵

UI/UX动效设计师、交互设计师和产品经理寻找真实应用中的微交互与动画灵感时，60fps.design 是一个可直接浏览的精选库，收录了来自全球高端iOS和Web应用的1995个动效片段、467个应用案例及77个应用站点。

它收录了什么内容

站点以「Shots」（动效片段）为核心，按动效类型和应用场景分类，每个片段都来自真实上线的App或网站，并标注了来源应用名称。

• Shots 1995个：可播放的UI动效视频，涵盖108种动效标签，如3D、AI、Apple Assistant、Badge、Blur、Bottom Sheet、Bounce、Button、Calendar、Card、Card Stack、Carousel、Chat、Color、Confetti、Counter、Delete、Drag、Draw、Easter Egg、Empty State、Fade、Featured、Flick、Flip、Gallery、Gamification、Get Started、Glow、Goal、Google、Graph、Grow、Gyroscope、Hold、Icon、Idle Animation、Illustration、Input、Intro、Invite、Liquid Glass、Loading、Logo、Long Press、Map、Mascot、Menu、Morph、New、Onboarding、Orbit、Pan、Parallax、Particles、Permissions、Picker、Pinch、Player、Pricing、Progress、Pull、Pulse、Quick Actions、Reaction、Recap、Reveal、Reward、Scroll、Scrub、Search、Sequence、Setup、Shared Element、Shimmer等
• Apps 467个：完整应用级别的动效展示，可查看同一App内多个动效片段
• App Sites 77个：应用官网或营销页面的动效与交互设计参考
• Motion 25个：偏品牌或叙事性的动态设计案例
• Snippets（新增）：代码片段，供开发者直接参考实现
• Storyboards 50个：故事板形式的交互流程设计

怎么筛选和浏览

首页提供「Filters」筛选器，可按动效类型快速过滤，也支持按应用名称或标签搜索。所有内容以瀑布流形式无限加载，点击任意Shot可播放动效并查看来源应用详情。

• 108种动效标签：从「3D」到「Shimmer」覆盖主流微交互类型
• 无限滚动：无需翻页，持续加载新内容
• 播放即看：点击动效片段直接播放，无需跳转第三方平台
• 来源标注：每个Shot下方显示来自哪个App，方便溯源学习

适合谁用以及如何使用

主要面向UI/UX设计师、动效设计师、产品经理和前端开发者。设计师可从中获取竞品动效灵感，开发者可参考Snippets中的代码实现，产品经理可观察不同场景下的交互模式。

• 设计师：按动效标签（如Loading、Onboarding、Pull to Refresh）寻找同类交互参考
• 产品经理：通过Apps分类研究某款应用的完整动效体系
• 开发者：利用Snippets代码片段加速动效落地
• 学生/新手：通过Storyboards理解交互流程设计逻辑

常见问题

Q1：60fps.design 上的动效片段可以下载或直接商用吗？

A1：站点本身未提供下载按钮，动效以视频形式在线播放。每个片段均来自第三方应用，版权归原应用开发者所有，建议仅用于学习参考，商用需自行确认原应用的授权条款。

Q2：如何找到某个特定App（如Instagram、TikTok）的动效集合？

A2：在首页点击「Apps」分类，浏览467个应用列表，或直接使用搜索框输入应用名称（如“Instagram”），即可查看该应用收录的所有动效片段。

Q3：Snippets（代码片段）支持哪些语言或框架？

A3：站点未明确说明支持的语言，但从实际内容看，主要提供Swift、SwiftUI、CSS/JS等移动端和Web端常用动效代码，具体需点击Snippets分类查看。

更多同类工具与网站,可在界面交互分类继续挑选。

信息核实于 2026年7月,具体以官网为准。