UI редактора блок-схем

Моя цель - предложение широкого ассортимента товаров и услуг на постоянно высоком качестве обслуживания по самым выгодным ценам.

Dgrm.net

Придумывать интерфейс интересно. Похоже на головоломку. Вот что получается для Dgrm.net.

Dgrm.net это редактор блок-схем

  • работает на пк, планшетах и телефонах;

  • нет лишних кнопок;

  • быстрый;

  • бесплатный.

Редактор открывает схемы из картинок

Рис 1. Dgrm.net открывает картинки схем
Рис 1. Dgrm.net открывает картинки схем

Не нужно хранить исходники, картинка и есть исходник.

Например:  посылаем схему по почте. Через месяц письмо возвращается - сразу правим картинку из письма, не ищем исходники.

Соединительные линии вытягиваем, а не добавляем как отдельную фигуру

Рис 2. Для соединения фигур вытягиваем стрелки
Рис 2. Для соединения фигур вытягиваем стрелки

Точки входа подсвечиваются заранее при приближении к фигуре

На рисунке 3 показаны скрытые контуры.

Рис 3. Точки входа подсвечиваются заранее при приближении к фигуре
Рис 3. Точки входа подсвечиваются заранее при приближении к фигуре

Фигуры автоматически подстраиваются под длину текста

Не нужно вручную менять размер.

Фигуры увеличиваются не плавно, а шагами. Чтобы на схеме не рябило от разных размеров.

Рис 4. Фигуры автоматически меняют размер в зависимости от текста
Рис 4. Фигуры автоматически меняют размер в зависимости от текста

Минимум элементов управления

Возможности редактора сознательно ограничены.

  • Только 4 фигуры;

  • В меню 5 пунктов. Нет выбора формата сохранения.

Большие элементы управления

На телефонах элементы управления становятся еще больше.

Рис 5. Большие элементы управления на телефонах
Рис 5. Большие элементы управления на телефонах

Ближайшие планы

  1. Групповое перетаскивание фигур. Сейчас можно только одну фигуру перетащить.

  2. Изменение цвета фигур.

  3. Приближать/удалить схему.

  4. Короткие ссылки на диаграммы.

  5. Диалог “Сохранить как”. Сейчас сохраняет в “Загрузки” без возможности указать имя файла.

  6. Копирование схемы из редактора в Word.

  7. Перетаскивание схемы из редактора в Word.

Dgrm.net | GitHub (исходный код)

Источник: https://habr.com/ru/post/672694/


Интересные статьи

Интересные статьи

На Хабре ни для кого не секрет, что в текущей повестке практически все сферы частного бизнеса вынуждены реагировать на происходящие изменения. Большое количество привычных всем нам зарубежных сервисов...
Решения для больших компаний обычно должны выдерживать высокие нагрузки. Когда в штате много десятков тысяч человек, и значительная доля из них ежедневно пользуются ...
Кто бы что ни говорил, но я считаю, что изобретение велосипедов — штука полезная. Использование готовых библиотек и фреймворков, конечно, хорошо, но порой стоит их отложить и создать ...
Приветствую вас (лично вас, а не всех кто это читает)! Сегодня мы: Создадим приложение (навык) Алисы с использованием нового (октябрь 2019) сервиса Yandex Cloud Functions. Настроим н...
Приступая к животрепещущей теме резервного копирования на «Битрикс», прежде всего хотелось бы поблагодарить разработчиков, реализовавших автоматическое резервное копирование в облачное хранилище в вер...