Кнопки в Телеграм. Меню. | База знаний
К сообщениям в ботах и рассылках Телеграм можно добавить кнопки разного назначения.
Меню
В многошаговых Ботах Телеграм есть возможность создавать Меню с кнопками.
Такое меню принадлежит к шагу бота и всегда находится внизу под строкой ввода сообщения.
Всего 64 кнопки — до 8 кнопок в столбец и в ряд до 8 кнопок (8х8). Название кнопки может содержать до 64 символов.
В Меню доступны кнопки с действием «Переход к шагу».
Особенности Меню:
Кнопки в блоке Текст
В Текстовом блоке добавляется до 64 кнопок — в столбец до 8 кнопок и в ряд до 8 кнопок (8х8).
В названии есть ограничение до 64 символов.
Такие кнопки можно настроить как после Текстового сообщения, так и после Картинки без текста.
Кнопки перемещаются простым перетягиванием.
— чтобы добавить новый ряд, нужно нажать «Добавить кнопку»
— чтобы добавить столбец, нужно нажать «+»
Внимание: Кнопки к текстовым сообщениям не исчезают и будут с ним скроллиться.
У подписчика всегда есть возможность нажать на эту кнопку. При повторном клике на кнопку из предыдущих сообщений подписчик вернется обратно к этому шагу в чат-боте. Выполнение текущей цепочки бота прервется и начнется новый сценарий, который был настроен по этой кнопке.
Чтобы избежать повторного клика используйте настройку «Реагировать на клик только один раз» ↓ ↓ ↓
Один клик по кнопке
Как предотвратить повторную отправку сообщений в Телеграм по нажатию кнопок в предыдущих сообщениях?
Есть 2 варианта. Выберите подходящий для вашей воронки.
1. Одноразовые кнопки. Подходят для многошаговых ботов в блоке «Текст» и «Картинка», только для кнопок с типом «Действие».
Откройте настройки кнопки и поставьте галочку «Реагировать на клик только один раз», как показано на скриншоте:
2. Для остальных случаев можно использовать более развернутую настройку. Подходит для блоков Вопрос, для кнопок с типом url и др.
Настройте присвоение меток после каждого шага и перед каждым шагом проверяйте наличие этой метки. Если метка есть, то можно возвращать на тот шаг, где он был. Если метки нет, то продолжить прохождение бота.
Примерная схема:
Кнопки в блоке «Вопрос»
В блоке «Вопрос» можно настроить до 20 вариантов быстрых ответов. В названии такого элемента может быть до 20 символов
Кнопки быстрых ответов к Вопросу в Телеграм (также как и в других мессенджерах) пропадают со следующим сообщением.
Кнопки в блоке «Картинка»
Только в ботах телеграм к изображению можно добавить кнопки без текстового блока, работа кнопок в этих блоках абсолютно идентична.
Статистика в кнопках
Для Телеграм:
- мы отслеживаем статистику кликов в кнопках типа URL
- не отслеживаем статистику в кнопках действия
- нет статистики кликов на быстрые ответы в вопросах
Если вы не нашли ответ на свой вопрос, задайте его нам в чате внутри кабинета либо напишите на hello@bothelp.
io 😃
Чтобы зарегистрироваться на платформе BotHelp, нажмите кнопку ниже:
Регистрация в BotHelp
Кнопка меню
В диалоге с пользователем бот может выводить меню. При нажатии на один из пунктов меню запускается определенный сценарий.
Такая логика реализуется с помощью связки: тригер Кнопка меню и элемент Показать меню.
- Триггер размещается в каждом сценарии, который будет запускаться из меню.
- Элемент добавляется в сценарий, в котором бот выводит меню пользователю.
Например, по умолчанию в готовых сценариях бота «Поддержка» добавлен триггер Кнопка меню. В стартовом сценарии бота размещен элемент Показать меню. При обращении на линию поддержки, бот отобразит для пользователя все вопросы, по которым он сможет помочь. Обратите внимание, если добавлено большое количество пунктов меню, темы отображаются в виде списка.
Чтобы начать взаимодействие, пользователь может отправить номер пункта.
Разместите триггер в сценарии после ключевого интента и задайте название кнопки в меню.
Вы можете настроить несколько списков меню внутри одного бота, а также определить порядок отображения кнопок. Для этого наведите курсор на триггер, а затем на появившиеся рядом с его названием три точки и выберите значок . Откроется окно настройки.
- Категория — поле заполняется, если в одном боте необходимо выводить несколько меню со списком разных сценариев. Задайте общее название в каждом сценарии из одного меню. Затем при размещении элемента Показать меню укажите категорию сценариев, которые увидит пользователь в виде кнопок;
- Позиция — определите позицию кнопки по счету относительно других. Если поле будет пустым, или будут указаны повторяющиеся в рамках одного меню числа, кнопки будут отображаться в алфавитном порядке.
Сохраните изменения.
Чтобы удалить триггер, наведите на него курсор, а затем нажмите на появившиеся рядом с его названием три точки и выберите значок .
Пример настройки нескольких меню
Рассмотрим применение нескольких настроенных меню на примере. В стартовом сообщении бота для персонала показаны все вопросы, по которым пользователь может обратиться к боту.
Предположим, что внутреннее обучение представлено в виде нескольких отдельных курсов, для каждого из которых создан свой сценарий. Чтобы пользователь мог выбрать курс, нажав на кнопку, разместим в каждом сценарии триггер Кнопка меню, укажем название, а также категорию, например, «Список направлений». Перейдем в сценарий «Внутреннее обучение» и добавим элемент Показать меню. В поле Категория введем название, указанное в каждом из направлений обучения. Теперь, когда пользователь выберет кнопку Внутреннее обучение, отобразится меню со списком доступных направлений.
completion-trigger.
Была ли статья полезной?
Нашли опечатку? Выделите текст, нажмите ctrl + enter и оповестите нас
Кнопки — Меню и действия — Компоненты — Руководство по пользовательскому интерфейсу — Дизайн
Кнопка инициирует мгновенное действие.
Универсальные и легко настраиваемые кнопки позволяют людям выполнять задачи в вашем приложении простыми и знакомыми способами. Как правило, кнопка сочетает в себе три атрибута для четкого обозначения ее функции:
- Стиль. Визуальный стиль, основанный на размере, цвете и форме.
- Содержание. Символ (или значок интерфейса), текстовая метка или и то, и другое, которые отображаются на кнопке для обозначения ее назначения.
- Роль. Определенная системой роль, определяющая семантическое значение кнопки и влияющая на ее внешний вид.
В дополнение к универсальным кнопкам многие стандартные стили кнопок, такие как «Информация», «Закрыть» и «Добавить контакт», обеспечивают привычное поведение во всей системе. Существует также множество компонентов, похожих на кнопки, которые имеют различный внешний вид и поведение для конкретных случаев использования, таких как переключатели, всплывающие кнопки и сегментированные элементы управления.
Лучшие практики
Когда кнопки мгновенно узнаваемы и просты для понимания, приложение кажется интуитивно понятным и хорошо спроектированным.
Сделайте кнопки удобными для выбора. На сенсорном экране кнопки должны иметь цель нажатия не менее 44×44 точек, чтобы вместить кончик пальца. На всех экранах важно предусмотреть достаточно места вокруг кнопки, чтобы люди могли визуально отличить ее от окружающих компонентов и контента, независимо от того, используют ли люди сенсорный ввод, указатель или систему, которая расширяет кнопку, когда она находится в фокусе.
Убедитесь, что каждая кнопка четко указывает на ее назначение. Кнопка всегда содержит текстовую метку или символ (или значок интерфейса) — а иногда и то и другое — чтобы помочь людям предсказать, что она делает.
Стиль
Системные кнопки предлагают ряд стилей, которые поддерживают обширную настройку, обеспечивая при этом встроенные состояния взаимодействия, поддержку специальных возможностей и адаптацию внешнего вида.
iOS и iPadOS имеют четыре стиля кнопок, каждый из которых доступен в трех размерах. Каждая комбинация размера и стиля имеет различный уровень визуальной значимости, помогая вам представить иерархию действий в вашем приложении.
Вы можете настроить системную кнопку для использования любой комбинации стиля и размера. По умолчанию системная кнопка использует угловой радиус определенного размера и акцентный цвет вашего приложения. При необходимости вы можете изменить эти атрибуты — в дополнение к атрибутам, управляющим макетом контента и наличием индикатора активности — в конфигурации вашей кнопки.
Используйте заполненную кнопку для наиболее вероятного действия в представлении. Заполненный стиль визуально наиболее заметен, поэтому он помогает людям быстро определить действие, которое они, скорее всего, захотят. В то же время избегайте использования слишком большого количества заполненных кнопок в представлении. Слишком много заполненных кнопок может увеличить когнитивную нагрузку, потому что люди должны тратить время на сравнение нескольких вероятных вариантов, прежде чем сделать выбор.
Используйте стиль, а не размер, чтобы визуально выделить предпочтительный вариант из множества вариантов.
Содержимое
Создайте содержимое кнопки, которое поможет людям мгновенно понять, что делает кнопка. Если значок интерфейса подходит для вашей кнопки, рассмотрите возможность использования существующего или настроенного символа SF. Чтобы использовать текст, создайте короткую метку, кратко описывающую, что делает кнопка. Используя заглавные буквы, попробуйте начать метку с глагола, чтобы передать действие кнопки — например, кнопка, позволяющая людям добавлять товары в корзину, может использовать метку «Добавить в корзину».
Включайте дополнительный текст под меткой, только если он содержит полезную информацию. Дополнительный текст использует меньший размер текста, чем метка, показывая, что информация является вторичной по отношению к действию кнопки. Например, вы можете добавить текст для обновления кнопки «Добавить в корзину» с указанием количества товаров в корзине. Избегайте написания подзаголовка, который больше объясняет, что делает кнопка; убедитесь, что кнопка, содержащая представление, метку или изображение, стиль и роль, предоставляет всю информацию, необходимую людям для понимания ее действия.
Настройте кнопку для отображения индикатора активности, когда вам нужно предоставить отзыв о действии, которое не выполняется мгновенно. Отображение индикатора активности внутри кнопки может сэкономить место в пользовательском интерфейсе и четко указать причину задержки. Чтобы прояснить, что происходит, вы также можете настроить кнопку так, чтобы рядом с индикатором активности отображалась другая метка.
Например, метка «Оформить заказ» может измениться на «Оформить заказ…», пока отображается индикатор активности. Когда возникает задержка после того, как люди нажали или коснулись настроенной вами кнопки, система отображает индикатор активности рядом с исходным или альтернативным ярлыком, скрывая изображение кнопки, если оно есть.
Роль
Системная кнопка может иметь одну из следующих ролей:
- Обычная. Нет конкретного значения.
- Первичный. Эта кнопка является кнопкой по умолчанию — кнопка, которую чаще всего выбирают люди.
- Отмена. Кнопка отменяет текущее действие.
- Разрушительный. Кнопка выполняет действие, которое может привести к уничтожению данных.
Роль кнопки может оказывать дополнительное влияние на внешний вид, который вы настраиваете. Например, система использует полужирный текст для метки основной кнопки, тогда как деструктивная кнопка использует красный цвет.
Назначьте основную роль кнопке, которую люди чаще всего выбирают. Когда основная кнопка реагирует на клавишу возврата, это позволяет людям быстро подтвердить свой выбор. Кроме того, когда кнопка находится во временном представлении — например, листе, редактируемом представлении или предупреждении — назначение ей основной роли означает, что представление может автоматически закрываться, когда люди нажимают «Ввод».
Не назначайте основную роль кнопке, выполняющей деструктивное действие, даже если это действие является наиболее вероятным выбором. Из-за визуальной заметности люди иногда выбирают основную кнопку, не прочитав ее сначала. Помогите людям избежать потери контента, назначив основную роль неразрушающим кнопкам.
Особенности платформы
Никаких дополнительных соображений для iOS, iPadOS или tvOS.
macOS
Несколько конкретных типов кнопок уникальны для macOS.
Кнопки
Стандартный тип кнопки в macOS известен как кнопка .
Вы можете настроить кнопку для отображения текста, символа, значка интерфейса, изображения или комбинации текста и изображения. Кнопки могут действовать как кнопки по умолчанию в представлении, и вы можете их подкрасить.
Используйте кнопку с изменяемой высотой только тогда, когда вам нужно отобразить высокое содержимое или содержимое переменной высоты. Кнопки с изменяемой высотой поддерживают те же конфигурации, что и обычные нажимные кнопки — и они используют тот же радиус угла и отступы содержимого — поэтому они выглядят совместимо с другими кнопками в вашем интерфейсе. Если вам нужно представить кнопку, содержащую две строки текста или высокий значок, используйте кнопку с изменяемой высотой; в противном случае используйте стандартную кнопку. Руководство для разработчиков см. в статье NSBezelStyleRegularSquare.
Добавлять многоточие к заголовку, когда кнопка открывает другое окно, представление или приложение. Во всей системе многоточие в заголовке управления сигнализирует о том, что люди могут вводить дополнительные данные.
Например, кнопки «Изменить» на панели «Автозаполнение» в настройках Safari содержат многоточие, потому что они открывают другие представления, позволяющие пользователям изменять значения автозаполнения.
Рассмотрите возможность включения загрузки пружины. В системах с трекпадом Magic Trackpad пружинная загрузка позволяет людям активировать кнопку, перетаскивая на нее выбранные элементы и нажимая с усилием, то есть нажимая сильнее, не отпуская выбранные элементы. После принудительного нажатия люди могут продолжать перетаскивать элементы, возможно, для выполнения дополнительных действий.
Кнопки градиента
Кнопка градиента инициирует действие, связанное с представлением, например добавление или удаление строк в таблице.
Кнопки градиента содержат символы или значки интерфейса, а не текст, и их можно настроить так, чтобы они вели себя как нажимные кнопки, переключатели или всплывающие кнопки. Кнопки появляются в непосредственной близости от связанного с ними представления — обычно внутри или под ним — поэтому люди знают, на какое представление влияют кнопки.
Используйте кнопки градиента на виде, а не в рамке окна. Кнопки градиента не предназначены для использования на панелях инструментов или в строках состояния. Если вам нужна кнопка на панели инструментов, используйте элемент панели инструментов.
Предпочтительно использовать символ в кнопке градиента. SF Symbols предоставляет широкий спектр символов, которые автоматически получают соответствующую окраску в состоянии по умолчанию и в ответ на действия пользователя.
Избегайте использования меток для добавления кнопок с градиентом. Поскольку кнопки градиента тесно связаны с конкретным представлением, их назначение обычно понятно без описательного текста.
Руководство для разработчиков см. в разделе NSBezelStyleSmallSquare.
Кнопки справки
Кнопка справки появляется в представлении и открывает справочную документацию по конкретному приложению.
Кнопки справки — это круглые кнопки одинакового размера со знаком вопроса.
Руководство по созданию справочной документации см. в разделе Предложение помощи.
Используйте кнопку системной справки для отображения справочной документации. Люди знакомы с видом стандартной кнопки справки и знают, что при нажатии на нее открывается содержимое справки.
По возможности откройте раздел справки, связанный с текущим контекстом. Например, кнопка справки на панели «Правила» в настройках Mail открывает руководство пользователя Mail и раздел справки, в котором объясняется, как изменить эти настройки. Если никакой конкретный раздел справки не относится непосредственно к текущему контексту, откройте верхний уровень справочной документации вашего приложения, когда люди нажимают кнопку справки.
Не более одной кнопки справки на окно. Несколько кнопок справки в одном контексте затрудняют прогнозирование результата нажатия одной из них.
Разместите кнопки справки там, где люди ожидают их найти.
Используйте следующие места для руководства.
| Вид | Расположение кнопки справки |
|---|---|
| Диалоговое окно с кнопками закрытия (например, OK и Отмена) | Нижний угол, противоположный кнопкам увольнения и совмещенный с ними по вертикали |
| Диалог без кнопок закрытия | Нижний левый или нижний правый угол |
| Окно или панель настроек | Нижний левый или нижний правый угол |
Используйте кнопку справки в представлении, а не в рамке окна. Например, не размещайте кнопку справки на панели инструментов или в строке состояния.
Избегайте отображения текста, представляющего кнопку справки. Люди знают, что делает кнопка справки, поэтому им не нужен дополнительный описательный текст.
Кнопки изображения
Кнопка изображения появляется в представлении и отображает изображение, символ или значок интерфейса.
Вы можете настроить кнопку изображения, чтобы она действовала как нажимная кнопка, переключатель или всплывающая кнопка.
Используйте кнопку изображения в представлении, а не в рамке окна. Например, избегайте размещения кнопки изображения на панели инструментов или в строке состояния. Если вам нужно использовать изображение в качестве кнопки на панели инструментов, используйте элемент панели инструментов. См. Панели инструментов.
Добавьте около 10 пикселей отступа между краями изображения и краями кнопок. Края кнопки изображения определяют область клика, даже если они не видны. Включение заполнения гарантирует, что щелчок регистрируется правильно, даже если он находится не точно в пределах изображения. Как правило, избегайте включения системной рамки в кнопку изображения; руководство для разработчиков см. в разделе isBordered.
Если вам нужно добавить метку, поместите ее под кнопкой изображения. Дополнительные указания см.
в разделе Этикетки.
watchOS
Используйте кнопки, которые занимают всю ширину экрана. Полноразмерные кнопки выглядят лучше и удобнее для нажатия. Если две кнопки должны иметь одно и то же горизонтальное пространство, используйте одинаковую высоту для обеих и используйте изображения или короткие текстовые заголовки для содержимого каждой кнопки.
Используйте одинаковую высоту для вертикальных стопок однострочных и двухстрочных текстовых кнопок. Насколько это возможно, используйте одинаковую высоту кнопок для визуальной согласованности.
Использовать заданный системой радиус скругления углов. Система определяет значения углового радиуса, которые обеспечивают единый визуальный стиль во всех приложениях и усиливают интерактивность кнопок. В Apple Watch Series 4 и более поздних версиях значения углового радиуса различаются в зависимости от того, находится ли кнопка в представлении с прокруткой или без прокрутки.
В представлениях без прокрутки кнопки используют угловой радиус в 22 точки.
В видах с прокруткой кнопки используют угловой радиус в 9 точек.
Версия: v6
shadow
Компонент «Кнопка меню» содержит значок и автоматически добавляет функциональность для открытия меню при нажатии.
Дополнительную информацию см. в документации по меню.
autoHide
| Описание | Автоматически скрывает кнопку меню, когда соответствующее меню не активно |
| Attribute | auto-hide |
| Type | boolean |
| Default | true |
color
| Описание | Используемый цвет из цветовой палитры вашего приложения. Варианты по умолчанию: «первичный» , «вторичный» , «третичный» , "успех" , "предупреждение" , "опасность" , "светлый" , "средний" и "темный" . Дополнительные сведения о цветах см. в теме. |
| Атрибут | Color |
| Тип | «Danger». «третичный» ｜ «предупреждение» ｜ строка и запись <никогда, никогда> ｜ не определено |
| Default | undefined |
disabled
| Description | If true , the user cannot interact with the menu button. | |||
| Атрибут | Отключен | |||
| Тип | BOOLEAN | BOOLEAN | BOOLEAN | . |
0187 | Описание | Необязательное свойство, которое сопоставляется с MenuId menuId prop. Также может быть начало или конец для стороны меню. This is used to find the correct menu to toggle |
| Attribute | menu |
| Type | string ｜ undefined |
| По умолчанию | undefined |
режим
| Описание | 8 Используемый режим платформы | 8 |
| Attribute | mode | |
| Type | "ios" ｜ "md" | |
| Default | undefined |
тип
| Описание | Тип кнопки. |
| Attribute | type |
| Type | "button" ｜ "reset" ｜ "submit" |
| Default | 'button' |
Нет доступных событий для этого компонента.
Для этого компонента нет общедоступных методов.
| Имя | Описание |
|---|---|
значок | Значок кнопки меню (используется значок ion). |
native | Собственный HTML-кнопочный элемент, в который заключены все дочерние элементы. |
| Имя | Описание |
|---|---|
--фон | 0 Фон меню 180183 |
--background-focused | Фон кнопки меню при фокусировке с помощью клавиши табуляции |
--background-focused-opacity | Непрозрачность фона кнопки меню при фокусировке с помощью клавиши табуляции |
--background-hover | Фон кнопки меню при наведении |
--background-hover-opacity | Непрозрачность фона при наведении |
--border-radius | Border radius of the menu button |
--color | Color of the menu button |
--color-focused | Color of кнопка меню при наведении курсора с помощью клавиши табуляции |
--color-hover | Цвет кнопки меню при наведении курсора |
--padding-bottom | нижнее заполнение кнопки0188 |
--padding-end | Right padding, если направление слева направо, и left padding, если направление справа налево от кнопки |
--padding-start | Отступ слева, если направление слева направо, и отступ справа, если направление кнопки справа налево слоты, доступные для этого компонента.  |