Интерактивная таблица Менделеева

Продукт: Интерактивная таблица Менделеева для образовательной платформы
Роль: Product Designer — полный цикл от концепции до передачи в разработку
Платформы: Desktop (1440px и 1920px) + Mobile
Ключевая фича: Калькулятор молекулярной массы, встроенный в интерфейс, а также возможность получить любую информацию об элементе — от атомной массы до процента содержания в организме человека.
Инструменты: Figma (Auto Layout, Components, Variables, Prototyping)
Назад

Интерактивная таблица Менделеева

Продукт: Интерактивная таблица Менделеева для образовательной платформы

Роль: Product Designer — полный цикл от концепции до передачи в разработку

Платформы: Desktop (1440px и 1920px) + Mobile

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

Инструменты: Figma (Auto Layout, Components, Variables, Prototyping)
Назад

Задачи проекта

Таблица Менделеева — визуально перегруженный объект. 118 элементов, 18 групп, 7 периодов, несколько систем классификации. Разместить всё это читаемо — уже нетривиальная задача. Во время реализации проекта столкнулся с тремя вызовами:

1. Информационная плотность

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

2. Разные breakpoints

Desktop 1440px и 1920px — разные макеты, разные пропорции ячеек. Мобильная версия — принципиально другой паттерн взаимодействия: тач, меньший экран, другая логика навигации по таблице.

3. Нестандартная функциональность

Калькулятор молекулярной массы — фича, которой нет ни в одном из конкурентов. Её нужно органично встроить в интерфейс так, чтобы она не ломала основной сценарий просмотра таблицы.

Этапы работы над проектом

Анализ конкурентов

Изучил существующие онлайн-таблицы: ptable.com, Royal Society of Chemistry, Wikipedia. Общий вывод — все они либо перегружены данными, либо слишком упрощены. Ни одна не предлагает функциональности за пределами просмотра.

Определение ключевых сценариев

Выделил три основных сценария использования:
а) быстрый поиск информации об элементе,

б) изучение классификаций и групп,

в) работа с молекулами — именно последний стал основой для калькулятора.

Архитектура и вайрфреймы

Начал с десктопной версии 1440px как базовой. Определил сетку ячеек, иерархию данных внутри ячейки, логику открытия попапа. Параллельно проработал концепцию правой панели для калькулятора.

Итерации по компоновке калькулятора

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

Адаптация на 1920px

На большем экране элементы получили больше пространства внутри ячейки. Появилась возможность показать больше данных без открытия попапа. Компонентная система позволила переключаться между размерами без пересборки макета.

Мобильная версия

Мобайл — отдельно проработанный паттерн. Горизонтальный скролл по таблице, увеличенные тач-зоны, переработанная навигация. Отдельная библиотека мобильных компонентов.

Тёмная тема

Dark mode реализован как отдельная цветовая схема, а не инверсия светлой. Отдельный проход по контрастности и читаемости — особенно критично для мелкого текста внутри ячеек.

Ключевые экраны и решения

В данном блоке приведены макеты проекта. Так как проект очень большой, то для каждой его важной части я буду выделять по 1–3 скриншота с пояснениями, чтобы не делать кейс еще длиннее.

Main — основной вид таблицы

Таблица занимает центральное место без лишних элементов вокруг. Верхняя навигация — минимальная, не конкурирует с основным контентом. Цветовая кодировка групп элементов реализована через subtle оттенки фона ячеек — достаточно для визуальной классификации, не перегружает восприятие. Каждая ячейка показывает: атомный номер (мелко, вверху), символ элемента (крупно, центр), название и атомная масса (мелко, снизу). Иерархия чёткая, данные считываются за долю секунды.
Главный экран, точка входа
Темная версия

Pop-up — карточка элемента

Попап открывается справа от элемента, не перекрывает таблицу полностью — пользователь не теряет контекст. Структура карточки: ключевые физические свойства вверху (агрегатное состояние, температуры плавления/кипения), электронная конфигурация в визуальном представлении, применение и интересные факты внизу. Порядок соответствует приоритету: студент, решающий задачу, смотрит сначала на свойства, потом на остальное.
Детальная информация по клику
Темная версия

Дополнительные функции

Здесь приведены некоторые дополнительные, но не менее важные функции, которые есть в таблице.
Таблица атомных масс
Поиск элементов по атомным массам
Наглядная таблица, показывающая процент содержания того или иного вещества в организме человека

Основное меню

Меню содержит переключатель тёмной темы, фильтрацию по группам и периодам, поиск по названию или символу элемента. Dark mode — не просто инверсия: отдельно проработана читаемость текста в ячейках, контрастность цветовой кодировки групп, состояния hover и active.
Навигация и переключение режимов
Темная тема

Дизайн-система

Одновременно с проектированием интерфейса продолжалось и развитие дизайн-системы. Был сделан фокус на компоненты, стили, токены, чтобы обеспечить консистентность интерфейса, ускорение разработки проекта и внедрение новых фич.
За все время было разработано более 700 компонентов.

Итоги проекта

Что получилось:

  • Полноценный интерактивный инструмент, а не просто визуализация
  • Калькулятор молекулярной массы — уникальная фича среди конкурентов
  • Три breakpoint'а с общей компонентной системой
  • Два цветовых режима (светлый / тёмный) с отдельно проработанной контрастностью
  • Документированная дизайн-система для передачи в разработку

Что бы сделал иначе:

  • Провёл бы юзабилити-тестирование калькулятора с реальными студентами на этапе прототипа — логика ввода формулы могла бы быть более интуитивной
  • Добавил бы онбординг-подсказки для первого посещения — продукт нетривиальный, не все сразу замечают калькулятор
  • Глубже проработал бы состояния фильтрации по группам элементов — это недооценённый сценарий для студентов
Made on
Tilda