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