Дизайн мобильного приложения: макет, который проверяют в руке
Приложение отличается от сайта не оформлением, а тем, чем его проверяют. Здесь у человека нет мыши, нет адресной строки и нет вкладки, в которую можно отложить, — зато есть палец, до которого достаёт не весь экран, и система, которая в любой момент может сказать «нет»: нет сети, нет разрешения на уведомления, нет места на устройстве. Половина работы в этом формате — состояния, которых у сайта не бывает вовсе. Вторая половина — правила двух платформ, которые задаём не мы.
- Экраны проверяются на живом устройстве и одной рукой, а не в окне на ноутбуке
- Отказ в доступе, офлайн и пустой экран после установки — нарисованные состояния
- Системные элементы двух платформ разные, и макет учитывает обе
Две полосы сверху и снизу принадлежат не вам: там живут часы, уровень заряда и системный жест «назад». Макет, нарисованный без них, на устройстве теряет верх и низ — и первым уезжает то, что дизайнер считал главным.
Путь пользователя: от витрины магазина до второго запуска
У сайта человек появляется на странице и уходит с неё. У приложения путь длиннее и начинается раньше: сначала его надо уговорить установить, потом пережить первый запуск, потом дать повод вернуться. Экраны рисуются под этот путь, а не под список разделов меню.
-
Видит витрину в магазине приложений
Иконка, название, первые два снимка экрана. Решение принимается по ним, а не по описанию: описание читают единицы. Это тоже работа дизайнера, и её регулярно забывают заложить в смету.
Что рисуем: иконку, снимки экрана с подписями и порядок, в котором они листаются
до установки -
Устанавливает и запускает впервые
Самый дорогой экран приложения — первый после установки. Он почти всегда пустой: данных нет, истории нет, списки не заполнены. Если на нём написано «здесь пока ничего нет», человек закрывает приложение и не возвращается.
Что рисуем: экран запуска и пустое состояние с первым понятным действием
первые секунды -
Сталкивается с разрешениями
Уведомления, геопозиция, камера, контакты. Спрашивает их система, а отказ — обычный ответ, а не редкость. Приложение обязано работать и после отказа, и это отдельные экраны, которые рисуются, а не описываются словами.
Что рисуем: экран объяснения до системного запроса и вид приложения после отказа
на первом шаге -
Делает то, ради чего ставил
Заказ, запись, оплата, отметка, просмотр статуса. Здесь считается не красота, а число касаний и то, дотягивается ли палец до кнопки одной рукой в движении — в транспорте, на улице, с пакетом во второй руке.
Что рисуем: основной сценарий и его состояния: загрузка, ошибка, отсутствие сети, успех
десятки секунд -
Возвращается или не возвращается
Единственный шаг, который отличает приложение от сайта по существу. Если повода вернуться нет, приложение удаляют в первую неделю — и никакой дизайн этого не меняет. Повод придумывается до макетов и проверяется на разборе.
Что рисуем: экран возврата: что изменилось с прошлого раза и что делать сейчас
дни и недели
Пятый шаг мы обсуждаем первым. Если на вопрос «зачем человек откроет это во второй раз» нет ответа, дизайн приложения рисует привычку, которой не существует, — и проверять гипотезу дешевле другим способом: экраном внутри мессенджера или сайтом, который ставится на домашний экран. Об этом честно сказано в блоке «когда вам это не нужно».
Что диктует платформа и что мы с этим делаем
Блок стоит до перечня работ намеренно. Возможности вам опишет любой подрядчик, границы — почти никто: они мешают продавать. А обнаруживаются они всегда, вопрос только в том, до договора или на живых пользователях.
| Ограничение | Что это значит на практике | Что делаем мы |
|---|---|---|
| Системные элементы у платформ разные | Полосы сверху и снизу, переключатели, выпадающие списки, календарь и клавиатура выглядят и ведут себя не одинаково. Один макет на обе платформы всегда где-то выглядит чужим | Рисуем общую логику и отдельно — места, где платформы расходятся. Системные элементы не перерисовываем: своя красивая клавиатура стоит дорого и мешает человеку |
| Часть жестов забрала себе система | Смахивание от края, вытягивание шторки, возврат назад. Если приложение вешает на них своё действие, человек получает не то, что ожидал, и винит приложение | Проверяем сценарии на конфликт с системными жестами и оставляем им край экрана. Свои жесты добавляем только там, где есть видимая альтернатива кнопкой |
| Размер шрифта и тему выбирает пользователь | Человек может увеличить текст системной настройкой или включить тёмное оформление. Макет, нарисованный под один размер, в этот момент разъезжается | Рисуем ключевые экраны в увеличенном тексте и в тёмном оформлении. Это не удвоение работы, а проверка: сразу видно, где вёрстка обязана тянуться, а не фиксироваться |
| Разрешения выдаёт система, и в них отказывают | Уведомления, геопозиция, камера. Отказ — обычное поведение, а не сбой; повторно спросить разрешение приложение в большинстве случаев не может | Рисуем экран объяснения до системного запроса и рабочий вид приложения после отказа. Функция должна деградировать, а не исчезать |
| Изменение макета требует публикации | Сайт правится за час, приложение — через сборку и проверку магазина. Кроме того, часть людей остаётся на старой версии месяцами | Закладываем в макет то, что можно менять без публикации: тексты, баннеры, списки. И рисуем, как приложение выглядит у того, кто не обновился |
Правила платформ меняются, и мы сверяем их на старте проекта, а не цитируем страницу годовой давности. Поэтому на этой странице нет ни номеров версий, ни дат: такие цифры устаревают молча и превращаются в обещание, которого мы не давали. Что именно действует сейчас — проверяем перед первым макетом и говорим вам словами.
Семь вопросов к своей идее — до того, как рисовать экраны
Отмечайте только то, на что у вас уже есть ответ. Это не тест на пригодность: половина хороших приложений начиналась с трёх отметок из семи. Но знать, чего не хватает, лучше до макетов, чем после тридцати нарисованных экранов.
Вердикт появится после первой отметки. Считается он от числа вопросов без ответа: каждый из них всё равно всплывёт — либо на разборе, либо на тридцатом нарисованном экране.
Есть ответ на 0 из 7
На разборе мы проходим эти же семь вопросов вслух и с вашими цифрами. Ответы на них дешевле любых макетов: экран, нарисованный под сценарий, которого не будет, стоит столько же, сколько нужный.
Обсудить сценарии приложения
Ответов меньше половины?Это обычное начало, и разбирается оно за полчаса. Расскажите, что должно происходить в приложении, — вместе посчитаем экраны и скажем, нужно ли вообще приложение или гипотеза дешевле проверяется другим способом.
Написать в Telegram Разработка приложенийЧто входит в работу над приложением
Шесть частей. Две из них — иконка и витрина магазина — в сметах на дизайн приложений обычно отсутствуют, хотя именно по ним принимается решение об установке. Остальные четыре есть у всех, различается глубина: мы считаем состояния, а не экраны.
Не «список экранов приложения», а путь под каждый сценарий: что человек делает и что видит на каждом шаге. Так сразу становится видно лишнее — экраны, которые никто не откроет, и шаги, которые можно склеить.
Нет сети, отказ в доступе, пустой список после установки, фоновая загрузка, обновление жестом, устаревшие данные. Они не украшают макет, но именно из-за них приложение либо работает в жизни, либо нет.
Как устроен переход между разделами, что делает смахивание, куда ведёт кнопка «назад» на каждой платформе. Здесь решается, можно ли пользоваться приложением одной рукой, — и это проверяется на устройстве, а не на словах.
Иконка обязана узнаваться в мелком размере рядом с двумя десятками чужих и работать на светлом и тёмном фоне. Экран запуска не «заставка со слоганом», а то, что человек видит долю секунды при каждом открытии.
Снимки экрана с подписями в том порядке, в котором их листают. Первые два решают, будет установка или нет; последние объясняют, что внутри есть ещё. Делается это по правилам площадки и пересобирается при заметных изменениях приложения.
Исходники, экспорт иконок и изображений под нужные плотности экрана, спецификация состояний и описание анимаций текстом рядом с макетом. Плюс ответы на вопросы разработчика до сдачи — их всегда больше, чем на сайте.
От чего зависит смета: от 140 000 ₽, срок 5–7 недель
Своей цены у формата нет: приложение считается по второй смете направления, и сумма подставлена из канона студии. Разработка приложения — соседнее направление и другие деньги: от 150 000 ₽, срок 6–9 недель. Дизайн в неё входит, поэтому отдельная смета на макеты нужна только тем, у кого разработка своя.
-
Сколько непохожих экранов, а не разделов
Список из тридцати позиций и карточка позиции — два экрана, а не тридцать один. Считаем так же, как на сайте: экраны непохожи, когда на них принимаются разные решения. Поэтому смета начинается со сценариев, а не с перечня разделов меню.
-
Одна платформа или две
Вторая платформа — это не второй комплект макетов: общая логика и большинство экранов совпадают. Добавляется работа там, где расходятся системные элементы и жесты. Но если сценариев много, эта добавка перестаёт быть маленькой, и мы считаем её отдельно, а не «в подарок».
-
Сколько состояний и ошибок
Главный множитель в этом формате. У экрана с оплатой состояний больше, чем у экрана «о нас», в разы: загрузка, отказ банка, недостаточно средств, потеря связи посередине, успешная оплата без интернета на устройстве. Список согласуется до рисования и входит в смету списком, а не словами.
-
Нужны ли анимации переходов
В приложении анимация — не украшение, а способ объяснить, откуда взялся экран. Мы описываем поведение текстом рядом с макетом и прорисовываем ключевые переходы; сложные анимации считаются отдельно, потому что делает их не дизайнер, а разработчик, и стоят они его времени.
Наценки за срочность нет: либо успеваем в нормальном темпе, либо честно говорим, что не успеем. Доработки после сдачи — по часам: 3 000 ₽ вне договора и 2 000 ₽ в абонементе.
Почему мобильная версия сайта — это не макет приложения
Вопрос звучит почти на каждом разборе: «у нас есть адаптивный сайт, можно взять его экраны». Формально можно, и первые два экрана даже будут выглядеть прилично. Дальше начинаются различия, которые не видно на картинке.
Три отличия, из-за которых экраны приходится проектировать заново.
- навигация живёт по-другому На сайте человек возвращается кнопкой браузера и помнит адрес. В приложении браузера нет: назад — это системный жест или ваша кнопка, а «куда вернуться» решает структура, которую надо нарисовать. Меню-гамбургер, привычный на сайте, в приложении прячет главное от пальца
- появляются состояния, которых у сайта нет Сайт без интернета просто не открывается — и это нормально, все привыкли. Приложение открывается всегда, и оно обязано что-то показать: сохранённое, объяснение или очередь действий до связи. То же с разрешениями: у сайта их нет, у приложения отказ в доступе — обычное дело
- решает возврат, а не первый визит Сайт выигрывает, если человек дошёл до заявки в первый раз. Приложение выигрывает, если он открыл его через неделю. Это разные задачи для дизайна: в первом случае важен убедительный первый экран, во втором — скорость до действия и понятное «что изменилось с прошлого раза»
Практический вывод: если приложение нужно ради удобного входа с телефона, а не ради возврата, дешевле и быстрее сделать сайт, который ставится на домашний экран, — он не требует публикации в магазинах и обновляется как обычный сайт. А если аудитория живёт в мессенджере, ей ближе экран внутри Telegram. Мы говорим это на разборе, до сметы.
Три ошибки, которые видно на первом же устройстве
Все три появляются, когда макет рисуют и принимают на большом экране. В окне браузера они не видны вовсе, на телефоне в руке — видны за минуту. Поэтому приёмка макетов приложения делается на устройстве, а не на защите проекта.
-
Главное действие в верхней части экрана
Кнопка стоит там, где её удобно рисовать, — под заголовком. На устройстве до этой зоны палец одной рукой не достаёт, и человек либо перехватывает телефон, либо не нажимает вовсе. В транспорте и с пакетом в руке — не нажимает
Держим действия в нижней половине экрана, а верх отдаём заголовкам и информации. Проверяем каждый ключевой экран одной рукой, стоя, а не сидя за столом
-
Нарисован только удачный сценарий
Есть сеть, разрешения выданы, данные пришли, список заполнен. В реальности половина запусков — это плохая связь в лифте, отказ от уведомлений и пустая история у нового пользователя. Эти экраны придумывает разработчик в последний день
Согласуем список состояний до рисования и рисуем их наравне с основными. В смете они стоят отдельной строкой — не для того, чтобы её увеличить, а чтобы их нельзя было молча выкинуть
-
Вход и регистрация на первом экране
Человек только что установил приложение и ещё не понял, зачем оно ему, — а у него уже просят телефон и код из сообщения. Это самое дорогое место всей воронки: здесь теряют тех, кто уже потратил время на установку
Показываем ценность до входа: каталог, расчёт, пример, демо-режим. Вход просим там, где он нужен по делу — при заказе, оплате или сохранении. Если вход обязателен по закону отрасли, объясняем это на экране
Эта страница — один из девяти форматов дизайна
На родительской странице — общее для всех форматов: три сметы, состав работ, гарантии, исходники и тест «дизайн или разработка». Здесь только то, что относится к приложениям: платформы, жесты, состояния и витрина магазина.
Разработка приложения живёт в соседнем направлении: мобильные приложения, от 150 000 ₽. Дизайн входит туда — отдельная смета на макеты нужна тем, у кого разработка своя. Дизайн сайтов и интерфейсов
Когда дизайн приложения вам не нужен
Четыре случая, и первый — самый частый. Приложение покупают тогда, когда задача решается дешевле, а узнают об этом уже после публикации в магазине.
-
Если вы проверяете гипотезу
Приложение — самый дорогой способ узнать, нужно ли людям то, что вы придумали. К его стоимости добавляются публикация, проверка площадки и уговоры установить. Гипотезу дешевле проверить экраном внутри мессенджера или сайтом, который ставится на домашний экран: там нет ни магазинов, ни установки, ни ожидания обновлений.
-
Если нужен просто удобный сайт на телефоне
Бывает, что под словом «приложение» имеют в виду «чтобы с телефона было нормально». Это другая работа и другие деньги: мобильная адаптация сайта. Она не требует ни установки, ни публикации, а результат человек увидит в тот же день, а не после того, как согласится поставить приложение.
-
Если собирать приложение некому
Макеты в Figma не превращаются в приложение сами: нужна разработка под каждую платформу, сборка, подписи, публикация и сопровождение обновлений. Без своей команды отдельный дизайн окажется половиной пути. Вам в разработку приложений — от 150 000 ₽, срок 6–9 недель, дизайн там внутри.
-
Если человеку незачем возвращаться
Приложение живёт повторными открытиями. Если ваш продукт покупают раз в несколько лет — квартиру, окна, натяжные потолки, — приложение установят единицы, а удалят почти все. Мы скажем это на разборе прямо, даже когда бюджет уже согласован: такой проект делает несчастными обе стороны.
Во всех четырёх случаях мы называем, что делать вместоПубличный список ситуаций, в которых студия отговаривает, собран на отдельной странице — по всем направлениям сразу.
Когда вам это не нужноКому в соседний формат, а не сюда
Приложение — верхняя ступень лестницы: до него есть экран в мессенджере и сайт, который ставится на телефон. Они дешевле, запускаются быстрее и не требуют публикации в магазинах, поэтому мы всегда проверяем, не хватит ли их.
Нижние границы всех направлений собраны на странице цен. Лестница простая: сайт на домашнем экране дешевле экрана в мессенджере, тот дешевле приложения. Двигаться по ней вверх стоит тогда, когда упёрлись в потолок предыдущей ступени, а не заранее.
Дизайн мобильного приложения: что стоит знать до заказа
Нужен ли отдельный дизайн под каждую платформу
Полностью отдельный — нет. Логика приложения, сценарии, структура экранов и оформление общие: человек на любой платформе решает одну и ту же задачу. Различается то, что принадлежит системе: полосы сверху и снизу, переключатели и поля ввода, календарь, способ возврата назад, поведение при длинном нажатии.
Практически это значит, что работа считается как один комплект экранов плюс места расхождений. Мы рисуем общую часть, а отдельно — те экраны, где платформенная разница заметна пользователю. Перерисовывать системные элементы под «единый стиль» не стоит: своя красивая клавиатура или свой календарь обходятся дорого и мешают человеку, который привык к своим.
Выбор «одна платформа или две» лучше делать по данным, а не по привычке. Посмотрите в статистику своего сайта: с каких телефонов к вам заходят. Часто одна платформа даёт большую часть аудитории, и вторую разумно отложить до того, как первая подтвердит спрос, — это экономит и дизайн, и заметно более дорогую разработку.
Почему состояния в приложении дороже, чем на сайте
У сайта две крайности: страница открылась или не открылась. У приложения между ними целая жизнь. Оно запускается без интернета и обязано что-то показать. Оно спрашивает разрешения, и в них отказывают. Оно живёт на устройстве, где заканчивается память, садится батарея и приходят звонки посреди оформления заказа.
Каждая такая ситуация — отдельный экран, который либо нарисован, либо придуман разработчиком в последний день перед сдачей. Второе обходится дороже: непродуманное состояние выглядит как поломка, а поломка в приложении удаляется вместе с приложением. Поэтому список состояний мы согласуем до рисования и показываем его в смете отдельно — чтобы его нельзя было молча сократить.
Отдельная строка — первый запуск. Экран после установки пустой у всех без исключения: истории нет, заказов нет, избранного нет. Это единственный экран приложения, который видят сто процентов установивших, и именно на нём решается, останется приложение на телефоне или нет.
Что проверить в макетах до того, как они уйдут в разработку
Первое — открыть макет на телефоне, а не на ноутбуке, и пройти сценарий одной рукой стоя. Всё, до чего не достаёт палец, придётся переносить, и лучше сейчас. Второе — посмотреть ключевые экраны с увеличенным системным шрифтом: человек мог включить его в настройках, и макет с жёстко заданными высотами в этот момент разъезжается.
Третье — попросить показать экраны отказа: нет сети, отказ в доступе к уведомлениям, пустой список. Четвёртое — проверить иконку среди других на домашнем экране, а не отдельно на белом фоне. Пятое — посмотреть первые два снимка для витрины магазина и спросить себя, установили бы вы приложение, увидев только их.
Если собирать приложение некому, отдельный дизайн вам невыгоден: смотрите разработку мобильных приложений, дизайн входит туда. Если гипотеза ещё не проверена, дешевле начать с экрана внутри мессенджера. Три сметы направления с составом каждой описаны на странице дизайна
Вопросы про дизайн приложения
Шесть вопросов, которые задают именно про приложения. Общие — про договор, оплату и гарантии — собраны на отдельной странице, а про дизайн вообще написано на странице направления
Остался вопрос?
Написать в Telegram, отвечаем за 30 минутОтдельный комплект — нет, отдельные экраны — да. Общая часть рисуется один раз: сценарии, структура, оформление. Расходится то, что принадлежит системе: полосы, переключатели, календарь, способ вернуться назад. Эти места мы рисуем отдельно и показываем в смете строкой, чтобы было видно, за что добавка. Если сценариев много, добавка перестаёт быть маленькой — и тогда честно считать её, а не обещать вторую платформу бесплатно.
Столько, сколько получится по вашим сценариям, — и список согласуется до рисования. Считаем мы непохожие экраны, а не разделы меню: список и карточка внутри него — два экрана, а не тридцать один. Отдельной строкой идут состояния: офлайн, отказ в доступе, пустой список, ошибка оплаты. Вторая смета направления — от 140 000 ₽, срок 5–7 недель; окончательный состав называем после разбора сценариев.
Поведение описываем текстом рядом с макетом и прорисовываем ключевые переходы в Figma — это входит в работу и делается на этапе дизайна, а не придумывается на разработке. Сложная анимация — отдельная история: её делает разработчик, стоит она его времени, и считается она отдельно. Мы скажем заранее, какие переходы обойдутся дорого, чтобы решение принималось до того, как экран нарисован.
Да, но это другое направление и другая смета: разработка мобильных приложений, от 150 000 ₽, срок 6–9 недель. Дизайн в неё входит, поэтому отдельно макеты заказывают те, у кого разработка своя или уже нанята. Если вы не уверены, какой вариант ваш, на разборе мы посчитаем оба и назовём разницу — вместе с тем, что вы теряете и приобретаете в каждом.
Да, и считаем это частью работы, а не дополнением. По первым двум снимкам принимается решение об установке — чаще, чем по описанию, которое почти не читают. Делаем их по правилам площадки, с подписями и в том порядке, в котором их листают. Если приложение заметно изменится, снимки придётся пересобрать: это короткая работа, но она не бесплатная, и мы говорим об этом сразу.
Вам. Файл в Figma передаётся на ваш аккаунт с правами редактирования, иконка — в векторе и во всех размерах, которые требуют площадки, изображения — в нужных плотностях экрана. Шрифтовые лицензии, если нужны платные шрифты, оформляются на вас, а не на студию. Продолжить работу можно с любым другим дизайнером: это общее правило студии, одинаковое для всех девяти форматов.
Расскажите сценарий — посчитаем экраны и состояния
- Полчаса: проходим путь пользователя вслух и ищем экраны, которых не хватает
- Скажем честно, не дешевле ли проверить идею экраном в мессенджере или сайтом на телефоне
- Если возьмёмся — от 140 000 ₽, срок 5–7 недель, исходники и иконка ваши
Заявка принята
Разберём сценарий и вернёмся в течение рабочего дня. Если срочно — напишите в Telegram.
Или напишите сразу:
Telegram · отвечаем лично за 30 минут