選單...

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

載入中...

如果您在多個裝置上使用 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

膠囊形按鈕、漂浮在畫布上方的液態玻璃面板(Liquid Glass),以及寬敞舒適的留白

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 建立一個完善的設計系統(Design System)。

它解決的核心問題解釋起來很簡單,但做起來卻出奇地難:在同一個地方消化所有平台間的差異,讓產品的其他部分無需為此操心。同一個按鈕在我們的系統中只存在一次。在 macOS 上它會變成膠囊形;在 Windows 上它會變成圓角矩形。處處同步更新——無需在各個檔案中翻找,無需把同一個問題修復四次,也不會慢慢變得不同步。

如果沒有這個基礎,我們所描述的一切都將難以維持。每一次更新都會變成一場關於「哪個平台能在這次衝刺中獲得修復」的拉鋸戰。每一個新功能都會衍生出四個稍微不同的版本,逐漸讓人覺得它們不再是同一個產品。最終,大家會默認維持這種狀態套用在四個平台的成本太高——於是整個產品又回到了設計一套 UI 並打包發布到所有平台的老路。

正是這個設計系統,讓做正確的事不僅成為可能,而且可以不斷重複復現。

您可能永遠不會直接注意到它。而這正是我們的目的所在。

結語

全新一代的 Xmind 即將到來。

它看起來更美觀了。但更誠實的說法是:它是兩年努力的結晶,這些工作從外部看並不總是顯而易見——深入了解每個平台的特性,建立維護它的基礎,並始終堅持一個理念:您不應該僅僅因為使用了多個裝置而做出妥協。

我們每天都在不同的裝置上使用 Xmind。我們無法忍受那種僅僅「得過且過」的體驗。因此,我們也不希望您對此將就。

親自體驗一下吧。

了解原生體驗最好的方式,就是在您現在使用的裝置上開啟 Xmind。

親自體驗一下吧。

了解原生體驗最好的方式,就是在您現在使用的裝置上開啟 Xmind。