Обидві теми
Перемикаю тему в Telegram і проходжу кожен екран: текст читається, фото не губляться, нічого не сліпить уночі.
ПослугиTelegram Mini App для бізнесуДизайн Mini App
Дизайн Mini App для Telegram
Дизайн Telegram Mini App, з яким клієнт не думає, куди натиснути: застосунок бере тему самого Telegram, головна кнопка під пальцем, а замовлення займає кілька дотиків.
Просто напишіть, а далі я сам. Порахую задачу безкоштовно.
Зерно на Подолісьогодні о 09:12
Що приготувати?
Олена · +380 67 ··· ·· 12з Telegram
однією рукою на ходу
Людина відкриває застосунок посеред розмови, однією рукою, часто на ходу. Якщо їй доводиться шукати, куди натиснути, замовлення не буде, хоч які гарні кольори. Тому дизайн я починаю зі шляху, картинки потім: що клієнт хоче зробити і скільки дотиків на це піде.
Такий застосунок потрібен тим, кому вже пишуть у Telegram і в кого клієнт має щось вибрати: напій у кавʼярні, товар у магазині, час у салоні. Якщо питань небагато, може вистачити й бота з кнопками, і це видно вже з першої розмови.
Гордій Фісун · оновлено
дрібниці, які вирішують
Дрібниці, через які застосунком користуються, а не закривають після першого екрана.
Перемикаю тему в Telegram і проходжу кожен екран: текст читається, фото не губляться, нічого не сліпить уночі.
Великі зони дотику, жодних дрібних посилань, які важко влучити пальцем.
Ні реєстрації, ні пароля. Лишаю тільки ті питання, без яких замовлення не виконати.
Після оплати клієнт одразу бачить, що все пройшло, і отримує підтвердження в чаті. Вам приходить нове замовлення в Telegram.
Назви товарів, послуг і кнопок пишемо так, як говорять ваші клієнти, а не як звикли розробники.
На сайті є живе демо крамниці: складіть кошик і оформіть замовлення. Це робочий код, а не картинка.
у вашому застосунку
Застосунок підхоплює тему месенджера: у темній темі екран темний, у світлій світлий. Тому він виглядає частиною Telegram, і нічого чужого раптом не відкривається.
Кнопка «Замовити» чи «Оплатити» стоїть там, куди дістає великий палець. Спершу збираю і пробую все на телефоні, а компʼютер потім.
Вибрав, додав, оплатив. Імʼя вводити не треба: хто замовляє, застосунок дізнається від Telegram.
На iPhone, Android і компʼютері той самий застосунок і той самий вигляд. Клієнт нічого не встановлює.
Живе демо
У демо справжній робочий код. Складіть кошик, замовте і подивіться, що в ту ж секунду прийде вам.
від списку екранів
Ви бачите застосунок на кожному кроці у своєму Telegram, без картинок.
Розповідаєте, що клієнт має зробити: вибрати, записатися чи оплатити. Можна своїми словами, хоч голосовим.
Записую, які будуть екрани і що на кожному. Ви погоджуєте список, і лише тоді я сідаю за код.
Відкриваєте живу версію у своєму телефоні, у темній і світлій темі. Що незручно, правимо тут же.
Застосунок працює у вашому акаунті. Показую, як самим міняти тексти й товари, щоб не чекати на мене через кожну дрібницю.
Питання
Дизайн міні-застосунку в Telegram складається зі списку екранів, шляху клієнта від кнопки в чаті до оплати, вигляду в темній і світлій темі Telegram і кнопок, зручних під палець. Замість картинок я показую робочу версію у вашому телефоні.
Так, Mini App бере кольори Telegram клієнта: у темній темі він темний, у світлій світлий. Тому застосунок виглядає частиною месенджера.
Так, дизайн Mini App погоджуємо до коду: спершу список екранів, що на кожному і в якому порядку. Код пишу тільки після цього, а далі показую застосунок частинами у вашому Telegram.
Telegram Web App відкривається всередині месенджера, найчастіше на телефоні, у вікні поверх чату. Тому в ньому менше екранів, головна дія внизу під пальцем і немає реєстрації, бо Telegram сам передає, хто клієнт.
Для розмови про дизайн міні-застосунку досить одного реального прикладу замовлення: що клієнт вибирає, що вказує і як платить. Логотип і фото товарів, якщо вони є, теж знадобляться.
Так, після запуску я показую, як це робити, і далі ви міняєте тексти й товари самі. Код і доступи на ваших акаунтах, тож навіть якщо підете, усе лишиться у вас.