2026年的缩放式用户界面：Prezi、impress.js，以及我为什么构建了不同的东西
3 分•作者: tinchox6•4 个月前
目前，在 Web 界面中使用缩放主要有两种已确立的方式。它们服务于不同的目的，并做出不同的权衡。我构建了第三种方式，因此我将尝试公正地评价每种方式的优缺点。
* **Prezi**
Prezi 开创了演示文稿的缩放画布，并且仍然是该领域的市场领导者。它最近增加了 AI 驱动的生成和文本编辑工具。它是一个经过打磨的产品，具有真正的吸引力。
但 Prezi 是一个封闭的平台，而不是一个库。你不能在自己的应用程序中使用它的缩放引擎。有意义的功能的定价从每月 15 美元起，导出到 PowerPoint 会将所有缩放效果扁平化为静态幻灯片。用户反复抱怨的一个问题是，缩放和平移过渡会导致晕动病。而且，从根本上说，Prezi 使用缩放作为预先安排的框架之间的叙事工具。它不是一个导航模型，而是一个演示模型。
* **impress.js**
impress.js 将类似 Prezi 的缩放带到了开放的 Web。它是一个基于 CSS3 转换和过渡的演示框架，直接受到 Prezi 的启发。它在推出时确实具有开创性意义。
它的架构是基于步骤的：你在 3D 空间中定位“步骤”，然后相机在它们之间移动。这对于演示文稿来说很棒，但它无法帮助你构建一个用户通过缩放到内容来导航的应用程序。impress.js 没有动态挂载视图、管理缩放深度或处理导航状态的概念。它是一个带有缩放技巧的幻灯片引擎。
* **Zumly**
这是我构建的。完全披露：我是唯一的开发者。
这个想法是提供一种使用缩放来替代传统页面导航的方式。你将一个元素标记为可缩放，将其指向一个视图，然后 Zumly 处理过渡并插入新视图。基本上就是这样。
我在 2020 年离开了 Zircle UI（一个 Vue 缩放库）之后开始使用 Zumly，试图进一步利用我所学到的知识。它与框架无关，只专注于缩放部分。从那时起，我多次重写了引擎，不止一次地改变了方法。直到现在，我才真正对它的感觉感到满意。
视图在缩放过渡期间被动态挂载和卸载。在 impress.js 中，所有步骤同时存在于 DOM 中。在 Zumly 中，你缩放到一个触发元素，目标视图被注入并缩放到适当的位置。这更接近于 SPA 中路由的工作方式，而不是幻灯片演示文稿的工作方式。
着陆页本身是用 Zumly 构建的，因此你可以在接触任何代码之前先体验一下。
很好奇是否还有其他人考虑过这个领域。是什么让缩放 UI 成功或失败？
着陆页（使用 Zumly 构建）：[https://zumerlab.github.io/zumly](https://zumerlab.github.io/zumly)
GitHub：[https://github.com/zumerlab/zumly](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