Проектирование и разработка мобильных приложений: полное руководство
Валерий Котелов
CEO
80% приложений удаляют после первого запуска. Пользователь открыл, не понял куда тыкать, закрыл – и все. А ведь кто-то потратил полгода и пару миллионов на эту красоту, которую никто не увидит дольше тридцати секунд.
Мы в KOTELOV за 13 лет сделали больше 50 мобильных проектов: от S7 Airlines до сети пекарен буше и Microsoft. Знаете, что объединяет те, которые реально взлетели? Их проектировали до того, как писать код: не после, не параллельно. Дальше разберём, как выстроить этот процесс, какие инструменты использовать и во сколько это обойдётся.
13 лет
опыта в мобильной разработке
50+
крупных мобильных проектов
20+
наград за дизайн и UX
100+
сотрудников в команде
Почему проектирование важнее кода
Исправить косяк на этапе проектирования стоит в 10 раз дешевле. А если баг дополз до прода? Умножайте ещё на десять. Это не из учебников: мы такое видели раз пятьдесят, если не больше.
Что вообще входит в дизайн мобильных приложений? Это точно не «нарисовать экранчики». UX-исследования идут первыми, потом информационная архитектура, затем прототипы, тестирование с живыми людьми, и только после всего этого – финальный дизайн. Пропустите любой шаг – и конверсия просядет, retention упадёт, а LTV будет грустным.
Вот разница между «нарисовать» и «спроектировать»: эскиз на салфетке против чертежа здания. Когда мы делали приложение для буше, провели полноценное UX-исследование, составили CJM, изучили больше десяти конкурентов – и только потом взялись за макеты. Результат? 157 000+ зарегистрированных пользователей и награды на WDA, Рейтинге Рунета и Tagline.
Зачем вообще тратить время на исследования, если хочется побыстрее запуститься? Чтобы потом не переделывать. Каждый час аналитики экономит 5-10 часов разработки – проверено на десятках проектов.
Этапы разработки мобильного приложения
Пять этапов. Разберём каждый – но по-разному, потому что копипаста никому не нужна.
01
UX-исследование
Кто ваши пользователи? Какие задачи решают? Где спотыкаются в текущих решениях? На старте проекта надо это понять, иначе дальше будете проектировать вслепую.
Анализируем конкурентов: не чтобы скопировать, а чтобы увидеть, что уже есть на рынке. Проводим интервью с реальными людьми. Строим Customer Journey Map. Определяем персоны – типичных пользователей с их болями и целями.
На проекте для S7 Airlines наши аналитики год (год!) работали в офисе заказчика рядом с Домодедово. Провели десятки интервью с главами служб: пассажирский сервис, логистика, безопасность, бортпроводники. Долго? Зато приложение для бортпроводников теперь используют на каждом рейсе, и экипаж поставил ему высшую оценку.
02
Информационная архитектура
Когда понятно, что нужно пользователям, можно строить структуру. Какие экраны? Как между ними переключаться? Что вынести на первый план, а что спрятать поглубже?
Определяем структуру экранов и навигацию. User flow показывает, как человек движется к цели: от точки входа до целевого действия. Приоритизируем функции: что на главном экране, что в настройках.
Был случай с мебельным магазином. Сократили навигацию до трёх основных экранов: магазин, каталог, настройки. Просто? Работает? Ещё как. Конверсия в покупку выросла, потому что путь пользователя стал короче и понятнее.
03
Прототипирование мобильных приложений
Теперь визуализация. Начинаем с wireframe мобильного приложения – каркасных макетов без цветов и картинок. Они показывают структуру и логику, не отвлекая на визуал.
Как создать прототип мобильного приложения? Сначала бумажные скетчи: да, от руки, это быстрее. Переносим в Figma, добавляем интерактивность – чтобы можно было кликать и переходить между экранами. Даём тестировать реальным людям, собираем фидбек, правим. И так несколько итераций, пока не перестанут спотыкаться.
На буше прототип спас нас от дорогой ошибки. Оказалось, что из акции или истории нельзя сразу попасть на страницу товара: пользователю приходилось закрывать экран, идти в каталог, искать категорию, находить товар. Четыре действия вместо одного! Исправили до разработки, а не после – сэкономили кучу денег.
04
UI-дизайн
Структура согласована, прототип протестирован – можно заниматься визуалом.
Определяем стиль: цвета, типографика, иконки. Всё это должно работать вместе и соответствовать бренду. Создаём дизайн-систему для приложений – библиотеку готовых компонентов. Адаптируем под платформы, потому что iOS и Android – это разные миры с разными гайдлайнами.
Зачем нужна дизайн-система? Не «чтобы было красиво». Это экономия времени разработчиков: все кнопки, поля ввода, карточки – готовые компоненты с чёткими спецификациями и состояниями.
05
Подготовка к разработке
Финал – собираем всё для передачи разработчикам.
UI-kit со всеми компонентами. Спецификации анимаций: что куда едет, с какой скоростью, по какой кривой. Гайдлайны по использованию элементов – когда какую кнопку применять.
На выходе разработчик открывает Figma и точно знает, какой отступ, какой шрифт, какой цвет. Без угадывания и бесконечных вопросов в чате.
UI/UX дизайн мобильных приложений: лучшие практики
Что реально работает на практике? Это не тренды из статей, а вещи, которые влияют на метрики.
Material Design для Android и Human Interface Guidelines для iOS – базовые документы, их надо знать. Но слепо копировать не стоит. Кстати, кнопка «назад» на Android и iOS работает по-разному м если не учесть, пользователи будут путаться.
Правило трёх касаний
Хочешь купить товар? Добраться до корзины за три тапа. В приложении для мебельного магазина вынесли персонализированные подборки на главный экран, сократили фильтры в компактный блок – и меньше кликов превратилось в больше покупок.
Консистентность
Тут всё просто. Все кнопки выглядят одинаково. Отступы одинаковые. Шрифты одинаковые. Пользователь не должен гадать «это кнопка или просто текст?» – вот этого не должно быть вообще.
Доступность
Touch-зоны минимум 44×44 пикселя. Контрастность текста к фону. Поддержка VoiceOver для слабовидящих. Это не опция и не «если успеем» – это стандарт.
Микроанимации
Делают интерфейс живым. Нажал кнопку – она чуть уменьшилась и сменила цвет. Открыл меню – оно плавно выехало. Обратная связь важна. В буше добавили пасхалку – анимированную заставку «Круассан Шрёдингера» для постоянных клиентов.
Dark mode? Уже не тренд, а – стандарт. Многие держат его включённым постоянно. Если тёмной темы нет – это минус при выборе.
Инструменты для проектирования мобильных приложений
Какие инструменты использовать? Зависит от задачи, но есть базовый набор.
Figma
Основной инструмент, в нём делаем почти всё: wireframes, прототипы, финальные макеты, UI-kit. Работает в браузере, командная коллаборация в реальном времени – не надо пересылать файлы туда-сюда.
Miro или FigJam
Для UX-исследований и воркшопов. Составляем CJM, строим карты пользовательских сценариев, фиксируем идеи после брейнштормов – когда нужна доска, а не макет.
Principle или ProtoPie
Нужны для сложных анимаций, когда стандартных переходов Figma не хватает и надо показать что-то нетривиальное.
Zeplin
Раньше использовали для передачи дизайна разработчикам, но сейчас многие работают напрямую в Figma с Dev Mode.
Для большинства проектов хватает связки Figma + Miro. Остальное подключаем по необходимости – не надо усложнять без причины.
Тестирование usability приложений
Спроектировали, нарисовали – но работает ли это? Узнать можно только у реальных пользователей. Своё мнение тут не считается.
Почему нельзя просто спросить команду? Дизайнер привык к макету. Продакт знает экраны наизусть. А новый человек открывает и не понимает, куда тыкать. Тестирование показывает эти слепые зоны – то, что очевидно вам, неочевидно пользователю.
Модерируемое тестирование: даём человеку прототип, просим выполнить задачу, наблюдаем, где спотыкается. A/B тесты: две версии экрана, смотрим, какая работает лучше по метрикам. Eye-tracking показывает, куда смотрит пользователь и на чём фокусируется.
Когда проводить? Первый раз – на этапе прототипа, пока не написали код. Второй – после запуска, когда появляется реальная статистика использования.
Инструменты: Maze для быстрых юзабилити-тестов, Hotjar для анализа поведения в проде.
На S7 мы полгода дорабатывали отчёты, чтобы они не терялись при плохом соединении. Провели кучу тестов с реальными бортпроводниками – ведь в самолёте интернета нет, а в аэропортах обычно только «ешка» работает.
Сколько времени и денег стоит проектирование
Переходим к цифрам. Дорого? Зависит от задачи.
от 4 недель
Простое приложение на 10-20 экранов
от 6 недель
Среднее приложение на 20-40 экранов
от 10 недель
Сложное с 40+ экранами и интеграциями
Стоимость складывается из этапов: UX-исследование от 300 000 рублей, проектирование и UI-дизайн от 500 000 до 2 000 000 рублей.
От чего зависит цена? Количество экранов. Сложность анимаций. Число платформ – только iOS или iOS + Android. Глубина UX-исследований: можно провести пять интервью, а можно пятьдесят.
Почему не стоит экономить на проектировании? Переделывать готовое приложение стоит в разы дороже. Мы видели проекты, где экономия на исследованиях обернулась полным редизайном через полгода после запуска.
Почему выбирают KOTELOV для проектирования приложений
13 лет работаем над мобильными приложениями. Вот что можем предложить.
Собственная команда
UX/UI-дизайнеров. Не привлекаем фрилансеров – все специалисты в штате. Это единый уровень качества и понимание внутренних процессов.
Полный цикл работ
От исследований до публикации в сторах. Не просто рисуем макеты: проектируем, разрабатываем, тестируем, поддерживаем. Можно заказать только UX/UI-дизайн, а разработку сделать своей командой – или отдать весь проект под ключ.
Опыт с крупными брендами
S7 Airlines, Microsoft, буше, Газпромбанк, ПИК, Т-Банк. 100+ сотрудников, 50+ крупных проектов, 20+ наград — но это цифры, а не гарантии. Важнее, что мы понимаем специфику больших проектов.
Системный подход
Связываем дизайн с бизнес-метриками, а не просто «делаем красиво». Приложение для буше собрало больше 300 000 скачиваний. Приложение для S7 избавило бортпроводников от 10 кг бумажных инструкций на каждом рейсе.
Заключение
Проектирование и разработка мобильных приложений – это не статья расходов, а инвестиция. UX-исследования и прототипирование мобильных приложений экономят деньги на этапе разработки и повышают шансы продукта.
Начинать надо не с кода, а с понимания пользователей. Wireframe мобильного приложения, интерактивный прототип, дизайн-система для приложений – каждый шаг приближает к продукту, которым реально будут пользоваться.