2026年的缩放用户界面：Prezi、impress.js，以及我为何构建了不同的东西
目前在网页界面中，主要有两种已建立的缩放使用方式。它们服务于不同的目的，并做出了不同的权衡。我构建了第三种方式，因此我会尽量公正地评价每种方式的优缺点。
* Prezi
Prezi 开创了用于演示的缩放画布，并在该领域保持市场领先地位。它最近增加了基于 AI 的生成和文本编辑工具。它是一个经过打磨的产品，具有真实的市场吸引力。
但是，Prezi 是一个封闭的平台，而不是一个库。你无法在自己的应用中使用它的缩放引擎。其定价从每月 15 美元起，才能获得有意义的功能，而导出到 PowerPoint 会将所有缩放效果压缩为静态幻灯片。用户常常抱怨缩放和平移的过渡会导致晕动症。从根本上说，Prezi 将缩放作为在预先安排的框架之间讲述故事的工具，而不是一种导航模型。它是一种演示模型。
* impress.js
impress.js 将类似 Prezi 的缩放引入开放网络。它是一个基于 CSS3 转换和过渡的演示框架，直接受到 Prezi 的启发。它在推出时确实是一个突破性产品。
它的架构是基于步骤的：你在 3D 空间中定位“步骤”，相机在它们之间移动。这对于演示非常好，但并不适合构建一个用户通过缩放内容进行导航的应用。impress.js 没有动态挂载视图、管理缩放深度或处理导航状态的概念。它是一个带有缩放技巧的幻灯片引擎。
* Zumly
这就是我构建的产品。完全透明：我是唯一的开发者。
这个想法是提供一种使用缩放的传统页面导航替代方案。你将一个元素标记为可缩放，指向一个视图，Zumly 处理过渡并插入新视图。基本上就是这样。
我在 2020 年创立了 Zumly，离开了 Zircle UI（一个 Vue 缩放库），试图将我学到的东西进一步发展。它是框架无关的，专注于缩放部分。从那时起，我多次重写引擎，改变了多次方法。现在我对它的感觉感到满意。
在缩放过渡期间，视图会动态挂载和卸载。在 impress.js 中，所有步骤同时存在于 DOM 中。而在 Zumly 中，你缩放到一个触发元素，目标视图会被注入并缩放到位。这更接近于单页应用中的路由工作方式，而不是幻灯片的工作方式。
着陆页是用 Zumly 本身构建的，因此你可以在接触任何代码之前先感受一下。
我很好奇是否还有其他人考虑过这个领域。是什么让缩放用户界面成功或失败？
着陆页（使用 Zumly 构建）：https://zumerlab.github.io/zumly
GitHub：https://github.com/zumerlab/zumly
查看原文
There are essentially two established ways to use zooming in web interfaces today. They serve different purposes and make different tradeoffs. I built a third one, so I'll try to be fair about what each does well and where it falls short.<p>* Prezi
Prezi pioneered the zooming canvas for presentations and remains the market leader in that space. It recently added AI-powered generation and text editing tools. It's a polished product with real traction.<p>But Prezi is a closed platform, not a library. You can't use its zoom engine in your own app. Pricing starts at $15/month for meaningful features, and exporting to PowerPoint flattens all zoom effects into static slides. A recurring complaint from users is that the zooming and panning transitions cause motion sickness. And fundamentally, Prezi uses zoom as a storytelling device between pre-arranged frames. It's not a navigation model. It's a presentation model.<p>* impress.js
impress.js brought Prezi-like zooming to the open web. It's a presentation framework based on CSS3 transforms and transitions, directly inspired by Prezi. It was genuinely groundbreaking when it launched.
Its architecture is step-based: you position "steps" in 3D space and the camera moves between them. That's great for presentations, but it doesn't help you build an app where users navigate by zooming into content. impress.js has no concept of dynamically mounting views, managing zoom depth, or handling navigation state. It's a slide deck engine with a zoom trick.<p>* Zumly
This is what I built. Full disclosure: I'm the sole developer.
The idea is offering an alternative to traditional page navigation using zooming. You mark an element as zoomable, point it to a view, and Zumly handles the transition and inserts new views. That's basically it.<p>I started Zumly in 2020 after leaving behind Zircle UI (a Vue zooming library), trying to take what I learned further. Framework-agnostic, focused just on the zoom part. Since then I've rewritten the engine several times, changed the approach more than once. Only now I'm actually happy with how it feels.<p>Views are dynamically mounted and unmounted during zoom transitions. In impress.js, all steps exist in the DOM simultaneously. In Zumly, you zoom into a trigger element, and the target view gets injected and scaled into place. This is closer to how routing works in SPAs than to how slide decks work.<p>The landing page is built with Zumly itself so you can get the feel before touching any code.<p>Curious if anyone else has thought about this space. What makes zooming UIs work or fail?<p>Landing page (built with Zumly): https://zumerlab.github.io/zumly<p>GitHub: https://github.com/zumerlab/zumly