Xmind 的跨平台设计哲学｜原生，但统一

跨平台应用的设计者，几乎都遇到过同一个两难困境：用一套UI打天下，成本虽低，但在每个平台都显得格格不入；为每个平台单独设计，体验虽好，开发成本却成倍增长，品牌一致性也难以维系。

今天我们来聊聊，Xmind如何把“原生感”和“统一性”拆解到不同层次去分别实现。

Xmind 的"身份"不在于某个按钮是圆的还是方的，不在于某个图标是线性还是填充，甚至不在于某个特定的品牌色。真正的身份在于更深层的东西：信息架构的逻辑、交互反馈的节奏、对用户注意力的尊重方式、在「功能丰富」和「界面简洁」之间的取舍态度。

这就是我们找到的路——不是在 A 和 B 之间二选一，而是把「原生」和「统一」放在不同的层次上分别解决。

下面展开讲讲每一层我们是怎么做的。

表层：说平台的语言

macOS：圆润、有机、呼吸感

Apple 的设计语言在过去几年经历了明显的演变。从 iOS 7 的扁平化，到 Big Sur 开始的"软化"，再到最新的 Liquid Glass，有一条清晰的脉络：从几何走向有机。

Xmind for macOS 的设计决策：

• 胶囊形控件。按钮、标签页、分段控制器，凡是可以做成胶囊形（pill shape）的地方，我们都采用了全圆角处理。这不是为了"好看"，而是为了让 Xmind 在视觉上与系统级应用（Finder、Safari、Notes）处于同一个设计时代。

• Liquid Glass 材质系统。工具栏、侧边面板、弹窗背景都采用了液态玻璃材质。

• 呼吸感的间距。我们在控件之间、面板边缘、文字行距上都留出了足够的空间，让整个界面有呼吸的余地。

Windows：几何、秩序、实用主义

Windows 11 的 Fluent Design 2.0 走的是另一条路。它有圆角，但是克制的圆角；它有毛玻璃（Mica/Acrylic），但是更偏向于功能性而非装饰性。

Xmind for Windows 的设计决策：

• 圆角矩形控件。同样的按钮，在 macOS 上是胶囊形，在 Windows 上是圆角矩形。

• 更紧凑的标题栏。Windows 用户习惯标题栏左边有菜单，右边有最小化/最大化/关闭按钮。

• 更直接的措辞。你可能注意到，macOS 版的升级按钮写的是 "Upgrade Now"，而 Windows 版只写 "Upgrade"，因为Windows 用户偏好简洁直接的沟通方式，少一点营销感，多一点实用主义。

iOS / iPadOS：与系统同步进化

2025 年 iPadOS 26 发布时，我们做了一个决定：在系统发布的同一天，推出完全适配新设计语言的 Xmind 版本。

当用户升级系统后打开 Xmind，看到的应该是一个"属于这个新系统"的应用，而不是一个"还没来得及更新"的遗留物。

Android

全面重构的 Material Design 3

2026年春季，我们发布了全面重构的 Xmind for Android，从底层开始拥抱 Material Design 3。

上下滑动查看更多细节

组件形态全面重构。MD3 的按钮、卡片、底部导航、分段控制器、底部弹出面板（Bottom Sheet）都有明确的规范。我们逐一替换了之前自定义的控件，采用标准的 Material 组件。这意味着 Android 用户在 Xmind 里看到的每一个按钮、每一个列表项、每一个导航栏，都和系统应用的风格一致——底部导航的三个入口（Home / Recents / New）、卡片的圆角和阴影、列表项的点击反馈，都是"对"的。

真正的响应式设计。Android 生态的屏幕尺寸差异远比 iOS 复杂——从 5 寸手机到 8 寸折叠屏内屏，再到 12 寸平板，不能用一套布局打天下。我们为不同屏幕宽度设计了完全不同的交互模式：

• 手机：单栏布局 + 底部导航。格式面板从底部弹出（Bottom Sheet），符合单手操作的人体工学。

• 平板：双栏布局，左侧常驻导航栏，右侧内容区。格式面板在右侧展开为独立面板，充分利用大屏空间。

