Как происходит разработка мобильных приложений
Давид Григорян — эксперт в сфере разработки мобильных приложений на платформе iOS, главный инженер по разработке в Сбербанке. Он принимает активное участие в развитии сообщества, выступает на конференциях и публикует тематические материалы.
Давид расскажет о том, как можно построить карьеру в сфере мобильной разработки, а также опишет основные шаги, которые нужно проделать для достижения заветной цели. Мы затронем вопросы актуальности этой сферы, пути становления в данной профессии и основные ошибки, которые могут совершать начинающие специалисты.
Востребована ли профессия мобильного разработчика? Легко ли найти работу в этой сфере?
В 2021 году мобильная разработка остаётся одним из самых востребованных направлений. Ситуация с пандемией только дала толчок для её развития. Многие компании ушли в онлайн, одной лишь веб-страницы недостаточно для того, чтобы выживать в конкурентной среде, которая явно задаёт тенденцию на мобильные решения.
Даже в докоронакризисные времена на рынке была нехватка в мобильных разработчиках. Сейчас ситуация стала намного острее.
Согласно исследованиям, в России число специалистов в области мобильной разработки оценивается в 25-30 тыс. человек. Для тех предложений, которые есть на рынке, этого мало. Разница в зарплатах в этой области может составлять от 100 до 200 тыс. руб. для одной и той же позиции.
Из всего вышесказанного выходит, что найти работу для начинающего специалиста, имеющего пару-тройку проектов портфолио, не составит труда. К тому же формат удалёнки становится неотъемлемой частью в IT, а программ стажировок от крупных компаний становится всё больше.
Какие направления существуют в мобильной разработке? Есть ли смысл осваивать кроссплатформенные решения?
Существуют три основных направления в мобильной разработке: Android, iOS и кроссплатформенные решения (Flutter, React Native, PhoneGap).
Revolut , Санкт-Петербург, Москва, можно удалённо , По итогам собеседования
Для Android-разработки используются языки Kotlin и Java, для iOS — Swift и Objective-C. Ещё несколько лет назад основными языками для Android и iOS были Java и Objective-C. Однако с появлением новых языков многие проекты, в том числе крупных IT-компаний, стали использовать современные решения. Сейчас начинающему специалисту достаточно владеть знаниями об основной платформе, на которой он разрабатывает (iOS или Android), а также одним из новых языков программирования (Swift или Kotlin).
Нужно исходить из требований того региона, в котором вы собираетесь искать работу. Например, если вы живёте и собираетесь работать во Владивостоке, где основные вакансии по iOS требуют знания Swift, то очевидно, что изучение Objective-C будет неоправданным.
Кроссплатформенные решения в России не так востребованы как нативные (родные). Но у них есть своя ниша. В основном это стартапы, которые требуют минимальных вложений для реализации задуманной идеи на обеих платформах.
Это эффективная стратегия для выпуска MVP продукта, который впоследствии может быть презентован инвесторам и другим заинтересованным лицам для привлечения дополнительных средств на развитие. Спустя какое-то время, с привлечением дополнительных средств, такие проекты переписываются на нативные технологии, а их поддержка становится более предсказуемой и эффективной.
Сравниваем подходы нативной и кроссплатформенной мобильной разработки в 2021 годуКакие основные роли и задачи мобильного разработчика?
Разработчик в целом — это не только тот, кто набирает код на клавиатуре. Это специалист, который понимает конкретную бизнесовую проблему, которую ему необходимо решить с помощью этого кода. Мобильный разработчик — не исключение. Единственное отличие — это понимание особенностей мобильных технологий в целом (таких как push-уведомления, ограничения скорости интернета, зарядки и памяти).
Очевидно, что мобильные приложения — это та же фронтенд-часть приложения. Соответственно, отсюда вытекают стандартные задачи и проблемы: поддержка вёрстки для большинства девайсов, необходимость учитывать версии операционных систем и т.д.
Одна из основных проблем, которую необходимо учитывать в разработке тонкого мобильного клиента (основная часть и логика которого реализуется на бэкендe), — это поддержка обратной совместимости между различными версиями приложений. Одна из основных задач мобильного разработчика — выполнение поставленных требований с оглядкой на перечисленные выше ограничения и особенности.
Мобильные приложения могут выступать как:
- самостоятельные решения без необходимости интеграции с бэкенд-частью;
- основной компонент клиент-серверной архитектуры.
Как стать разработчиком мобильных приложений?
Если мы говорим про случай, когда у человека нет знаний и опыта в программировании, то стоит для начала изучить:
- один из языков программирования (Kotlin или Swift),
- саму платформу (Android или iOS),
- объектно-ориентированное программирование,
- алгоритмы и структуры данных (без фанатизма, только основные принципы).
Также нужно обязательно научиться гуглить. Кому-то этот совет может показаться оскорбительным, но это не так. Программисты всех уровней и мастей гуглят, без исключений. Умение правильно задать вопрос — навык, который потребуется и в дальнейшей работе с коллегами, если этот вопрос нужно будет адресовать им.
Стоит оговориться, что для начала разработки под iOS необходимы устройства от Apple. Как минимум нужно приобрести бюджетный Mac mini или MacBook на вторичном рынке. Для изучения одного из языков программирования и изучения самой платформы подойдут основные туториалы на сайте Apple или Android. В идеале — найти ментора, который поможет на первоначальном этапе и выстроит план обучения. Курсы тут тоже будут кстати, но не стоит надеяться, что после простого их прослушивания всё станет очевидным и понятным.
Достичь успеха получится, если заниматься самостоятельно, делая домашние задания и разрабатывая собственные мини-проекты, которые в дальнейшем станут отличным портфолио для поиска первой работы.
Какие ошибки чаще всего совершают новички?
Многие новички совершают ошибки при изучении новой области. Я не был исключением.
Насколько сложно войти в мобильную разработку в отличие от смежных направлений, например, веб-разработки?
Есть мнение, что вход в мобильную разработку сложнее, чем в тот же веб. Но я не согласен с этим аргументом. Для освоения веб-технологий как минимум потребуются знания о том, как работает интернет в целом, как действуют основные протоколы взаимодействий между клиентом и сервером. Добавьте сюда HTML/CSS/JavaScript, один из серверных языков (PHP/Python/Java/Go/Ruby), SQL и много чего ещё интересного. Это вовсе не значит, что мобильному разработчику не нужно понимать, как работает интернет, или иметь представление о смежных технологиях. Но это всё-таки не основной стек технологий, с которым специалисту нужно будет иметь дело изо дня в день.
Как известно, во фронтенд в целом легко входить, но сложнее поддерживать себя в форме. Обновления инструментов для разработчиков Apple и Android-платформ, выходят ежегодно, их нужно изучать и применять. Похожая ситуация и с JS-фреймворками для фронтенд-разработчиков.
Останется ли мобильная разработка востребованной в ближайшие годы?
Конечно, мобильная разработка останется востребованной. Несмотря на очевидную стагнацию в выпуске новых фич для смартфонов, ими всё равно продолжает пользоваться огромное число людей по всему миру. И большинство задач тоже будет решаться с помощью устройства, которое находится у вас в кармане. Как минимум в ближайшие 10-15 лет.
Процесс создания нативного приложения, описанный компанией BHW Group и адаптированный AppCraft под современный софт и реалии.
Каждый день тысячи мобильных приложений появляются в Google Play и Apple App Store. Соцсети, мессенджеры, игры и многие другие – все они делаются профессионалами по одному алгоритму разработки. И сегодня мы разложим его на понятные шаги, чтобы показать вам внутреннюю кухню мобильной разработки. Она включает в себя шесть этапов: оформление идеи, разработка стратегии, работа над дизайном, непосредственно разработка, выход на рынок и мониторинг ситуации.
Материал будет полезен начинающим студиям разработки, тем, кто задумал свой стартап, а также тем, кто спонтанно решил внедрить в свой бизнес приложение, но ещё смутно представляет, какие издержки оно может принести.
Как бы тривиально это не звучало, но хорошее приложение начинается с хорошей идеи. Если у вас её нет, подумайте над существующими в мире проблемами и возможными способами их решения. Перебирайте варианты, пока не обнаружите подходящий пробел на рынке, а потом ищите лучший путь, которым его можно заполнить. Это половина успеха.
Ключом к ответу может стать понимание того, почему эта проблема вообще существует, а для её решения до сих пор нет ни одного приложения. Погрузитесь в тему, соберите данные и обсудите их с командой. И, если у вас достаточно ресурсов на разработку, беритесь за дело.
Следующий шаг после рождения идеи – составить план работы над проектом. Его проще всего начать с анализа конкурентов. Найдите на рынке похожие мобильные приложения и проанализируйте следующие факторы:
- Количество загрузок – если приложение загружают, значит, это кому-нибудь нужно.
- Оценки и отзывы – помогут предусмотреть слабые места и адаптировать «фишки», которые нравятся пользователям, под свой продукт.
История компании – будьте готовы столкнуться с теми же трудностями, что и ваши ближайшие конкуренты. Заодно попробуйте понять, как они завоевали признание аудитории.
Благодаря анализу конкурентов вы убиваете сразу двух зайцев. Во-первых, учитесь на чужих ошибках, причём бесплатно, без траты лишнего времени и ощущения собственной неполноценности. Во-вторых, вы начинаете понимать, на что вам придётся пойти, чтобы выжить на рынке мобильной разработки. Что именно пользователь хочет увидеть в своём смартфоне? Есть ли для вашего приложения свободная ниша? Ответы на эти вопросы помогут вам найти баланс между вашими возможностями и потребностями рынка. Ну а если ваша идея настолько уникальна, что подобных приложений ещё нет в природе, посмотрите, как разработчики-первопроходцы из других сфер презентовали себя аудитории.
Если вы не занимаетесь разработкой мобильных приложений исключительно ради удовольствия, то наверняка заинтересованы в том, чтобы получить с продукта хорошую прибыль. Покупки в приложении, оплата подписки или премиум-версии, размещение рекламы, продажа данных – все эти способы монетизации можно использовать, даже если вы распространяете приложение не бесплатно. Чтобы выбрать оптимальный вариант, посмотрите, на чём зарабатывают ваши конкуренты, и определитесь, в какой момент начнёте монетизацию. Если спохватитесь слишком поздно, рискуете попасть в трудные времена.
Эта ступень мобильной разработки связана с пониманием главного вызова, стоящего перед любым разработчиком. Вам придётся продвигать своё приложение, чтобы о нём узнали и начали пользоваться. Сотни качественных мобильных приложений пылятся на виртуальных полках потому, что у их разработчиков не было маркетинговой стратегии и бюджета на её реализацию. А без неё могут обойтись только B2B-приложения, сделанные для внутреннего использования сотрудниками компании-заказчика.
Этап стратегического планирования завершается составлением дорожной карты вашего мобильного приложения, которая зафиксирует его идеальный путь от минимального жизнеспособного продукта (MVP) до попадания в топы магазинов. Составьте список контрольных точек и расставьте их в зависимости от собственных приоритетов. Учитывайте функционал приложения, возможные пожелания аудитории и следующие из них обновления. Но над ними вы будете думать, когда получите фидбек от первых пользователей MVP. Пока же можно сосредоточиться на других вещах.
Внутренняя архитектура зависит от функционала мобильного приложения и выбранного способа обработки и хранения данных. Обычно мы составляем два списка – характеристик, которыми должно обладать приложение, и ключевых визуальных элементов. Они становятся фундаментом для всех будущих архитектурных работ.
Инструменты: доска и маркеры. Много маркеров.
Затем мы рисуем на доске или бумаге экраны и располагаем на них необходимые элементы и данные. Несмотря на то, что один и тот же элемент может присутствовать на нескольких экранах, у него должен быть «дом». Именно на этом этапе в проект можно внести любые изменения.
Они определяют способы взаимодействия пользователя с приложением. Учитывайте все варианты его поведения, чтобы понять, сколько касаний ему потребуется для завершения того или иного действия, причём количество этих касаний должно быть пропорционально сложности действия. Если обнаруживается, что интерфейс не понятен пользователю интуитивно, приходится возвращаться к предыдущему шагу и менять вайрфреймы. При этом после любого изменения все пользовательские сценарии проверяются заново на случай, если мы, упростив одно действие, усложнили другое.
Инструменты: маркеры, плюс Invision, Adobe XD и Figma.
Самый простой способ проверить, насколько хорош ваш UX-дизайн – протестировать его на будущих пользователях. Отправьте им ссылку, после перехода по которой они смогут «потыкать» по отрисованным вайрфреймам. О функциональности речь не идёт, только о проверке навигации. Прислушивайтесь к комментариям, возвращайтесь на один-два-три шага назад, исправляйте проблему и тестируйте. Снова и снова.
Инструменты те же, что и для пользовательских сценарий: Invision, Adobe XD и Figma.
Стайлгайды – это стройматериалы для отделки «интерьера» мобильного приложения и повышения его юзабилити. Без продуманного стайлгайда элементы дизайна будут менять цвета и плавать по экрану, сбивая пользователя с толку.
Руководство по стилю мобильного приложения должно быть максимально подробным и опираться на характеристики аудитории. Ей нужно работать в приложении по ночам? Делаем тёмную тему. Это внутреннее приложение для сотрудников крупной компании? Убираем всё лишнее. Как это сделать? Опытный UI-дизайнер предложит сотню вариантов цветовой палитры, шрифтов и виджетов (кнопок, форм, значков и т.д.).
Рендеринг – это процесс отрисовки вайрфреймов в цифре в соответствии со стайлгайдом. Дизайнер должен придерживаться рекомендаций, но не следовать им слепо. Только так визуальная составляющая мобильного приложения будет выглядеть целостно.
Настало время подключать разработчиков, которые качественно реализуют продуманный до мелочей и многократно протестированный дизайн. Что может пойти не так? Например, вы заказали дизайн у одной компании, а разработку – у другой. Или у них внутренний раскол. Поэтому рекомендуем работать с профессиональной командой, которая занимается мобильной разработкой от идеи до результата.
В некоторой степени успех совместной работы дизайнеров и разработчиков зависит от выбора инструментов. Например, приложение Zeplin показывает последним все свойства загруженного в него дизайна, хотя не обладает всеми возможностями Sketch или Photoshop. В любом случае, убедитесь в том, что команда пользуется точными значениями измерений и не ленится копировать HEX-коды цветов.
В мобильной разработке существует великое множество технологий. Одни почти не требуют затрат, но не отличаются высокой производительностью, другие потребуют больших вложений во имя блестящего результата. Худшее, что вы можете сделать на данном этапе – использовать устаревшие или ненадёжные инструменты, которые приведут к тому, что вам придётся переписывать код, доплачивая остальным членам команды за переработку. Чтобы избежать этого, рекомендуем принять ряд важных решений до начала работы над проектом. Каких именно, расскажем ниже.
Существует три основных подхода frontend-разработке:
- Нативный – при таком подходе приложение пишется под конкретную мобильную платформу. То есть код приложения под Android нельзя будет использовать на iOS без адаптации. Интерфейс нативного приложения выглядит максимально органично, а само оно работает быстро и отлаженно. За такую надёжность приходится платить, поэтому нативная разработка стоит дороже остальных вариантов.
- Кроссплатформенный – код такого приложения универсален, вследствие чего ОС запускает его как нативное. Многие считают этот способ оптимальным по соотношению «цена-качество», но он всё равно требует от разработчика временных затрат на оптимизацию. Если остановитесь на нём, среди фреймворков выбирайте между React Native, Xamarin и Native Script.
- Гибридный – код пишется на HTML, CSS или Javascript в таких средах разработки, как Cordova, Phone Gap и Ionic. Получается дёшево, сердито и не без проблем.
Сервер влияет на производительность мобильного приложения и масштабируемость продукта, то есть способность системы увеличивать ту же производительность за счёт увеличения доступных ресурсов. Технологии здесь те же, что и в разработке веб-приложений. Отправная точка – определиться с:
Как вы могли понять из начала нашего гайда, разработка мобильного приложения состоит из множества этапов. Разобраться в следующих будет в разы проще, если вы слышали про Scrum - метод управления проектами, который подразумевает разбивку рабочего процесса на небольшие отрезки – спринты. В каждом из них есть стадии планирования, разработки, тестирования и подведения итогов. Скрам – один из подходов методологии Agile, о которой написано множество книг, поэтому глубоко вдаваться в терминологию мы не будем. Тем более, что какими бы методами не пользовалась та или иная компания, этапы работы над мобильным приложением будут примерно одинаковыми.
Чтобы спланировать спринт, составьте список задач с конкретными критериями оценки результата. Это поможет разработчикам оценить временные затраты на выполнение каждой из них и равномерно распределить обязанности внутри команды.
На этапе разработки команда воплощает в жизнь идеи дизайнеров и свои собственные. Результат проверяет QA-команда (отдел контроля качества) или менеджер проекта. Последний также распределяет задачи между разработчиками, добиваясь равномерной загрузки команды на протяжении всего спринта.
Разработчики должны чётко представлять концепцию приложения и его отличительные черты. Ничто так не мотивирует, как амбициозные цели, но в погоне за ними нельзя забывать о реальности. Возможно, вам придётся смириться с тем, что часть функций так и останется нереализованной.
Тестировать приложение не должны его же разработчики.
Тип тестирования выбирают исходя из проверяемой характеристики приложения:
Функционал – должен соответствовать заявленному. Хорошо, если у подрядчика есть QA-команда, а у неё – план тестирования со списком всех функций приложения и его желаемым поведением. Но если таковой нет – необходимо позаботиться об этом и нанять специально обученных специалистов. Юзабилити – интерфейс мобильного приложения должен быть интуитивно понятным и дружелюбным. О проблемах с этими качествами вам лучше всего расскажут те, кто видят продукт впервые.
Но и это ещё не всё:
Регрессионное тестирование – используется для проверки уже протестированного кода на ошибки, исправленные ранее, или возникшие в результате этих исправлений. Здесь на помощь вновь приходит QA-команда с чек-листами изменений, внесённых в код на каждом из спринтов.
В конце каждого спринта обсуждайте его результаты с заинтересованными сторонами. Сделайте выводы из трудностей, с которыми вы столкнулись, и постарайтесь больше их не допускать. Отмечайте успешные решения и используйте их в дальнейшем. Двух одинаковых проектов быть не может, поэтому разработчики постоянно прокачивают свои навыки, в том числе – навыки планирования работы над проектом. Который, кстати, переходит в следующую стадию.
К этому моменту приложение (или хотя бы MVP) должно быть полностью готово к выходу на рынок. Но если вы хотите потратить маркетинговый бюджет с умом, то размещать приложение в публичный доступ Google Play и Apple App Store пока рано. Нужно ещё раз протестировать его — на этот раз на небольших группах целевой аудитории. Сделать это можно двумя способами.
Первое правило фокус-группы — участники должны увидеть приложение впервые. Вам необходимо выяснить, кто они, откуда узнали о вашем продукте и пользуются ли чем-то похожим. Когда перейдёте непосредственно к тестированию, не давайте подсказок, а наблюдайте за тем, какие сложности возникают у людей в процессе использования приложения. Затем попросите каждого участника высказаться и обсудите все спорные моменты.
Вместе с фокус-группой (или вместо неё) можно устроить пробный запуск приложения для ограниченной аудитории опытных пользователей и охотников за новинками. Обязательно скажите им, что цените их интерес, попросите фидбек и пообещайте принять во внимание конструктивную критику. Кстати, бета-тестирование также позволяет проверить, как ваше приложение работает с разными устройствами и операционными системами.
Перед тем, как представить своё мобильное приложение миру, позаботьтесь о двух вещах: надёжном API-сервере и соблюдении правил Google Play Store и Apple App Store.
Большинству мобильных приложений нужен backend-сервер, который обменивается данными с ними. Если сервер перегружен или не отвечает, приложение не будет работать. Хорошая новость: благодаря облачным технологиям конфигурацию сервера можно менять в зависимости от размера пользовательской базы.
Публикация приложения в Google Play Store и Apple App Store – трудоёмкий процесс. Вам придётся убедиться в том, что приложение отвечает требованиям магазина, заполнить несколько форм для каждого из них, подготовить скриншоты и маркетинговые материалы, составить текст описания… а Apple ещё и тщательно в течение нескольких дней будет проверять само приложение и даже может не только потребовать изменений, но и отказать в публикации из-за “бессмысленности” приложения. Нет, мы не исключаем вероятность того, что магазин примет ваше приложение без лишних вопросов, и через несколько дней оно будет доступно для скачивания. Просто предупреждаем о возможных трудностях, которые возникнут с вероятностью в 99%.
Разработка мобильного приложения не заканчивается с его публикацией в сторах. Даже за умеренно популярными приложениями стоит целая история обновлений. Исправленные ошибки, улучшение производительности, новые возможности – поводов масса. Выбрать нужный именно вам поможет мониторинг следующих аспектов.
Современные системы аналитики мобильных приложений собирают информацию об аудитории вашего приложения (распределение пользователей по полу, возрасту, местонахождению, языку и т.д.) и особенностях взаимодействия с ним (времени входа в приложение, времени, проведённом в приложении, количестве просмотренных экранов и пр.). Некоторые даже составляют тепловые карты, которые показывают, на какие кнопки пользователи нажимают чаще остальных. Используйте эти данные как ориентиры на будущее: вкладывайтесь в доработку тех областей, в которых концентрация действий аудитории наиболее высока.
Этот показатель нельзя измерить двумя предыдущими способами, но следить за ним необходимо. Как часто происходило то или иное действие и как долго оно длилось – вот вопросы, которые помогут оптимизировать работу приложения. Если простейшее действие занимает больше времени, чем ожидалось, это тревожный сигнал.
Оценки и отзывы в магазинах крайне важны, особенно для новых приложений. Всегда отвечайте комментаторам: благодарите за хорошие слова и постарайтесь помочь тем, кто столкнулся с трудностями при использовании вашего приложения. Комментаторы обычно не ожидают, что им ответят реальные разработчики. Чуть больше клиентоориентированности – и две звезды превращаются в пять, а ваша репутация взлетает до небес.
Цель мониторинга – понять, что делать дальше. Используйте статистику и отзывы, чтобы выявить слабые места, а потом возвращайтесь на n шагов назад и укрепляйте их. Повышайте конверсию пользователей в покупателей, расширяйте клиентскую базу, зарабатывайте, в конце концов. Ведь мобильная разработка – это очень динамичная среда, и, чтобы быть на плаву, надо постоянно работать над продуктом и над собой.
Процесс разработки мобильного приложения кажется сложным только на первый взгляд. Да, вам придётся принимать множество важных решений и постоянно возвращаться к предыдущим этапам. Не поддавайтесь соблазну пропустить один или несколько – в конце вас ждёт заслуженная награда в виде денег и благодарных пользователей. Говорим об этом как разработчики с почти 7-летним опытом :)
Статья-источник на странице блога компании BHW Group.
Мы тут собрали умную камеру для наблюдения за котиками. Хотите научим?Статья длинная, но оно того стоило
Спасибо! Изначально хотели разбить на две смысловые части, а именно: подготовка+дизайн и разработка+релиз. Но они оказались оказались весьма не пропорциональными по отношению друг к другу, поэтому решили не мелочится.
Спасибо!
Всегда было интересно посмотреть не весь процесс разработки приложения!
Спасибо за бесценную информацию! Планирую создать приложение в b2b2c секторе, маркетплейс в сфере услуг на региональном рынке с перспективой масштабирования. Не знаю пока где найти разработчиков, связываться с фрилансерами опасно, собирать свою команду в моем регионе проблематично, не знаю как быть. Средства на реализацию думаю привлечь от потенциальных партнёров, показав презентацию, но если они захотят протестить приложение как быть?
Здравствуйте! Считаю, что вам необходимо описать концепцию вашего сервиса. При создании концепции я бы рекомендовал вам уделить основную часть времени маркетингу (совместно с опытным маркетологом) будущего продукта и его монетизации. Прошу обратить вас внимание, что на самом деле затраты на маркетинг, примерно такие же, как и на разработку самого продукта. Далее, вы выбирайте студию разработки мобильных приложений.
На что стоит обратить внимание на этом этапе?
A. Специализация студии (работает ли она со стартап-проектами напрямую?).
B. Штат сотрудников inhouse.
C. Работает ли над MVP версией продукта напрямую?
Затем, собранные данные о стоимости разработки и маркетинговых мероприятиях, тезисно упаковать в некую презентацию, а лучше ещё создать кликабельный UX-прототип совместно с уже выбранной студией разработки (это будет намного дешевле нежеле делать полноценное приложение, даже MVP версию).
Готово, теперь вы можете продемонстрировать свою идею потенциальным партнёрам.
150 тысяч новых приложений регистрируют в App Store и Google Play каждый месяц. Привлечь внимание пользователей и добиться коммерческого успеха помогает продуманный дизайн мобильных приложений. Так, согласно исследованию McKinsey, в компаниях с хорошим дизайном рост выручки больше на треть.
О том, какие знания и навыки нужны дизайнеру приложений, как создаётся мобильное приложение, что нужно учитывать при разработке, рассказывает Алексей Комаров, UX/UI-дизайнер в IBM и преподаватель Нетологии на курсе «Дизайнер мобильных приложений».
Алексей Комаров
UX/UI-дизайнер в IBM
светлана третяк
Дизайнер приложения отвечает за эмоции от использования продукта. Для реализации этой задачи дизайнер должен создавать не только привлекательный визуальный облик, но и уметь выяснять потребности пользователей с помощью исследований, составлять навигационную модель (как связаны экраны приложения), проектировать интерфейс (расставлять по важности иерархию компонентов).
Давайте разбираться с самого начала.
Что нужно знать мобильному дизайнеру
Колористика
— искусство сочетания цветов.
Например, вместе не рекомендуется использовать зелёный и красный — насыщенные цвета, которые как бы перекрикивают друг друга. Получается вырвиглазный интерфейс, отсутствует контрастность и объекты трудно различить на экране. Для несочетаемых цветов дизайнеры даже придумали определение «зелубой» (зелёный + голубой).
Для подбора цвета часто используют специальные палитры или цветовые круги — например, Material palette, Adobe Color.
Также можно брать на заметку палитры готовых продуктов. Например, в Америке существует определённый культ кроссовок, где их покупают не ради замены старой пары, а, скорее, с эстетической точки зрения. Поэтому некоторые экземпляры можно назвать источником вдохновения для дизайнеров, которые используют цветовые схемы кроссовок для своих продуктов.
Сервис Coolors позволяет создавать цветовую палитру по фотоТипографика
— умение оформлять текст при помощи набора и вёрстки.
По сути дизайн — это оформление контента, 80% которого передаётся через текст. Любая информация располагается в виде иерархии — главная и второстепенная части, которые выделяются с помощью определённой стилизации текста.
Например, уровни заголовков — заголовок 1-го или 2-го уровня — различаются по размеру шрифта и служат навигацией, а также делают материал структурированным.
Выравнивание по левому краю придаёт тексту аккуратный вид — его легче воспринимать. Строки начинаются на одном уровне, и глаз быстро находит начало следующей строки — удобно и быстро привыкаешь.
Композиция
— умение грамотно управлять объектами в пространстве. Какие размеры объекта, отступы между объектами и краями экрана, расстояния и связи между объектами позволят создать гармоничную композицию для лучшего восприятия объектов.
Если говорить о том, как колористика, типографика и композиция влияют на поведение пользователя и эффективность интерфейса, то стоит упомянуть про четыре типа нагрузок.
Когнитивные нагрузки — усилия, которые прикладываем, чтобы распознать объект, логику его работы и принять решение о дальнейших действиях. Например, понимаем, что перед нами кнопка, а не округлый прямоугольник, и на эту кнопку можно нажать, чтобы попасть на нужный экран.
⇒ Чем больше мозгу требуется усилий для определения объекта, тем больше мы устаём.
Визуальные нагрузки — усилия для определения объекта на экране по визуальным признакам (круг, небо, кошка) и выделения его среди других.
⇒ Чем больше объектов в интерфейсе, тем больше мы устаём.
Моторные нагрузки — возникают при физическом контакте с интерфейсом: свайп, тап и другие.
⇒ Чем больше жестов управления интерфейсом и чем они сложнее, тем больше мы устаём.
Внешние нагрузки — возникают при взаимодействии пользователя с приложением (собака залаяла, машина проехала, пошёл дождь). Эти нагрузки сложно точно предугадать — можно лишь предположить, в каких условиях будет использоваться приложение чаще всего.
⇒ Чем больше отвлекающих моментов, тем больше мы пытаемся сосредоточиться и быстрее устаём.
Все типы нагрузок идут в связке, влияя друг на друга.
К примеру, если приложение предназначено для пожарных, которые часто находятся в стрессовых ситуациях, нужен максимально понятный интерфейс — у них нет времени разбираться в чём-то сложном. А если пользователь — офисный сотрудник, который заходит в приложение, чтобы убить время по дороге на работу, то можно добавить больше контента или функций, чтобы пользователь увлёкся и провёл в приложении больше времени.
Инструменты
Из графических редакторов сейчас популярны Figma, Sketch или Adobe XD.
Figma
Кросс-платформенный онлайн-редактор, который работает на Windows, macOS, Linux. В нём можно работать всей командой, в том числе с заказчиками. Бесплатный для одного пользователя и платный для работы с командой, если нужно видеть все действия команды, а не только за последние 30 дней.
Sketch
Платный графический редактор для macOS. Плюс Sketch в том, что на рынке он дольше Figma, поэтому в некоторых случаях возможностей и интеграций для него находится больше. Но если вы фрилансер, работать с заказчиками будет непросто, поскольку это не кросс-платформенный инструмент. В Sketch можно работать в офлайне.
Adobe XD
Приложение Adobe для проектирования интерфейсов. Плюсы и минусы аналогичны Sketch, кроме того, что в Adobe XD есть возможность создавать голосовые прототипы при помощи Amazon Alexa. XD заметно менее популярен по сравнению с Figma и Sketch.
Графические редакторы достаточно похожи, поэтому, если освоить один инструмент, то изучение другого не займёт много времени.
Из других инструментов дизайнера можно отметить:
В этом сервисе удобно делать брейнстормы, обсуждения, прорабатывать гипотезы, проектировать навигацию с помощью mindmap и создавать Customer Journey Map.
Сервисы для создания прототипов
Помимо встроенного прототипирования в Figma, Sketch или Adobe XD дополнительно используют такие решения, как InVision, Marvel, ProtoPie, Flinto, Principle for Mac.
Цели и задачи разработки
Дизайнер должен понимать, какие задачи у бизнеса и для кого предназначено приложение.
Приложение — это инструмент бизнеса со своими целями и задачами.
Для примера рассмотрим мобильное приложение банка.
снизить расходы на обслуживание клиентов в отделениях и повысить средний доход на одного клиента.
контролировать свои расходы.
создать дистанционный канал поддержки клиентов и увеличить продажи банковских продуктов.
При разработке приложения всегда учитывают требования бизнеса, задачи пользователей и возможности технологий.
Можно сделать великолепный дизайн, но он не будет решать задачи компании или разработчики не смогут его реализовать. Например, бывает, что бизнес выдвигает гипотезы, не проверяет их на этапе исследования и сразу отправляет в разработку. Получается функциональность, которая никому не нужна, при этом время и деньги потрачены впустую.
Бывает, что ресурсы безрезультатно тратятся не только на бесполезные фичи, но и на приложение.
К слову, если интересуетесь культурой стартапов, в целом (есть утрированные моменты) она хорошо показана в сериале «Кремниевая долина». Его рекомендует к просмотру и Билл Гейтс: «Продюсеры и сценаристы проводят много исследований перед каждым новым сезоном шоу. В прошлом году я был одним из нескольких людей, с которыми они встретились, чтобы поговорить об истории отрасли и рассказать о некоторых своих идеях для пятого сезона».
Soft skills
Коммуникационные навыки
Например, больше половины рабочего времени я общаюсь, согласовываю, обсуждаю. При этом стоит помнить, что непрерывное общение может привести к профессиональному выгоранию, поэтому периодически нужно прислушиваться к себе.
Правильная реакция на критику
Дизайнеров постоянно критикуют, и многие на это обижаются.
Если критикуют, то критикуют работу, а не дизайнера. Важно отделять и не принимать близко к сердцу.
Главное — получать конструктивную критику. Если сказали, что плохо, но не сказали почему, то это неаргументированное мнение, на которое не нужно реагировать.
Относитесь ко всему с юмором — это помогает в том числе трансформировать негатив в хорошее настроение ?
К примеру, когда я работал в крупной финансовой компании, менеджер попросила меня сделать кнопки жёлтыми (этот цвет не корпоративный). На мой вопрос, почему именно таким цветом, менеджер пояснила, что на курсах, которые она посещала, сказали, что «жёлтые кнопки привлекают внимание, поэтому, например, в IKEA выходы жёлтые». То, что в IKEA жёлтый — один из корпоративных цветов, которые логично использовали в оформлении магазина, на курсах, видимо, забыли сказать ¯\_(ツ)_/¯
Mindmap — диаграмма связей, интеллект-карта, карта мыслей или ассоциативная карта.
Это способ изображения процесса общего системного мышления с помощью схем.
Что нужно учитывать при разработке интерфейса
Взаимодействие с пользователями
Создание мобильных приложений не сильно отличается от создания сайтов в плане процессов — и те, и другие относятся к цифровым продуктам.
Основное различие заключается во взаимодействии пользователя с продуктом. За компьютером мы сидим или стоим, а вот с телефоном мы можем оказаться в любой ситуации: на прогулке, занимаясь спортом, в магазине, автомобиле и так далее. Также различаются размеры устройств и период контакта.
Смартфоны меньше компьютеров и ноутбуков, а сеансы использования приложений короткие, но частые — всё это нужно учитывать. На экране приложения должно быть минимум информации — только полезная. Пользователь должен быстро получать доступ к контенту. Возьмём, к примеру, Яндекс.Почту. Если мы зайдём в браузерную версию с компьютера, то увидим много дополнительной информации. На телефоне видим только письма, остальное скрыто и показывается по требованию (нажатию) — удобно.
Во многом благодаря желанию быстро и удобно получать информацию и появились мобильные приложения.
Ведь чтобы зайти на сайт, нужно ввести его адрес в строку браузера, а приложение можно открыть и сразу им пользоваться.
Нюансы мобильных платформ
Особенности создания интерфейсов для приложений описаны в гайдлайнах мобильных платформ — Human Interface Guidelines для iOS (Apple) и Material Design для Android (Google).
В создании приложений на платформах Android и iOS есть различия. Например, в паттернах поведения: в iOS меню показывается целиком, а в Android «гамбургерное» меню (три полоски); в разном управлении: в Android три кнопки («назад», «домой» и «последние приложения»), в iOS только «домой».
Грань с каждым обновлением постепенно стирается, но пока ограничения существуют. К примеру, модельный ряд iOS достаточно скромен, а в Android большое количество устройств да ещё и от разных производителей. Из-за этого при разработке на Android тяжелее отлаживать интерфейс — на это уходит много времени.
В основном Android доступнее, чем iOS. И из-за дешёвых компонентов встаёт вопрос качества — на плохой матрице экрана страдает цветопередача, а с плохим сенсором тяжелее попадать на кнопки (низкая чувствительность).
Интерфейс приложения лучше сразу адаптировать для двух платформ, а не делать что-то среднее — в будущем такая попытка сэкономить может дорого обойтись.
Стоимость «экономии» оценить в вакууме сложно — зависит от компании, бизнес-модели, рынка. Немаловажно и то, что для iOS характерна одна модель поведения пользователей, для Android — другая.
Если говорить о средних значениях, то давайте прикинем. Средняя зарплата разработчика — 150 тысяч рублей. В крупной компании приложение могут делать год, но мы будем ориентироваться на агентства, которые делают приложение примерно 3 месяца. Для Android нужны 2 программиста, для iOS — 1 (разработка примерно одинаковая по трудозатратам, но больше нужно отлаживать в Android).
Если просчитались с разработкой приложения на iOS, то это 150 000 рублей х 1 разработчик х 3 месяца = 450 000 рублей, на Android — 900 000 рублей. И это только расходы на зарплатный фонд — без учёта упущенной выгоды, репутационных потерь и снижения лояльности пользователей.
Адаптация контента
Не нужно пытаться уместить контент сайта в десктопной версии на компьютере или ноутбуке в маленький экран смартфона. При адаптации интерфейса под телефон контент приоритезируют и оставляют только самое важное.
Длинные процессы
Если на сайте можно использовать длинные формы (опросники) в несколько шагов, то на телефоне это делать не рекомендуется. Пользователю будет неудобно их заполнять, и он может бросить это занятие в любой момент.
Профессия
Дизайнер
мобильных приложений
Узнать больше
- Сможете самостоятельно разрабатывать дизайн мобильных приложений и руководить созданием интерфейсов мобильных продуктов
- Работайте над своим проектом или выберите учебный
- Каждый выпускник получает помощь и поддержку Центра развития карьеры Нетологии
Итак, мы разобрали базу для создания визуальной части интерфейса — дизайна. А теперь рассмотрим непосредственно процесс разработки приложений.
Этапы создания мобильного приложения
Исследование
Погружаемся в цели и задачи бизнеса.
Изучаем целевую аудиторию.
Исследования делятся на количественные и качественные.
Количественные исследования отвечают на вопросы «сколько?», «как часто?». Обычно их проводят при помощи опросов, анкетирования, телефонных интервью.
Качественные отвечают на вопросы «кто?», «почему?». Получают информацию в индивидуальных глубинных интервью, групповых дискуссиях (фокус-группах) или прибегая к экспертным оценкам.
Если приложение делается с нуля, то сначала с помощью комбинации методов проводят качественные исследования, потом количественные.
Если приложение уже разработано и его нужно доработать, тогда сначала собирают статистику количественными методами, а потом — качественными.
Дальше проводим конкурентный анализ, изучаем другие каналы коммуникации бизнеса: сайт, презентации, реклама, при наличии — офлайн-точки.
Это нужно для правильного позиционирования бизнеса в приложении. У каждого бренда или компании есть свой язык общения с клиентом. Через каналы коммуникации бренд транслирует посылы аудитории. Например, слоган Nike «Just do it» отражается в простом, спортивно-повседневном стиле, в котором оформлены магазины и сайты компании.
Аналитики предварительно пропускают через себя требования бизнеса и упаковывают это в понятные модели: mindmap, схемы бизнес-процессов, типичные пользовательские пути и другое, — создают артефакты аналитики.
На основе вышеуказанных артефактов дизайнер принимает решения.
Также артефакты помогают управлять коммуникацией с бизнесом: чтобы каждую неделю не прилетали изменения, все бизнес-требования обговариваются и фиксируются. Это важно, чтобы не делать работу в стол и избежать бесконечных доработок.
Если каждую неделю приходят новые требования, то бизнес-заказчик не знает или не понимает, что на самом деле он хочет. А если нет чётких критериев приёмки, будет сложно показывать результат работы. Можно попасть в петлю непрекращающихся правок и постоянных переделок.
Вышеперечисленное — исследования, общение с бизнесом, аналитика — может сделать дизайнер, менеджер продукта или аналитик, если есть такой специалист в компании. Это зависит от компании и бюджета на проект.
Если есть выделенные аналитики, то зона ответственности между ними для целей разработки приложения может распределяться следующим образом:
- бизнес-аналитик погружается в бизнес-процессы и собирает требования от компании,
- UX-аналитик изучает проблемы пользователей, проводит качественные и количественные исследования,
- продуктовый аналитик обычно работает с метриками и показателями продукта.
Проектирование
По сути это создание скелета приложения: дизайнер понимает, где какая будет информация, раскидывает контент по экранам и определяет, сколько экранов будет в каждом пользовательском сценарии.
Чтобы проверить эту логику на практике, дизайнер собирает черновик приложения. Там он тестирует связку экранов, проверяет, что компоненты интерфейса расположены в правильном месте и понятно, как с ними взаимодействовать: что-то нужно нажать, потянуть, выделить или удалить.
На этом этапе важно не переходить в визуальный дизайн и не углубляться в вопросы из серии «какого цвета будет кнопка» или «какие сделать скругления у картинки».
Для проектирования чаще всего используют чёрно-белые прототипы — вайрфреймы, которые создаются в графическом редакторе.
Перед вайрфреймами некоторые создают бумажные прототипы — от руки делают эскиз будущего приложения на бумаге.
Бумажные прототипы подходят для быстрого обсуждения идей, чтобы проверить себя и синхронизироваться с командой перед тем, как приступить к работе в графическом редакторе.
Бумага и карандаш — такие же инструменты дизайнера, как и графический редактор.
Когда дизайнер продумывает процессы в приложении, сложно удержать всё в памяти в один момент времени — нужно фиксировать ход мысли. И в этом сложно полагаться на графические редакторы, которые заточены под определённые задачи — например, обработать фотографии или создать иллюстрации. К тому же, когда мы сразу работаем в графическом редакторе, мы вынуждены подстраиваться под его ограничения, то есть не мы управляем инструментом, а инструмент — нами.
Между идеей в голове и её реализацией получается много посредников: интерфейс графического редактора, экран монитора, клавиатура, мышка. А при работе с бумагой идея быстрее становится осязаемой.
Читайте также: