Обидві теми
Перемикаю тему в 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?
Так, після запуску я показую, як це робити, і далі ви міняєте тексти й товари самі. Код і доступи — на ваших акаунтах: підете — все лишиться у вас.