Інтерфейс динамічної структури типу Мережевий граф, Заплутаний деревний граф

Ціль:

Створити візуальний інтерактивний дизайн управління вузлами в графі (контекст – сайт/додаток). Взаємодія користувача з графом повинна бути максимально природною та інтуїтивною.

Користувач повинен мати можливість:

1. Додавати, видаляти та редагувати вузли.

2. Управляти зв'язками між вузлами.

3. Бачити чітку ієрархію та взаємозв'язки між вузлами.

Завдання:

1. Створити візуальний макет графа з вузлами та зв'язками.

   1. Вузли повинні бути представлені у вигляді кіл.

   2. Зв'язки між вузлами відображаються стрілками, що показують напрямок залежності.

2. Вирішити питання менеджменту вузлів з точки зору UI/UX.

3. Вирішити питання менеджменту зв'язків з точки зору UI/UX.

4. Продумати масштабування та панорамування графа.

5. Продумати функціонал undo/redo.

6. Підкріпити UX візуальними ефектами при будь-яких взаємодіях (ефекти стану, анімації).

Додаткові завдання:

1. Відображення вмісту вузла.

   1. Ім'я вузла.

   2. Іконка або індикатор стану вузла (виконано/не виконано).

   3. Опис вузла (Користувач може додавати опціонально).

   4. Індикатор прогресу (круговий індикатор).

2. Логіка виконання вузлів.

   1. Дочірні вузли не можуть бути завершені, поки не будуть виконані батьківські (т.е. вони заблоковані).

   2. Заблоковані вузли виділяти іншим кольором або текстурою.

   3. Користувач може скасувати статус "виконано" у вузла (змінити на статус “не виконано”).

Сценарії:

1. Додавання 1-ої вузла.

2. Додавання n-ої вузла.

3. Редагування вузла.

4. Редагування опису вузла.

5. Видалення вузла.

6. Завершення вузла.

7. Відновлення вузла. 

8. Додавання зв'язку.

9. Зміна зв'язку.

10. Видалення зв'язку.

11. Валідація циклічної залежності зв'язків (не можна допускати залежність такого виду: A → B, B → C, C → A).

Результати:

1. Повний дизайн графа (десктоп версія) з усіма анімаціями та станами в Figma (Figma file).

P.S. Деякі речі вимагають обговорення і не є остаточним вимогою. В цілому, завдання полягає в тому, щоб підготувати візуальний концепт, на основі якого буде формуватися додаток.

Референси та натхнення:

https://draw.io/

https://excalidraw.com/