UI/UX прототип сервіс запису · застосунок + дашборд

Клікабельний прототип: від онбордингу до підтвердженого запису

Вигаданий сервіс «Vizyt» — запис до майстрів і клінік. Усе клікається: 8 екранів застосунку з переходами, веб-дашборд адміністратора з дровером і модалкою, стани «порожньо / завантаження / помилка», темна тема і адаптив. Нижче — дизайн-система, з якої це зібрано.

8 екранів3 станитемна темаадаптив 360–1440UA / EN

Мобільний застосунок — клієнт

Натискайте в телефоні як у справжньому застосунку. Панелі збоку перемикають екрани і стани напряму.

Екрани

    Потік

    Онбординг→Вхід→Головна→Майстер→Час→Підтвердження→Мої записи
    9:41●●● ▲ ▮
    Запис за 30 секунд

    Оберіть майстра, час — і готово. Нагадаємо за день і за 2 години.

    Вхід

    Надішлемо код у SMS. Жодних паролів.

    Доброго дня,Оля 👋
    ОК
    🔍 Послуга або майстер
    Найближчі майстри
    —
    ★ 4.9 · 212 відгуківсьогодні вільно
    Послуги
    Дата і час
    Вільні слоти
    Підтвердження
    Оплата
    Мої записи
    ОК
    Оля Коваль
    +380 67 000 00 00
    Налаштування
    Сповіщення
    Темна тема
    МоваУкраїнська
    Способи оплати•••• 4242
    Акаунт
    Вийти

    Стани

    Що показано

    • Переходи «вперед/назад» з напрямком, вкладки знизу на основних екранах
    • Валідація телефону з інлайн-помилкою, OTP-крок без паролів
    • Скелетон при завантаженні, порожній стан із CTA, банер помилки з «Повторити»
    • Кнопка з лоадером і екран успіху з анімацією галочки
    • Темна тема — ті самі компоненти, інші токени

    Веб-дашборд — адміністратор салону

    Клікайте рядки таблиці, змінюйте статуси, створюйте запис у модалці. Звужуйте вікно — сайдбар згортається, таблиця стає картками.

    Стани

    Сьогодні

    Розклад майстрів10:00 – 19:00

    Популярні послугитиждень

    Записи на сьогодні

    Дизайн-система продукту

    Усе вище зібрано з цих токенів і компонентів. Токени оголошені один раз, темна тема — інший набір значень для тих самих імен.

    Кольори · токени

    Типографіка · Manrope

    Заголовок H128/800 -2%
    Заголовок H220/800
    Підзаголовок16/700
    Основний текст для карток і форм15/400 lh 1.5
    Підпис, допоміжне13/600
    Оверлайн11/800 +8%

    Відступи · радіуси · тіні

    4
    8
    12
    16
    24
    32
    48

    Кнопки · стани

    Поля · вибір

    Текст помилки поля

    Чипи · бейджі · аватари

    confirmedpendingpastfilterfilterОКАМ

    Зворотний зв'язок

    Іконки · 24px, 1.9 stroke

    Так виглядає результат етапу «прототип»

    Перед ним — дослідження, потоки й вайрфрейми; після — передача в розробку з токенами й специфікаціями. Як це йде крок за кроком — на сторінці процесу.

    Від вайрфрейму до UI →