Макет для спортивного приложения на Android

Макет для спортивного приложения на Android

Я решил принять участие в конкурсе от uxchat и Нетологии, главным призом которого является бесплатное обучение курсу «Проектирование интерфейсов» от Нетологии. Второе место — годовой доступ к сервису flaticon.com или любому другому сервису / ресурсу / софту по желанию победителя (номиналом не более 115$).

Для участия в конкурсе мне было необходимо выполнить одно из двух заданий:

  1. Макет страницы для сервиса онлайн-визиток — вот его описание
  2. Макет экрана для мобильного приложения под Android — описание задания

Я выбрал второе задание, т. к. тематика спорта и самого спортивного приложения мне близка. Раньше, занимаясь в зале, я постоянно использовал два приложения — одно в качестве дневника тренировок, другое в качестве дневника питания. Но у обоих были недостатки, о которых я вспомнил при составления прототипа приложения для конкурса.

Коротко о задании

Я пришел в зал, открыл на телефоне спортивное приложение, выбрал подходящую тренировку и запустил её. После этого передо мной открывается экран макет которого и требуется спроектировать в задании.

Что должно быть на экране

  1. Общее время от начала тренировки
  2. Переход в настройки звука
  3. Название упражнения
  4. Номер упражнения из кол-ва упражнений в текущей тренировке
  5. Возможность переключиться на следующее упражнение (не доделав текущее)
  6. Возможность завершить тренировку (не доделывая упражнения)
  7. Изображение выполнения упражнения (анимированная фигура выполняющая текущее упражнение) — для этого надо только предусмотреть место — рисовать не нужно.
  8. Возможность запустить/остановить анимацию фигуры
  9. Возможность посмотреть описание упражнения
  10. Результаты этого упражнения на предыдущей тренировке (в формате Вес — Кол-во повторений)
  11. Кол-во подходов сколько надо сделать в этом упражнении
  12. Текущие результаты (запись осуществляется после подхода) (возможно как то совместить с предыдущим пунктом)
  13. Функциональная кнопка (после выполнения подхода по клику на неё открывается возможность записать результаты подхода, после записи активируется таймер отдыха — до следующего подхода).

Проектирование

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

упражнение
номер подхода
количество повторений
возможность сделать запись
техника выполнения упражнения

Поэтому остальное убрал на другой экран.
Затем, набросал скетч возможного макета. В результате его и взял за основу.

Решение

Основной экран во время тренировки

Экраны «Описание упражнения» и «Предыдущие результаты»

Экраны «Личные данные» и «Фотохроника»

Прототип приложения

Также я подготовил прототип этого спортивного приложения. Демонстрацию его я заснял на видео.

Поделиться
Отправить
Запинить
2017  
Популярное