Как создать кнопку: 7 советов, чтобы на нее кликнули

Успешный или неудачный результат сводятся к одному щелчку. И на то, будет ли клик (или нажатие на сенсор), влияет множество небольших факторов.Один маленький фактор, который играет большую роль – это дизайн самих кнопок.

Они повсюду: на электронной почте, домашних страницах, различных сайтах, контактных формах и корзинах интернет-магазинов. Большинство из 4 000 000 000 страниц в сети имеют навигационные кнопки.

Дизайнеры не всегда соглашаются с замыслом кнопки на стадии разработки веб-сайта, но по этой теме есть много исследований. Перечислим семь видов дизайна кнопки для сайта.

1. Использование слов-побудителей

Прежде всего, каждый щелчок каждой кнопки – это метафора к действию. Поэтому на кнопке должны быть фразы, побуждающие к действиям. Начинаться они должны, желательно, с глаголов. Такое слово ясно будет объяснять посетителю, какие действия будут происходить, если кликнуть по кнопке.

Получается, что, кнопки без глаголов, типа:

• Подписка на рассылку;
• Загрузка описания;
• Дополнительная информация.

… Станут более действенными, когда будет добавлен глагол…

• Подписаться на рассылку;
• Скачать описание;
• Узнать больше.

2. Ваша кнопка соответствует тесту «WYLTIWLT» (Would You Like То? I Would Like То)

Теперь, когда подходящий текст для кнопки найден, убедитесь, пройдет ли эта кнопка такой тест. Нужно добавить две фразы перед текстом на кнопке и посмотреть, будет ли логичным получившееся предложение.

• Хотели бы вы [текст на кнопке]? (Would You Like То?)
• Я хотел бы [текст кнопки] (I Would Like То).

Иными словами, проверьте, может ли текст в кнопке быть прочитан как бы «от лица сайта», а также от лица посетителя. Если текст в кнопке «Перейти к разделу…», это будет читаться как «Вы хотели бы перейти к разделу…?» и «Я хотел бы перейти к разделу…?». Поскольку в обоих случаях эта фраза логична, то текст в кнопке проходит тест.

Если текст в кнопке «Посмотреть ваши результаты», то, если задать вопрос, получается «Вы хотели бы посмотреть ваши результаты?» и «Я хотел бы посмотреть ваши результаты». Второй вариант здесь не очень подходит, поэтому данный текст не пройдет тест. Этот быстрый способ убедиться в том, что текс на каждой кнопке, начинающийся с глагола, работает от лица маркетолога, a также от лица посетителя сайта. Кстати, каждая кнопка на Фейсбук со словом-действием проходит данный тест!

Такой метод был предложен Джонатаном Ричардсом, который создал эту аббревиатуру: WYLTIWLT.

3. Я или Вы: от первого или от второго лица?

Использование местоимений – это альтернатива нейтральным фразам. Но местоимения нужно применять c осторожностью. Разработчики протестировали тексты c использованием местоимений от первого и от второго лица, создав две кнопки со словами-действами. И вот что они заметили.

Кнопку c местоимением от 1 лица («Создать мою учетную запись») нажимали на 24% посетителей больше, чем на кнопку c местоимением от 2 лица («Создать вашу учетную запись»). Разработчики говорят o том, что надписи в кнопке c местоимением от 1 лица работают лучше, так как они говорят за посетителя, совершающего действие, то есть, от человека, который держит мышь или нажимает на экран.

Юджин Шварц как-то сказал, что нужно «вставлять беседу, которую посетитель ведет у себя в голове». И поэтому, если посетители видят ваши призывы к действиям, то нужно, чтобы они сами говорили o том, что они хотят делать. («Я хочу…»)

4. Используйте цвета, которые контрастируют c другими элементами

Наши глаза беспрерывно сканируют пространство, ища элементы, на которых взгляд останавливается. Все, что создает контраст c окружением, автоматически привлекает внимание. Такое явление заложено в основе природы нашего зрения и мозга, называется это эффектом Фон Ресторфа.

