Какие-то продукты полностью представляют собой мобильное приложение, в каких-то это лишь часть бизнеса, где-то — дополнение к основному продукту. Но общие закономерности в разработке мобильных приложений почти не меняются. В статье я их описываю.
Содержание
Этапы проектирования и разработки приложения
Стратегия
Когда у команды есть идея мобильного приложения и необходимые ресурсы, то важным шагом будет изучение ниши, анализ конкурентов. Если похожие приложения существуют, то собери о них максимальную информацию: количество загрузок, отзывы пользователей, оценки, структуру интерфейса. Покопаться в чужом огороде полезно потому, что это поможет избежать ошибок, изучить аудиторию пользователей, их желания и запросы. И вообще понять, стоит ли игра свеч, будет ли твой проект конкурентоспособным и принесет ли ожидаемый результат.
Любое мобильное приложение имеет право на существование, если его и скачают, и будут пользоваться. Поэтому проектирование осуществляется с учетом маркетинговой стратегии: продвижение проекта, монетизация, покупки в приложение или привлечение рекламодателя. Существует отдельная спеиализация — ASO (App Store Optimization).
Техническое задание
В разных методологиях представлено по-разному. В качестве задания может быть даже бизнес-модель, или информационная архитектура, а само задание разбито на пользовательские истории и задачи по ним. От классического представления «техническое задание» сейчас многие уходят, так как это прибитые гвоздями ограничения на продукт, которого ещё не существует. Естественно, в процессе разработки всё поменяется миллион раз и статический документ станет не акутальным.
UX дизайн мобильного приложения
UX (user experience) дизайн предполагает построение архитектуры всего интерфейса. Проектировщик работает над удобством, простотой, качеством будущего мобильного приложения. Прописываются пользовательские сценарии, которые помогают продумать все навигационные маршруты пользователя. Всё это объединяется и составляется варфрейм. Более наглядный вариант – это прототип, когда создаются все экраны приложения, и по ним можно отследить, куда приведут те или иные действия пользователя.
Wireframe
Задача варфрейма наиболее полно описать функционал мобильного приложения, показать пользовательские маршруты, как люди переходят от контента к действиям. Варфрейм можно сделать в качестве наброска, заключив всю структуру в схематичные блоки со стрелками. Но это скорее для внутреннего использования. А пользователям на тестировании предоставить более удобный и наглядный вариант, отрисованный без визуальной красоты.
Пользовательские сценарии
В пользовательских сценариях прописываются шаги пользователя, которые он будет совершать в приложении для реализации разных целей. К примеру, типичные истории с регистрацией и авторизацией. Какие данные должен ввести человек, будут ли они проверяться, понадобятся ли какие-то меры безопасности. Здесь нужно учитывать особенности и помнить, что смартфон — это не монитор компьютера с отдельной клавиатурой. Пользователю мобильного приложения не захочется «залипать» на моменте ввода данных, поэтому проектировщику стоит проработать самый удобный путь для решения этих задач.
Проверка на аудитории
Удалось ли при разработке на этапе UX попасть в цель, покажет проверка на аудитории. Но пока без функциональной части, без реализации. Пока пользователи просто ходят по сценариям, протаптывают удобные дорожки и останавливаются в неудобных местах. Такое исследование дает возможность проверить определенные идеи, сформулировать отзывы пользователей о них, сделать выводы и исправлять ошибки на ранних этапах, дорабатывать. Проверка на аудитории необходима до завершения проектирования.
UI дизайн мобильного приложения
Прототип имеет свою логику, понятную и завершенную структуру, а теперь нужно придумать «лицо». Эстафета передается UI (user interface) дизайну. Все экраны оформляются консистентно в единой шрифтовой системе, цветовой палитре и тд.
Стайлгайды
Стайлгайды задают тон в дизайне будущего мобильного приложения. Стайлгайд формируется из предварительно созданных элементов дизайна. В итоге получается памятка по стилю, и дизайнеры (особенно если их целая команда) никогда не запутаются, не наделают ошибок, не создадут разномастных страниц. Задача стайлгайда – помочь дизайнеру выдержать единый стиль, целостность во всех частях.
Рендеринг
Рендеринг или имплементация. По сути отражает процесс перехода от стайлгайда к визуальному воплощению.
Дизайнер, обращаясь к стайлгайду, получает нужную информацию и переносит их на варфреймы. Понятно, что не нужно слепо следовать рекомендациям из стайлгайда. В процессе рендеринга уже будет вырисовываться ясная картина, можно увидеть, как приблизительно будет выглядеть итоговый продукт.
Проверка дизайна
Перед разработкой необходимо тестировать не только UX, но и UI будущего приложения. Для этого полезно иметь парк устройств, или хотя бы пару целевых. Если приложение разрабатывается на айфон и айпад — открой его скрины на них. Можно использовать Figma Mirror. Плюс-минус пропорции экранов современных айфонов одинаковые, поэтому самые грубые ошибки ты закроешь, даже тестируя на одном устройстве.
Особенности проектирования мобильных приложений
Процесс проектирования мобильного приложения имеет свои особенности. Вот на что следует обратить внимание:
- Сенсорный экран — всеми функциями управляют касания и жесты. Существует ли защита от случайных нажатий? Мне мама иногда звонит в панике: то случайно фотографии в одноклассники загрузила, то платную подписку подключила.
- Размер экрана — он всегда меньше дисплея планшета или ноутбука, поэтому много элементов запихнуть не получится. С уменьшением размера удлиняется путь пользователя.
- Поправка на размеры пальцев — универсальный размер кнопок (не большие и не микроскопические), чтобы удобно было на них попадать с первого раза. Хороший тон для области нажатия пальцем — не меньше 40 px.
- Ограниченная производительность — скорость передачи файлов, ресурс смартфона, объем занимаемой памяти.
- Тип операционной системы. Google и Apple предоставляют разные требования и паттерны к проектированию приложений. Подробно об этом можно почитать у них: Material Design и Human Interface Guidelines.
- Привязка к интернету. Можно ли будет совершать какие-то действия в приложении в отсутствие интернета. Например, некоторые игрушки запускаются, если нет сигнала. Чаты в whatsapp в оффлайне открываются, можно даже написать сообщение, и оно отправится когда появится соединение.
- Рекламный контент — если он предполагается, то нельзя, чтобы эти сообщения перекрывали доступ к основным органам управления.
- Использование инфраструктуры смартфона: геопозиционирование, жесты, камера, микрофон, акселерометр.
- Ориентация экрана — что будет происходить на экране при повороте смартфона горизонтально и вертикально.
(1 votes, average: 4,00 out of 5)
Загрузка...