Обе темы
Переключаю тему в Telegram и прохожу каждый экран: текст читается, фото не теряются, ничего не слепит ночью.
УслугиTelegram Mini App для бизнесаДизайн Mini App
Дизайн Mini App для Telegram
Дизайн Mini App для Telegram
Дизайн Telegram Mini App, с которым клиент не думает, куда нажать: приложение берёт тему самого Telegram, главная кнопка под пальцем, а заказ занимает несколько касаний.
- Всё индивидуально
- Тёмная и светлая тема
- Кнопки под палец
Просто напишите, а дальше я сам. Посчитаю задачу без оплаты.
Кофе Зернобот
Вчера
Ваш капучино готов! Заберите на кассе.
Спасибо!
Сегодня
Кофе заранеебез очереди · с 08:00Доброе утро! Закажите кофе заранее и заберёте без очереди.
Зерно на Подолесегодня в 09:12
Что приготовить?
Елена · +380 67 ··· ·· 12из Telegram
ОплаченоЗерно на Подоле · в 09:12
одной рукой на ходу
Красивый экран не продаёт, если кнопку не найти
Человек открывает приложение посреди переписки, одной рукой, часто на ходу. Если ему приходится искать, куда нажать, заказа не будет, какими бы красивыми ни были цвета. Поэтому дизайн я начинаю с пути, картинки потом: что клиент хочет сделать и сколько касаний на это уйдёт.
Такое приложение нужно тем, кому уже пишут в Telegram и у кого клиент должен что-то выбрать: напиток в кофейне, товар в магазине, время в салоне. Если вопросов немного, может хватить и бота с кнопками, и это видно уже по первому разговору.
Гордей Фисун · обновлено
мелочи, которые решают
Telegram Mini App дизайн: что я проверяю
Мелочи, из-за которых приложением пользуются, а не закрывают после первого экрана.
Одной рукой
Крупные зоны касания, никаких мелких ссылок, в которые трудно попасть пальцем.
Без лишних полей
Ни регистрации, ни пароля. Оставляю только те вопросы, без которых заказ не выполнить.
Понятный финал
После оплаты клиент сразу видит, что всё прошло, и получает подтверждение в чате. Вам приходит новый заказ в Telegram.
Ваши слова на кнопках
Названия товаров, услуг и кнопок пишем так, как говорят ваши клиенты, а не как привыкли разработчики.
Можно попробовать
На сайте есть живое демо магазина: соберите корзину и оформите заказ. Это рабочий код, а не картинка.
в вашем приложении
Что входит в дизайн Telegram Web App
Цвета из Telegram клиента
Приложение подхватывает тему мессенджера: в тёмной теме экран тёмный, в светлой светлый. Поэтому оно выглядит частью Telegram, и ничего чужого вдруг не открывается.
Главное действие внизу
Кнопка «Заказать» или «Оплатить» стоит там, куда дотягивается большой палец. Сначала собираю и пробую всё на телефоне, а компьютер потом.
Мало шагов до оплаты
Выбрал, добавил, оплатил. Имя вводить не нужно: кто заказывает, приложение узнаёт от Telegram.
Одинаково на всех устройствах
На iPhone, Android и компьютере то же приложение и тот же вид. Клиенту ничего не нужно устанавливать.
Живое демо
Оформите заказ в несколько касаний
В демо настоящий рабочий код. Соберите корзину, закажите и посмотрите, что в ту же секунду придёт вам.
от списка экранов
От списка экранов до вашего телефона
Вы видите приложение на каждом шаге в своём Telegram, без картинок.
Путь клиента
Рассказываете, что клиент должен сделать: выбрать, записаться или оплатить. Можно своими словами, хоть голосовым.
Список экранов
Записываю, какие будут экраны и что на каждом. Вы согласуете список, и только тогда я сажусь за код.
Пробуете пальцем
Открываете живую версию на своём телефоне, в тёмной и светлой теме. Что неудобно, правим тут же.
Запуск
Приложение работает в вашем аккаунте. Показываю, как самим менять тексты и товары, чтобы не ждать меня по каждой мелочи.
5,0 · 37 отзывов
- Вы решаете, двигаться ли дальшеПосле каждого этапа можете остановить проект. Оплачиваете только выполненные и принятые этапы. Предоплату за неначатые возвращаю.
- Деньги назад, если сделаю не то, что в ТЗЕсли объём не тот, что согласовали, возвращаю оплату этапа. Без споров.
Вопросы
Вопросы о дизайне
Что входит в дизайн Telegram Mini App?
Дизайн мини-приложения в Telegram состоит из списка экранов, пути клиента от кнопки в чате до оплаты, вида в тёмной и светлой теме Telegram и кнопок, удобных под палец. Вместо картинок я показываю рабочую версию на вашем телефоне.
Mini App подстраивается под тему Telegram?
Да, Mini App берёт цвета Telegram клиента: в тёмной теме он тёмный, в светлой светлый. Поэтому приложение выглядит частью мессенджера.
Можно ли согласовать дизайн до того, как начнётся код?
Да, дизайн Mini App согласуем до кода: сначала список экранов, что на каждом и в каком порядке. Код пишу только после этого, а дальше показываю приложение по частям в вашем Telegram.
Чем дизайн Telegram Web App отличается от дизайна сайта?
Telegram Web App открывается внутри мессенджера, чаще всего на телефоне, в окне поверх чата. Поэтому в нём меньше экранов, главное действие внизу под пальцем и нет регистрации, потому что Telegram сам передаёт, кто клиент.
Что подготовить к разговору о дизайне?
Для разговора о дизайне мини-приложения достаточно одного реального примера заказа: что клиент выбирает, что указывает и как платит. Логотип и фото товаров, если они есть, тоже пригодятся.
Смогу ли я сам менять тексты и товары в Mini App?
Да, после запуска я показываю, как это делать, и дальше вы меняете тексты и товары сами. Код и доступы на ваших аккаунтах, так что даже если уйдёте, всё останется у вас.