Проектирование и комплексная разработка интерфейса мобильного приложения Здоровье петербуржца
Неумолимое развитие технологий в современном обществе порождает огромное количество информации, которое обрушивается на человека со всех сторон. Постоянная реклама, новости, музыка и фильмы, все это сейчас в избытке циркулирует в нашем информационном поле.
Изобилие источников информации ведет к росту конкуренции, которая в свою очередь порождает качество. Сейчас сложно представить, что неудобный и некрасивый сайт найдет свою аудиторию, потому что с большой вероятностью существует вариант получше. Это все приводит к высокой востребованности дизайна, ведь именно он делает продукт конкурентоспособным и привлекающим максимальное количество внимания. Дизайн в свою очередь делится на множество направлений, одно из них — дизайн мобильный приложений.
В последние годы появление мобильных приложений произвело революцию в том, как люди взаимодействуют с технологиями. С ростом спроса на смартфоны и планшеты важность дизайна пользовательского интерфейса (UI) и пользовательского опыта (UX) стала первостепенной. Хорошо спроектированный UI/UX может создать или сломать мобильное приложение, определяя его успех и популярность среди пользователей.
Целью дипломной работы является разработка и проектирование дизайна интерфейса мобильного приложения для сайта “здоровье петербуржца” на основе пользовательского опыта.
Оглавление
РЕФЕРАТ 2
Оглавление 3
ВВЕДЕНИЕ 5
1. Введение в понятия ux и ui дизайн. 7
1.1. Разработка пользовательского интерфейса (UI) 8
1.1.1. Принципы дизайна пользовательского интерфейса 11
1.1.2. Компоненты пользовательского интерфейса 12
1.1.3.1. Google Material Design System 14
1.1.3.2. Apple Human Interface Guidelines 16
1.2. Пользовательский опыт (UX) 18
1.2.1. Принципы UX-дизайна 20
1.2.2. Процесс UX-дизайна 22
1.2.3. Пользовательские паттерны 23
1.2.4. Персоны 25
1.2.5. User flow 26
1.3. Разработка мобильных приложений 28
1.3.1. Нативная и кроссплатформенная разработка 29
1.3.2. Архитектура мобильного приложения 31
1.3.3. JTBD 33
1.4. Постановка задачи 35
Выводы по главе 1 35
2. Подготовка к созданию UI/UX дизайна мобильного приложения 36
2.1. Аргументация выбора компании 36
2.2. Графические программы 37
2.2.1. Adobe XD 38
2.2.2. Sketch 39
2.2.3. Figma 41
2.2.4. Обоснование выбора 42
2.3. Условия и этапы создания 43
2.4. Методы тестирования 44
2.4.1. Популярные методы 45
2.4.2. Обоснование выбора методов тестирования для данного проекта 47
Выводы по главе 2 48
3. Разработка дизайна мобильного приложения 49
3.1. Изучение целевой аудитории 49
3.1.1. Создание персон 50
3.1.2. Проектирование User Flow 52
3.2. Прототипирование 54
3.3. Тестирование и анализ 57
3.4. Цветовая схема и подбор шрифта 59
3.5. UI kit 62
3.6. Сбор макета. 63
Выводы по главе 3 65
ЗАКЛЮЧЕНИЕ 66
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ 67
ПРИЛОЖЕНИЕ А Подробный UI kit 69
ПРИЛОЖЕНИЕ Б UI/UX дизайн мобильного приложения 71
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ
App Master [электронный ресурс]. — 2023. — URL: https://appmaster.io/ru/blog/covety-po-razrabotke-ui-dizaina (дата обращения: 20.05.2023).
Vc.ru [электронный ресурс]. — 2023. — URL: https://vc.ru/design/150653-5-principov-kachestvennogo-ui (дата обращения: 20.05.2023).
UPROCK [электронный ресурс]. — 2023. — URL: https://www.uprock.ru/articles/10-obyazatelnyh-komponentov-dizayn-sistemy (дата обращения: 20.05.2023).
Хабр [электронный ресурс]. — 2023. — URL: https://habr.com/ru/articles/320136/ (дата обращения: 20.05.2023)
Material Design [электронный ресурс]. — 2023. — URL: https://m3.material.io/ (дата обращения: 20.05.2023)
Human Interface Guidelines [электронный ресурс]. — 2023. — URL: https://developer.apple.com/design/human-interface-guidelines (дата обращения: 20.05.2023)
Tilta Education [электронный ресурс]. — 2023. — URL: https://tilda.education/articles-what-is-ux-design (дата обращения: 20.05.2023)
UPROCK [электронный ресурс]. — 2023. — URL: uprock.ru/articles/principy-ux-dizayna-kotorye-ponravyatsya-vashim-polzovatelyam (дата обращения: 20.05.2023)
DENISOV [электронный ресурс]. — 2023. — URL: https://sdvv.ru/articles/testovyy-razdel/rukovodstvo-po-ux-dizaynu-protsess-razrabotki-i-trebovaniya-k-ux-dizayneru/ (дата обращения: 20.05.2023)
Хабр [электронный ресурс]. — 2023. — URL: https://habr.com/ru/articles/585198/ (дата обращения: 20.05.2023)
Vc.ru [электронный ресурс]. — 2023. — URL: https://vc.ru/design/236815-metod-person-v-ux-zachem-nuzhen-pochemu-rabotaet-i-kak-primenyat (дата обращения: 20.05.2023)
Хабр [электронный ресурс]. — 2023. — URL: https://habr.com/ru/articles/496760/ (дата обращения: 20.05.2023)
Microsoft Azure [электронный ресурс]. — 2023. — URL: https://azure.microsoft.com/ru-ru/resources/cloud-computing-dictionary/what-is-mobile-app-development/ (дата обращения: 20.05.2023)
statista.com [электронный ресурс]. — 2023. — URL: statista.com (дата обращения: 17.05.2023)
В заключение, принципы UX-дизайна являются важными рекомендациями, которые помогают дизайнерам создавать эффективный и действенный пользовательский опыт. Ориентированный на пользователя дизайн, который является ясным, последовательным, доступным, обеспечивает обратную связь, является гибким, визуально привлекательным, быстрым, предотвращает ошибки и постоянно тестируется, может привести к успешному взаимодействию с пользователем. [8]
Процесс UX-дизайна
Процесс проектирования UX — это комплексный подход к разработке цифровых продуктов, отвечающих потребностям и ожиданиям пользователей. Это многоэтапный процесс, который включает в себя несколько этапов от идеи до реализации. Процесс является итеративным, что означает, что каждый этап информирует о следующем, а предыдущие этапы пересматриваются по мере необходимости.
Первым этапом процесса проектирования является исследо