Приложение для записи клиентов: готовый каркас экранов

Что это и для кого

Запись — самая частая просьба у микробизнеса, который приходит за приложением: салон, барбершоп, мастер на себя, клиника, автосервис, студия растяжки. И самая частая причина, по которой разработка буксует: заказчик представляет приложение целиком, а объяснить может только фразой «ну как у всех, только чтобы клиент сам выбирал время».

Каркас превращает эту фразу в предмет разговора. На нём видно, сколько на самом деле экранов, где живёт правило «отменить не позже чем за три часа» и что происходит, когда человек нажимает «Записаться». Спорить об этом на макете дешевле, чем на готовом коде.

Кому пригодится: владельцу дела — чтобы понять объём работ до того, как за них платить; заказчику разработки — чтобы выдать студии предметное задание; продакту и аналитику — чтобы за вечер собрать каркас до дизайна. Навыков дизайна не нужно: экраны собраны из готовых блоков, тексты правятся прямо на макете.

Из каких экранов состоит каркас

Ниже — то, что реально лежит в шаблоне, без прикрас. Имена и услуги в нём условные: Анна Смирнова и стоматология — это заглушки, которые вы за пять минут замените своими.

1. 1 Специалисты

   Заголовок «К кому записаться», поле поиска «Услуга или специалист», три кнопки-фильтра: Все, Сегодня, Онлайн. Ниже — список из трёх специалистов: «Анна Смирнова · стоматолог · 15 лет опыта», «Игорь Лебедев · терапевт · принимает сегодня», «Мария Кузьмина · косметолог · окна на завтра». Под списком строка, которая снимает главный страх клиента: «Запись подтверждается сразу — администратор перезванивать не будет».

   Любая строка списка открывает экран «Специалист».

2. 2 Специалист

   Стрелка «назад», имя в шапке, место под фото, специализация, рейтинг пятью звёздами, короткое описание услуг с адресом приёма. Дальше блок «Ближайшие окна» — три кнопки со временем (10:00, 13:30, 16:00), чтобы записаться в один тап, не открывая календарь. Внизу — кнопка «Выбрать время».

   «Выбрать время» ведёт на экран «Выбор времени».

3. 3 Выбор времени

   Заголовок месяца, неделя кнопками-днями («8 пн» … «14 вс»), под ней блок «Свободное время» — шесть кнопок со слотами от 09:00 до 16:00. Отдельной строкой правила, которые обычно висят у администратора в голове: «Приём длится 40 минут. Отменить можно не позже чем за 3 часа». Внизу кнопка с уже выбранным слотом: «Записаться на 13:30».

   Кнопка открывает «Подтверждение» — окном поверх экрана, а не как новый экран. Так это и работает в жизни: человек не «уходит» с календаря, он получает ответ.

4. 4 Подтверждение

   Галочка, крупное «Вы записаны» и строка со всеми деталями сразу: «Анна Смирнова, 10 сентября в 13:30. Напомним за час до приёма». Две кнопки: «Мои записи» и «На главную». Нижнего меню на этом экране нет намеренно — это ответ на действие, а не раздел приложения.

5. 5 Мои записи

   Две записи в списке — предстоящая («10 сентября, 13:30 · Анна Смирнова · Ленина, 14») и прошедшая («28 августа, 11:00 · Игорь Лебедев · прошедшая»). Повтор правила отмены и кнопка «Записаться ещё раз», которая возвращает к списку специалистов.

   Экран нужен ровно для двух вещей, о которых спрашивают чаще всего: «когда я записан» и «как записаться повторно».

6. 6 Профиль

   Аватар, имя клиента и три пункта: «Карта пациента · история приёмов», «Напоминания · СМС за час», «Мои записи · 1 предстоит». Последний пункт ведёт на «Мои записи» — намеренное дублирование: люди ищут свои записи и в меню, и в профиле.

На трёх экранах — «Специалисты», «Мои записи», «Профиль» — внизу живёт меню из трёх пунктов. На внутренних экранах («Специалист», «Выбор времени», «Подтверждение») его нет: на глубине вместо меню стрелка «назад». Так устроены и iOS, и Android, и это тот случай, когда каркас лучше не перестраивать.

Переходы между экранами

Переходы уже проставлены — по ним разработчик читает логику, а вы в режиме «▶ Просмотр» листаете макет как приложение.

Семь вещей, которые в записи забывают

Каркас показывает счастливый путь: время есть, клиент пришёл, всё хорошо. Деньги и нервы съедает то, что случается по дороге. Пройдитесь по списку и дорисуйте то, что относится к вам, — это и есть настоящая работа над макетом.

1. Свободного времени нет. Самый частый пропущенный экран. Что человек видит, когда у мастера всё занято на две недели вперёд? Пустой календарь без объяснений — верный способ потерять клиента. Варианты: ближайшая свободная дата крупно, кнопка «записаться в лист ожидания», предложение другого мастера.
2. Отмена и перенос. Кто и как отменяет, за сколько часов, что происходит, если клиент опоздал с отменой. Правило в каркасе написано текстом («не позже чем за 3 часа»), но экрана отмены нет — нарисуйте его сами: список записей, «отменить», подтверждение и что видит мастер.
3. Запись не на себя. Мама записывает ребёнка, дочь — родителей. Значит, нужно поле «на кого» и, вероятно, вторая карта клиента. Половина клиник узнаёт об этом уже после релиза.
4. Услуга длиннее одного слота. Стрижка — 40 минут, окрашивание — три часа. Если сетка слотов фиксированная, длинная услуга должна забирать несколько подряд, иначе после неё запишется второй клиент. Решается это в правилах, но на макете должно быть видно, что услуга выбирается ДО времени.
5. Несколько адресов и мастеров. Второй филиал ломает каркас сильнее всего: появляется выбор точки, у каждого мастера свой график, у каждой точки свой телефон. Если филиалов больше одного — добавьте экран выбора адреса и скажите об этом студии сразу, до оценки.
6. Напоминание: чем и когда. «Напомним за час» в макете — одна строка, в разработке — интеграция: СМС стоят денег и требуют договора с оператором, пуш работает только если приложение установлено, мессенджер — отдельная история. Решите заранее, иначе строка превратится в незапланированный этап.
7. Нерабочие дни и отпуск. Праздники, отпуск мастера, обед. Календарь, который бодро предлагает записаться на 1 января, выглядит неисправным.

