Архив: UI/UX и дазайн страницы управления учебной группой.

Описание

Задание на разработку UI/UX и дизайна страницы групп.



Назначение страницы - управление учебной группой школы.



Функционал страницы:

Привязка учителя к группе

Привязка курса к группе

Добавление, удаление студентов из группы

Старт курса группы

Завершение курса группы



Предполагаемые элементы управления на странице.

Выбор учителя - выпадающий список

Выбор курса - выпадающий список

Карточка-курса

Управление студентами группы - два смежных списка с полями поиск

Показывать неактивных студентов - чек-бокс

Показывать только студентов без группы - чек-бокс

Кнопка Start

Кнопка Stop

Кнопка Finish

Кнопка Save



Предполагаемый алгоритм работы с страницей.

Прежде всего пользователь должен выбрать курс, все элементы кроме выбора курса -

не активны. После выбора курса из списка курсов, кнопка Save становится активной. После нажатия на кнопку Save: элемен выбора курсов меняется на элемент -

карточка-курса, все остальные элементы становятся доступны для редактирования.

С этого момента пользователь может менять учителя курсов, добавлять, удалять студентов из группы, стартовать курс.



Кнопка Save сохраняет состояние группы:



Статус группы:

-Opened

-Inprocess

-Finished

Меняется кнопками Start, Stop и Finish.



После нажатия на кнопку Start: группа переходит в состояние “Inprocess” кнопка старт меняется на кнопку Stop помимо этого появляется кнопку Finish.



После нажатия на кнопку Stop группа переходит в состояние - Opened, Кнопка Stop меняется на Start, кнопка Finish пропадает.



После нажатия на кнопку Finish группа переходит в состояние “Finished” и Все элементы становятся неактивными, то есть страница доступна только для просмотра.



Дизайн страницы должен соответствовать общему стилю шаблона сайта.

Шаблон сайта http://angular-material.fusetheme.com/

Дизайн должен быть адаптивным поэтому продумать дизайн для мобильных устройств.

Нужно учесть расположение кнопок Save, Stop, Start и Finish, чтобы интуитивно было понятно за что они отвечают. Возможно, будет удобней использовать другие элементы нежели кнопки.



Прикрепил существющие экраны без дизайна, так же прикрепил мокап с элементами на странице.

Категория

Дизайн сайтов