Это явление можно использовать при разработке дизайна кнопок с помощью применения контрастных цветов, и таким образом удастся привлечь внимание и побудить к нужному действию. Например, на синем фоне c преобладающими холодными цветами, элементы теплой цветовой гаммы, такие как оранжевые кнопки, будут визуально заметными.

Цвет – это эффективный инструмент создания выделяющейся кнопки, однако этот способ не является единственным. Также можно использовать размер, расположение, либо глаза людей на ближайших изображениях. Важно убедиться, что желаемые действия находятся достаточно высоко в визуальной иерархии страницы.

 

 

5. Сделайте кнопку большого размера

Актуально для пользователей смартфонов и планшетов. Пользователю должна быть предоставлена возможность комфортно нажимать на кнопку, как co смартфона, так и c планшета. Следовательно, размер кнопки должен быть соответствующим человеческому пальцу. Компания Apple рекомендует минимальный размер кнопок 44×44 пикселей, но исследования компании МIT Touch Lab показывают, что в среднем размер указательного пальца составляет (если перевести на пиксели) 45×57.

Это связано c тем, что кончик пальца имеет не округлую, а овальную форму. А большой палец несколько больше. Если предполагается, что кнопку будет нажиматься большим пальцем (если, к примеру, она будет располагаться в нижней части приложения для планшета), ее можно сделать шире: 45×72 пикселей.

6. Уменьшите уровень вовлечения («Начать шоппинг» вместо «Купить сейчас»)

Ряд действий ведет к взятию на себя бо́льших обязательств, чем другие. Так же и с кнопками – некоторые из них означают больше обязательств. Они могут вызывать разные психологические реакции и доставлять больше беспокойства. Если кнопка-действие побуждает посетителя потерять время или деньги, то он c меньшей вероятностью кликнет по ней. Протестированы языки кнопок для двух «Начать тест» и «Прочитать обзор». Вторая кнопка получила на 124% больше кликов.

Вся разница заключена в размере обязательств. Кнопка «Начать тест» наводит посетителя на мысль o том, что, щелчок по этой кнопке вовлечет его в потенциально длительный процесс. А «Прочитать обзор» подразумевает меньшие временные затраты. Аналогично, кнопка «Начать шоппинг» звучит как изучение каталога продукции. А кнопка «Купить сейчас» – это словно стремление сайта залезть в ваш бумажник.

 

 

7. Создавайте кнопки на основе кода, а не графики

Слово «кнопка означает графическое изображение, «ссылка» – значит текст. Но находчивые дизайнеры создают кнопки, которые являются картинками, но сделаны как ссылки.

У графических кнопок есть ряд проблем.

• Они медленнее грузятся;
• Они недоступны для посетителей с ограниченными возможностями;
• Графические изображения могут не отображаются в email сообщениях, пока не будет нажата кнопка «Показывать изображения».

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

Если у вас на сайте (в приложении) есть графические кнопки, и возникли проблемы c их редактированием, хотя бы убедитесь, что «Alt» включает надпись на кнопке. Таким образом, она будет видна в email сообщениях, даже если абонент не включил загрузку изображений.

 

Нажатие кнопки

Посещаемость – это только полдела; побуждение посетителя к действию – это вторая половина дела. Клик – это момент истины, и сама по себе кнопка играет огромную роль. Маленькие вещи могут иметь большое значение.
Таким образом, вместо того, чтобы стремиться увеличить посещаемость, взгляните на ваши кнопки. Несколько небольших конструктивных изменений могут принести куда больший эффект.

Создание кнопок в отчетах Power BI — Power BI

Twitter LinkedIn Facebook Адрес электронной почты

  • Статья
  • Чтение занимает 4 мин

ПРИМЕНИМО К: служба Power BI Power BI Desktop