Что поправить под себя за десять минут

Порядок, который работает: сначала слова, потом состав, потом всё остальное. Тексты правятся прямо на макете — двойное нажатие по надписи.

1. Слово «специалист». Замените на своё: мастер, врач, тренер, стилист, механик. Это тридцать секунд и половина ощущения «про нас».
2. Имена и специализации в списке — на настоящие. Три карточки достаточно: студии нужен образец строки, а не весь ваш штат.
3. Услуги и длительность. «Приём длится 40 минут» — поставьте свою цифру, а если услуг несколько с разной длительностью, добавьте отдельный экран выбора услуги перед временем.
4. Правило отмены — своё, теми же словами, какими вы говорите его клиентам по телефону.
5. Фильтры. Кнопки «Все / Сегодня / Онлайн» — под себя: онлайн-приёма у барбершопа нет, зато есть «с детьми» или «на выходных».
6. Пункты нижнего меню. Три — хороший минимум. Четвёртый добавляйте, только если за ним есть отдельный раздел, а не одна кнопка.
7. Профиль. «Карта пациента» — для клиники; для салона это «Мои визиты» или «Бонусы».

Дальше — то, что займёт ещё час, но окупится на оценке: скопируйте экран «Выбор времени» и сделайте из копии состояние «свободного времени нет», а из «Мои записи» — состояние «записей пока нет». Два экрана состояний снимают у студии больше вопросов, чем страница текста.

Чего в каркасе нет намеренно

Шаблон держит одну мысль — запись. Всё, что к ней прилипает, вынесено в отдельные наборы, чтобы каркас не превратился в двадцать экранов, которые никто не дочитает.

• Вход, регистрация, код из СМС. Это отдельный набор «Онбординг и вход» — шесть экранов, которые рисуются заново почти в каждом заказе.
• Оплата и предоплата. В наборе «Оплата и состояния»: способы оплаты, успех, отказ и три состояния экрана — пусто, загрузка, нет сети.
• Рабочее место мастера и администратора — другое приложение с другой логикой. Ближайший каркас — «Заявки для менеджера».
• Карта, чат с мастером, отзывы, бонусная программа. Каждое — самостоятельный кусок работы; добавляйте своим экраном, когда решите, что он в первой версии нужен.

И то, чего Maketa не делает вообще, — чтобы не было недопонимания: не пишет код, не собирает приложение для App Store и RuStore, не подключает оплату и не хранит записи ваших клиентов. Это конструктор макетов; работающее приложение по нему делает разработчик.

Чек-лист: что приложить к макету, отдавая студии

Ссылка на макет закрывает вопрос «как это выглядит и как по этому ходят». Оценку определяет то, что рядом с ней. Восемь строк ниже — минимум, после которого оценка перестаёт быть вилкой по воздуху.

• Кто клиент и кто с той стороны: только клиентское приложение или ещё рабочее место мастера.
• Сколько филиалов и мастеров, у каждого ли свой график.
• Список услуг с длительностью — хотя бы черновой.
• Правила: за сколько отменяют, есть ли предоплата, что с опозданиями и неявкой.
• Откуда берётся расписание: ведёте в приложении или тянете из существующей системы (и какой именно).
• Чем напоминаете: пуш, СМС, мессенджер — и кто платит за отправку.
• Платформы: iOS, Android, обе; нужна ли веб-версия для записи по ссылке.
• Что считается сделанным для первой версии — одной фразой, без «и ещё бы».

Развёрнутая структура задания — в разборе «Что должно быть в ТЗ на приложение»; там же готовый шаблон файлом.

Частые вопросы

Это готовое приложение для записи клиентов? Его можно поставить в салоне?

Нет. Это макет экранов: по нему можно ходить как по приложению, но записи он не ведёт и клиентам ничего не отправляет. Чтобы приложение заработало, его пишет разработчик — макет для этого и нужен.

Сколько это стоит?

Редактор, шаблоны, ссылка для просмотра и замечания по ссылке — бесплатно и без ограничения по числу макетов. Платный в Maketa только ИИ-помощник (разбор скриншота, генерация экрана, советы в чате) — он не обязателен, всё на этой странице делается руками.

Нужна ли регистрация?

Чтобы открыть каркас и править — нет. Аккаунт понадобится, только когда захотите сохранить макет за собой и поделиться ссылкой, чтобы он не потерялся вместе с вкладкой.

Можно использовать в коммерческом проекте?

Да. Каркас — заготовка, вы делаете из неё свой макет и распоряжаетесь им как хотите, в том числе передаёте подрядчику.

Чем это отличается от Figma?

Figma — инструмент дизайнера, и она предполагает, что дизайнер у вас есть. Здесь экраны собираются из готовых блоков без навыков, а результат — не картинка, а ссылка, по которой заказчик и разработчик листают экраны и пишут замечания прямо поверх. Подробное сравнение — на странице Maketa или Figma.