Дизайн мобильных приложений: что это, где применяется и как освоить

Самая частая ошибка при переходе с веба — взять мобильную версию сайта и назвать её приложением. В приложении человек держит телефон одной рукой в метро, отвлекается на уведомление и возвращается к экрану через полминуты. Поэтому мобильный дизайнер думает прежде всего о том, куда дотянется палец, что увидит человек после прерывания и как экран поведёт себя вне идеальных условий. Как такие экраны собирают в коде, рассказывает наша статья о профессии разработчика мобильных приложений, а здесь речь о проектировании.

Палец вместо курсора

Первым приходится перестроить представление о точности: палец закрывает часть экрана. В руководстве Apple по доступности для iOS и iPadOS указаны размер элемента управления по умолчанию 44 × 44 pt и минимальный 28 × 28 pt, а отступам отведена отдельная рекомендация: вокруг элементов с рамкой — около 12 pt, вокруг элементов без рамки — около 24 pt от видимого края. По словам Apple, расстояние между элементами так же важно, как их размер. У Android свои единицы и свой минимум, поэтому общий макет проверяют по двум руководствам.

Второе отличие — нет наведения. Всплывающую подсказку на телефоне никто не увидит, поэтому всё, что нужно знать до нажатия, пишут на экране или в подписи к значку.

Системные паттерны и жесты

Привычки мобильному пользователю задаёт операционная система. На iPhone он ждёт панель вкладок внизу, свайп от левого края для возврата и системные листы, выезжающие снизу. На Android он пользуется системным жестом или кнопкой «Назад» и ждёт, что она сработает на любом экране. Собственная навигация «как на сайте» заставляет человека переучиваться, а разработчика — подгонять её под системное поведение.

Системные паттерны к тому же меняются. В июне 2025 года Apple представила материал Liquid Glass для iOS 26 и других своих систем: элементы управления стали полупрозрачным слоем поверх контента, а панель вкладок на iOS 26 сжимается при прокрутке и разворачивается обратно. Поэтому опираться стоит на актуальные руководства и компоненты платформы, а не на старые скриншоты.

Жесты — свайп по карточке, долгое нажатие, потягивание вниз — экономят место, но их не видно. У любого действия, спрятанного в жест, должен быть видимый дублёр: кнопка, пункт меню или подсказка при первом запуске.

Как люди на самом деле держат телефон

В мобильном дизайне популярна «зона большого пальца»: схема, где низ экрана окрашен в зелёный, а верхние углы — в красный как недоступные. Наблюдения показывают более сложную картину. Стивен Хубер (Steven Hoober) два месяца, до 8 января 2013 года, наблюдал за людьми на улицах, в аэропортах, кафе и транспорте и описал 1333 случая, из них 780 — с касаниями экрана. Одной рукой телефон держали 49 %, в 36 % случаев он лежал в одной руке, а второй его придерживали или нажимали, двумя руками печатали 15 %. Главный вывод автора: хват меняется очень часто, иногда каждые несколько секунд.

В 2017 году Хубер обобщил полевые наблюдения и лабораторные тесты и назвал схемы досягаемости большого пальца неверными. В поле он видел, что кнопкой «Назад» пользуются постоянно и она обычно самая нажимаемая на экране, даже когда стоит в верхнем углу. Люди предпочитают смотреть в центр и нажимать в центре, а читаемый фрагмент по возможности прокручивают к середине экрана. Точность тоже зависит от места: в центре достаточно цели около 7 мм, в углах нужно около 12 мм, причём и эти размеры, по словам автора, вмещают лишь 95 % наблюдавшихся касаний.

Практический вывод: размер цели зависит от её положения, и элементы у краёв и в углах делают крупнее, чем в центре. Главное действие не обязательно переносить вниз любой ценой, но нельзя делать его мелким и прижимать к краю. Проверять макет стоит в разных хватах, не только за столом.

Тёмная тема, крупный шрифт и состояния

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

Для продакта и разработчика это самая полезная часть навыка: если в макете нет этих состояний, решение о них примет разработчик в последний день перед релизом.

Учебный пример: оплата парковки

Условная задача: веб-дизайнер, который делал сайт оплаты городской парковки, проектирует приложение. Первая мысль — перенести структуру сайта: меню-гамбургер сверху, форма с номером машины, зоной и временем, кнопка «Оплатить» под ней.

Но человек открывает приложение у машины, часто с сумкой в одной руке. Поэтому навигацию переносят в нижнюю панель из трёх вкладок: «Парковка», «Мои машины», «История». Номер машины выбирают из сохранённых. Зону определяют по геолокации, но оставляют видимое поле ручного ввода на случай запрета доступа к местоположению. Время выбирают крупными кнопками «+15 мин» и «+1 час», а не мелким барабаном.