С помощью кнопок в Power BI можно создавать отчеты, которые ведут себя аналогично приложениям, а также создавать среду, в которой пользователи могут навести указатель мыши, щелкнуть содержимое Power BI и дополнительно взаимодействовать с ним. В этой статье объясняется, как добавлять кнопки в отчеты в Power BI Desktop и в службе Power BI. При совместном использовании отчетов в службе Power BI кнопки позволяют пользователям работать с отчетами, как с приложениями. В статье Определение и использование кнопок в службе Power BI описывается, как средства чтения отчетов используют кнопки в отчетах.

Создание кнопок в отчетах

  • Power BI Desktop
  • Служба Power BI

В Power BI Desktop на ленте Вставка выберите Кнопки, чтобы открыть раскрывающееся меню, в котором можно выбрать нужную кнопку из коллекции параметров.

Настройка кнопки

Независимо от того, создаете ли вы кнопку в Power BI Desktop или служба Power BI, остальная часть процесса одинакова. При нажатии кнопки на холсте отчета на панели Формат отображаются различные способы настройки кнопки в соответствии с вашими требованиями.

Например, можно настроить форму кнопки.

Дополнительные сведения см . в статье Настройка кнопок в отчетах Power BI.

Кнопки в Power BI имеют четыре возможных состояния:

  • По умолчанию: отображение кнопок, если не наведен указатель мыши или не выбран.
  • При наведении указателя мыши: отображение кнопок при наведении указателя мыши.
  • При нажатии: отображение кнопок при выборе.
  • Отключено: отображение кнопок, когда их невозможно выбрать.

Вы можете изменить многие карточки в области Формат

по отдельности на основе этих четырех состояний, что обеспечивает достаточную гибкость при настройке кнопок.

Следующие карточки в области Формат позволяют настроить форматирование кнопки для каждого из четырех ее состояний:

  • Фигура
  • Стиль
  • Поворот (применяется ко всем состояниям автоматически)

Чтобы выбрать способ отображения кнопки для каждого состояния, выполните следующие действия:

  1. В области Формат выберите вкладку Кнопка , а затем разверните карточку Фигура или Стиль .

  2. Выберите Состояние в разделе Применить параметры к в верхней части карточки, а затем выберите параметры, которые вы хотите использовать для этого состояния.

    На следующем рисунке вы увидите развернутые карточки Стиль и Значок . Для параметра Состояниезадано значение При наведении указателя мыши, а тип значок — стрелка вправо.

Выбор действия для кнопки

Вы можете выбрать действие, которое будет выполнено, когда пользователь нажмет кнопку в Power BI.

Для кнопок доступны следующие действия.

  • Назад — возвращает пользователя на предыдущую страницу отчета. Это действие полезно для страниц детализации.
  • Закладка — открывает страницу по закладке, заданной для текущего отчета. См. дополнительные сведения о закладках в Power BI.
  • Детализация — открывает страницу детализации, отфильтрованную по выбранному содержимому, без использования закладок. См. дополнительные сведения о кнопках детализации в отчетах.
  • Перемещение по страницам — переход на другую страницу в отчете без использования закладок. Дополнительные сведения см. в статье Создание навигации по страницам .
  • Навигация по закладкам позволяет переходить пользователя к другому состоянию отчета на той же или другой странице с помощью закладок. Дополнительные сведения см. в статье Создание навигации по закладкам .
  • Q& Открывает окно обозревателя Q&A . Когда читатели отчета нажимают кнопку Q&A, открывается обозреватель Q&A, и они могут задавать вопросы на естественном языке о ваших данных.
  • Применить все срезы и Кнопки «Очистить все срезы » применяют все срезы или очищают все срезы на странице. Дополнительные сведения см. в разделах Создание кнопок Применить все срезы и Очистить все срезы в отчетах .
  • Веб-URL-адрес открывает веб-страницу в браузере.

Некоторые кнопки имеют действие по умолчанию, которое выбирается автоматически. Например, тип кнопки Q&A автоматически выбирает Q&A в качестве действия по умолчанию.

Примечание

Действие не может иметь числовую меру в качестве значения любого из его полей.

