Details

В данной работе описана разработка дизайн-концепции мобильного приложения для метрополитенов России. В процессе работы был проведён предметный обзор рынка мобильных приложений, мобильных операционных систем и дизайн-инструментов. Проведено исследование ближайших аналогов мобильных приложений, целевой аудитории и методик UX-дизайна. Описан процесс проектирования дизайна мобильного приложения: разработка информационной архитектуры, wireframe-экранов, графической концепции приложения и его итогового прототипа.

This work describes the process of designing a concept of a mobile app for Russian underground system. This paper includes a review of mobile app market, mobile operating systems and design-tools. The paper also provides research of the closest app analogues, target audience and UX-design methods. As the result, design process is described, which includes designing the information architecture, wireframes, graphic concept of the app and the final prototype.

• Содержание
• Введение
• Глава 1. Обзор предметной области
  • 1.1. Развитие рынка мобильных приложений
  • 1.2. Распространенность мобильных приложений в системе транспорта
  • 1.3. Развитие разработки мобильных приложений для госсектора
  • 1.4. Мобильные операционные системы
    • 1.4.1. Операционная система Android
    • 1.4.2. Операционная система iOS
  • 1.5. Инструменты дизайн-проектирования
    • 1.5.1. PureRef
    • 1.5.2. Adode Illustrator
    • 1.5.3. XMind
    • 1.5.4. Figma
    • 1.5.5. Sketch
  • Выводы по главе 1
• Глава 2. Предпроектное исследование
  • 2.1. Целевая аудитория проектируемого приложения
    • 2.1.1. Местные жители мегаполисов
    • 2.1.2. Туристы
  • 2.2. Сравнительный анализ приложений
    • 2.2.1. Приложение «Метро Москвы»
      • Рис. 2.1. Метро Москвы. Разделы навигации, личного кабинета и новостей
      • Рис. 2.2. Метро Москвы. Иконка приложения
    • 2.2.2. Приложение «Яндекс.Метро»
      • Рис. 2.3. Яндекс.Метро. Разделы навигации, настроек и выбора города
      • Рис. 2.4. Яндекс Метро. Экран загрузки приложения
    • 2.2.3. Приложение «MetroMan China»
      • Рис. 2.5. MetroMan China. Экраны схемы, маршрута и станции
      • Рис. 2.6. MetroMan China. Иконка приложения
    • 2.2.4. Приложения «TfL Oyster» и «TfL Go»
      • Рис. 2.7. TfL Oyster. Экраны карты, истории проезда, оплаты и транспортных схем
      • Рис. 2.8. TfL Go. Экраны карты, «step free» станций и прокладки маршрутов
      • Рис. 2.9. Иконки приложений «TfL Oyster», «TfL Go» и их значения
    • 2.2.5. Приложение «SL»
      • Рис. 2.10. SL. Экраны карты, обозначений транспорта и билетов
      • Рис. 2.11. SL. Иконка приложения
  • 2.3. Функциональные свойства проектируемого приложения
  • 2.4. Методики UX-дизайна
  • Выводы по главе 2
• Глава 3. Разработка дизайна мобильного приложения
  • 3.1. Информационная архитектура приложения
    • Рис. 3.1. Схема приложения. Раздел «Схема метро»
    • Рис.3.2. Схема приложения. Раздел «Тарифы»
    • Рис. 3.3. Схема приложения. Раздел «Кошелёк», функции: профиль, новости, город
  • 3.2. Разработка wireframe-экранов
    • Рис. 3.4. Пример нескольких wireframe-экранов из раздела «Кошелёк»
    • Рис. 3.5. Wireframe-экраны, расположение заголовков
    • Рис. 3.6. Wireframe-экраны, раздел «Схема»
  • 3.3. Разработка графической концепции приложения
    • 3.3.1. Цветовое решение
      • Рис. 3.7. Фирменные цвета
      • Рис. 3.8. Отображение цветов при дальтонизме, блокирующим красно-зеленый спектр
    • 3.3.2. Логотип приложения
      • Рис. 3.9. Логотипы метрополитенов России
      • Рис. 3.10. Фрагменты карт части метрополитенов России
      • Рис. 3.11. Корректировка «М», полупрозрачным черным окрашен итоговый результат
      • Рис. 3.12. Итоговый вариант логотипа
    • 3.3.3. Иконки приложения
    • 3.3.4. Шрифты
      • Рис. 3.14. Начертания шрифта «Inter»
      • Рис. 3.15. Начертания шрифта «Commissioner»
  • 3.4. Разработка прототипа приложения
    • Рис. 3.16. Реализация главных экранов приложения
    • Рис. 3.17. Главные экраны разделов, симуляция протанопии
    • Рис.3.18. Главные экраны разделов, симуляция дейтеранопии
  • Выводы по главе 3
• Заключение
• Список использованных источников
• Приложение 1. Сравнение аналогов
• Приложение 2. Схемы структуры приложения
  • Рис. П2.1. Схема приложения. Раздел «Кошелёк», функция добавления карты
  • Рис. П2.2. Схема приложения. Раздел «Кошелёк», функция добавления карты в Apple Wallet
  • Рис. П2.3. Схема приложения. Раздел «Кошелёк», функция оплаты основной карты
  • Рис. П2.4. Схема приложения. Раздел «Кошелёк», функции блокировки и истории проезда основной карты
  • Рис. П2.5. Схема приложения. Раздел «Кошелёк», работа с картами, функции добавления карты в Apple Wallet и оплаты
  • Рис. П2.6. Схема приложения. Раздел «Кошелёк», функции блокировки и истории проезда карты из всех доступных карт
• Приложение 3. Wireframe-экраны приложения
  • Рис. П3.1. Часть разработанных wireframe-экранов
• Приложение 4. Итоговые экраны приложения
  • Рис. П4.1. Основные экраны раздела «Схема»
  • Рис. П4.2. Основные экраны раздела «Тарифы»
  • Рис. П4.3. Основные экраны раздела «Кошелёк»
  • Рис. П4.4. Схема связей прототипа