Добавить элементы в письмо | Creatio Academy
Элемент Картинка
Элемент Картинка (Рис. 1) используется для добавления в шаблон произвольных изображений. Он состоит из двух частей: непосредственно изображения и графического контейнера.
Рис. 1 — Добавление изображения
Панель настройки картинки
В этой области можно просмотреть и изменить настройки стиля изображения.
Рис. 2 — Панель настройки картинки
Параметр | Описание |
|---|---|
Навигационная цепочка (1) | Воспользуйтесь навигационной цепочкой для перемещения между настройками вложенных элементов шаблона. |
Настройки картинки | Чтобы добавить картинку в шаблон, в поле загрузите изображение или введите его URL-адрес. На заметку. Элемент Картинка поддерживает URI данных. Вы можете вставить изображение в кодировке base64 вместо URL. Ссылка — если необходимо, чтобы по щелчку на изображение пользователь переходил на определенную страницу, укажите URL-адрес нужной страницы. Подсказка — краткая информация об изображении, которая будет отображаться при наведении курсора на картинку. На заметку. Подсказки обычно используются для добавления в шаблон неочевидной информации о картинке. Альтернативный текст — послание, которое мотивирует получателя загрузить графические элементы в письмо. В некоторых почтовых клиентах может быть применена настройка, которая по умолчанию отключает изображения во входящих письмах. Заполните поле Альтернативный текст описанием изображения, чтобы получатели увидели его вместо пиктограммы, заменяющей отсутствующее изображение. |
Размер, px | Укажите ширину и высоту картинки. Загруженная картинка масштабируется автоматически, поля Ширина и Высота заполняются значением “Авто”. Автоматическое масштабирование картинки выполняется по размеру графического контейнера, а не по исходному размеру изображения, поэтому картинка может отображаться деформированной. Укажите хотя бы один из параметров, чтобы при масштабировании соблюдалось соотношение сторон, как в исходном изображении. Укажите оба параметра, чтобы принудительно изменить размер изображения до указанной высоты и ширины без учета соотношения. |
Выравнивание | Настройте горизонтальное выравнивание для картинки (по левому краю , по центру или по правому краю ). На заметку. Выравнивание может не дать видимого эффекта в зависимости от соотношения параметров изображения и контейнера. |
Отступы, px | Укажите расстояние (в пикселях) между картинкой и ее границами. |
Скругление углов | Укажите радиус скругления углов картинки. Если вы хотите сохранить острые углы, оставьте этот параметр незаполненным. Эта настройка определяет радиус скругления для всех четырех углов картинки. На заметку. Используйте элемент HTML и код со встроенными стилями CSS, чтобы настроить эллиптические углы и другие специальные эффекты. |
Фон | Укажите цвет фона графического контейнера. По умолчанию использование фона для новых элементов неактивно. Чтобы активировать настройку фона, установите признак Чтобы отключить использование фона для текущей картинки, этот признак необходимо снять. Чтобы настроить однотонный фон, нажмите и в открывшемся окне выберите необходимый цвет. На заметку. Фон заполняет полностью весь графический контейнер. |
Границы | Здесь выполняется настройка границ картинки. По умолчанию использование визуальных границ для новых изображений неактивно. Чтобы активировать настройку границ, установите признак (3). Чтобы указать цвет границ, нажмите и в открывшемся окне выберите необходимый цвет. В поле укажите ширину границы. Для скрытой границы установите стиль “Hidden”. В меню (4) выберите стиль границ. По умолчанию при активации использования границ устанавливается стиль “Solid”. Для выбора в списке доступны следующие стили:
На заметку. Граница определена, но не отображается. В этом стиле ширина границы фактически равна “0”.
Определите, какие границы использовать, при помощи признаков Верхний, Нижний, Слева и Справа. |
Например, если для картинки настроены отступы больше нуля, то вокруг изображения будет виден цветной фон. Если в изображении есть прозрачные участки, то под ними также будет виден цветной фон.
Элемент Кнопка
Элемент Кнопка (Рис. 3) предназначен для визуализации ссылок призыва к действию. Также элементы Кнопка называются “призыв к действию” и по сути являются ссылками, представленными в виде кнопок.
Рис. 3 — Добавление кнопки в шаблон
Элемент контента Кнопка не тождественен HTML-элементу <button>.
Для добавления в шаблон HTML-элемента <button> воспользуйтесь блоком контента HTML.
Панель настройки кнопки
В этой области можно просмотреть и изменить настройки стиля кнопки.
Рис. 4 — Панель настройки кнопки
Параметр | Описание |
|---|---|
Навигационная цепочка (1) | Воспользуйтесь навигационной цепочкой для перемещения между настройками вложенных элементов шаблона. |
Ссылка для перехода | По URL-адресу, указанному в этом поле, будет выполнен переход при клике на кнопку. |
Шрифт | В этой группе настроек определяются свойства шрифта текста на кнопке. Набор шрифтов дизайнера шаблонов — укажите шрифт кнопки. Перечень шрифтов, доступных к использованию в письмах, настраивается в справочнике Набор шрифтов дизайнера шаблонов. Размер, px — укажите высоту шрифта в пикселях. Чтобы изменить цвет шрифта, нажмите и в открывшемся окне выберите необходимый цвет. Высота строки, px — укажите расстояние между строками текста и границами элемента. Максимально допустимая высота строки составляет 250 пикселей, а минимальная не может быть меньше высоты шрифта. Расстояние между символами, px — укажите расстояние между символами в надписи. |
Размер, px | Укажите ширину и высоту кнопки в пикселях. |
Выравнивание | Настройте для кнопки горизонтальное (по левому краю , по центру или по правому краю ) и вертикальное (по верхней границе , по центру или по нижней границе ) выравнивание для кнопки. На заметку. Применение к стандартной кнопке различных параметров выравнивания по вертикали, скорее всего, не даст видимого эффекта из-за недостаточной высоты элемента. |
Внешние отступы, px | Укажите расстояние, которое должно отделять кнопку от границ секции и/или соседних элементов контента. Это расстояние указываются отдельно для каждой из сторон кнопки. |
Отступы, px | Укажите расстояние (в пикселях) между текстом кнопки и ее границами. Отступы указываются отдельно для каждой из границ. |
Скругление углов | Укажите радиус скругления углов кнопки. Если вы хотите сохранить острые углы, оставьте этот параметр незаполненным. Эта настройка определяет радиус скругления для всех четырех углов кнопки. На заметку. Используйте элемент HTML и код со встроенными стилями CSS, чтобы настроить эллиптические углы и другие специальные эффекты. |
Фон | Укажите цвет фона кнопки. По умолчанию для кнопок активно использование фона. Чтобы отключить фон, снимите признак (2). Установите признак, чтобы применить все настройки фона кнопки. Чтобы настроить однотонный фон, нажмите и в открывшемся окне выберите необходимый цвет. |
Границы | Здесь выполняется настройка границ кнопки. По умолчанию использование визуальных границ для новых кнопок неактивно. Чтобы активировать настройку границ, установите признак (3). Чтобы указать цвет границ, нажмите и в открывшемся окне выберите необходимый цвет. В поле укажите ширину границы. Для скрытой границы установите стиль “Hidden”. В меню (4) выберите стиль границ. По умолчанию при активации использования границ устанавливается стиль “Solid”. Для выбора в списке доступны следующие стили:
На заметку. Граница определена, но не отображается. В этом стиле ширина границы фактически равна “0”.
Определите, какие границы использовать, при помощи признаков Верхний, Нижний, Слева и Справа. |
Элемент Текст
Элемент Текст (Рис. 5) используется для добавления текста сообщения в шаблон письма. У этого элемента, кроме панели настройки в правой части окна, есть также панель инструментов, которая открывается в рабочей области дизайнера при выделении элемента.
Рис. 5 — Добавление элемента Текст в шаблон письма
Панель настройки текста
Здесь выполняется настройка базового шрифта и стилей текста.
Рис. 6 — Панель настройки текста
Параметр | Описание |
|---|---|
Навигационная цепочка (1) | Воспользуйтесь навигационной цепочкой для перемещения между настройками вложенных элементов шаблона. |
Шрифт | В этой группе настроек определяются характеристики шрифта, которым будет написан ваш текст в письме. Набор шрифтов дизайнера шаблонов — укажите шрифт текста. Размер, px — укажите высоту шрифта в пикселях. Чтобы изменить цвет шрифта, нажмите и в открывшемся окне выберите необходимый цвет. Высота строки, px — укажите расстояние между строками текста и границами элемента. Максимально допустимая высота строки составляет 250 пикселей, а минимальная не может быть меньше высоты шрифта. Расстояние между символами, px — укажите расстояние между символами в надписи. |
Размер, px | Размер, px — укажите высоту шрифта в пикселях. |
Выравнивание | Настройте для текста горизонтальное выравнивание (по левой границе , по центру , по правой границе или растянуть по ширине ). |
Высота, px | Укажите высоту текстового контейнера (в пикселях). В этом поле указывается фиксированная высота текстового контейнера. Такой контейнер не будет адаптироваться под размер и количество текста. |
Отступы, px | Укажите расстояние (в пикселях) между текстом и границами контейнера. Отступы указываются отдельно для каждой из границ. |
Фон | Укажите цвет фона текстового контейнера. По умолчанию использование фона для новых элементов неактивно. Чтобы активировать настройку фона, установите признак (2). Чтобы отключить использование фона для текущего элемента, этот признак необходимо снять. Чтобы настроить однотонный фон, нажмите и в открывшемся окне выберите необходимый цвет. |
Перечень шрифтов, доступных к использованию в письмах, настраивается в справочнике Набор шрифтов дизайнера шаблонов.
Элемент Меню
Элемент Меню представляет собой навигационную панель, которая состоит из перечня ссылок (Рис. 7).
Для этого элемента можно настроить разное отображение для компьютеров и мобильных устройств.
Рис. 7 — Добавление меню в шаблон письма
Рис. 8 — Панель настройки меню
Параметр | Описание |
|---|---|
Навигационная цепочка (1) | Воспользуйтесь навигационной цепочкой для перемещения между настройками вложенных элементов шаблона. |
Конструктор меню | Добавляйте, удаляйте или перемещайте ссылки навигации. Для перехода к настройке пункта меню кликните по его названию в конструкторе. Для добавления нового пункта меню нажмите Добавить ссылку. Чтобы удалить ссылку, нажмите кнопку . Единственную ссылку в меню удалить нельзя. |
Выравнивание | Настройте выравнивание для ссылок в меню. |
Гамбургер меню | Установите признак, чтобы на мобильных устройствах меню трансформировалось в “гамбургер” — ссылки можно было отобразить или скрыть под иконкой-“гамбургером”. |
Выравнивание иконки | Настройте выравнивание для иконки-“гамбургера” (по левой границе , по центру или по правой границе ). Это поле отображается только в том случае, если установлен признак Гамбургер меню. |
Цвет иконки | Нажмите , чтобы изменить цвет иконки-“гамбургера”. Это поле отображается только в том случае, если установлен признак Гамбургер меню. |
Элемент Пункт меню
Элемент Пункт меню (Рис. 9) представляет собой ссылку, которая входит в родительскую навигационную панель, состоящую из навигационных ссылок.
Рис. 9 — Добавление пункта меню
Рис. 10 — Панель настройки пункта меню
Параметр | Описание |
|---|---|
Навигационная цепочка (1) | Воспользуйтесь навигационной цепочкой для перемещения между настройками вложенных элементов шаблона. |
Ссылка для перехода | Укажите URL-адрес для перехода. |
Шрифт | В этой группе настроек определяются характеристики шрифта, который будет использоваться для пункта меню. Набор шрифтов дизайнера шаблонов — укажите шрифт для пункта меню. Перечень шрифтов, доступных к использованию в письмах, настраивается в справочнике Набор шрифтов дизайнера шаблонов. Подробнее: Настроить шрифты в дизайнере контента. Размер, px — укажите высоту шрифта в пикселях. Чтобы изменить цвет шрифта, нажмите и в открывшемся окне выберите необходимый цвет. Высота строки, px — укажите расстояние между строками текста и границами элемента. Максимально допустимая высота строки составляет 250 пикселей, а минимальная не может быть меньше высоты шрифта. |
Отступы, px | Укажите расстояние (в пикселях) между текстом и границами контейнера. Отступы указываются отдельно для каждой из границ. |
Элемент [Разделитель]
Элемент Разделитель (Рис. 11) используется для размежевания соседних элементов горизонтальными линиями или полями.
Рис. 11 — Добавление разделителя в шаблон письма
На панели настройки вы можете задать высоту разделителя, а также указать цвет и толщину горизонтальной линии.
Рис. 12 — Панель настройки разделителя
Параметр | Описание |
|---|---|
Навигационная цепочка (1) | Воспользуйтесь навигационной цепочкой для перемещения между настройками вложенных элементов шаблона. |
Настройки разделителя | В этой группе настроек вы можете задать стиль, цвет и толщину горизонтальной линии разделителя. |
Отступы, px | Укажите расстояние (в пикселях) между линией разделителя и границами элемента. Отступы указываются отдельно для каждой из границ. |
Фон | Используйте эту группу настроек для того, чтобы настроить или удалить фон разделителя. |
Элемент [Отступ]
Элемент Отступ (Рис. 12) используется для разделения смежных элементов пустым пространством, по аналогии с прозрачной горизонтальной линией.
Рис. 12 — Добавление отступа в шаблон
Рис. 13 — Панель настройки отступа
Параметр | Описание |
|---|---|
Навигационная цепочка (1) | Воспользуйтесь навигационной цепочкой для перемещения между настройками вложенных элементов шаблона. |
Размер, px | Заполните поле Высота, чтобы определить размер отступа. |
Фон | Укажите цвет фона отступа. По умолчанию использование фона для новых элементов неактивно. Чтобы активировать настройку фона, установите признак (2). Чтобы отключить использование фона для текущего элемента, этот признак необходимо снять. Чтобы настроить однотонный фон, нажмите и в открывшемся окне выберите необходимый цвет. |
Об иконках —
Иконки экономят место и выглядят свежо. Иконки — это быстрый ответ на сложные вопросы:
- Как сделать красивее?
- Как нам это забрендировать?
- Как сделать веселее?
Мы любим иконки. Пока не начинаем в них путаться.
Иконки бывают разные: на продуктах, в архитектуре, в компьютерах, в списках, на кнопках, для веба и приложений, для iOS и Android.
Иконки на панелях инструментов, подписанные и неподписанные, стилизованные и стандартизованные, цветные и монохромные, в иконочных шрифтах, файлах PNG или SVG…
Есть много бесплатных и платных наборов иконок, векторных и растровых, плоских и объёмных, и если записывать правила работы с ними, потребуется тетрадка потолще. Чёртовых иконок так много, что Дьявол легко убедит вас в том, что они вытянут даже плохой дизайн.
Но будьте осторожны. Если «иконка» станет вашим ответом на любой вопрос, однажды Дон Норман постучится в вашу дверь, а когда откроете, пристально посмотрит вам в глаза и скажет:
«Непонятные иконки замусоривают интерфейс, хотя научное сообщество давно показало: люди запоминают значения лишь небольшого числа иконок. Вы можете вспомнить значение всех этих иконок? Я — нет».
Этими словами Дон Норман поучал своего бывшего работодателя — Apple. Примеры иконотоксиоза Apple встречаются в iTunes, Mail и панели управления iOS.
В твиттере айтюнсовыми иконками пугают как Бабой Ягой.
Вот отличный пример из Apple Mail для OS X: сколько из этих иконок вы опознаете без подписи?
Что мы видим на этом примере? Только то, что иконки экономят место и выглядят свежо. Назначение кнопок не вызывает вопросов только у дизайнера, разместившего иконки на этой панели. За иконкой может скрываться тысяча разных слов, и это главная проблема. Когда у слова — тысяча значений, только хорошее понимание контекста позволит избежать разночтений. Вот те же иконки, но с подписями:
Подписи объясняют иконки. С ними интерфейс становится удобнее. Из-за этого некоторые бессердечные люди утверждают, что «лучшая иконка — это текст». Логично, правильные подписи спасают от путаницы. Так почему бы нам не использовать только подписи без иконок?
Функционально «чисто текстовый» дизайн ясен как день (если информационные архитекторы справились со своей задачей), но что-то ломается, когда вы убираете изображения из интерфейса. Жизнь покидает его. Он перестаёт быть свежим и весёлым.
Это не волнует дизайн-позитивиста. Но волнует остальных людей. Мы проверили эту гипотезу, удалив иконки из iA Writer. Реакцией пользователей было решительное «Не надо!»
Может быть, лучше не выбирать между текстом и иконкой, а понять, когда использовать только иконки, когда только текст, а когда иконки с подписями. Давайте разберёмся…
Только иконки
Иконки — это картинки. На картинках легко показать обычные предметы. Подпись не нужна иконкам, на которых изображены легко узнаваемые объекты, представляющие знакомые понятия. Например, самолёты для аэропортов, человеческие фигуры для туалетов, корзины для мест, где лежат документы, которые мы скоро выбросим.
Материальные объекты изобразить легко, а необходимость показать на иконке действие или абстрактное понятие заставила помучиться многих дизайнеров. Проблема в том, что при взаимодействии человека с компьютером большинство иконок — это действия и абстракции.
Показать действие реально. Анимированная иконка отвлекает, лучше использовать метафору действия.
В контексте рабочего стола компьютера иконка принтера значит «Печатать», мусорная корзина — «Удалить», ножницы — «Вырезать». У каждого из этих объектов есть одно конкретное назначение, поэтому целевое действие понять легко.
Со сложными действиями и абстракциями так уже не выйдет. И нет надежды на то, что в ближайшее время что-то изменится. За 40 лет взаимодействия человека с компьютером мы не нашли универсальных символов для базовых функций вроде сохранения, копирования и вставки.
«Общая проблема пиктографических систем в том, что единственное их ограничение — количество предметов из окружающего мира, которые можно показать на изображении».
Голые иконки на функциональных элементах интерфейса ухудшают юзабилити. Лучший способ сообщить о функции — слово, а не картинка. Ещё лучше, если это глагол.
«Когда дело доходит до всегда несовершенного обмена мыслями между людьми, лучшее, что у нас, людей, для этого есть — это речь. Письменная речь придаёт мыслям долговечность и точность (мы редко исправляемся в устрой речи, а это предложение я исправил несколько раз)».
Визуально графические символы проще и привлекательнее плотных слов. Но чем ближе, тем больше сирены становятся похожи на монстров. Когда вы пытаетесь их прочесть и понять, они превращаются в загадочные знаки из незнакомого вам языка, хватают взаимодействие и откусывают ему голову. Голые иконки улучшают внешний вид интерфейса, снижая его понятность. Они затеняют понятные функции, маскируя их слоем тёмных символов.
«Иконка — это символ, одинаково непонятный на любом языке. Не важно, какие языки вы знаете, значению иконки вам придётся научиться. Люди не просто так придумали фонетические языки, где можно объединить несколько символов, чтобы создать любое слово. Многие дизайнеры уверяли меня использовать иконки в интерфейсе. Я спрашивал их, «это действительно лучший интерфейс, который можно придумать, или он сделан по привычке?» Дизайнеров просто застряли в этой парадигме и не замечают её упадка».
Иконки модно выглядят и круто решают проблемы с нехваткой места.
Конечно, не одна Apple виновна в злоупотреблении голыми иконками. Материальный дизайн Google отравлен фирменными символами. Вот для сравнения Gmail:
Что мы здесь видим? Иконки Gmail выглядят просто, но они заставляют задуматься о назначении кнопок. Если вы сосредоточитесь и немного сконцентрируетесь, сможете угадать. Через некоторое время вам будет помогать мышечная память, но и краткосрочная и долгосрочная память будет принимать их с таким же трудом. В почтовом приложении концентрацию и сосредоточенность следует направлять на понимание и написание текста, а не на расшифровку интерфейса.
Стоп! А разве Google не измеряет всё на свете? Они наверняка знают, что делают, так? Там работают учёные. Они выбрали подход с иконками без подписей, и они никогда не ошибаются. Значит, иконки — это правильно! Возможно, но то, что подходит Google или Facebook, может не подойти нам. Как будет сказано ниже, Google могли найти причину вне естественных наук. Как бы то ни было, Google предлагает и вариант с голым текстом.
Только текст
Изображения можно интерпретировать по-разному. В зависимости от контекста даже вездесущее увеличительное стекло читается и как «поиск», и как «увеличение». Значение слова тоже зависит от контекста, но читается оно всегда одинаково. Что если иконки заменить на текст? Логично, что такой интерфейс будет работать лучше иконочного. В настройках Gmail можно заменить иконочную панель на текстовую версию:
Что произошло? Смысл кнопок теперь понятен. Но интерфейс стал менее человечным, менее весёлым. Он напоминает рабочий инструмент, стал холоднее, и, на удивление, кажется более сложным. Как это возможно? Текстовый интерфейс объективно удобнее, но из-за эстетических нюансов он таким не воспринимаются.
Текст — это рациональный выбор. Правильно структурированные и названные функции — основа взаимодействия человека с компьютером.
Иконки — это эмоциональный выбор. Правильные иконки добавляют позитива. Эмоциональное воздействие не измерить, но оно не становится от этого менее реальным.
«Недостаточно создавать продукты, которые работают, которые понятны и просты в использовании. Надо создавать продукты, которые привносят восторг и возбуждение, радость и веселье, и конечно, красоту в человеческие жизни», — Дон Норман в книге «Дизайн привычных вещей».
Люди — и рациональные и эмоциональные создания: «Мозг не обрабатывает информацию, извлекает знания и сохраняет воспоминания. Если кратко: мозг — не компьютер». Если что-то по теме удобства иконок и доказано, так это то, что «Иконки с подписями работают лучше, чем чисто иконка или чисто текст».
Иконка с подписью
Иконка с подписью и эмоциональна и понятна. Иконки с подписями работают всегда. Если иконка непонятна, подпись объяснит. Так почему бы не использовать эту пару победителей?
Проблема в том, что это компромисс. Он снижает эмоциональный посыл иконок и простоту чистого текста. Он не экономит место и не украшает внешний вид. Он занимает больше места по вертикали и создаёт больше визуального шума, чем чисто иконки или чисто текст.
Эмоционально мы предпочитаем иконки. Рационально нам лучше заменить иконки на текст. В теории иконка с подписью — беспроигрышный вариант. На практике в дизайне нет серебряных пуль.
Беспроигрышных вариантов нет, но есть компромиссы получше и похуже. Мы работаем для людей. Люди чувствуют и думают. Хотя лучше не углубляться в релятивизм.
Теория и практика
Подобно любой технологии это помогает выстраивать интерфейсы на вершине рациональной, функциональной структуры. Дизайн — не естественная наука. Это практика, извлекающая выгоду из науки и измерений, но качество дизайна нельзя оценить только объективными измерениями. Пользовательское тестирование и аналитика не заменяют дизайнеров, но проверяют дизайнерские предположения. В продукте больше того, что может продумать дизайнер, а в дизайне больше того, что мы можем измерить. Это «больше» можно охватить только разговаривая с людьми, которые используют продукт.
Взаимодействие человека с компьютером строится на рациональном фундаменте.
Мы — живые существа, наше поведение нельзя просчитать, но с нами можно поговорить. Иконки, цвета, ритм, воздух, типографика и другие красивые вещи делают интерфейс приятнее и за счёт этого улучшают взаимодействие. Он выглядит не таким рациональным. Он выглядит человечным.
Простые правила
Не спешите добавлять иконки, если с дизайном что-то не так, если вам кажется, что он работает не так, как запланировано. Иконки не исправят плохую структуру сайта. Добавляйте их в самом конце. Не играйте с иконками во время работы над вайрфреймом. За одной картинкой может скрываться тысяча слов. Хорошая информационная архитектура помещает правильные слова в правильный контекст. Проработайте рациональную часть до перехода к эмоциональной.
Иконка обозначает некий раздел или функцию. Она представляет собой некое слово, которое доносит простой и понятный смысл. Смысл сообщения зависит от контекста. Даже самая прекрасная иконка будет бесполезна, если слово подобрано непонятное или не соответствующее контексту.
Прежде чем выбрать иконку, спросите себя: Какое слово она будет обозначать? Это правильное слово? Понятное? Оно будет работать в этом контексте? Иконка может скрывать много разных понятий. Слова в контексте не так пластичны. В отличие от иконок они подчинаются многим правилам.
Когда ваша структура готова и пора вступать в игру иконкам, радости и прочему, следуйте простому правилу: добавьте необходимый минимум иконок, но не меньше.
Относитесь к иконками с максимальным вниманием. Их улучшение может занять всё ваше время. Они должны быть узнаваемы сами по себе, должны чётко иллюстрировать понятие, которое представляют, и они должны работать в контексте с другими иконками и понятиями.
Иконки — это прилагательные и наречия в обычном тексте. Их удаление не превратит ваш текст в литературный шедевр. Удаляйте лишнее, ищите подходящее, заменяйте расплывчатые и вычурные формулировки на точные и лаконичные.
…
Эссе написано специалистами компании iA.
Делиться хорошо!
- Facebook34
2 642 783 Web Buttons Стоковые фотографии и изображения
Kiev, ukraine — 6 ноября 2021: logotype set of adobe products.
.PREMIUM
Web icon set vector design symbolPREMIUM
Web icon set vector design symbolPREMIUM
Gears sign simple значок на фоне. значок рабочих инструментов. eps 10PREMIUM
Веб-иконка set векторный дизайн symbolPREMIUM
Neumorphic ui ux черные элементы пользовательского интерфейса слайдеры для веб-сайтов, мобильного меню, навигации и приложений. черные веб-кнопки и ползунки пользовательского интерфейса. стиль неоморфизмPREMIUM
Набор иконок для веб-дизайна, векторный дизайн symbolPREMIUM
Набор иконок для веб-дизайна, векторный дизайн symbolPREMIUM
Приборная панель, отличный дизайн для любых целей сайта. бизнес-инфографический шаблон. векторная плоская иллюстрация. интерфейс панели управления большими данными, дизайн шаблона панели администратора пользователя uxPREMIUM
Набор веб-иконок векторный дизайн symbolPREMIUM
3d задать вопросительный знак. принять решение проблемы решения. психолог тренер сессия медицина баннер векторная иллюстрацияПРЕМИУМ
Азиатский мальчик в белой футболке стоит с пальцами, касаясь кнопок современных технологий.
для использования в образовании в цифровом мире онлайн. детей с образованием и технологиями.ПРЕМИУМ
Фэнтезийный игровой интерфейс, металлический поток, наложение рамки, шаблон рамки для потоковой передачи видео в реальном времени. ПРЕМИУМ
Технология поиска данных, поисковая оптимизация, человеческая рука использует мобильный телефон для поиска информации с помощью поисковой консоли на вашем веб-сайте. обои на стену. фотоальбом и концепция медиа-технологийPREMIUM
3d вопросительный знак. принять решение проблемы решения. психолог тренер сессия медицина баннер векторная иллюстрацияПРЕМИУМ
Набор трехмерных пуговиц с текстурой золотой фольги. векторная печать золотая элегантная блестящая металлическая векторная коллекцияPREMIUM
Абстрактная голубая светящаяся планета Земля в кнопке питанияPREMIUM
Творческая цифровая фотогалерея на синем фоне. фотоальбом и концепция медиатехнологийPREMIUM
Абстрактный бизнесмен стрелка вверх дверь открытый свет технологии фон Hitech коммуникация концепция инновации фон векторный дизайн.
PREMIUM
Социальная сеть фоновое изображениеPREMIUM
Креативная цифровая фотогалерея на синем фоне. фотоальбом и концепция медиатехнологийPREMIUM
Абстрактная скорость, молния, технология, фон, высокотехнологичная коммуникационная концепция, инновационный фон, векторный дизайнPREMIUM
Белые кнопки, хромированная рамка. 3d реалистичные элементы веб-стекла овальный прямоугольник квадратный круг хромированная белая кнопка, набор векторов интерфейсаPREMIUM
Hud футуристический круговой интерфейс. векторные графики визуальных данных, научно-фантастические веб-панели, технологии. инфографические элементы hud с элементами управления цифровой диаграммой или виртуальным дисплеем, цель targetPREMIUM
Бизнес, технологии, Интернет и концепция сети. молодой бизнесмен работает на виртуальном экране будущего и видит надпись: путешествие клиентаPREMIUM
Установите сложенную линию с маркером местоположения, местоположением земного шара и значком маршрута.
vectorPREMIUM
Кибербезопасность и защита информации или сети. веб-сервисы будущих кибертехнологий для бизнеса и интернет-проектаPREMIUM
Инновационные технологии image. смешанная техника. PREMIUM
Набор изолированных значков земного шара на карте мира. EPS векторПРЕМИУМ
Абстрактные маркеры с разным цветовым градиентом. абстрактные геометрические элементы дизайна, 3D-рендеринг. векторный набор маркеров пуль, элементы инфографического дизайна. ПРЕМИУМ
3D-кинотеатр. онлайн кинотеатр. еда и напитки. попкорн и кола. кнопка мультимедиа. кадр поиска мультимедиа. найти сеть. смотреть премьеру фильма. векторная реалистичная концепцияPREMIUM
Векторный набор красочных металлических градиентов.PREMIUM
Огромная коллекция иллюстраций логотипов популярных социальных сетей и мессенджеров. реалистичный редакционный набор в различных стилях на черном фоне. красочные квадратные кнопки с закругленными углами. веб-элемент. мобильные приложения. векторная иллюстрацияПРЕМИУМ
Ручной набор векторных значков со стрелками, клипарт со стрелками.
PREMIUM
Деревянные игровые кнопки, интерфейс меню из деревянных текстурированных досок с веревками и лозами. элементы графического дизайна пользовательского интерфейса или графического интерфейса. изолированные стрелки, полосы и клавиши для панели пользователя приложения, набор мультяшных 2d векторных иконокPREMIUM
Значок увеличительного стекла. символ поиска в плоском стиле, изолированные на белом фоне. простой инструмент масштабирования. абстрактный значок поиска линии в черном. векторная иллюстрация для графического дизайна, веб, пользовательского интерфейса, мобильного приложенияPREMIUM
Набор веб-кнопок разных цветов для разных целей, 3d-кнопки, векторная иллюстрация. ПРЕМИУМ
Набор векторных песочных часов в рвотных стилях, для веб-дизайна и Интернета в черном цвете. и спицы conceptPREMIUM
Золотая лента, переходящая в рамку из кругов на темном фоне.PREMIUM
Вектор значков поиска. поиск увеличительное стекло знак и символPREMIUM
Концептуальный баннер онлайн-видеоигр.
электронный спорт в интернете. компьютерные сетевые игры. развлекательная техника. геймпад завис рядом с голографическим интерфейсом и виртуальной картой мира. общение в веб-играх.ПРЕМИУМ
Иконка горных лыж на белом фонеPREMIUM
Бумажный самолетик отправить массажную учетную запись пользовательского интерфейса веб-кнопкиPREMIUM
Векторная иллюстрация набора золотых векторных значков золотые значки связи мобильный телефон конверт адрес электронной почты символ телефона на черном фоне с эффектом золотого блескаPREMIUM
Набор паровых волновых элементов пользовательского интерфейса и пользовательского интерфейса. ПК ретро игровая рамка. ностальгический стиль 70-х, 80-х, 90-хPREMIUM
Деревянные кнопки мультяшный интерфейс. игра пользовательского интерфейса, элементы графического интерфейса с деревянной текстурой. параметры меню игрового интерфейса, полосы и ползунки, векторные иконки и кнопки пользовательского интерфейса, деревянные баннеры, стрелки и указателиPREMIUM
Старые окна сообщений компьютерного браузера в стиле паровой волны 90-х с наклейками 2000 года.
диалоговое окно в стиле ретро ПК и всплывающие элементы пользовательского интерфейса, монохромная векторная иллюстрация uiPREMIUM
Набор иконок веб-сайта, векторный набор веб-сайтов, знак symbolPREMIUM
Значок электронной почты в другом стиле. векторные иконки электронной почты выполнены в контурном, сплошном, цветном, заполненном, градиентном и плоском стиле. символ, иллюстрация логотипа. векторная иллюстрацияPREMIUM
Кнопки из черного стекла с хромированной рамкой. цветной набор блестящих 3d веб-иконокPREMIUM
Вектор значка поиска. поиск увеличительное стекло знак и символPREMIUM
Дизайн шаблона ux ui прайс-лист. цена пакета продукта веб-сайта целевой страницы и флажок. vector illustration.PREMIUM
Вектор значков секундомера. знак и символ таймера. значок обратного отсчета. период времениPREMIUM
Флэш-распродажа баннеров 10.10 сезонное мероприятие с шаблоном подиумаPREMIUM
Коллекция векторных иконок со стрелками. набор стрелочных элементов для дизайна.
ПРЕМИУМ
Слайдер день ночьПРЕМИУМ
Файл значок папки компьютера со значком шестеренки настройки значок или инструкция. Цветная папкаPREMIUM
Вектор значка грузовика доставки для веб и мобильного приложения. знак и символ грузовика доставки. доставка быстрая доставка iconPREMIUM
Набор векторных значков со стрелками. векторная изолированная иллюстрацияPREMIUM
Набор иконок веб-сайта, символ векторного набора веб-сайтовPREMIUM
Вектор значка спидометра, шаблон логотипа и фон. , тегиПРЕМИУМ
10.10 распродажа шаблон фона маркетинга в социальных сетяхPREMIUM
Концептуальный баннер онлайн-компьютерных или мобильных видеоигр. е спорт. стол компьютерного геймера. экран монитора, мобильный телефон парит рядом с голографическим игровым интерфейсом, подключенные игровые серверы на виртуальной карте. PREMIUM
Набор значков даты календаря. набор значков даты и времени. PREMIUM
3d декоративные шары с шахматными точками сфер, изолированных на белом.
векторная иллюстрация. элементы дизайна для вашего рекламного флаера, шаблон презентации, макет брошюры, обложка книгиPREMIUM
Вектор значка базы данных. знак и символ базы данныхPREMIUM
Большой палец вверх жест и сердце, как нравится. иконки социальных сетей. 3d web vector illustrations.PREMIUM
Радуга 3d шар синий красный сфера желтый вектор изолированный цветной круг пузырь значокPREMIUM
Молния иконки вектор. электрический знак и символ. значок питания. энергетический знакPREMIUM
Кадры игрового стрима. светящаяся тема для живой конференции игровых стримеров, hud frame twitch, потоковое мультимедиа, трансляция геймера, веб-камера, цифровая коробка, видеоэкран, яркая векторная иллюстрация. ПРЕМИУМ
3d сложенная бумажная карта местоположения и булавкаPREMIUM
Коллекция векторных иконок со стрелками. набор стрелочных элементов для дизайна. PREMIUM
Набор векторных коммерческих марок в винтажном стиле для бизнеса и дизайна.
PREMIUM
Набор иконок для шприцев. инъекционный знак и символ.значок вакциныПРЕМИУМ
Тв онлайн. телевизионное потоковое видео. мужская рука держит пульт от телевизора. концепция потоковой передачи мультимедиа. поставщик контента для вод. видеосервис с потоковым интернет-мультимедийным шоу, сериал.ПРЕМИУМ
Интерфейс игры Зеленый лес. игровые кнопки пользовательского интерфейса, игровые элементы графического интерфейса. векторная панель меню, параметры выхода или перезапуска, индикатор выполнения и значки уровня ux с растениями, деревом и деревьями. мультяшный игровой наборPREMIUM
Красные металлические кнопки нажмите здесьPREMIUM
Включение и выключение набора векторных значков, выключение зеленой и красной кнопки со скругленными углами, знак выключения питанияPREMIUM
Реалистичный детализированный 3d набор винтов со стальной или латунной головкой. vectorPREMIUM
Программное обеспечение как услуга — концепция SaaS с бизнесменомPREMIUM
Неоновые гелевые веб-кнопки, элементы векторного дизайна на белом фонеPREMIUM
Набор векторных значков стрелок с красочным градиентом значка стрелки вперед, как движение.
для игрового интерфейса. vector cartoon illustrationsPREMIUM
Набор векторных элементов на тему кино.PREMIUM
Значок адреса векторная иллюстрация. знак и символ местонахождения дома. пинпойнтПРЕМИУМ
Набор значков адреса. знак и символ местонахождения дома. pinpointPREMIUM
Концепция кнопки заработка денег с мужским пальцем, нажимающим пустой цифровой экран со светящимся пятном. mockupPREMIUM
Концепция сетевого подключения. с видом на Париж (вид из Нотр-Дам-де-Пари) и красные булавки. глобальная карта системы позиционирования. булавки карты и основные достопримечательности Парижа, столицы ФранцииPREMIUM
Концепция сетевого подключения. вид на старый город карлов мост (карлов мост) с реки влтавы и красные булавки. глобальная карта системы позиционирования. булавки для карт с Прагой, ЧехияPREMIUM
Рука толкает виртуальный символ интернет-покупок с современным компьютером и смартфоном. ПРЕМИУМ
Инфографический шаблон с иконками и 6 вариантами или шагами.
кнопки. может использоваться для макета рабочего процесса, диаграммы, баннера, веб-дизайна. векторная иллюстрацияPREMIUM
Кнопки — Меню и действия — Компоненты — Инструкции по пользовательскому интерфейсу — Дизайн
Кнопка инициирует мгновенное действие.
Универсальные и легко настраиваемые кнопки позволяют людям выполнять задачи в вашем приложении простыми и знакомыми способами. Как правило, кнопка сочетает в себе три атрибута, чтобы четко передать ее функцию:
- Стиль. Визуальный стиль, основанный на размере, цвете и форме.
- Содержание. Символ (или значок интерфейса), текстовая метка или и то, и другое, отображаемое кнопкой для обозначения ее назначения.
- Роль. Определенная системой роль, определяющая семантическое значение кнопки и влияющая на ее внешний вид.
В дополнение к универсальным кнопкам многие стандартные стили кнопок, такие как «Информация», «Закрыть» и «Добавить контакт», обеспечивают привычное поведение во всей системе.
Существует также множество компонентов, похожих на кнопки, которые имеют различный внешний вид и поведение для конкретных случаев использования, таких как переключатели, всплывающие кнопки и сегментированные элементы управления.
Передовой опыт
Когда кнопки легко узнаваемы и понятны, приложение кажется интуитивно понятным и хорошо спроектированным.
Сделайте кнопки удобными для выбора. На сенсорном экране кнопки должны иметь цель нажатия не менее 44×44 точек, чтобы вместить кончик пальца. На всех экранах важно предусмотреть достаточно места вокруг кнопки, чтобы люди могли визуально отличить ее от окружающих компонентов и контента, независимо от того, используют ли люди сенсорный ввод, указатель или систему, которая расширяет кнопку, когда она находится в фокусе.
Убедитесь, что каждая кнопка четко указывает на ее назначение. Кнопка всегда содержит текстовую метку или символ (или значок интерфейса) — а иногда и то и другое — чтобы помочь людям предсказать, что она делает.
Стиль
Системные кнопки предлагают ряд стилей, которые поддерживают обширную настройку, обеспечивая при этом встроенные состояния взаимодействия, поддержку специальных возможностей и адаптацию внешнего вида.
iOS и iPadOS имеют четыре стиля кнопок, каждый из которых доступен в трех размерах. Каждая комбинация размера и стиля имеет различный уровень визуальной значимости, помогая вам представить иерархию действий в вашем приложении.
Вы можете настроить системную кнопку для использования любой комбинации стиля и размера. По умолчанию системная кнопка использует угловой радиус определенного размера и акцентный цвет вашего приложения. При необходимости вы можете изменить эти атрибуты — в дополнение к атрибутам, управляющим макетом контента и наличием индикатора активности — в конфигурации вашей кнопки.
Используйте закрашенную кнопку для наиболее вероятного действия в представлении. Заполненный стиль визуально наиболее заметен, поэтому он помогает людям быстро определить действие, которое они, скорее всего, захотят.
В то же время избегайте использования слишком большого количества заполненных кнопок в представлении. Слишком много заполненных кнопок может увеличить когнитивную нагрузку, потому что люди должны тратить время на сравнение нескольких вероятных вариантов, прежде чем сделать выбор.
Используйте стиль, а не размер, чтобы визуально выделить предпочтительный вариант из множества вариантов. Когда вы используете кнопки одинакового размера, чтобы предложить два или более вариантов, вы сигнализируете, что варианты образуют согласованный набор вариантов. Если вы хотите выделить предпочтительный или наиболее вероятный вариант в наборе, используйте более заметный стиль кнопки для этого параметра и менее заметный стиль для остальных.
Содержимое
Создайте содержимое кнопки, которое поможет людям мгновенно понять, что делает кнопка. : Если значок интерфейса подходит для вашей кнопки, рассмотрите возможность использования существующего или настроенного символа SF.
Чтобы использовать текст, создайте короткую метку, кратко описывающую, что делает кнопка. Используя заглавные буквы, рассмотрите возможность начала метки с глагола, чтобы передать действие кнопки — например, кнопка, которая позволяет людям добавлять товары в свою корзину, может использовать метку «Добавить в корзину».
Включайте дополнительный текст под меткой, только если он содержит полезную информацию. Дополнительный текст использует меньший размер текста, чем метка, показывая, что информация является вторичной по отношению к действию кнопки. Например, вы можете добавить текст для обновления кнопки «Добавить в корзину» с указанием количества товаров в корзине. Избегайте написания подзаголовка, который больше объясняет, что делает кнопка; убедитесь, что кнопка, содержащая представление, метку или изображение, стиль и роль, предоставляет всю информацию, необходимую людям для понимания ее действия.
Настройте кнопку для отображения индикатора активности, когда вам нужно предоставить отзыв о действии, которое не завершается мгновенно.
Отображение индикатора активности внутри кнопки может сэкономить место в пользовательском интерфейсе и четко указать причину задержки. Чтобы прояснить, что происходит, вы также можете настроить кнопку так, чтобы рядом с индикатором активности отображалась другая метка. Например, метка «Оформить заказ» может измениться на «Оформить заказ…», пока отображается индикатор активности. Когда возникает задержка после того, как люди нажали или коснулись настроенной вами кнопки, система отображает индикатор активности рядом с исходным или альтернативным ярлыком, скрывая изображение кнопки, если оно есть.
Роль
Системная кнопка может иметь одну из следующих ролей:
- Обычная. Нет конкретного значения.
- Первичный. Эта кнопка является кнопкой по умолчанию — кнопкой, которую чаще всего выбирают люди.
- Отмена. Кнопка отменяет текущее действие.
- Разрушительный.
Кнопка выполняет действие, которое может привести к уничтожению данных.
Кнопка выполняет действие, которое может привести к уничтожению данных.Роль кнопки может оказывать дополнительное влияние на внешний вид, который вы настраиваете. Например, система использует полужирный текст для метки основной кнопки, тогда как деструктивная кнопка использует красный цвет.
Назначьте основную роль кнопке, которую люди чаще всего выбирают. Когда основная кнопка реагирует на клавишу возврата, это позволяет людям быстро подтвердить свой выбор. Кроме того, когда кнопка находится во временном представлении — например, листе, редактируемом представлении или предупреждении — назначение ей основной роли означает, что представление может автоматически закрываться, когда люди нажимают «Ввод».
Не назначайте основную роль кнопке, выполняющей деструктивное действие, даже если это действие является наиболее вероятным выбором. Из-за визуальной заметности люди иногда выбирают основную кнопку, не прочитав ее сначала.
Помогите людям избежать потери контента, назначив основную роль неразрушающим кнопкам.
Особенности платформы
Никаких дополнительных рекомендаций для iOS, iPadOS или tvOS.
macOS
Несколько конкретных типов кнопок уникальны для macOS.
Кнопки
Стандартный тип кнопки в macOS известен как кнопка . Вы можете настроить кнопку для отображения текста, символа, значка интерфейса, изображения или комбинации текста и изображения. Кнопки могут действовать как кнопки по умолчанию в представлении, и вы можете их подкрасить.
Используйте кнопку с изменяемой высотой только тогда, когда вам нужно отобразить высокое содержимое или содержимое переменной высоты. Кнопки с изменяемой высотой поддерживают те же конфигурации, что и обычные нажимные кнопки — и они используют тот же радиус угла и отступы содержимого — поэтому они выглядят совместимо с другими кнопками в вашем интерфейсе. Если вам нужно представить кнопку, содержащую две строки текста или высокий значок, используйте кнопку с изменяемой высотой; в противном случае используйте стандартную кнопку.
Руководство для разработчиков см. в статье NSBezelStyleRegularSquare.
Добавлять многоточие к заголовку, когда кнопка открывает другое окно, представление или приложение. Во всей системе многоточие в заголовке элемента управления сигнализирует о том, что люди могут вводить дополнительные данные. Например, кнопки «Изменить» на панели «Автозаполнение» в настройках Safari содержат многоточие, потому что они открывают другие представления, позволяющие пользователям изменять значения автозаполнения.
Рассмотрите возможность включения загрузки пружины. В системах с трекпадом Magic Trackpad, подпружиненная позволяет людям активировать кнопку, перетаскивая выбранные элементы на нее и нажимая с усилием, то есть нажимая сильнее, не отпуская выбранные элементы. После принудительного нажатия люди могут продолжать перетаскивать элементы, возможно, для выполнения дополнительных действий.
Кнопки градиента
Кнопка градиента инициирует действие, связанное с представлением, например добавление или удаление строк в таблице.
Кнопки градиента содержат символы или значки интерфейса, а не текст, и их можно настроить так, чтобы они вели себя как нажимные кнопки, переключатели или всплывающие кнопки. Кнопки появляются в непосредственной близости от связанного с ними представления — обычно внутри или под ним — поэтому люди знают, на какое представление влияют кнопки.
Используйте кнопки градиента в представлении, а не в рамке окна. Кнопки градиента не предназначены для использования на панелях инструментов или в строках состояния. Если вам нужна кнопка на панели инструментов, используйте элемент панели инструментов.
Предпочтительно использовать символ в кнопке градиента. SF Symbols предоставляет широкий спектр символов, которые автоматически получают соответствующую окраску в состоянии по умолчанию и в ответ на действия пользователя.
Избегайте использования меток для добавления кнопок с градиентом. Поскольку кнопки градиента тесно связаны с конкретным представлением, их назначение обычно понятно без описательного текста.
Руководство для разработчиков см. в разделе NSBezelStyleSmallSquare.
Кнопки справки
Кнопка справки появляется в представлении и открывает справочную документацию по конкретному приложению.
Кнопки справки — это круглые кнопки одинакового размера со знаком вопроса. Руководство по созданию справочной документации см. в разделе Предложение помощи.
Используйте кнопку справки, предоставляемую системой, для отображения справочной документации. Люди знакомы с внешним видом стандартной кнопки справки и знают, что при нажатии на нее открывается содержимое справки.
По возможности откройте раздел справки, связанный с текущим контекстом. Например, кнопка справки на панели «Правила» настроек Mail открывает руководство пользователя Mail и раздел справки, в котором объясняется, как изменить эти настройки. Если никакой конкретный раздел справки не относится непосредственно к текущему контексту, откройте верхний уровень справочной документации вашего приложения, когда люди нажимают кнопку справки.
Не более одной кнопки справки на окно. Несколько кнопок справки в одном контексте затрудняют прогнозирование результата нажатия одной из них.
Разместите кнопки справки там, где люди ожидают их найти. Используйте следующие места для руководства.
| Стиль просмотра | Расположение кнопки справки |
|---|---|
| Диалоговое окно с кнопками закрытия (например, OK и Отмена) | Нижний угол, противоположный кнопкам увольнения и совмещенный с ними по вертикали |
| Диалог без кнопок закрытия | Нижний левый или нижний правый угол |
| Окно или панель настроек | Нижний левый или нижний правый угол |
Используйте кнопку справки в представлении, а не в рамке окна. Например, не размещайте кнопку справки на панели инструментов или в строке состояния.
Избегайте отображения текста, представляющего кнопку справки.
Люди знают, что делает кнопка справки, поэтому им не нужен дополнительный описательный текст.
Кнопки изображения
Кнопка изображения появляется в представлении и отображает изображение, символ или значок интерфейса. Вы можете настроить кнопку изображения, чтобы она действовала как нажимная кнопка, переключатель или всплывающая кнопка.
Используйте кнопку изображения в представлении, а не в рамке окна. Например, избегайте размещения кнопки изображения на панели инструментов или в строке состояния. Если вам нужно использовать изображение в качестве кнопки на панели инструментов, используйте элемент панели инструментов. См. Панели инструментов.
Добавьте около 10 пикселей отступа между краями изображения и краями кнопок. Края кнопки изображения определяют область клика, даже если они не видны. Включение заполнения гарантирует, что щелчок регистрируется правильно, даже если он находится не точно в пределах изображения.
Как правило, избегайте включения системной рамки в кнопку изображения; руководство для разработчиков см. в разделе isBordered.
Если вам нужно добавить метку, поместите ее под кнопкой изображения. Дополнительные указания см. в разделе Этикетки.
watchOS
Используйте кнопки, которые занимают всю ширину экрана. Полноразмерные кнопки выглядят лучше, и людям легче их нажимать. Если две кнопки должны иметь одно и то же горизонтальное пространство, используйте одинаковую высоту для обеих и используйте изображения или короткие текстовые заголовки для содержимого каждой кнопки.
Используйте одинаковую высоту для вертикальных стопок однострочных и двухстрочных текстовых кнопок. По возможности используйте кнопки одинаковой высоты для визуальной согласованности.
Использовать заданный системой радиус скругления углов. Система определяет значения углового радиуса, которые обеспечивают единый визуальный стиль во всех приложениях и усиливают интерактивность кнопок.