Затем дизайнер рисует состояния: геолокация выключена, сеть пропала во время оплаты, до конца сессии десять минут, экран открыт ночью в тёмной теме. Для iOS и Android он проверяет, что возврат с экрана оплаты работает системным жестом и не сбрасывает введённое. В конце прототип дают трём-четырём людям на улице и смотрят, где они промахиваются.

В каком порядке осваивать навык

Порядок строится от ограничений к картинке. Сначала нужно почувствовать, чем телефон отличается от монитора, иначе руководства платформ покажутся произвольными правилами. Затем — выучить системные паттерны, чтобы не изобретать уже существующее, и только потом рисовать свой интерфейс и проверять его на людях.

1. Наблюдение: неделю замечайте, как вы и окружающие держат телефон и где промахиваются.
2. Руководства: прочитайте разделы Apple Human Interface Guidelines и Material Design о навигации, элементах управления и доступности.
3. Разбор: возьмите два приложения одного типа под iOS и Android и сравните, как в них устроены вкладки, возврат и системные листы.
4. Проектирование: соберите в Figma сценарий из трёх-пяти экранов со всеми состояниями и тёмной темой.
5. Проверка: откройте прототип на телефоне и дайте его людям в реальной обстановке.

Если основы дизайна и Figma уже есть, программу с глубоким погружением в мобильную специфику предлагает онлайн-курс Яндекс Практикума «Дизайн мобильных и кросс-платформенных приложений». По данным обзора, это три месяца самостоятельной работы примерно по 10 часов в неделю: исследования, руководства iOS и Android, UI-кит, прототип и тестирование. Сквозной проект проверяют сначала разработчики, затем дизайнеры.

Упражнения и типичные ошибки

Полезное упражнение для перехода с веба — «перевести» личный кабинет сайта в приложение для обеих платформ: решить, какие разделы станут вкладками, что уйдёт в системный лист, и нарисовать светлый и тёмный варианты. Второе — проверить макет с максимальным системным шрифтом.

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

Продакт-менеджеру и дизайнеру, которому важны исследования и передача макетов в разработку, может подойти онлайн-курс Нетологии «Дизайнер мобильных приложений». В обзоре указаны 20 часов теории и 50 часов практики, работа в Figma, Principle и ProtoPie, руководства iOS и Android и два мобильных кейса, дипломный — с подготовкой макетов к разработке. Срок в источниках — три или четыре месяца, его стоит уточнить.

Как навык влияет на доход

Отдельной надбавки «за мобильный дизайн» статистика не показывает: навык входит в требования к UI/UX- и продуктовым дизайнерам. Для ориентира можно взять калькулятор зарплат «Хабр Карьеры» по специализации «UI/UX-дизайнер»: при просмотре в конце сентября 2026 года выборка по всей России составляла 593 анкеты, медиана — 130 416 ₽ в месяц, у junior — 85 416 ₽, у middle — 123 333 ₽, у senior — 219 166 ₽. Это данные, которые пользователи сервиса указывают сами, а не предложения из вакансий, и у junior выборка небольшая — 87 анкет.

Влияние навыка видно по задачам. Веб-дизайнер без мобильной специфики обычно ограничен сайтами, а с ней может претендовать на команды, где основной продукт — приложение: банки, доставка, сервисы записи. Разработчику знание руководств помогает обсуждать макет по существу, продакту — ставить задачи с учётом состояний и различий платформ.

Чтобы оценить эффект, сравните вакансии своей роли в своём городе с упоминанием мобильных приложений и без него. В объявлениях указаны предложения работодателей, а не фактические выплаты.

Как выбрать обучение

Дизайнеру с опытом в вебе нужна программа, которая сразу переходит к руководствам платформ, навигации и состояниям. Продакту и разработчику часто хватает самостоятельного чтения руководств и разбора нескольких приложений. Проверьте, будет ли обратная связь по макетам и тестирование прототипа на людях.

Формат с живыми занятиями есть у онлайн-курса Bang Bang Education «Дизайн мобильных приложений»: по данным обзора, это 12 недель, одиннадцать блоков и вебинары в прямом эфире, результат — один кейс для портфолио от исследования до передачи в разработку. Несмотря на заголовок, курс рассчитан не на новичков: от участников ждут уверенной Figma с компонентами, вариантами и автолэйаутом. Недельная нагрузка и сроки проверки заданий в обзоре не указаны, их лучше уточнить у школы.

Длинная профессия с портфолио нужна тем, кто меняет работу. Чтобы лучше понимать дизайнеров в своей команде, такой объём избыточен.

Отдельного рейтинга по мобильному дизайну на Учи.Онлайн нет, ближайший — более широкий рейтинг онлайн-школ с обучением UX/UI-дизайну, где мобильные интерфейсы входят в программы многих школ. Условия и тарифы уточняйте перед оплатой.

Проверить готовность можно за вечер: найдите в привычном приложении три места, где вы перехватываете телефон или промахиваетесь. Если захочется нарисовать исправление для iOS и Android, навык стоит развивать дальше.