UX / UI
DataGram
Новый интерфейс среды разработки
Описание
Процесс
Onboarding
Интерфейс Редактора трансформаций начинается с подсказок для знакомства пользователей с основными элементами управления
Сквозная навигация

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

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

Панель управления отображается по умолчанию при входе в редактор. В ней можно внести изменения в саму диаграмму, загрузить данные из json, импортировать диаграмму, открыть или создать новую. Имя диаграммы используется как указатель и отображается полностью. Помогает увидеть разницу в действиях связанных с загрузкой данных и открытием иной диаграммы.

Все действия важны для первичной настройки диаграммы, редкого редактирования, а так же функции навигации. Что делает эту панель необходимой при открытии инструмента Редактора, но лишней при работе с самой диаграммой и ее элементами.

Поэтому занятое панелью место используется для отображения панели свойств элементов. С ней пользователь работает чаще, но она не всегда актуальна: когда нет выбранного элемента.
Отображение панелей анимировано. Возврат к панели управления — снятие выделения: удаление объекта или клик по свободной области сцены.
Панель элементов
Панель элементов актуальна при создании диаграммы или добавления новых элементов. Она не всегда актуальна для сценариев редактирования свойств уже в созданной диаграмме. В больших диаграммах она съедает полезное пространство, поэтому вся панель по умолчанию свернута.
Важный элемент онбординга — знакомства пользователя инструментом.
Иконки елементов диаграммы
Элемента диаграммы используются как на самой сцене, так и на панели элементов. У каждого элемента несколько свойств: графическое изображение, имя, направление данных.

Для каждого места и сценария использования для элементов проработана система отображения свойств.
Для отображения направления данных на панели достаточно заголовка. Графически отображать направление актуально только на сцене.
Когда пользователь знакомится с интерфейсами системы названия элементов актуальны. Со временем они превращаются в визуальный шум.
В интерфейсе предусмотрены элементы скрывающие подпись к объектам. А дискриптор все ровно появляется при наведение в тултипе.
Новая сетка
Новая сетка легче. Она несет только визуальное изменение. Шаг позиционирования объектов на сцене остается прежним.

Визуальная сетка, соответствующая шагу, хороша в редакторах, где важно соблюсти стройное выравнивание элементов (чаще прямоугольников). Этому так же помогают появляющиеся вертикальные и горизонтальные линии привязки/выравнивания.
В данном случае этой особенностью можно пренебречь в пользу визуального восприятия.
Всплывающие окна
.addon
Версия с темным интерфейсом может использоваться для обозначения дополнения или расширенной / pro версии продукта.

В качестве дополнения может служить версия находящаяся в beta. Она может содержать функциональные и интерфейсные особенности еще не попавшие в релиз. Можно тестировать на пользователях установивших дополнение.


Темный интерфейс реализуется просто - меняются цветовые значения в css файлых.
Пример главной страницы
Главную страницу можно сделать прокручаваемой лейнтой, если не с самими рабочими пространствами, то с точками входа в них.
Что исправлено по сравнению с версией 2.0
BASICS
Ошибки логики
Элемент снят с выделения - а в панели свойств все равно можно продолжить его редактирование.
Пустая панель не функциональна и занимает место - когда элемент удален или схема только что открыта / создана.
Элементы управления
Сортируем, группируем, расставляем по местам
Нужны при работе с системой
Пользователь и выход
Элемент управления системой - глобально ко всей системе
Занимает много места
Используется редко
Возврат к системе
Новый элемент

Элемент управления системой - глобально ко всей системе
Занимает много места
Используется редко
Редактировании содержания проекта
Копировать, вставить, удалить
Элементы управления объектами на сцене
Копировать и вставить - актуальны к использованию
Удалить элемент можно тремя способами, поэтому саму иконку можно удалить.
Выравнивание
Элементы управления всеми объектами на сцене
Функция редактирования
Увеличить, уменьшить, подогнать
Элементы управления рабочей областью
Все актуальны. Можно добавить один...
Только схема
Новый элемент

Элементы управления рабочей областью
Убирает из рабочего пространства все бары
у элемента 2 состояния или 2 события : только рабочая область и как обычно
Он заменит ушки у баров
Вперед, назад по истории событий, очистить все
Элементы управления событиями на рабочей области
Все актуальны.
Иконка "+" сбивает с толку - сейчас выглядит как элемент управления проектом.
Управления проектом
Настройки проекта
Элементы управления настройками проекта
Нужен редко
Открыть проект из сохраненных
Начало работы
Используется периодически
Управления кодом json
Просмотр и выгрузка ф файл
Элементы управления json кодом
Вызывает новый интерфейс и сохраняет в виде файла

Возможно Оба элемента можно объединить в один интерфейс
Открыть проект из сохраненных
Начало работы
Используется периодически
Сохранение
Элементы управления проектом и рабочей областью
Используется часто
Только схема
Новый элемент

Элементы управления рабочей областью
Убирает из рабочего пространства все бары
у элемента 2 состояния или 2 события : только рабочая область и как обычно
Он заменит ушки у баров
Вперед, назад по истории событий, очистить все
Элементы управления событиями на рабочей области
Все актуальны.
Иконка "+" сбивает с толку - сейчас выглядит как элемент управления проектом.
Управления проектом и его содержанием
Сохранение
Элементы управления проектом и рабочей областью
Используется часто
Сортируем
Вместо стрелок добавляем новый элемент управления - "На весь экран"
Он сворачивает и разворачивает обе панели
В развернутом состоянии некоторые элементы не отображаются
Элементы управления
Лишнее


Три способа удалить объект
Иконка корзины - лишний элемент.
Made on
Tilda