Меню...

Нативный, но единый: как Xmind подходит к кроссплатформенному дизайну

Loading...

Если вы используете Xmind на нескольких устройствах, вы, вероятно, уже чувствовали это — небольшое трение при переключении между платформами. Кнопки выглядят немного иначе. Взаимодействие ведёт себя не так, как вы ожидали. Ничего не сломано, но возникает ощущение, что это не совсем создавалось для этого места.

Мы тоже это чувствовали. Поэтому мы приняли решение: Xmind должен ощущаться нативно на каждой платформе — не просто работать, а по-настоящему быть на своём месте в macOS, Windows, iOS и Android. Та же базовая структура, та же логика, то же ощущение знакомого продукта — но в одежде, подходящей для той среды, где он запускается.

Вот как мы это сделали.

Feels native, stays Xmind.

Проблема большинства кроссплатформенных приложений

Вот типичный подход: создать один интерфейс и выпустить его везде. Это дешевле, быстрее и помогает сохранять единообразие. Так делают многие приложения — и, честно говоря, большинство пользователей с этим мирится.

В итоге получается приложение, которое работает на всех платформах, но не ощущается родным ни на одной:

  • Пользователи 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

Геометричные, сдержанные скруглённые прямоугольники, нативная строка заголовка, прямые формулировки ("Upgrade", а не "Upgrade Now")

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:

  • Холст всегда главный. Интерфейс отступает на второй план.

  • Сложные функции доступны, когда они нужны, и не мешают, когда не нужны.

  • Отмена не ограничена — творческая работа требует свободы пробовать, не боясь всё сломать.

  • Быстрота всегда важнее красоты. Ни одна анимация или визуальная деталь не стоит того, чтобы приложение казалось медленнее.

Это не просто решения по дизайну. Это скорее обещания.

Почему мы можем всё это поддерживать

После всего этого закономерен вопрос: четыре платформы, четыре визуальных языка, разные правила везде — как вообще можно всё это удержать, чтобы не развалилось?

Два года назад мы приняли решение, которое тогда казалось не срочным: создать для Xmind полноценную дизайн-систему.

Суть проблемы проста на словах, но удивительно сложна на практике: собрать все различия платформ в одном месте, чтобы остальной продукт об этом не думал. Одна и та же кнопка существует в системе один раз. В macOS она становится пилюлей. В Windows — скруглённым прямоугольником. Одно изменение — везде; без поиска по файлам, без исправления одного и того же четыре раза, без постепенного рассинхрона.

Без этой основы ничего из описанного выше не было бы устойчивым. Каждое обновление превращается в спор о том, какие платформы получат исправление в этом спринте. Каждая новая функция порождает четыре немного разные версии, которые со временем перестают ощущаться как один и тот же продукт. В итоге все тихо соглашаются, что поддерживать это слишком дорого, — и всё снова сводится к одному интерфейсу, который выпускают везде.

Дизайн-система и делает правильный выбор не только возможным, но и повторяемым.

Вы никогда не заметите её напрямую. В этом и есть смысл.

Вывод

Скоро выйдет новый Xmind.

Он выглядит лучше. Но более честное описание такое: это результат двух лет работы, которую не всегда было видно со стороны — правильного изучения каждой платформы, создания основы для её поддержки и верности идее, что вам не нужно идти на компромисс только потому, что вы пользуетесь не одним устройством.

Мы используем Xmind каждый день, на разных устройствах. Мы не выносим опыт, который просто «как-нибудь» работает. Поэтому мы не хотим, чтобы вам тоже приходилось с этим мириться.

Испытайте это сами

Лучший способ понять, как ощущается нативный опыт, — открыть Xmind на устройстве, которым вы пользуетесь прямо сейчас.

Испытайте это сами

Лучший способ понять, как ощущается нативный опыт, — открыть Xmind на устройстве, которым вы пользуетесь прямо сейчас.

Больше публикаций