Чтобы выбрать действие кнопки, выполните приведенные далее действия.

  1. На вкладке Кнопка в области Формат установите для параметра Действие значение Включено, а затем разверните карточку.

  2. Разверните узел Действие и выберите действие Тип кнопки.

  3. Проверьте кнопки, созданные для отчета, нажав клавиши CTRL и кнопку.

Перемещение по страницам

Если для параметра Типдействия задано значение Навигация по страницам, вы можете создать кнопку, которая ссылается на другую страницу отчета, без создания закладки.

Совет

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

Чтобы настроить одностраничную кнопку навигации, выполните следующие действия:

  1. Создайте кнопку с навигацией по страницам в качестве типадействия, а затем выберите страницу для назначения.

  2. При необходимости можно условно отформатировать подсказку в разделе Действие так же, как и с другими типами кнопок.

  3. Если вам нужна настраиваемая область навигации, создайте навигаторы страниц и закладок вместо отдельных кнопок.

Фигуры и изображения для навигации

Действие навигации по страницам также поддерживается для фигур и изображений, а не только для кнопок. Ниже приведен пример использования одной из встроенных фигур.

Поддержка изображений заливки для кнопок

Кнопки Power BI поддерживают изображения заливки. С помощью изображений заливки вы можете настроить внешний вид кнопки в сочетании со встроенными состояниями кнопки: по умолчанию, при наведении указателя мыши, нажатии и отключен (для детализации).

В разделе Стиль установите для параметра Заливка значение Включено, а затем Выберите изображение для каждого состояния стиля.

Дальнейшие действия

Дополнительные сведения о похожих функциях и о взаимодействии с кнопками см. в следующих статьях.

  • Создание навигаторов страниц и закладок
  • Определение и использование кнопок в службе Power BI
  • Использование детализации в отчетах Power BI
  • Использование закладок для обмена аналитическими сведениями и создания историй в Power BI
  • Создание кнопки детализации

Как создать текстовые кнопки

❮ Назад Далее ❯

Узнайте, как оформить текстовые кнопки с помощью CSS.

Как стилизовать текстовые кнопки

Шаг 1) Добавить HTML:

Пример




< кнопка >Danger

Шаг 2) Добавьте CSS:

Чтобы получить вид «текстовой кнопки», мы удаляем цвет фона и границы по умолчанию:

Пример

.btn {
  граница: нет;
  background-color: наследовать;
  заполнение: 14 пикселей 28 пикселей;
размер шрифта: 16px;
  курсор: указатель;
  отображение: встроенный блок;
}

/* При наведении мыши */
.btn:наведение {фон: #eee;}

.success {цвет: зеленый;}
.info {цвет: dodgerblue;}
.warning {цвет: оранжевый;}
.danger {цвет: красный;}

.default {цвет: черный;}

Попробуйте сами »

Текстовые кнопки с индивидуальным фоном

Текстовые кнопки с определенным цветом фона при наведении:

Пример

. btn {
   граница: нет;
цвет фона: наследовать;
    padding: 14px 28px;
размер шрифта: 16px;
    курсор: указатель;
отображение: встроенный блок;
}

/* Зеленый */
.success {
    цвет: зеленый;
}

.success: hover {
цвет фона: #04AA6D;
    цвет: белый;
}

/* Синий */
.info {
цвет: голубой;
}

.info:hover {
    фон: № 2196F3;
    цвет: белый;
}

/* Оранжевый */
.warning {
    color: апельсин;
}

.предупреждение: наведение {
    фон: #ff9800;
    цвет: белый;
}

/* Красный */
.danger {
    цвет: красный;
}

.danger:hover {
фон: #f44336;
    цвет: белый;
}

/* серый */
.по умолчанию {
    цвет: черный;
}

.default:hover {
    фон: #e7e7e7;
}

Попробуйте сами »

Перейдите к нашему руководству по кнопкам CSS, чтобы узнать подробнее о том, как стилизовать кнопки.

❮ Предыдущий Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебник по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Основные ссылки
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery


1 Лучшие примеры0012 Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

| О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

: Элемент Button — HTML: Язык гипертекстовой разметки