Придумывать интерфейс интересно. Похоже на головоломку. Вот что получается для Dgrm.net.
Dgrm.net это редактор блок-схем
-
работает на пк, планшетах и телефонах;
-
нет лишних кнопок;
-
быстрый;
-
бесплатный.
Редактор открывает схемы из картинок
![Рис 1. Dgrm.net открывает картинки схем Рис 1. Dgrm.net открывает картинки схем](https://www.pvsm.ru/images/2022/06/22/UI-redaktora-blok-shem.gif)
Не нужно хранить исходники, картинка и есть исходник.
Например: посылаем схему по почте. Через месяц письмо возвращается - сразу правим картинку из письма, не ищем исходники.
Соединительные линии вытягиваем, а не добавляем как отдельную фигуру
![Рис 2. Для соединения фигур вытягиваем стрелки Рис 2. Для соединения фигур вытягиваем стрелки](https://www.pvsm.ru/images/2022/06/22/UI-redaktora-blok-shem-2.gif)
Точки входа подсвечиваются заранее при приближении к фигуре
На рисунке 3 показаны скрытые контуры.
![Рис 3. Точки входа подсвечиваются заранее при приближении к фигуре Рис 3. Точки входа подсвечиваются заранее при приближении к фигуре](https://www.pvsm.ru/images/2022/06/22/UI-redaktora-blok-shem-3.gif)
Фигуры автоматически подстраиваются под длину текста
Не нужно вручную менять размер.
Фигуры увеличиваются не плавно, а шагами. Чтобы на схеме не рябило от разных размеров.
![Рис 4. Фигуры автоматически меняют размер в зависимости от текста Рис 4. Фигуры автоматически меняют размер в зависимости от текста](https://www.pvsm.ru/images/2022/06/22/UI-redaktora-blok-shem-4.gif)
Минимум элементов управления
Возможности редактора сознательно ограничены.
-
Только 4 фигуры;
-
В меню 5 пунктов. Нет выбора формата сохранения.
Большие элементы управления
На телефонах элементы управления становятся еще больше.
![Рис 5. Большие элементы управления на телефонах Рис 5. Большие элементы управления на телефонах](https://www.pvsm.ru/images/2022/06/22/UI-redaktora-blok-shem-5.gif)
Ближайшие планы
-
Групповое перетаскивание фигур. Сейчас можно только одну фигуру перетащить.
-
Изменение цвета фигур.
-
Приближать/удалить схему.
-
Короткие ссылки на диаграммы.
-
Диалог “Сохранить как”. Сейчас сохраняет в “Загрузки” без возможности указать имя файла.
-
Копирование схемы из редактора в Word.
-
Перетаскивание схемы из редактора в Word.
Автор: Алексей Бойко