選單...

原生,但一致:Xmind 如何思考跨平台設計

載入中...

如果你在多於一台裝置上使用 Xmind,你大概感受過那種小小的違和感——在切換平台時的一點摩擦。按鈕看起來略有不同,互動表現也不完全符合你的預期。沒有哪裡壞掉,但總覺得有些地方不像是專為這裡打造的。

我們也有同樣的感受。而且我們花了很長一段時間,努力把它真正修好。

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

膠囊形按鈕、漂浮在畫布之上的 Liquid Glass 面板,以及充足的留白

Windows

幾何感、克制的圓角矩形,原生標題列,直接明確的文案("升級" 而不是 "立即升級")

iOS & iPadOS

在每次重大 OS 發佈的第一天就完成全面更新——當你升級時,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。

Xmind 標誌 - 心智圖和腦力激盪工具

功能

解決方案

資源

Xmind 標誌 - 心智圖和腦力激盪工具