菜单...

原生,但统一:Xmind 如何看待跨平台设计

Loading...

如果您在多个设备上使用 Xmind,您可能曾有过这样的感受——在切换平台时,会有那么一点点不顺手。按钮的外观稍有不同,某个交互的反应与您的预期不一致。虽然没有出什么大问题,但总让人觉得它似乎并不是专为当前平台打造的。

我们也有同样的切身感受。因此,我们做出了一个决定:Xmind 应该在每个平台上都给人以原生应用的感觉——不仅仅是功能可用,而是真正让它在 macOS、Windows、iOS 和 Android 上都像是在“家”一样轻车熟路。 保持相同的核心结构、相同的逻辑、相同的产品熟悉感——但无论在何处运行,都能穿上最得体的外衣。

以下是我们的实现方式。

Feels native, stays Xmind.

大多数跨平台应用存在的问题

最常见的做法是:构建一套 UI(用户界面),然后部署到所有平台。这种方式成本更低、速度更快,且能保持外观一致。大多数应用都采用这种方法——说实话,大多数用户也默默接受了这一点。

其结果是,这款应用虽然在每个平台上都能运行,但在哪个平台上都不像原生应用:

  • Mac 用户会注意到它看起来不像其他 Mac 应用。

  • Android 用户会发现它显然是从 iOS 移植过来的。

  • 虽然没有人会大声抱怨,但这种微妙的违和感会默默累积。

另一种选择——为每个平台单独设计——虽然听起来很对,但几乎从未真正落地。因为它的成本实在太高,耗时太长,最终维护四套不同设计的团队会身心俱疲,最终还是会走向趋同。

我们对这两种选择都不满意。因此,我们寻找了一种不同的思考方式。

同一个应用,不同的“装扮”

想象一下一个人的着装方式。正式会议穿西装,周末穿休闲装,周六早上穿运动服。三种截然不同的外观——但你每次都能立刻认出他们。因为他们的身份不在于衣服,而在于他们的仪态、谈吐和待人接物的方式。

Xmind 的运作方式也是如此。并非所有内容都在各平台间保持一致——但该一致的关键地方一贯如此。

改变的部分:外表

Xmind for Android interface showcasing Material Design 3 components—pill-shaped buttons, toggle switch, list cards, and a properties panel, set against a warm coral gradient background.

按钮形状、材质、动画,甚至是文案的语气——这些都完全遵循每个平台各自的规范。

平台

看起来的样子

macOS

胶囊形按钮、漂浮在画布上方的液态玻璃面板、宽敞舒适的呼吸感空间

Windows

几何感、克制的圆角矩形、原生标题栏、直白的文案(“升级”而非“立即升级”)

iOS & iPadOS

在每个主要系统版本发布的当天全面更新——当您升级系统时,Xmind 已经融入了新系统之中

Android

基于 Material Design 3 重构——对手势、过渡和面板行为进行了重新调整,以匹配 Android 用户的实际操作习惯

Xmind for macOS displaying the Liquid Glass design language, with a translucent properties panel floating above a mind map canvas, surrounded by soft floral imagery.

这听起来工作量更大,事实确实如此。但这是让 Xmind 感觉自己属于各个平台,而不仅仅是运行在这些平台上的唯一方法。

不变的部分:结构

工具的位置、功能的组织结构、在不同导图之间的切换方式——这些在所有地方都完全相同。

导航栏在顶部。画布在中央。属性面板在桌面上位于侧边,在移动端则从底部向上滑动。导图标签页在最下方。

从 Mac 切换到 iPad,您不需要重新学习任何新内容。应用看起来变了,但其工作方式依然是您熟悉的 Xmind。这种在运行时悄无声息的“一致性”,使得外观可以自由变化,而用户永远不会感到迷失。

恒定不移的部分:核心

在这一切之下,有些东西是保持不变的,无论是在什么平台,也无论 Apple 或 Google 下一次发明了什么样的新设计语言:

  • 画布永远是绝对的主角。UI 界面退居幕后。

  • 复杂功能在您需要时随时待命,在不需要时则隐于无形。

  • 无限制的撤销——创意工作需要放手尝试的自由,而不用担心会弄坏什么。

  • 在任何时候,高效都胜过美观。不值得为了任何动画或视觉细节而降低应用的响应速度。

这些不是设计层面的决定,更像是对用户的承诺。

我们能够维系这一切的原因

读到这里,一个很自然的问题是:四个平台、四套视觉语言、各不相同的规范——在不让整个项目崩溃的前提下,你们到底是如何管理这一切的?

两年前,我们做出了一个在当时看来并无紧迫性的决定:为 Xmind 构建一套规范的设计系统。

它解决的核心问题解释起来很简单,但做起来却出奇地难:在同一个地方吸收并消化每个平台之间的差异,这样产品的其余部分就无需操心了。同一个按钮在我们的系统里只存在一次。在 macOS 上它变成了胶囊形状;在 Windows 上它成了圆角矩形。一次修改,全端应用——无需在堆积如山的文件中搜寻,无需重复修复同一个问题四次,也无需担心它们会慢慢变得不同步。

如果没有这个基石,我们前面所描述的一切都是不可持续的。每一次更新都会变成一场关于这一个 Sprint 里哪些平台优先获得修复的博弈。每一个新功能都会衍生出四个微调的版本,它们会逐渐失去原有的统一感。最终,大家会心照不宣地认为维持这一切的成本太高了——从而促使整个产品重新退回到“一套 UI,全端通用”的妥协状态。

正是设计系统,让“做正确的事”不仅成为可能,而且可以不断重复。

您绝不会直接注意到它。而这正是它的精妙所在。

结语

全新版本的 Xmind 即将到来。

它看起来更精美了。但更坦诚的描述是:这是两年来在外界看来并不总是很明显的工作成果——深入研究每个平台的规范,搭建起能够维护它的基石,并且始终坚守“不因使用多个设备而在体验上妥协”的信念。

我们每天在不同的设备上使用 Xmind。我们无法忍受那种“仅仅能用”的体验。因此,我们也不希望您在这一点上妥协。

亲自体验一下吧。

了解原生体验的最佳方式,就是在你现在使用的设备上打开 Xmind。

亲自体验一下吧。

了解原生体验的最佳方式,就是在你现在使用的设备上打开 Xmind。