• 折叠屏：根据展开/折叠状态动态切换布局，展开时享受平板级体验，折叠时无缝回到手机模式。

手势与动效。Android 有自己的手势语言和动效曲线（MD3 强调的 Expressive Motion）。我们重新调整了页面转场、面板展开、列表滚动等动画，让它们符合 Android 用户的肌肉记忆。底部面板的拖拽展开、卡片的涟漪反馈、页面的共享元素过渡——这些细节单独看不起眼，但加在一起就是"这个应用懂 Android"的感觉。

中层：保持结构一致

虽然表层的视觉语言跟随平台变化，但 Xmind 在所有平台上的布局结构是高度一致的：

• 顶部是导航和常用操作

• 中央是画布（核心工作区域）

• 右侧（桌面端）或底部弹出（移动端）是属性面板

• 底部是标签页切换（多地图管理）

这个结构不会因为平台而改变。一个 macOS 用户切换到 Windows，或者一个 iPad 用户打开 Android 版本，虽然控件的形态变了，但他们会立刻知道"工具在哪里、我该怎么操作"。

内核：不变的交互原则

在所有设计决策的底层，有几条绝对不会动摇的原则：

原则一：画布是主角

思维导图应用的核心价值在于画布上的内容，不是周围的工具栏。我们所有的 UI 设计都服从一个目标：让 UI "退后一步"，把舞台留给用户的思维。

这意味着：

• 工具栏和面板采用低调的中性色调，不与画布内容争夺注意力

• 提供隐藏/收起 UI 的选项，让用户需要时可以进入"全画布"模式

• 避免任何不必要的视觉装饰——没有渐变、没有阴影过度、没有让人分心的背景纹理

原则二：复杂功能，简单入口

思维导图可以很复杂，但大多数用户大多数时候只需要很简单的操作：写下想法，连接想法。

我们的策略是渐进式披露（progressive disclosure）：首次打开看到的是最简洁的界面，高级功能藏在合理的位置，需要时一键可达，但不会在你不需要时碍眼。

原则三：快比美更重要

最后，也是最重要的一条：任何视觉效果都不能以牺牲性能为代价。

Liquid Glass 很漂亮，但如果它让滚动卡顿，我们会降级或关闭它。动效很流畅，但如果它让操作有延迟，我们会缩短或简化它。

基础设施：设计系统

两年前，我们做了一个关键决定——搭建 Xmind 自己的设计系统。

设计系统解决了什么问题？

——统一语言

有了设计系统，就会有明确定义的 token。设计稿里写 radius-m，开发实现时用 radius-m，不需要对数字、不需要吵架。

我们的设计系统是分层的：

底层：语义化 token

中层：组件（引用 token）

上层：页面（组合组件）

同一个语义 token，比如 button-radius，在 macOS 上解析为 9999px（全圆角胶囊），在 Windows 上解析为 8px（圆角矩形）。组件层和页面层的代码完全一样，平台差异在 token 层被吸收掉了。

这意味着：当我们决定"macOS 和 Windows 的按钮形态要不同"时，不需要改几百个地方，只需要改一个 token 的平台映射。当我们决定"Android 要全面切换到 MD3"时，可以先在 token 层定义好所有 MD3 的值，然后逐步替换组件的引用，而不是一次性重写整个应用。

设计资产的单一真相源。颜色、字号、间距、圆角、阴影、动效曲线——所有设计决策都沉淀在一个地方。新来的设计师不需要翻遍历史文件去"考古"，打开设计系统文档就能知道"Xmind 的设计规范是什么"。

真正的问题是：你愿意为用户体验投入多少？

如果答案是"愿意投入很多"，那么路径自然会变清晰：了解每个平台的设计语言，尊重每个平台用户的习惯，然后用你的产品内核把它们串联起来。

这条路更难走。它需要更大的设计团队、更复杂的工程架构、更长的开发周期，以及——最重要的——两年前就开始投资基础设施的远见。

但这是对的路。

当 macOS 用户打开 Xmind，感觉"这就是一个为 macOS 设计的应用"；当 Android 用户打开 Xmind，感觉"这个团队尊重我选择的平台"——这种体验就会转化为信任、留存、口碑。