Текстовое поле
Элемент управления TextBox позволяет пользователю вводить текст в приложение. Обычно он используется для записи одной строки текста. Но элемент можно настроить и для записи нескольких строк. Текст отображается на экране в простом унифицированном формате обычного текста.
Элемент TextBox имеет несколько компонентов, которые могут упростить ввод текста. В этом элементе работает привычное встроенное контекстное меню с поддержкой копирования и вставки текста. Кнопка «Очистить все» позволяет пользователю быстро удалить весь введенный текст. В нем также есть встроенные функции проверки орфографии, которые включены по умолчанию.
Выбор правильного элемента управления
Используйте элемент управления TextBox, чтобы пользователь мог вводить и редактировать неформатированный текст, в частности, в форме. С помощью свойства Text можно получить и задать текст в элементе управления TextBox.
Вы можете сделать элемент TextBox предназначенным только для чтения. Но это должно быть временным, условным состоянием. Если текст не редактируется, попробуйте использовать элемент TextBlock.
Элемент управления PasswordBox можно использовать для сбора паролей или других конфиденциальных данных, например номеров карт социального страхования. Поле ввода пароля внешне похоже на поле текстового ввода с той разницей, что в нем вместо вводимого текста отображаются маркеры.
Используйте элемент управления AutoSuggestBox, чтобы позволить пользователю искать термины или показать пользователю список рекомендаций для выбора во время ввода.
Элемент RichEditBox служит для отображения и правки текстовых файлов.
Дополнительные сведения можно найти в статье об элементах управления текстом.
Рекомендации
- Используйте метку или подстановочный текст, если назначение текстового поля не очевидно. Метка отображается независимо от того, указано ли значение в поле ввода. Подстановочный текст отображается внутри поля ввода текста и пропадает после ввода значения.
- Задайте для текстового поля достаточную ширину для всех его возможных значений. Длина слов различается в зависимости от языка. Поэтому если вы собираетесь выводить свое приложение на международный уровень, следует учитывать особенности локализации.
- Поле текстового ввода обычно состоит из одной строки ( TextWrap = «NoWrap» ). Если пользователям придется вводить или изменять длинную строку, используйте многострочное текстовое поле ( TextWrap = «Wrap» ).
- Обычно текстовое поле используется для ввода редактируемого текста. Но можно сделать текстовое поле доступным только для чтения, чтобы его содержимое можно было читать, выделять и копировать, но не изменять.
- Если нужно избежать заполнения представления ненужными данными, сделайте так, чтобы набор полей текстового ввода появлялся только после установки управляющего флажка. Состояние включения поля текстового ввода также можно привязать к элементу управления, например к флажку.
- Подумайте о том, как должно вести себя поле текстового ввода, содержащее значение, когда его выбирает пользователь. Поведение по умолчанию подходит для редактирования значений, но не для замены. Точка вставки помещается между словами, и ничего не выделяется. Если замена является наиболее распространенным вариантом использования для этого текстового поля, то можно настроить выделение всего текста в поле при получении фокуса элементом управления. Вводимый с клавиатуры текст заменит выделенный текст.
Поля ввода из одной строки
- Используйте несколько однострочных текстовых полей для сбора небольших фрагментов текстовой информации. Если текстовые поля связаны между собой, сгруппируйте их.
- Делайте однострочные текстовые поля немного шире предполагаемого текста. Если элемент управления получится слишком широким, разделите его на два элемента. Например, можно разделить однострочное поле адреса на «Адрес, строка 1» и «Адрес, строка 2».
- Задайте максимальную длину вводимого текста в символах. Если базовый источник данных не позволяет вводить длинные строки текста, ограничьте ввод и сообщите пользователю об ограничении с помощью всплывающего окна.
- Чтобы пользователи могли вводить маленькие фрагменты текста, используйте однострочные элементы управления. В следующем примере показано текстовое поле для записи ответа на вопрос безопасности. Так как предполагается краткий ответ, то здесь вполне подходит поле, состоящее из одной строки.
- Для ввода данных особого формата используйте набор коротких однострочных элементов управления фиксированного размера.
- Для ввода или правки текста используйте однострочный элемент управления неограниченного размера в сочетании с кнопкой, нажав на которую, пользователь сможет выбрать допустимое значение.
Элементы управления для ввода многострочного текста
- При создании текстового поля в формате RTF следует предусмотреть кнопки стиля и реализовать их действия.
- Используйте шрифт, соответствующий стилю вашего приложения.
- Высота текстового элемента управления должна быть достаточной для ввода типичных записей.
- При записи больших объемов текста с ограничением количества символов или слов используйте простое текстовое поле. Предоставьте динамический счетчик, показывающий пользователю, сколько символов или слов у него осталось до достижения максимального ограничения. Счетчик придется создать самостоятельно. Разместите его под текстовым полем и обеспечьте динамическое обновление при вводе пользователем символов или слов.
- При вводе пользователем текста элементы управления не должны увеличиваться по высоте.
- Не используйте поле для многострочного текста там, где требуется ввести всего одну строку.
- Не используйте поле с форматом там, где достаточно элемента управления обычного текста.
UWP и WinUI 2
Сведения и примеры в этой статье оптимизированы для приложений, использующих Windows App SDK и WinUI 3, но обычно применимы к приложениям UWP, использующим WinUI 2. Сведения и примеры для конкретной платформы см. в справочнике по API UWP.
Этот раздел содержит сведения, необходимые для использования элемента управления в приложении UWP или WinUI 2.
API для этого элемента управления существуют в пространстве имен Windows.UI.Xaml.Controls .
- API UWP:класс TextBox, свойство Text
- Откройте приложение «Коллекция WinUI 2» и просмотрите TextBox в действии. Приложения из коллекции WinUI 2 включают интерактивные примеры большинства элементов управления, возможностей и функций WinUI 2. Получите приложение из Microsoft Store или получите исходный код в GitHub.
Мы рекомендуем использовать последнюю версию WinUI 2 , чтобы получить самые актуальные стили и шаблоны для всех элементов управления. WinUI 2.2 или более поздней версии включает новый шаблон для этого элемента управления, использующий скругленные углы. Дополнительные сведения см. в разделе о радиусе угла.
Создание текстового поля
- Важные API:класс TextBox, свойство Text
Приложение коллекции WinUI 3 содержит интерактивные примеры большинства элементов управления, функций и функций WinUI 3. Получение приложения из Microsoft Store или получение исходного кода на GitHub
Вот код XAML для простого текстового поля с заголовком и замещающим текстом.
TextBox textBox = new TextBox(); textBox.Width = 300; textBox.Header = "Notes"; textBox.PlaceholderText = "Type your notes here"; // Add the TextBox to the visual tree. rootGrid.Children.Add(textBox); Ниже показано текстовое поле, полученное в результате выполнения этого фрагмента кода XAML.
Использование текстового поля для ввода данных в форму
Текстовое поле часто используется, чтобы принять ввод данных в форму и получить полную текстовую строку из текстового поля с помощью свойства Text. Обычно доступ к свойству Text осуществляется в таких событиях, как нажатие кнопки «Отправить». Но вы можете использовать событие TextChanged или TextChanging, если нужно выполнить какие-либо действия сразу при изменении текста.
В этом примере показано, как получить и задать текущее содержимое текстового поля.
string sampleText = SampleTextBox.Text; . SampleTextBox.Text = "Sample text retrieved"; К текстовому полю можно добавить Header (или метку) и PlaceholderText (или водяной знак), чтобы пользователь понимал, для чего оно используется. Чтобы настроить оформление заголовка, задайте свойство HeaderTemplate вместо Header. Сведения о проектировании см. в руководстве по использованию меток.
Вы можете ограничить число вводимых пользователем символов, настроив свойство MaxLength. Но свойство MaxLength не ограничивает длину вставленного текста. Используйте событие Paste, чтобы изменить вставленный текст, если это важно для вашего приложения.
В текстовом поле есть кнопка «Очистить все» («X»), которая появляется при введении текста в поле. Когда пользователь нажимает кнопку «X», текст в поле удаляется. Это выглядит следующим образом:
Кнопка «Очистить все» отображается только для редактируемых однострочных текстовых полей, которые содержат текст и имеют фокус.
Кнопка «Очистить все» не отображается в любом из перечисленных ниже случаев.
В этом примере показано, как получить и задать текущее содержимое текстового поля.
string sampleText = SampleTextBox.Text; . SampleTextBox.Text = "Sample text retrieved"; Текст, предназначенный только для чтения
Текстовое поле можно сделать доступным только для чтения, присвоив свойству IsReadOnly значение true. Обычно вы переключаете это свойство в приложении, исходя из условий в приложении. Если вам нужен текст, который всегда предназначен только для чтения, воспользуйтесь элементом TextBlock.
Объект TextBox можно сделать доступным только для чтения, присвоив свойству IsReadOnly значение true. Например, у вас может быть элемент TextBox для пользовательских комментариев, который включается только при определенных условиях. Элемент TextBox можно сделать предназначенным только для чтения, пока не будут выполняться эти условия. Если вам нужно только отобразить текст, воспользуйтесь элементом TextBlock или RichTextBlock.
Текстовое поле, предназначенное только для чтения, ничем не отличается от текстового поля, предназначенного для чтения и записи. Поэтому пользователь может растеряться. Пользователь может выделять и копировать текст. IsEnabled
Включение многострочного ввода
Есть два свойства, которые позволяют управлять отображением текста на нескольких строках в текстовом поле. Обычно нужно указать оба эти свойства, чтобы сделать текстовое поле многострочным.
- Чтобы позволить текстовому полю разрешать и отображать символы новой строки или возврата, установите для свойства AcceptsReturn значение true.
- Чтобы включить обтекание текстом, установите для свойства TextWrapping значение Wrap. Теперь текст будет переноситься на новую строку, когда он достигает края текстового поля, независимо от символов разделителя строки.
TextBox и RichEditBox не поддерживают значение WrapWholeWords для свойств TextWrapping. Если попытаться указать WrapWholeWords в качестве значения для параметра TextBox.TextWrapping или RichEditBox.TextWrapping, отобразится исключение с сообщением о недействительном аргументе.
Многострочное текстовое поле будет постоянно увеличиваться по вертикали по мере ввода текста, если нет ограничений в свойстве Height, MaxHeight или родительском контейнере. Следите за тем, чтобы многострочное текстовое поле не выходило за пределы видимой зоны. Если это произошло, ограничьте его увеличение. Мы рекомендуем всегда указывать целесообразную высоту для многострочного текстового поля и не позволять ему увеличиваться в высоту во время ввода текста пользователем.
Прокрутка с помощью колесика прокрутки или пальца включается автоматически по мере необходимости. Но вертикальные полосы прокрутки не отображаются по умолчанию. Вы можете отобразить вертикальные полосы прокрутки, установив для параметра ScrollViewer.VerticalScrollBarVisibility значение Auto для встроенного класса ScrollViewer, как показано здесь.
TextBox textBox = new TextBox(); textBox.AcceptsReturn = true; textBox.TextWrapping = TextWrapping.Wrap; textBox.MaxHeight = 172; textBox.Width = 300; textBox.Header = "Description"; ScrollViewer.SetVerticalScrollBarVisibility(textBox, ScrollBarVisibility.Auto); Вот как выглядит текстовое поле после добавления текста.
Форматирование отображаемого текста
Используйте свойство TextAlignment для выравнивания текста в текстовом поле. Чтобы выровнять текстовое поле в рамках макета страницы, используйте свойства HorizontalAlignment и VerticalAlignment.
Хотя текстовое поле поддерживает только неформатированный текст, вы можете настроить отображение текста в текстовом поле в соответствии с фирменным оформлением. Можно задать стандартные свойства Control, например, FontFamily, FontSize, FontStyle, Background, Foreground и CharacterSpacing, чтобы изменить внешний вид текста. Эти свойства влияют только на то, как текстовое поле отображает текст локально. Например, если скопировать и вставить текст в элемент управления для форматированного текста, форматирование не будет применено.
В этом примере показано текстовое поле, предназначенное только для чтения, с несколькими настроенными свойствами для внешнего вида текста.
TextBox textBox = new TextBox(); textBox.Text = "Sample Text"; textBox.IsReadOnly = true; textBox.FontFamily = new FontFamily("Verdana"); textBox.FontSize = 24; textBox.FontWeight = Windows.UI.Text.FontWeights.Bold; textBox.FontStyle = Windows.UI.Text.FontStyle.Italic; textBox.CharacterSpacing = 200; textBox.Width = 300; textBox.Background = new SolidColorBrush(Windows.UI.Colors.Beige); textBox.Foreground = new SolidColorBrush(Windows.UI.Colors.Blue); // Add the TextBox to the visual tree. rootGrid.Children.Add(textBox); Созданное текстовое поле выглядит следующим образом:
Изменение контекстного меню
По умолчанию команды, отображаемые в контекстном меню текстового поля, зависят от состояния текстового поля. Например, если текстовое поле является редактируемым, отображаются следующие команды:
| Команда | Отображается, когда. |
|---|---|
| Копировать | . текст выделен. |
| Вырезать | . текст выделен. |
| Вставить | . буфер обмена содержит текст. |
| Выбрать все | . элемент TextBox содержит текст. |
| Отмена | . текст был изменен. |
Чтобы изменить команды, отображаемые в контекстном меню, обрабатывайте событие ContextMenuOpening. Пример см. в разделе Настройка CommandBarFlyout RichEditBox — добавление «Share» в коллекцию WinUI 2. Сведения о проектировании см. в руководстве по контекстным меню.
Выделение, копирование и вставка
Получить выбранный текст из текстового поля или задать его можно с помощью свойства SelectedText. Чтобы управлять выделением текста, используйте свойства SelectionStart и SelectionLength, а также методы Select и SelectAll. Событие SelectionChanged позволяет выполнять действия, пока пользователь выбирает или отменяет выбор текста. Вы можете изменить цвет, используемый для выделения выбранного текста, настроив свойство SelectionHighlightColor.
Элемент TextBox поддерживает копирование и вставку по умолчанию. Вы можете реализовать в приложении пользовательскую обработку события Paste в редактируемых текстовых элементах управления. Например, можно удалить разрывы строк из многострочного адреса при вставке в однострочное поле поиска. Или вы можете проверить длину вставленного текста и предупредить пользователя, если превышает максимальную длину текста, который можно сохранить в базе данных. Дополнительные сведения и примеры см. в статье о событии Paste.
Ниже приведен пример применяемых для этого свойств и методов. При выборе текста в первом текстовом поле выбранный текст отображается во втором текстовом поле, которое доступно только для чтения. Значения свойств SelectionLength и SelectionStart отображаются в двух текстовых блоках. Для этого используется событие SelectionChanged.
private void TextBox1_SelectionChanged(object sender, RoutedEventArgs e)
Вот результат выполнения этого кода.
Выбор подходящей клавиатуры для элемента управления текстом
Чтобы упростить пользователям ввод данных с помощью сенсорной клавиатуры или панели функционального ввода, можно настроить тип вводимых данных элемента управления для ввода текста таким образом, чтобы элемент управления соответствовал типу данных, которые должен вводить пользователь.
Сенсорная клавиатура позволяет вводить текст, если приложение выполняется на устройстве с сенсорным экраном. Сенсорная клавиатура появляется, когда пользователь касается редактируемого поля ввода, например, TextBox или RichEditBox. Пользователи смогут вводить данные в вашем приложении гораздо быстрее и с меньшими усилиями, если вы настроите тип вводимых данных элемента управления текстом в соответствии с типом вводимых данных. Тип вводимых данных предоставляет системе подсказку о типе текстового ввода, ожидаемого элементом управления. Благодаря этому система может отобразить специальную раскладку сенсорной клавиатуры в соответствии с используемым типом ввода.
Например, если текстовое поле используется только для ввода 4-значного PIN-кода, установите для свойства InputScope значение Number. Это сообщает системе, что нужно отобразить раскладку цифровой клавиатуры, благодаря чему пользователю проще вводить PIN-код.
Важно Входной область не приводит к проверке ввода и не запрещает пользователю вводить данные с помощью аппаратной клавиатуры или другого устройства ввода. Вы по-прежнему несете ответственность за проверку вводимых данных в коде.
Другие свойства, влияющие на сенсорную клавиатуру: IsSpellCheckEnabled, IsTextPredictionEnabled и PreventKeyboardDisplayOnProgrammaticFocus. (IsSpellCheckEnabled также влияет на элемент TextBox при использовании аппаратной клавиатуры.)
Дополнительные сведения и примеры см. в статье Использование типа вводимых данных для изменения сенсорной клавиатуры и в документации по свойствам.
Получение примера кода
- Пример коллекции WinUI — просмотр всех элементов управления XAML в интерактивном формате.
Похожие статьи
- Текстовые элементы управления
- Руководство по проверке орфографии
- Добавление поиска
- Руководство по текстовому вводу
- Класс TextBox
- Класс PasswordBox
- Свойство String.Length
Как сделать кнопку в HTML
Для создания кнопок используется тег . Внутри него размещается текст или изображение, которые будут отображаться на кнопке. Например:
Чтобы задать кнопке имя, тип или состояние, нужно добавить атрибуты: name , disabled и type .
Атрибут name задаёт имя кнопки. Может использоваться для идентификации элемента в скриптах.
Атрибут disabled блокирует доступ к кнопке.
Атрибут type определяет тип кнопки. Ему задают одно из трёх значений:
button — значение по умолчанию. Означает, что элемент — обычная кнопка. Она может добавлять товары в корзину или избранное, переключать слайдеры или закрывать всплывающие окна.
submit задаётся кнопкам для отправки формы. Когда пользователь нажимает на кнопку с таким типом, браузер отправляет данные формы на сервер.
reset добавляется кнопкам сброса формы. Когда пользователь нажимает на такую кнопку, браузер возвращает значения всех полей формы к изначальным.
А как же input?
Создать кнопку можно и с помощью тега , если указать ему тип button :
Это рабочий способ. О нём надо знать, ведь вы можете встретить его в проектах. Но самим так делать не стоит. У кнопок, созданных на инпуте, есть ограничения: сложно управлять размерами и положением изображений, а также нет псевдоэлементов. Поэтому оставьте для создания элементов формы, таких как текстовые поля, радиокнопки или чекбоксы. А кнопки верстайте с помощью .
Как сделать кнопку с иконкой
Посмотрим три способа создания кнопки с иконкой.
С помощью тега
Способ подойдёт для контентных изображений.
Так вы можете добавлять кнопки с эмодзи, лайками, дизлайками или чем-то ещё. Иконке нужно обязательно задавать размеры, чтобы кнопка зарезервировала место и не прыгала, когда загрузится иконка.
Добавить инлайн SVG в разметку
Способ подойдёт, если изображение меняет состояния, как здесь:
Код простой: пишем тег и добавляем в него код SVG-изображения.
Вставить фоном в CSS
Способ подойдёт, если иконка играет декоративную роль и не меняется при наведении или клике на кнопку. Например, в таких случаях:
Как добавить иконку в кнопку:
.icon-button < background-image: url("../images/icon.svg"); background-size: 90px 97px; >Какой способ выбрать — зависит от ваших задач и особенностей проекта. Вы также можете использовать разные методы в рамках одного проекта. Например, часть кнопок сделать со встроенным в разметку SVG, а часть — с фоновым изображением.
Материалы по теме
- Что такое ссылки и как их ставить
- Как сделать картинку ссылкой
- Шаблон HTML-формы
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Что такое Lazy Loading и как её включить на сайте
Ленивая загрузка (буквально, lazy loading) — это возможность отложить загрузку ненужного прямо сейчас медиаконтента.
Ленивая загрузка делает сайт быстрее и экономит трафик, если у пользователя мобильный интернет с ограничениями.
- 22 ноября 2023
Знакомство с HTML
Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.
HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.
- 1 ноября 2023
Специальные символы в HTML
HTML использует особенные комбинации символов, чтобы корректно отображать определенные знаки на веб-страницах. Например, вместо простого знака «меньше» мы видим комбинацию <. В этой статье представлен список таких символов. Это небольшой справочник для тех, кто хочет быстро найти нужный код.
- 23 октября 2023
Простое диалоговое окно на HTML
Вот короткое демо:
- 18 октября 2023
Зачем нужен метатег viewport
Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport .
Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport , который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.
Важно, чтобы сайты классно выглядели не только на компьютерах, но и на маленьких экранах смартфона. Если не использовать viewport , то сайт может выглядеть как уменьшенная версия десктопного сайта на мобильном экране, что делает его трудночитаемым и неудобным для использования. Конечно, нужно ещё много всего сделать для адаптивности, но viewport тоже нужен.
- 18 сентября 2023
Атрибут class в HTML на примерах
Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.
Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.
- 14 сентября 2023
В чём отличия цитат blockquote, cite и q
В HTML есть разные теги для цитирования и указания источников. Основные из них: , и . Давайте разберёмся в их различиях.
- 12 сентября 2023
Осмысленный alt-текст: 6 правил
Альтернативный текст — это описание изображения словами. Это описание должно помогать людям, которые читают или слышат это описание, иначе оно не нужно и лучше вообще его не указывать.
Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.
- 31 июля 2023
Растровая и векторная графика
Давайте попробуем разобраться, в чём отличие растровой графики от векторной.
- 13 июня 2023
Как понять, что перед вами заголовок
Заголовки используются для организации и структурирования содержимого на сайте. В HTML существует шесть уровней заголовков, обозначаемых тегами от до . Каждый уровень заголовка имеет свой семантический вес, где имеет наибольший вес, а — наименьший.
Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком.
При вёрстке сайта важно соблюдать семантику, чтобы все теги использовались корректно и ресурс работал без ошибок. Если напутать уровни заголовков, то структура страницы будет не семантичной, а скринридеры неправильно прочтут сайт.
В статье разберёмся, как верно определять заголовки по макету, какие из них лучше делать скрытыми и почему.
- 8 июня 2023
Всё, что нужно знать о call to action (СТА) в e-commerce проектах
Качество реализации призывов к действию и СТА-кнопок в интернет-магазине имеет огромное значение: если пользователь чего-то не поймет и не нажмет на кнопку, продажа не состоится. Разберемся, как создавать эффективные call to action с точки зрения текста и дизайна, где их размещать и как усиливать. Рассмотрим примеры СТА и способы анализа их эффективности.
Содержание
- Что такое СТА (Call To Action)
- Значение Call To Action
- Где может использоваться СТА в e-commerce проекте
- Как создавать эффективные СТА
- Как усилить СТА
- Как проанализировать влияние СТА-кнопки на конверсию
- Что запомнить и применить в работе
Что такое СТА (Call To Action)
CTA — это призыв совершить действие, который оформляется как тестовая ссылка, кнопка или баннер (картинка). В интернет-магазинах чаще используются СТА-кнопки — самый эффективный вариант, повышающий вероятность выполнения целевого действия. На кнопке содержится надпись, поясняющая, что будет после нажатия. Так пользователь понимает, какие шаги нужно предпринять на каждом этапе воронки сайта. В статье сосредоточимся на кнопках.
Ссылки в основном применяют для внутренней перелинковки — они направляют пользователя по определенному маршруту. Картинки используют на главной странице и в рассылке для привлечения внимания.
Значение Call To Action
Цель call to action — заставить посетителя выполнить целевое действие — сделать покупку, подписаться на рассылку и так далее. Если пользователь не поймет, чего от него хотят, все старания по подготовке и продумыванию контента или функционала будут напрасными. По сути, нажатие на СТА-кнопку — это результат, ради которого разрабатывали контент и функционал.
В попытках повысить конверсию часто тестируют все, что связано с СТА — текст, расположение и дизайн кнопки, потому что простые изменения могут привести к существенным улучшениям.
Грамотно реализованный СТА помогает:
- привлечь внимание к ценностному предложению;
- оптимизировать конверсию, увеличить продажи и повысить ARPU;
- нарастить базу подписчиков в рассылке, социальных сетях;
- увеличить отдачу от экспертного контента с упоминанием продукции;
- снизить показатель отказов и процент брошенных корзин.
Где может использоваться СТА в e-commerce проекте
Кнопки призыва к действию на сайте встречаются:
- в карточке товара,
- в корзине,
- на главной (баннеры и формы подписки),
- на странице категории,
- на сервисных страницах,
- в блоге,
- на всплывающих окнах.
Кнопки call to action вне сайта могут использоваться:
- в соцсетях,
- в письмах рассылки,
- на лендингах (акций и отдельных товаров).
Как создавать эффективные СТА
Чтобы СТА-кнопки привлекали внимание, мало сделать их крупными и яркими. Важно понимать психологию покупателя в целом и особенности аудитории в частности, чтобы и размещение, и текст, и дизайн кнопки отвечали потребностям покупателей. Главное правило: упрощайте пользователям жизнь.
Размещение кнопки призыва к действию
Пользователь всегда должен видеть CTA, поэтому его размещают на видном месте — на первом экране, до «линии сгиба». Если страница длинная, кнопку дублируют через каждые 2-3 экрана. Также можно закреплять область экрана с кнопкой, чтобы СТА постоянно был на виду.
Крайне важно размещать СТА-элементы в привычных местах, там где пользователи ожидают их увидеть. Например, в карточках товаров фото обычно располагают слева, а кнопку — справа, возле или над кратким описанием товара.
Расположение СТА-кнопки на ozon.ru
Кнопка не должна перекрываться во время работы пользователя с элементами сайта.
Если вы размещаете сall to action на поп-апе, предлагайте покупателям что-то ценное и в подходящее вовремя, чтобы снизить градус раздражения.
Не выводите поп-ап сразу после входа посетителя на сайт. Привяжите к окну поведенческий триггер. Например, если покупатель долго изучает товары, но не делает покупку, подтолкните к ней с помощью СТА с выгодой. Или выведите подобное окно, если отследили намерение пользователя уйти с сайта.
Пример всплывающего окна с привлекательным СТА
Дизайн кнопки призыва к действию
CTA-кнопка должна выделяться на фоне контента, не нарушая при этом дизайн-концепцию. Выберите несколько цветов, которые соответствуют этому правилу, и определите лучший вариант с помощью A/B-тестирования. Цвет шрифта на кнопке тоже должен быть контрастным, а сам шрифт — таким, который уже используется на странице.
Размер кнопки имеет значение не только потому, что большая кнопка заметнее — по ней нужно легко попадать. Это особенно актуально для покупок с мобильных устройств. Вне зависимости от размера экрана, оптимальная высота кнопки — от 42 до 72 пикселей (11-19 мм), идеально — 60 пикселей (16 мм). А еще на большой кнопке легче уместить развернутый призыв к действию. Если кликать или тапать нужно на иконку, область касания должна быть шире, чем визуальные границы элемента.
Чтобы пользователь понимал статус кнопки, ее состояние должно меняться. Для этого применяют разные инструменты — изменение цвета, эффект нажатия, подсказки. Какие состояния должны быть:
- с элементом не взаимодействовали,
- элемент выделен,
- на элемент навели курсор,
- на кнопку нажали,
- элемент неактивен.
Button (Кнопка)
Кнопка — один из самых распространенных элементов управления в программировании. Наследуется от TextView и является базовым классом для класса СompoundButton. От класса CompoundButton в свою очередь наследуются такие элементы как CheckBox, ToggleButton и RadioButton. В Android для кнопки используется класс android.widget.Button. На кнопке располагается текст и на кнопку нужно нажать, чтобы получить результат. Альтернативой ей может служить компонент ImageButton (android.widget.ImageButton), у которого вместо текста используется изображение.
В студии кнопка представлена компонентом Button в разделе Widgets. Управлять размером шрифта, цветом текста и другими свойствами можно через атрибут textAppearance, который задействует системные стили. Выпадающий список данного свойства содержит огромный перечень вариантов. Также вы можете вручную задать конкретные индивидуальные настройки через отдельные свойства.
Если вы растягиваете кнопку по всей ширине экрана (android:layout_width=»match_parent»), то дополнительно рекомендую использовать атрибут android:layout_margin (или родственные ему layout_marginRight и layout_marginLeft) для создания отступов от краев экрана (веб-мастера знакомы с этими терминами).
Так как кнопка является наследником TextView, то использует многие знакомые атрибуты: textColor, textSize и др.
Три способа обработки событий нажатий на кнопку
Если вы разместили на экране кнопку и будете нажимать на неё, то ничего не произойдёт. Необходимо написать код, который будет выполняться при нажатии. Существует несколько способов обработки нажатий на кнопку.
Первый способ — атрибут onClick
Относительно новый способ, специально разработанный для Android — использовать атрибут onClick (на панели свойств отображается как On Click):
android:onClick="onMyButtonClick"
Имя для события можно выбрать произвольное, но лучше не выпендриваться. Далее нужно прописать в классе активности придуманное вами имя метода, который будет обрабатывать нажатие. Метод должен быть открытым (public) и с одним параметром, использующим объект View. Вам нужно выучить пять слов для создания метода, а сам метод поместить в класс (если вы ещё путаетесь в структуре Java-кода, то вставьте метод перед последней фигурной скобкой):
public void onMyButtonClick(View view) < // выводим сообщение Toast.makeText(this, "Зачем вы нажали?", Toast.LENGTH_SHORT).show(); >
Когда пользователь нажимает на кнопку, то вызывается метод onMyButtonClick(), который в свою очередь генерирует всплывающее сообщение.
Обратите внимание, что при подобном подходе вам не придётся даже объявлять кнопку через конструкцию (Button)findViewById(R.id.button1), так как Android сама поймёт, что к чему. Данный способ применим не только к кнопке, но и к другим элементам и позволяет сократить количество строк кода.
Данный способ не будет работать в фрагментах. Кнопка должна быть частью активности, а не фрагмента.
Второй способ — метод setOnClickListener()
Более традиционный способ в Java — через метод setOnClickListener(), который прослушивает нажатия на кнопку. Так как для начинающего программиста код может показаться сложным, то рекомендуется использовать подсказки студии. Вот как это будет выглядеть. Предположим, у вас на экране уже есть кнопка button. В коде вы объявляете её обычным способом:
Button button = (Button) findViewById(R.id.button);
Следующий шаг — написание метода для нажатия. Напечатайте имя элемента и поставьте точку button. — среда разработки покажет вам список доступных выражений для продолжения кода. Вы можете вручную просмотреть и выбрать нужный вариант, а можно продолжать набирать символы, чтобы ускорить процесс. Так как с нажатиями кнопок вам часто придётся работать, то запомните название его метода (хотя бы первые несколько символов) — набрав четыре символа (seto), вы увидите один оставшийся вариант, дальше можно сразу нажать клавишу Enter, не набирая оставшиеся символы. У вас появится строка такого вида:
button.setOnClickListener()
Курсор будет находиться внутри скобок и появится подсказка OnClickListener l. Начинайте набирать new OnClickListener. Здесь также не обязательно набирать имя полностью. Набрав слово Oncl, вы увидете нужный вариант и снова нажимайте Enter. В результате вы получите готовую заготовку для обработки нажатия кнопки:
button.setOnClickListener(new View.OnClickListener() < @Override public void onClick(View v) < >>);
Теперь у вас есть рабочая заготовка и сразу внутри фигурных скобок метода onClick() вы можете писать свой код. Рекомендую потренироваться и набить руку в создании заготовки. Это не так сложно, и с практикой навык закрепится автоматически.
Как вариант, можно вынести код для OnClickListener в отдельное место, это удобно, когда кнопок на экране несколько и такой подход позволит упорядочить код. Удалите предыдущий пример и начните писать код заново. Принцип такой же, немного меняется порядок. В предыдущем примере мы сразу прописали в методе setOnClickListener слушателя new OnClickListener. с методом onClick(). Можно сначала отдельно объявить отдельную переменную myButtonClickListener:
OnClickListener myButtonClickListener = new OnClickListener() < @Override public void onClick(View v) < >>;
Во время набора активно используйте подсказки через Ctrl+Space. Набрали несколько символов у первого слова и нажимайте эту комбинацию, набрали после слова new несколько символов и снова нажимайте указанную комбинацию — заготовка будет создана за несколько секунд, а вы избежите возможных опечаток.
У нас есть готовая переменная, и теперь, когда вы будете набирать код button.setOnClickListener, то вместо new OnClickListener впишите готовую переменную.
Для новичка описание может показаться сумбурным и не понятным, но лучше самостоятельно проделать эти операции и понять механизм.
Третий способ — интерфейс OnClickListener
Третий способ является родственным второму способу и также является традиционным для Java. Кнопка присваивает себе обработчика с помощью метода setOnClickListener (View.OnClickListener l), т.е. подойдет любой объект с интерфейсом View.OnClickListener. Мы можем указать, что наш класс Activity будет использовать интерфейс View.OnClickListener.
Опять стираем код от предыдущего примера. Далее после слов extends Activity дописываем слова implements OnClickListener. При появлении подсказки не ошибитесь. Обычно первым идёт интерфейс для диалогов, а вторым нужный нам View.OnClickListener.
Название вашего класса будет подчёркнуто волнистой красной чертой, щёлкните слово public и дождитесь появления красной лампочки, выберите вариант Implement methods. Появится диалоговое окно с выделенным методом onClick. Выбираем его и в коде появится заготовка для нажатия кнопки.
@Override public void onClick(View v)
Метод будет реализован не в отдельном объекте-обработчике, а в Activity, который и будет выступать обработчиком. В методе onCreate() присвоим обработчик кнопке. Это будет объект this, т.е. текущий объект нашей активности.
button.setOnClickListener(this);
На первых порах такой способ также покажется вам сложным и непонятным. Со временем и опытом понимание обязательно придёт.
Лично я рекомендую вам использовать первый способ, как самый простой и понятный. Использование второго и третьего способа дадут вам представление, как писать обработчики для других событий, так как кнопка может иметь и другие события. Например, кроме обычного нажатия существует долгое нажатие на кнопку (long click). Один из таких примеров с методом касания я привёл в конце этой статьи.
О том, как обрабатывать щелчки кнопки я написал отдельную статью Щелчок кнопки/Счетчик ворон. Также кнопки часто будут встречаться во многих примерах на сайте. Про обработку длительный нажатий можно прочитать в статье, посвященной ImageButton.
Плодитесь и размножайтесь — это про кошек, а не про кнопки
Когда у вас одна кнопка в окне, то у вас будет один метод, две кнопки — два метода и так далее. Если у вас несколько кнопок, то не обязательно для каждой прописывать свой метод, можно обойтись и одним, а уже в самом методе разделять код по идентификатору кнопки. Если вы посмотрите на код в предыдущих примерах, то увидите, что в методе присутствует параметр View, который и позволяет определить, для какой кнопки предназначен кусок кода:
public void onMyButtonClick(View view) < switch(view.getId()) < case R.id.button1: // идентификатор "@+id/button1" showAlertDialog(); break; . >
Предположим, у вас есть три кнопки:
import android.view.View.OnClickListener; public class ButtonDemoActivity extends Activity implements OnClickListener. final Button button1 = (Button)findViewById(R.id.button1); final Button button2 = (Button)findViewById(R.id.button2); final Button button3 = (Button)findViewById(R.id.button3); // устанавливаем один обработчик для всех кнопок button1.setOnClickListener(this); button2.setOnClickListener(this); button3.setOnClickListener(this); // анализируем, какая кнопка была нажата. Всего один метод для всех кнопок @Override public void onClick(View v) < switch (v.getId()) < case R.id.button1: editText.setText("Нажата кнопка Button1"); break; case R.id.button2: editText.setText("Нажата кнопка Button2"); break; case R.id.button3: editText.setText("Нажата кнопка Button3"); break; >>
Как видите, мы сократили количество кода. Теперь у нас один обработчик onClick(), в котором прописаны действия для трёх кнопок.
Сделать кнопку недоступной
Иногда нужно сделать кнопку недоступной и активировать её при определённых условиях. Через XML нельзя сделать кнопку недоступной (нет подходящего атрибута). Это можно сделать программно через метод setEnabled():
button.setEnabled(false);
Как альтернативу можете рассмотреть атрибут android:clickable, который позволит кнопке не реагировать на касания, но при этом вид кнопки останется обычным.
Сделать кнопку плоской
Стандартная кнопка на экране выглядит выпуклой. Но в некоторых случаях желательно использовать плоский интерфейс. Раньше для этих целей можно было использовать TextView с обработкой щелчка. Но теперь рекомендуют использовать специальный стиль borderlessButtonStyle:
Кнопка сохранит своё привычное поведение, будет менять свой цвет при нажатии и т.д.
С появлением Material Design добавились другие стили, например, style=»@style/Widget.AppCompat.Button.Borderless», который является предпочтительным вариантом. Попробуйте также style=»@style/Widget.AppCompat.Button.Borderless.Colored»
Коснись меня нежно
Если вы внимательно понаблюдаете за поведением кнопки, то увидите, что код срабатывает в тот момент, когда вы отпускаете свою лапу, извините, палец с кнопки. Для обычных приложений это вполне нормально, а для игр на скорость такой подход может оказаться слишком медленным. В подобных случаях лучше обрабатывать ситуацию не с нажатием кнопки, а с его касанием. В Android есть соответствующий слушатель OnTouchListener():
Button button = (Button) findViewById(R.id.button); button.setOnTouchListener(new OnTouchListener() < @Override public boolean onTouch(View v, MotionEvent event) < if (event.getAction() == MotionEvent.ACTION_DOWN) < Toast.makeText(getApplicationContext(), "Молодой человек, не прикасайтесь ко мне!", Toast.LENGTH_SHORT).show(); >return false; > >);
У метода onTouch() есть параметр MotionEvent, позволяющий более тонко определять касания экрана. Если произойдет событие, когда пользователь коснулся экрана, то ему будет соответствовать константа ACTION_DOWN. Соответственно, если пользователь уберёт палец, то нужно использовать константу ACTION_UP. Таким образом, можете расценивать щелчок кнопки как комбинацию двух событий — касания и отпускания.
К сожалению, на сегодняшний день в Android нет метода Погладить. Коты недовольны.
Получить текст с кнопки
Навеяно вопросом с форума. Задача — получить текст кнопки в методе onClick(). У метода есть параметр типа View, у которого нет метода getText(). Для этого нужно привести тип к типу Button.
public void onClick(View view)
Если у вас несколько кнопок привязаны к методу onClick(), то щелчок покажет текст нажатой кнопки.
Дополнительное чтение
SwipeButton — кнопка с поддержкой свайпа