Spring toggle
A spring, not a tween. It overshoots a hair and settles, so it feels physical.
spring 520 / 30 04.5 / 网页与界面动效← 动态图形
让界面感觉有生命。
滚动叙事、微交互和页面转场，让网站更容易理解、更难忘记，同时不牺牲速度与无障碍性。
看看手艺
动效实验室：七个可以触摸的交互
真实可用的界面动效，不是视频。切换、悬停、拖动、点击。这里的一切都遵循减少动态的设置。
04Depth
0%
- Brief
- Boards
- Animate
- Ship
由 Roaswell 工作室制作，用以展示我们的工作方式。不是客户作品，也不是真实品牌。
你将获得上线所需的
上线所需的
一切。
在开工前约定的明确交付物，让范围永远不会成为意外。
01
动效原则
缓动、时序和弹簧参数，让每个交互都像同一款产品的一部分。
02
滚动与页面转场
以故事为主导的滚动序列和路由转场，引导注意力，就像本站这样。
03
微交互库
有目的地响应的按钮、开关、菜单、卡片和表单。
04
生产代码或导出文件
干净的 CSS 与 JavaScript，或 Lottie 与视频导出，适配你的技术栈。
05
无障碍版本
从设计之初就纳入的减少动态替代方案和焦点行为，而不是事后补丁。
06
性能预算
在上线前，针对加载时间和交互延迟来衡量动效。
如何运作从需求简报
从需求简报
到最终成片。
四个阶段，每个都有清晰的产出，让你始终知道在做什么，以及为什么。
审计
找出动效在哪里能让事情更清楚，又在哪里只会增加噪音。
制定原则
定义缓动与时序的词汇，让决策不再是逐个案例而定。
在浏览器中做原型
在真实的介质中构建，让你所批准的就是最终上线的。
上线并衡量
带着性能预算发布，并观察用户实际做了什么。
如何衔接一个工作室。
一个工作室。
一个系统。
当动态设计由数据来指引，并交付到预算所在之处时，效果最强。
常见问题好问题，
好问题，
直接回答。
不是你要找的？直接问我们，资深成员会回复你。
动画会拖慢我们的网站吗？
如果做得正确就不会。我们设定性能预算，用成本最低的属性做动画，并在真实设备上测试。
你们会写代码吗？
会。我们可以交付可用于生产的代码，也可以移交规范和导出文件，由你的团队实现。
无障碍方面呢？
每个动效都有减少动态的替代方案，键盘和读屏的行为与动画一起设计。
能配合我们的 CMS 或框架吗？
我们适配大多数现代技术栈。告诉我们你用的是什么，我们会确认最佳方案。
我能看到它运作吗？
你正在看。本站的滚动序列、计数器和揭示效果，都是用同样的方法构建的。