Создание кнопок для сайта: Как создать кнопку сайта? — База знаний uCoz

Содержание

Как сделать кнопку онлайн? 20 лучших инструментов для создания CSS3-кнопок

Мы должны идти в ногу со временем, с технологиями, и пытаться осваивать их как можно скорее. CSS3 представляет собой самый современный стандарт разработки каскадных таблиц стилей. Он отвечает за то, как именно HTML-код будет отображаться на экране.

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

В этой статье я представлю подборку из 20 онлайн-инструментов для разработки CSS3-кнопок.

Простой и утонченный инструмент. Оформление CSS3-кнопок еще никогда не было настолько простым.

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

Позволяет подойти к разработке CSS3-кнопок более творчески, и поменять цвет кнопки даже при наведении курсора.

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

Можно без труда составить комбинацию цвета и стиля кнопки.

Теперь можно заменить устаревшие кнопки на современные!

Не беспокойтесь, если при разработке вы работаете с другим языком программирования, так как этот генератор кнопок CSS без проблем понимает практически все!

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

Предлагает множество паттернов и цветов.

Этот генератор кнопок онлайн дает большую свободу для создания собственных CSS3-кнопок.

Простота инструмента вовсе не гарантирует качественную CSS3-кнопку, именно поэтому появился этот инструмент!

Теперь ваши кнопки точно будут привлекать внимание!

Удобный и бесплатный генератор кнопок для сайта онлайн.

Вам точно понравится этот инструмент!

Опрятный генератор CSS3-кнопок со множеством примеров.

Простой в использовании генератор кнопок CSS3 с множеством цветовых схем на выбор.

Создайте дизайн ваших CSS3-кнопок быстро и просто!

Этот инструмент позволит ощутить всю мощь процесса разработки собственных кнопок на CSS3!

Классический CSS генератор кнопок онлайн.

Оформите собственные CSS3-кнопки по своему вкусу! Также есть возможность настраивать стиль кнопки при наведении курсора.

Валентин Сейидовавтор-переводчик статьи «20+ Best Tool Css3 Button Maker Online»

Как создать кнопки на сайте WordPress: дизайн и рекомендации

Создание рекомендаций по дизайну кнопок может показаться излишним. В конце концов, вы уже знаете, как выглядят веб-кнопки, не так ли?

Как и обычные кнопки, не следует забывать, что они являются центральной частью веб-дизайна с важными функциями:

  • Кнопки часто составляют основной призыв к действию.
  • Кнопки «Купить» сильно влияют на доход.
  • Кнопки регистрации электронной почты помогают создать свою клиентскую базу.
  • Кнопки отправки формы важны для управления.
  • Социальные кнопки помогают поделиться своим контентом.

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

1. Убедитесь, что кнопки хорошо сочетаются с вашим сайтом и брендингом

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

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

2. Придерживайтесь установленных соглашений о дизайне

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

Установленные соглашения

Форма. Благодаря длительной эволюции компьютеров наиболее знакомой формой является прямоугольник (с закругленными углами или без них). Как пример, взгляните на WordPress.

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

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

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

Смотрите также:

Много интересной информации в разделе Уроки WordPress.

3. Используйте метки

Следующим пунктом нашего руководства по дизайну кнопок являются метки. Без подсказки о том, что делает кнопка, пользователи не смогут определить, нужно ли им кликать на кнопку.

Это необязательно должно быть текстом, иногда достаточно указать иконки. Вы можете видеть это в социальных клавишах обмена, которые стали вездесущими.

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

Обязательно сделайте свои метки описательными и конкретными, используйте глаголы, описывающие действие, которое оно будет выполнять (например, покупка или купить), и создайте актуальность этого действия, например со словом сейчас. Это особенно важно для призывов к действию, которые часто являются центральной частью любой веб-страницы.

4. Размер и интервал кнопок

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

Важно создать кнопки таким образом, чтобы:

а) сделать их пригодными для использования,

b) предотвращать случайное использование пользователем неправильной информации.

Когда дело касается размера, нужно учитывать, что средний человеческий кончик пальца составляет 16-20 мм. Это примерно 45 — 57 пикселей. Чтобы учесть это, Apple рекомендует использовать размер кнопки не менее 44 х 44 пикселя.

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

5. Внедрение обратной связи

Как только вы разработали свои кнопки так, чтобы пользователи могли четко их идентифицировать, работа не прекращается. Следующий вопрос: что происходит, когда пользователи используют кнопку? Как оказалось, эти элементы дизайна имеют более одного состояния:

  • Обычный – ясно видно, что это кнопка приглашает к взаимодействию.
  • Сфокусированный – как правило, эффекты наведения мыши подтверждают, что взаимодействие с элементом возможно.
  • Нажато – вознаграждает пользователя за действие, подтверждает, что происходит какое-то действие.
  • Занято – показывает активность, происходящую в фоновом режиме.
  • Отключено – дает понять, что возможны другие действия, только не в настоящее время.
Предоставляя обратную связь, вы можете сделать взаимодействие понятным и более захватывающим. Это визуальная подсказка для пользователей, чтобы они знали, что их действие имеет эффект.

6. Позиция Кнопка видна

Конечно, когда вы создали свои кнопки, последний шаг — убедиться, что пользователи могут их найти. В противном случае, как они нажмут на них? По этой причине также важно выбрать правильное расположение кнопки.

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

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

Хотя иногда имеет смысл отступить от правил, поскольку вы рискуете запутать пользователей. Это, в свою очередь, сильно влияет на их восприятие вашего сайта. Испытайте разные возможности, чтобы выбрать тот тип кнопки, который работает лучше всего.

7. Контрастность

Выделяя кнопки из остальной части дизайна, вы даете понять, что взаимодействие возможно и желательно. Это также предотвращает потерю кнопок в общей массе контента.

Общие инструменты для создания контраста:

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

Хороший способ выяснить, достаточно ли контраста – использовать тест на прищуривание. Для этого просто отодвиньтесь от экрана, прищурьте глаза и посмотрите, выделяется все еще кнопка.

Звучит странно, но это проверенная и хорошо работающая техника среди веб-дизайнеров.

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

Теперь, когда вы знаете, как должны выглядеть кнопки, возникает вопрос: как их создать на своем сайте? Новый редактор Gutenberg делает это очень просто.

1. Создайте блок-элемент

В Gutenberg есть возможность создать кнопку, как и любой другой блочный элемент. Просто нажмите на символ плюса слева. Когда откроется меню, прокрутите вниз до элементов макета, чтобы найти элемент Кнопка (Button).

Нажмите, чтобы добавить ее на свою страницу.

2. Настроить текст и назначение кнопки

После щелчка WordPress открывает это меню.

У вас есть следующие варианты:

  • Изменить ориентацию – используйте символы вверху, чтобы выровнять кнопку влево, по центру или вправо относительно страницы.
  • Текст кнопки «Редактировать» – нажмите кнопку, и тогда вы сможете ввести и редактировать текст: полужирным, курсивом или зачеркнутым шрифтом.
  • Ввод ссылки – там, где редактор говорит Вставить URL-адрес или тип, вы указываете, куда будет перенаправлены посетители при нажатии кнопки.

3. Отредактируйте дизайн

Можно изменить цвет кнопки и текста всего за несколько кликов.

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

В разделе «Дополнительно» можно добавить к кнопке собственный стиль CSS. Таким образом, можно создать собственный дизайн с разметкой CSS, включая эффекты зависания и многое другое.

И это все — самый простой способ добавить кнопку в WordPress.

Источник: torquemag.io

Смотрите также:

Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/

Как создать кнопки для сайта с html кодом, в режиме онлайн

Как можно сделать красивые кнопки для сайта?

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

Оглавление:

  1. Сервис cooltext
  2. Сервис Da Button Factory
  3. Заключение
  4. Наши рекомендации
  5. Стоит почитать

Сервис cooltext

Первым в нашем списке идет вот этот сайт:

http://cooltext.com/

Давайте с его помощью сделаем красочную кнопку «Скачать». Переходите на главную страницу сервиса.

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

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

  • Logo text. Здесь нужно ввести текст, который вы хотите видеть на кнопке. Мы набираем «Скачать».
  • Font. Этот параметр отвечает за шрифт. Если вам не нравится тот, который указан для этого стиля по умолчанию, вы можете изменить его.
  • Text size. Размер шрифта — можете изменить его. Мы оставили стандартные «70»
  • Use gradient. Данная опция позволяет использовать градиент в цветовом оформлении кнопки. Если вы хотите применить его, поставьте эту галочку. Дальше вам нужно отметить стиль градиента, и его направление (галочка «horizontal»).
  • Outline color. Выбирайте цвет для рамки, которая будет отображаться вокруг кнопки.
  • Outline width. И задавайте ее ширину.
  • Shadow Type. Включение и выбор режима тени.
  • Shadow Offset. Размер тени по горизонтали и вертикали соответственно.
  • Shadow Color. А здесь мы зададим цвет тени для кнопки, и процент ее прозрачности.
  • Alignment. Выравнивание текста относительно блока.
  • Image Width&Height. Ширина и высота кнопки.
  • File Format. В каком формате сохранить кнопку.

Пройдите все пункты, и установите нужные параметры. После этого вам следует нажать кнопку Create Logo. Вы перейдете на страницу результатов. Здесь можно скачать кнопку — нажмите «Download image«. Если результат вас не устроил, вы можете вернуться на страницу редактирования. Для этого используйте пункт «Edit image».

У нас получилась вот такая кнопка.

Сервис Da Button Factory

Еще один удобный инструмент, который попал нам на анализ. Заходите на главную страницу сервиса.

https://dabuttonfactory.com

Вы увидите предлагаемый конструктор.

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

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

  • Text. Здесь мы снова вводим желаемый текст для кнопки. На этот раз мы пишем «Регистрация».
  • Font. Выбираем шрифт. Мы оставили стандартный «Calibri». Можно сделать шрифт жирным — поставьте галочку «bold», или с курсивным начертанием — галочка «italic»
  • Size. Размер шрифта.
  • Color. Его цвет.
  • Text shadow. И снова тень для текста. Если вы отметите эту галочку, она будет отображаться у надписи на кнопке. Нужно будет указать размер «Distance», и цвет «Color».
  • Size. Размер кнопки. Выбираем фиксированные параметры — пункт «Fixed». В полях «Width» и «Height», задаем ширину и высоту соответственно.
  • Style. Внешний вид кнопки. Можно выбрать прямоугольную, с закругленными краями и овальную. Мы оставили прямоугольный вариант — пункт»rectangular box».
  • Background. Параметр цвета для кнопки. Мы оставили единый цвет «unicolored».
  • Border. Рамка для кнопки
  • Shadow. Тень для кнопки.

После того, как вы полностью настроили свою кнопку, выбирайте тип готового файла. Для этого в центре экрана есть выпадающий список. После этого просто щелкайте на кнопку указателем мыши, и вызывайте контекстное меню. Затем щелкайте пункт «Сохранить изображение как«, и выбирайте папку, в которую вы хотите сохранить готовую кнопку.

У нас получилось вот что.

Видео к статье:

Заключение

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

Наши рекомендации

Самые популярные теги в инстаграм.

Как удалить яндекс браузер.

Как очистить кэш браузера гугл хром.

Стоит почитать

Зачем искать информацию на других сайтах, если все собрано у нас?

Использование веб-части «Кнопка»

При добавлении современной страницы на сайт вы можете добавить и настроить веб-части, которые являются стандартными блоками страницы. В этой статье основное внимание уделяется веб-части «Кнопка».

С помощью веб-части «Кнопка» можно легко добавить на страницу кнопку с надписью и ссылкой.

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

Добавление веб-части «Кнопка»

  1. Перейдите на страницу, на которую вы хотите добавить веб-часть «Кнопка».

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

    Если навести указатель мыши на область над или под существующей веб-частью, вы увидите строку с + в кружке:

  3. Нажмите кнопку +, а затем найдите и выберите кнопку в списке веб-частей.

  4. На панели инструментов в левой части экрана выберите пункт Изменить веб-часть .

  5. В области свойств справа введите текст подписи в поле Метка .

    Введите ссылку в поле ссылка . Убедитесь, что ссылка начинается с http://, https://или mailto: Если ссылка добавлена без одного из этих протоколов, https://будет добавлена.

  6. В разделе Выравниваниевыберите способ выравнивания кнопки (слева, по центру или по правому краю) в столбце на странице.

Цвет кнопки

Цвет кнопки определяется цветом контрастности темы сайта и не может быть изменен независимо от темы сайта. Дополнительные сведения об изменении темы сайта можно найти в статье Изменение внешнего вида сайта SharePoint.

Принципы правильного создания кнопок для сайта

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

Пользуясь преимуществами чудесных свойств нового CSS3, можно создавать удивительно элегантные и стильные кнопки без единого признака изображений и получать идеально соответствующие стили для старых браузеров. Вам, может быть, нравится создавать кнопки для сайта, прямиком в CSS или вы стремитесь к своему предпочитаемому разметочному инструменту, но важно тщательно обдумывать соответствие дизайна своих кнопок и контекста.

Очень легко и просто взять заранее заданные «пользовательские интерфейсы PSD», которые бесплатно выложила какая-то щедрая душа (и, несомненно, содержащие кнопки, навеянные духом Apple’а). Но почему не потратить минуту на размышления, подходит ли упомянутый стиль кнопок к контексту вашего замысла, и решить, возможно ли создать что-то более оригинальное?
Повторять чьи-то кнопки удобно, так экономится время, но невредно и потратить минуту на более детальное понимание замысла и структуры своих (или чужих) кнопок. Как создан их дизайн? Подходят ли они к интерфейсу/контексту/торговой марке? Есть ли возможность создать что-то уникальное? Достаточно ли выделяются мои кнопки? Нужны ли мне основные, второстепенные, третьестепенные кнопки? Достаточно ли они отличаются друг от друга? Симпатично ли смотрятся?! (Почему нет, все мы хотим создавать классные штучки, правильно?!).

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

1. Подгонка под бренд

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

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

2. Подгонка под контекстуальный стиль

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

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

3. Убедитесь, что кнопки достаточно контрастны

При таком большом количестве проектов, вдохновленных стилистикой Apple OS, особенно при множестве элементов PSD в них, кнопки могут теряться среди прочих элементов, применяемых в пользовательском интерфейсе, ослабляя свою потенциальную силу. Попробуйте с помощью цвета, размера, «белого» пространства или типографской разметки текста гарантировать своим кнопкам визуальный вес, необходимый для выделения их из остального интерфейса.

4. Рассмотрите закругленные или фигурные кнопки

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

5. Уберите выделение второстепенных элементов пользовательского интерфейса

Если вы стремитесь к стилю, навеянному OS, или работаете с заранее определенными PSD-элементами, скорее всего ваши элементы пользовательского интерфейса по форме окажутся преимущественно прямоугольниками с закругленными углами. Обдумайте уменьшение декорирования тех элементов, которые могут позволить себе выглядеть менее «кнопочно».

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

6. Согласующиеся по цвету края/границы

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

7. Поаккуратнее с размытыми тенями

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

8. Немного иконографии внесет свой вклад в юзабилити

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

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

9. Обдумайте главные, второстепенные и третьестепенные стили

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

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

10. Всегда делайте состояния обратной связи

На самом деле это не такая уж головоломка, но иногда вспоминается ближе к окончанию процесса дизайна. Всегда прорабатывайте ключевые состояния своих кнопок, чтобы гарантировать, что они дают пользователю в его контексте достаточную обратную связь. У пользователей, скорее всего, имеется мысленная модель того, как на самом деле работает кнопка, пока они применяют ее в различных состояниях. Несколько простых приемов CSS с тенями, границами и градиентами и так далее, могут обеспечить пользователю простую обратную связь и нечто приятное глазу!

Заключение статьи по созданию кнопок для сайта

У вас, дизайнеров, станет происходить все по-своему. Бьюсь об заклад, это будет длительное время, в течение которого вы станете часто отстраняться от экрана, слегка склоняя голову, щурясь и говоря: «Да-а-а, так почти хорошо!». Конечно, это – часть удовольствия, получаемого от процесса создания кнопок для сайтов и талантливые дизайнеры склоняются к тому, чтобы все делать именно так, но я думаю, что хорошо было бы произносить небольшой мысленный комментарий, диалог и размышлять над принимаемыми дизайнерскими решениями.

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

Автор: Pete Orme

Источник: //webdesign.tutsplus.com/

Редакция: Команда webformyself.

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

Смотреть видео

Создание кнопок для сайта

С помощью онлайн конструктора кнопок для сайта от сервиса WebMasta.org Вы получаете возможность без знания каких либо графических программ и HTML + CSS создавать красивые CSS кнопки для Вашего сайта.

Пример отображения кнопки:

Получить код

  • Текст
    1. Текст :
    2. Спецсимвол : нет➜➤➣☞↻➹☼♞♛♜☂☻✍✄✐✌✚☯⚒⚖☓✠⦿✺✓✔✖✘❤❂▶◀▼►✩✈✦⚛✝⚑⚐☸
  • Шрифт
    1. Тип шрифта : Arial, Helvetica, sans-serifVerdana, Geneva, sans-serifGeorgia, «Times New Roman», Times, serif»Courier New», Courier, monospaceTahoma, Geneva, sans-serif»Trebuchet MS», Arial, Helvetica, sans-serif»Arial Black», Gadget, sans-serif»Times New Roman», Times, serif»Palatino Linotype», «Book Antiqua», Palatino, serif»Lucida Sans Unicode», «Lucida Grande», sans-serif»MS Serif», «New York», serif»Lucida Console», Monaco, monospace
    2. Цвет :
    3. Размер :
  • Тень текста
    1. цвет :
    2. X :
    3. Y :
    4. Распростанение :
  • Отступы
    1. Лево/Право :
    2. Верх/Низ :
  • Граница
    1. Размер :
    2. Тип : обычнаяпунктирточечкамидвойнаяжелобвпуклыйoutsetridgeнет
    3. Цвет границы :
    4. радиус границы :
  • Цвет фона
    1. Цвет : →
  • Внутрення тень
    1. Цвет :
    2. x :
    3. y :
    4. Размытость :
  • Внешняя тень
    1. Цвет :
    2. x :
    3. y :
    4. Размытость :
  • Непрозрачность
    1. Непрозрачность :
  • Преобразование
    1. Тип : нетвсефонширинавысотацветконтур
    2. Функция : линейнаяeaseease-inease-outease-in-out
    3. Длительность :

7 основных правил проектирования кнопок

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

1. Делайте кнопки похожими на кнопки

Когда дело доходит до взаимодействия с интерфейсом, пользователи должны сразу понимать какие элементы кликабельны, а какие нет. Каждый элемент дизайна требует от пользователя усилий по декодированию. Как правило, чем больше времени требуется пользователям для декодирования интерфейса, тем менее он удобен для них. Но, как пользователи понимают, является ли определенный элемент дизайна интерактивным или нет? Они используют предыдущий опыт и визуальные знаки для понимания смысла объекта интерфейса. Вот почему так важно использовать соответствующие визуальные знаки (такие как размер, форма, цвет, тень и т. д.), чтобы элемент выглядел как кнопка. Визуальные знаки несут важное информационное значение – они помогают создавать возможность действия в интерфейсе. К сожалению, во многих интерфейсах знаки, означающие интерактивность слабо различимы и требуют усилий по взаимодействию; в результате они заметно снижают понятность интерфейса. Если отсутствует понимание возможных взаимодействий, и пользователи с трудом узнают, что кликабельно, а что нет, не имеет значения, насколько круто выглядит ваш дизайн. Если им будет сложно пользоваться, он расстроит пользователей. Слабые различимые знаки – еще более серьезная проблема для мобильных пользователей. В попытке понять, является ли отдельный элемент интерактивным или нет, пользователи ПК могут навести курсор на элемент и проверить, изменится ли его состояние. У мобильных пользователей нет такой возможности. Чтобы понять, является ли элемент интерактивным, пользователи должны нажать на него – нет другого способа проверить интерактивность.

Не предполагайте, что что-то в вашем интерфейсе очевидно для ваших пользователей

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

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

Используйте для своих кнопок знакомый дизайн

Вот несколько примеров кнопок, знакомых большинству пользователей:

  • Кнопка с фоном и квадратными углами
  • Кнопка с фоном и закругленными углами
  • Кнопка с фоном и тенью
  • Прозрачная кнопка

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

Не забывайте о свободном пространстве

Важны не только визуальные свойства самой кнопки. Количество пустого места рядом с кнопкой облегчает (или усложняет) понимание пользователем интерактивный это элемент или нет. В примере ниже некоторые пользователи могут путать прозрачную кнопку с информационным полем. Как пользователь, вы не можете определить поле это или кнопка

2. Размещайте кнопки там, где пользователи ожидают их найти

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

По возможности используйте традиционные макеты и стандартные шаблоны интерфейса

При стандартной компоновке пользователи легко поймут цель каждого элемента. Сочетание стандартной компоновки с понятным визуальным дизайном и широкими пробелами делает макет более понятным.

Не играйте в «найди кнопку» со своими пользователями

Совет: Проверьте свой дизайн на понятность. Когда пользователи впервые переходят на страницу, содержащую действия, которые вы хотите, чтобы они совершили, они должны легко найти соответствующую кнопку.

3. Кнопки с подписью

Кнопки с общими или вводящими в заблуждение подписями могут стать источником разочарования ваших пользователей. Сделайте подписи четко поясняющими, что делает каждая кнопка. В идеале подпись должна описывать действие кнопки. Пользователи должны понимать, что происходит, когда они нажимают на кнопку. Позвольте мне привести простой пример. Представьте, что вы случайно вызвали действие удаления, и теперь вы видите следующее сообщение. Неясная подпись «ОК» не говорит о действии, совершаемом кнопкой Не понятно, что означают «ОК» и «Отмена» в этом диалоговом окне. Большинство пользователей спросят себя: «Что произойдет, когда я нажму «Отмена»?

Никогда не создавайте диалоговое окно или форму, состоящую исключительно из двух кнопок «ОК» и «Отмена».

Вместо «ОК» лучше использовать подпись «Удалить». Кроме того, если «Удалить» является потенциально опасной операцией, вы можете использовать красный цвет, чтобы указать на этот факт. Подпись «Удалить» четко сообщает пользователям о действии Потенциально опасное действие ‘Заблокировать карту’ окрашено в красный цвет. Изображение: Ramotion

4. Правильно подбирайте размер кнопки

Размер кнопки должен отражать приоритет этого элемента на экране. Чем больше кнопка, чем важнее действие.

Установите приоритетность кнопок

Покажите какая кнопка самая важная. Всегда старайтесь сделать кнопку основного действия более заметной. Увеличьте ее размер (сделайте кнопку более крупной, тем самым подчеркнув ее важность) и используйте контрастный цвет, чтобы привлечь внимание пользователя. Dropbox использует размер и цветовой контраст, чтобы привлечь внимание пользователя к кнопке призыва к действию «Попробуйте Dropbox Business бесплатно»

Делайте кнопки удобными для пользователей мобильных телефонов

Во многих мобильных приложениях кнопки слишком малы. Из-за этого пользователи часто опечатываются. Слева: Кнопки подходящего размера. Справа: Кнопки слишком мелкие. Изображение: Apple Исследование MIT Touch Lab показало, что средние значения для подушечек пальцев составляют от 10 до 14 мм, а кончиков пальцев – 8-10 мм. Это делает квадрат 10 мм x 10 мм хорошим минимальным размером для зоны касания. Изображение: uxmag

5. Позаботьтесь о порядке

Порядок кнопок должен отражать характер разговора между пользователем и системой. Спросите себя, какой порядок пользователи ожидают на этом экране и соответственно спроектируйте его.

Интерфейс – это разговор с вашими пользователями

Например, как упорядочить кнопки «Предыдущая / Следующая» в разбивке на страницы? Логично, что кнопка, которая перемещает вас вперед, должна быть справа, а кнопка, которая перемещает вас назад, должна быть слева.

6. Избегайте использования слишком большого количества кнопок

Это распространенная проблема для многих приложений и веб-сайтов. Когда вы предоставляете слишком много опций, ваши пользователи ничего не делают. Выберите для своего приложения или сайта только важные действия, которые вы хотите, чтобы ваши пользователи совершали.

7. Обеспечение визуального или звукового фидбека при взаимодействии

Когда пользователи нажимают на кнопку, они ожидают, что пользовательский интерфейс ответит соответствующим фидбеком. В зависимости от типа операции это может быть визуальная или звуковая обратная связь. Когда пользователи не получают фидбек, они могут подумать, что система не получила команду и повторят действие. Такое поведение часто вызывает ненужное повторение операций. Почему это происходит? Как люди, мы ожидаем определенную обратную связь после того, как мы взаимодействуем с объектом. Это может быть визуальный, звуковой или тактильный фидбек – все, что подтверждает факт взаимодействия. Пользовательский интерфейс обеспечивает визуальный фидбек, который фиксирует нажатие кнопки. Изображение: Vadim Gromov Для некоторых операций, таких как загрузка, стоит не только подтвердить ввод, но и показать текущее состояние процесса. Эта кнопка преобразуется в индикатор прогресса, чтобы продемонстрировать текущее состояние операции. Изображение: Colin Garven

Вывод

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


Перевод статьи Nick Babich

Как создать кнопки социальных сетей для каждой крупной сети

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

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

Содержание

Типы кнопок социальных сетей
Кнопки социальных сетей для Facebook
Кнопки социальных сетей для Instagram
Кнопки социальных сетей для LinkedIn
Кнопки социальных сетей для Twitter
Кнопки социальных сетей для YouTube
Кнопки социальных сетей для Pinterest
Кнопки социальных сетей для Hootsuite

Типы кнопок социальных сетей

Наиболее распространенные типы кнопок социальных сетей предлагают функции «Поделиться», «Нравится» и «Подписаться».Каждый из них служит своей цели, и способы их работы несколько различаются в разных сетях. Но каждый тип обычно делает то, что следует из его названия:

.
  • Кнопки «Поделиться» позволяют пользователям делиться вашим контентом с друзьями и подписчиками
  • Кнопки «Нравится» позволяют им виртуально ставить лайки вашему контенту
  • Кнопки подписки подпишут их на ваши обновления в указанной социальной сети

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

Кнопки социальных сетей для Facebook

Facebook предлагает несколько кнопок социальных сетей: «Поделиться», «Подписаться», «Нравится», «Сохранить» и «Отправить».

Кнопка «Поделиться» в Facebook

Как это работает

Неудивительно, что добавление кнопки «Поделиться через Facebook» на ваш веб-сайт позволяет посетителям делиться вашим контентом со своими друзьями и подписчиками на Facebook. Они могут поделиться вашим контентом на своей временной шкале, в группе или даже в личном сообщении с помощью Facebook Messenger.Пользователи также могут добавлять свои собственные персонализированные сообщения к общему контенту перед публикацией.

Как добавить кнопку «Поделиться» в Facebook

Используйте конфигуратор кнопки «Поделиться» Facebook, чтобы создать код кнопки «Поделиться», который можно вставить в HTML-код вашего веб-сайта.

Параметры кнопки «Поделиться» в Facebook

Когда вы размещаете на своем сайте кнопку «Поделиться» в Facebook, вы можете выбрать, показывать ли количество раз, когда страница уже была опубликована (как мы сделали с кнопкой выше).Если ваша страница получает много репостов в социальных сетях, это число может стать отличным социальным доказательством ценности вашего контента.

Кнопка подписки на Facebook

Как это работает

Кнопка «Подписаться» позволяет пользователям подписываться на общедоступные обновления с соответствующей страницы Facebook.

Как добавить кнопку подписки на Facebook

Используйте интерфейс кнопки «Подписаться» Facebook для создания кода, который вы можете скопировать и вставить в свой HTML.

Параметры кнопки Facebook Follow

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

Кнопка «Мне нравится» Facebook

Как это работает

Нажатие кнопки «Нравится» на вашем веб-сайте имеет тот же эффект, что и нажатие кнопки «Мне нравится» в одной из ваших публикаций в Facebook. Понравившийся контент отображается на временной шкале пользователя Facebook и может появляться в новостных лентах его друзей.

Как добавить кнопку «Мне нравится» в Facebook

Перейдите в конфигуратор кнопки «Нравится» Facebook, чтобы создать код, который нужно скопировать и вставить в HTML-код.

Параметры кнопки «Нравится» для Facebook

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

Еще одна интересная опция заключается в том, что вы можете выбрать для кнопки надпись «Рекомендовать» вместо «Нравится».

Кнопка «Сохранить в Facebook»

Как это работает

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

Как добавить кнопку «Сохранить в Facebook»

Используйте конфигуратор кнопки «Сохранить» Facebook, чтобы создать код для вставки в ваш HTML.

Кнопка отправки Facebook

Как это работает

Кнопка отправки Facebook позволяет пользователям отправлять контент с вашего веб-сайта напрямую своим друзьям через личное сообщение в Facebook Messenger, форму темного обмена в социальных сетях.

Как добавить кнопку отправки Facebook

Как вы уже догадались, у Facebook есть конфигуратор кнопки отправки, который предоставляет вам код, который нужно вставить в ваш HTML-код.

Кнопки социальных сетей для Instagram

В Instagram нет кнопок «Поделиться» или «Мне нравится», что имеет смысл, поскольку природа Instagram как мобильной платформы для обмена фотографиями и видео означает, что она не очень подходит для лайков и обмена веб-контентом.

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

Это означает, что у вас осталось очень мало вариантов кнопок социальных сетей для Instagram. Но есть одно обходное решение, и оно простое: встроить пост в Instagram.

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

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

Как встроить публикацию в Instagram с кнопкой «Подписаться»

  1. Перейдите к определенной публикации, которую вы хотите встроить, или перейдите в свой профиль Instagram и прокрутите назад, чтобы найти соответствующий вариант
  2. Нажмите на пост
  3. Нажмите кнопку «Еще» ( ) в правом нижнем углу
  4. Выбрать Встроить
  5. Выберите, хотите ли вы добавить заголовок, а затем нажмите Копировать код для вставки
  6. Разместите код в своем HTML

Кнопки социальных сетей для LinkedIn

LinkedIn предлагает настраиваемый код JavaScript для кнопок «Поделиться» и «Подписаться».

Кнопка «Поделиться» в LinkedIn

Как это работает

Кнопка «Поделиться» в LinkedIn сочетает в себе функции кнопок «Поделиться» и «Отправить» в Facebook. Это позволяет пользователям делиться вашим контентом в LinkedIn несколькими способами — в своем общедоступном профиле, со своими контактами, в группе или в сообщении одному или нескольким лицам. При нажатии на кнопку открывается всплывающее окно, в котором можно добавить личное сообщение к сообщению, а также параметры обмена.

Как добавить кнопку «Поделиться» в LinkedIn

Перейдите к генератору подключаемых модулей общего доступа LinkedIn, чтобы создать код JavaScript, который вы можете вставить в свой HTML.

Параметры кнопки «Поделиться» в LinkedIn

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

Кнопка подписки на LinkedIn

Как это работает

Нажатие кнопки «Подписаться на LinkedIn» позволяет пользователям следить за вашей компанией в LinkedIn, не покидая ваш веб-сайт.

Как добавить кнопку подписки LinkedIn

Используйте генератор подключаемых модулей LinkedIn Follow Company, чтобы создать код для вставки в HTML-код.

Параметры кнопки отслеживания LinkedIn

Как и в случае с кнопкой «Поделиться» в LinkedIn, вы можете отображать количество людей, которые уже подписаны на вашу компанию в LinkedIn, как часть кнопки «Подписаться».

Но есть и более интересный вариант для изучения. Плагин профиля компании работает почти так же, как простая кнопка «Подписаться», но предоставляет больше информации о вашей компании простым наведением мыши. Чтобы попробовать, попробуйте навести указатель мыши на кнопку ниже.

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

Кнопки социальных сетей для Twitter

В дополнение к стандартным кнопкам «Поделиться» и «Подписаться» Twitter предлагает кнопки для твита с определенным хэштегом или для @-упоминания кого-либо одним щелчком мыши. Также есть кнопка, которая позволяет кому-то отправить вам личное сообщение в Twitter.

Кнопка «Поделиться в Твиттере»

Как это работает

Когда пользователь нажимает кнопку «Твитнуть», открывается всплывающее окно с твитом, содержащим заголовок страницы и ее URL-адрес, или вы можете задать собственный URL-адрес.Пользовательский URL-адрес позволяет вам включать параметры UTM, чтобы отслеживать, сколько трафика вы получаете от кнопки «Поделиться» в Твиттере. Пользователь может добавить больше текста, если пожелает, перед отправкой твита.

Как добавить кнопку «Поделиться в Твиттере»

  1. Перейдите на сайт publish.twitter.com, прокрутите вниз и нажмите Кнопки Twitter
  2. Нажмите Кнопка «Поделиться»
  3. Над полем кода нажмите установить параметры настройки
  4. Введите свои настройки параметров твита и размера кнопки, затем нажмите Обновить
  5. Скопируйте и вставьте предоставленный код в свой HTML
  6. .
Параметры кнопки «Поделиться в Twitter»

Используя параметры настройки, вы можете включить хэштег и имя пользователя «через», что гарантирует, что вы получите признание как источник вашего отличного контента.Вы также можете выбрать предварительное заполнение текста.

Кнопка подписки на Twitter

Как это работает

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

Как добавить кнопку подписки на Twitter

  1. Перейти к публикации.twitter.com, прокрутите вниз и нажмите Кнопки Twitter
  2. Нажмите Кнопка «Подписаться»
  3. Введите свой дескриптор Twitter, включая символ @ (например, @Hootsuite)
  4. Нажмите Предварительный просмотр
  5. Над полем кода нажмите установить параметры настройки
  6. Введите свои настройки параметров твита и размера кнопки, затем нажмите Обновить
  7. Скопируйте и вставьте предоставленный код в свой HTML
  8. .
Опции кнопки Twitter

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

Кнопка упоминания в Твиттере

Как это работает

Когда кто-то нажимает кнопку упоминания в Твиттере на вашем веб-сайте, появляется всплывающее окно с пустым твитом, начинающимся с @-упоминания вашего имени пользователя. Это может быть отличным способом побудить читателей взаимодействовать с вашей командой в Твиттере или поощрить запросы в службу поддержки через сеть.

Как добавить кнопку упоминания в Твиттере

  1. Перейти к публикации.twitter.com, прокрутите вниз и нажмите Кнопки Twitter
  2. Нажмите Кнопка упоминания
  3. Введите свой дескриптор Twitter, включая символ @ (например, @Hootsuite)
  4. Нажмите Предварительный просмотр
  5. Над полем кода нажмите установить параметры настройки
  6. Введите свои настройки параметров твита и размера кнопки, затем нажмите Обновить
  7. Скопируйте и вставьте предоставленный код в свой HTML
  8. .
Параметры кнопки упоминания Twitter

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

Кнопка хэштега Twitter

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

Как добавить кнопку хэштега Twitter

  1. Перейти к публикации.twitter.com, прокрутите вниз и нажмите Кнопки Twitter
  2. Нажмите Кнопка хэштега
  3. Введите выбранный вами хэштег, включая символ # (например, #HootChat)
  4. Нажмите Предварительный просмотр
  5. Над полем кода нажмите установить параметры настройки
  6. Введите свои настройки параметров твита и размера кнопки, затем нажмите Обновить
  7. Скопируйте и вставьте предоставленный код в свой HTML
  8. .
Параметры кнопки хэштега Twitter

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

Кнопка сообщения Twitter

Как это работает

Кнопка сообщения в Твиттере позволяет пользователям отправлять вам личные прямые сообщения в Твиттере. Обратите внимание, что это функция, отличная от кнопки отправки Facebook, которая позволяет пользователям отправлять ваш контент в личном сообщении всем, с кем они связаны.С помощью кнопки сообщения в Твиттере пользователи могут связаться только с вами, а не с кем-либо еще в Твиттере. Хотя это не поможет расширить ваш социальный охват, это может стать отличным способом побудить людей связываться с вашей службой поддержки клиентов и отделом продаж через Twitter.

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

Как добавить кнопку сообщения Twitter

  1. Войдите в свою учетную запись Twitter
  2. В левом столбце нажмите Конфиденциальность и безопасность
  3. Прокрутите вниз до раздела «Прямые сообщения» и установите флажок рядом с «Получать личные сообщения от всех»
  4. В левой колонке нажмите Ваши данные Twitter. Для доступа к этому экрану может потребоваться ввести пароль
  5. .
  6. Выберите и скопируйте свой идентификатор пользователя, который отображается под вашим именем пользователя
  7. Перейти к публикации.twitter.com, прокрутите вниз и нажмите Кнопки Twitter
  8. Нажмите кнопку Сообщение
  9. Введите свое имя пользователя в верхнем поле, включая символ @ (например, @Hootsuite)
  10. Вставьте свой идентификатор пользователя в нижнее поле
  11. Нажмите Предварительный просмотр
  12. Над полем кода нажмите установить параметры настройки
  13. Введите свои настройки параметров твита и размера кнопки, затем нажмите Обновить
  14. Скопируйте и вставьте предоставленный код в свой HTML
  15. .
Параметры кнопки сообщения Twitter

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

Кнопки социальных сетей для YouTube

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

Кнопка подписки на YouTube

Как это работает

Как и кнопка подписки в Твиттере, кнопка подписки на YouTube требует двух щелчков. Во-первых, когда кто-то нажимает на кнопку подписки, ваш канал YouTube открывается в новом окне с окном подтверждения подписки.Затем пользователь должен нажать «Подписаться» еще раз, чтобы подписка вступила в силу.

Как добавить кнопку подписки на YouTube

Используйте страницу настройки кнопки YouTube, чтобы создать код, который необходимо вставить в HTML-код.

Опции кнопки подписки на YouTube

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

Кнопки социальных сетей для Pinterest

Кнопка сохранения Pinterest

Как это работает

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

  1. Наведение на изображение : вместо того, чтобы размещать отдельную кнопку Pinterest на вашем веб-сайте, этот параметр создает код, который вызывает кнопку Pin It, когда кто-то наводит указатель мыши на любое изображение на вашей странице. Это вариант, наиболее рекомендуемый Pinterest.
  2. Любое изображение : С помощью этого параметра вы размещаете кнопку Pinterest на своей веб-странице. Нажав на нее, пользователь может сохранить любое изображение с вашего сайта на свои доски Pinterest.
  3. Одно изображение : В этом случае кнопка сохранения применяется только к одному изображению на вашей странице. Это самый сложный вариант с точки зрения кодирования.

Как добавить кнопку сохранения Pinterest — наведение изображения или любой стиль изображения

  1. Перейдите в конструктор виджетов Pinterest и нажмите кнопку Сохранить
  2. Выберите тип кнопки, которую вы хотите использовать: изображение при наведении или любое изображение
  3. Выберите предпочтительные параметры размера и формы кнопки
  4. Наведите указатель мыши на образец изображения, чтобы просмотреть кнопку
  5. Скопируйте код кнопки и вставьте его в свой HTML
  6. Для любого изображения скопируйте и вставьте изображение.js из нижней части страницы конструктора виджетов в ваш HTML, прямо над тегом
  7. .

Как добавить кнопку сохранения Pinterest — один стиль изображения

  1. Перейдите к конструктору виджетов Pinterest и нажмите кнопку Сохранить
  2. Выберите предпочтительные параметры размера и формы кнопки
  3. В новом окне браузера перейдите на страницу вашего веб-сайта, где отображается изображение, с которым вы хотите работать
  4. Скопируйте и вставьте URL-адрес этой веб-страницы в поле URL-адреса в конструкторе виджетов
  5. На веб-странице щелкните правой кнопкой мыши изображение, с которым хотите работать, и выберите Копировать URL-адрес изображения
  6. Вставьте URL-адрес изображения в поле Изображение в конструкторе виджетов
  7. Введите описание изображения в поле Описание в конструкторе виджетов.Это появится под вашим изображением, когда кто-то сохранит его в Pinterest
  8. .
  9. Нажмите образец кнопки Pin It в конструкторе виджетов, чтобы протестировать кнопку
  10. Скопируйте код кнопки и вставьте его в свой HTML
  11. Скопируйте и вставьте скрипт pinit.js из нижней части страницы конструктора виджетов в свой HTML-код прямо над тегом

Параметры кнопки сохранения Pinterest

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

Кнопка подписки Pinterest

Хутсьют

Как это работает

Когда кто-то нажимает кнопку подписки Pinterest на вашем веб-сайте, появляется окно предварительного просмотра, в котором отображаются ваши последние пины. Затем они нажимают кнопку «Подписаться» в этом предварительном просмотре, чтобы начать следить за вашей учетной записью Pinterest.

Как добавить кнопку подписки Pinterest

  1. Перейдите к конструктору виджетов Pinterest и нажмите Подписаться
  2. Введите URL-адрес своего профиля Pinterest
  3. Введите название вашей компании, как вы хотите, чтобы оно отображалось на кнопке
  4. Скопируйте код кнопки и вставьте его в свой HTML
  5. Скопируйте и вставьте файл pinit.js из нижней части страницы конструктора виджетов в ваш HTML, прямо над тегом
  6. .
Опции кнопки подписки Pinterest

Единственный вариант с кнопкой «Подписаться» в Pinterest — отображать название вашей компании. Вы можете использовать свое имя пользователя Pinterest или полное название компании. В любом случае, придерживайтесь чего-то простого для понимания пользователями.

Кнопки социальных сетей для Hootsuite

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

Кнопка «Поделиться Hootsuite»

Как это работает

Когда пользователь нажимает кнопку Hootsuite на вашем веб-сайте, открывается окно с интерфейсом, содержащим ссылку на ваш контент. Пользователь может выбрать, в каких социальных сетях поделиться им: Twitter, Facebook, LinkedIn, Google+ или во всех вышеперечисленных. Они могут добавить личное сообщение перед отправкой и решить, публиковать ли сразу, запланировать публикацию на определенное время в будущем или использовать функцию автоматического планирования Hootsuite.

Как добавить кнопку общего доступа Hootsuite

Перейдите на hootsuite.com/social-share, введите свой URL-адрес, скопируйте и вставьте код в свой HTML-код.

Параметры кнопки общего доступа Hootsuite

Вы можете выбрать один из нескольких стилей кнопок.

Поднимите свои навыки работы с социальными сетями на новый уровень с помощью бесплатного онлайн-обучения и видео от Академии Hootsuite .

Начало работы

Шесть правил, которым нужно следовать

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

Продолжайте читать эту тему в этой статье, созданной командой Amelia (лучший плагин бронирования для WordPress).

Основы проектирования кнопки

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

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

Это краткое руководство, которое поможет вам понять кнопки и перечислит шесть различных правил, которые обеспечат успех ваших кнопок.

Типы кнопок

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

Текст

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

Призрак

Кнопки-призраки

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

Поднятый

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

Переключить

Тип кнопки-переключателя используется теми, кто хочет сгруппировать несколько действий в одну кнопку или продемонстрировать ряд настроек.

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

В последнем случае кнопка-переключатель позволяет активировать или деактивировать различные настройки.

Плавающий

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

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

Цвет и контраст

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

Мы рекомендуем оформить их следующим образом:

  • Основные действия — сплошной цвет, высокая контрастность
  • Второстепенные действия — прозрачный цвет, сплошной контур
  • Третичные действия – подчеркнутый текст

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

Шесть золотых правил

1. Сохраняйте традиции

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

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

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

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

2. Сделайте их видимыми

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

Поставьте себя на место посетителя: какую область веб-сайта вы замечаете первой, когда заходите на нее? Это то место, где вы хотите, чтобы ваша кнопка была.Обычное размещение — один из наиболее важных аспектов дизайна кнопок, поэтому не упускайте его из виду.

Используйте пустое пространство и контрастные цвета, чтобы подчеркнуть наличие кнопки.

3. Промаркируйте их

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

Минимальный размер шрифта, который вы должны использовать для кнопок, составляет 16 пикселей. Все, что меньше этого, не достаточно видно. Учитывайте это и при разработке формы кнопки. Кроме того, оставьте достаточно свободного места вокруг этикетки, чтобы кнопка выглядела хорошо.

4. Размер

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

Меньшие кнопки относятся к менее важным действиям. Используйте MIT Touch Lab как инструмент, который может помочь вам в этом процессе. Они рекомендуют размер 10 мм x 10 мм, но вы можете поиграть с ним в соответствии с доступным пространством на вашем интерфейсе.

5. Не используйте слишком много

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

Одна кнопка на странице — это цель, к которой вы должны стремиться. Может быть, два, если это абсолютно необходимо.

6. Добавить отзыв

Когда кнопка нажата, сделайте что-нибудь, чтобы пользователь знал, что действие было отмечено. В противном случае они могут перенажать кнопку, и приложение или веб-сайт могут аварийно завершить работу.Взаимодействие должно быть таким же хорошим, как и внешний вид кнопки. Вы можете заставить кнопку менять цвет или издавать звук при нажатии.

Завершение размышлений о дизайне этих кнопок

Надеюсь, советы, которые вы нашли в этой статье, будут вам полезны. Дизайн кнопок не так прост, как думают люди. Это хорошая идея, потратить свое время на чтение о CTA и их влиянии на пользователей.

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

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

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

примеров и советов по созданию эффектных кнопок

Создание красивых кнопок для Интернета само по себе является искусством.Лучшие кнопки часто кажутся простыми и легкими в дизайне, но они обманчиво сложны и часто состоят из множества тонких элементов дизайна, подкрепленных солидными маркетинговыми теориями. Сегодня мы рассмотрим некоторые принципы, лежащие в основе отличного дизайна кнопок , и дадим вам несколько практических советов по улучшению кнопок вашего собственного веб-сайта и повышению конверсии/рейтинга кликов.

Советы и приемы создания эффектных кнопок

Ниже приведены некоторые применимые советы по улучшению ваших веб-кнопок и повышению их кликабельности.
1. Сделайте кнопки жирными и яркими
Несмотря на то, что жирная/яркая кнопка явно не подходит для каждого веб-макета, как правило, именно эти кнопки получают наибольшее количество кликов. Более смелая/яркая кнопка, естественно, привлекает больше внимания посетителей, поскольку человеческий глаз привлекает цвет и сплошные оттенки. Если вы проводите сплит-тестирование своих дизайнов, попробуйте увеличить насыщенность ваших кнопок (в пределах приемлемого уровня) и посмотрите, как ваши рейтинги кликов немного повысятся.
2.Кнопки большего размера привлекают больше внимания
Это еще одна здравая часть теории кнопок, но многие владельцы веб-сайтов игнорируют ее. Вообще говоря, большие кнопки, естественно, привлекут больше внимания. Снова и снова было доказано, что, увеличивая размер ваших кнопок призыва к действию, больше людей заметят их и, соответственно, нажмут на них. Тенденция к ОГРОМНЫМ кнопкам web 2.0, возможно, закончилась, но, интегрировав со вкусом большую кнопку в свой дизайн, вы определенно побудите своих посетителей к действию.
3. Кнопки должны соответствовать теме вашего сайта
Несмотря на то, что контраст хороший (мы вернемся к этому в следующем шаге), вы должны помнить о том, чтобы хорошо интегрировать свои кнопки с окружающим дизайном веб-сайта. Если вы запускаете веб-сайт, посвященный природе, то было бы довольно странно иметь кнопку с текстурой из промышленной стали. Даже если бы она привлекла внимание, это был бы неправильный тип внимания, поскольку кнопка выглядела бы неуклюжей и визуально противоречила бы друг другу. Попробуйте найти общие темы, настроения и мотивы в дизайне вашего веб-сайта, а затем искусно интегрируйте их в дизайн кнопок.Взятие элементов с окружающего веб-сайта (будь то иконки, текстуры, освещение и т. д.) может многое добавить к сильному дизайну кнопок.
4. Контраст — это хорошо!
Еще один важный элемент теории дизайна кнопок заключается в том, что контраст повышает рейтинг кликов. Если у вашего веб-сайта простой белый фон, не делайте кнопку светло-серой или кремовой, сделайте ее черной или сплошной жирный цвет! Контраст — один из самых мощных способов привлечь внимание к кнопкам. Это также относится к тексту, который должен хорошо контрастировать с цветом кнопки.Не делайте ваши кнопки чем-то, что люди могут пролистать, сделайте их заметными.
5. Маленькие детали имеют большое значение
Как и в любом другом дизайне, мелкие детали могут превратить вашу работу из «хорошей» в «великолепную». Кнопка веб-сайта может быть довольно простым визуальным элементом, но не забывайте обращать внимание на тонкие детали. Тонкая рамка, едва заметный градиент, бледный рисунок или световой эффект могут иметь огромное значение. Такие визуальные штрихи не только демонстрируют профессионализм и внимание к деталям, но и часто добавляют глубины вашим кнопкам, заставляя их выделяться и выделяться на окружающей странице.
6. Не забудьте текст!
Вероятно, основной элемент, который люди упускают из виду при разработке дизайна кнопок, — это текст, но он может оказать наибольшее влияние. В этом смысле ваш текст кнопки или «копия» имеет решающее значение для его успеха. Прошли те времена, когда было достаточно «купить сейчас» или «присоединиться». Людям нравится немного творчества в тексте кнопки, и они также ценят подсказку о преимуществах вашего сервиса/веб-сайта. Попробуйте некоторые из следующих приемов, чтобы сделать текст кнопки более интересным:
  • Вместо того, чтобы просто «купить сейчас», используйте «Попробовать (ваш сервис)»
  • Чтобы сделать еще один шаг вперед, «Попробуйте (вашу услугу) по (низкой цене)» с помощью «Попробуйте (вашу услугу) и (Дайте краткую выгоду)»
  • Другой вариант: ‘(Общая проблема)? Попробуйте (Ваш сервис)
Примером из реальной жизни, который вы увидите в этом посте, является Akismet, главная кнопка призыва к действию которого гласит: «Начать и попрощаться со спамом».
7. Подумайте об окружающих деталях
Успешный дизайн кнопки не заканчивается на самой кнопке, вам также необходимо учитывать детали окружающего веб-сайта. Подумайте о том, как это окружающее пространство может указать людям на кнопку с призывом к действию и помочь подчеркнуть ее. Вот несколько практических идей:
  • Если ваш веб-дизайн имеет общий источник света, убедитесь, что это отражено в дизайне вашей кнопки (т.е. убедитесь, что подсветка/тени ваших кнопок относятся к более широкому источнику света на странице)
  • Используйте фигуры, например стрелки, чтобы привлечь внимание к кнопке.Было доказано, что они значительно увеличивают рейтинг кликов.
  • Если вы предлагаете услугу, подумайте об установлении доверия/доверия. Использование знаков «безопасный платеж», крупных логотипов кредитных карт или отзывов рядом с вашей кнопкой может повысить вероятность того, что люди нажмут на нее.
  • Учитывайте количество отступов вокруг кнопки. Вообще говоря, если у кнопки больше отступов, она будет казаться более изолированной и привлечет больше внимания, так как вокруг нее будет меньше конкурирующего контента.
8. Пример волшебной кнопки
В своем блоге Smart Passive Income Пэт Флинн написал статью о том, как он увеличил свой доход от электронной книги за 5 минут, просто заменив кнопку «Купить сейчас» на «Волшебную кнопку», изобретенную маркетологом Райаном Дайссом. Вы можете прочитать статью здесь: Как увеличить свой доход за 5 минут или меньше. Мы не будем повторять детали всего поста Пэта, но, по сути, Райан Дайсс придумал дизайн кнопки путем раздельного тестирования 43 вариантов, чтобы найти тот, который лучше всего конвертируется.Теперь вы, вероятно, согласитесь, что последняя кнопка не самая привлекательная или элегантная. Тем не менее, он, несомненно, выполняет свою работу! Независимо от того, выберете вы что-то подобное или нет, вы должны отказаться от некоторых принципов, которые использует эта кнопка (она большая, полужирная, использует окружающие детали, такие как граница/кредитные карты/цена со скидкой, чтобы привлечь больше внимания и т. д.). ).

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

Groupon
У Groupon один из самых уникальных дизайнов кнопок.Кнопка сочетается с индикатором выполнения, который побуждает людей увидеть, что их ждет впереди, если они зарегистрируются на сайте. Стрелка вперед и жирная синяя кнопка одинаково привлекательны.

Bundlr
Bundlr использует на своем сайте очень простую, но эффективную кнопку призыва к действию, которая работает по нескольким причинам. Он явно очень смелый и красочный на более простом фоне, что помогает ему выделиться. Повелительный текст «начать сейчас» также подталкивает пользователей в правильном направлении. Наконец, тонкие штрихи дизайна, такие как тень, граница в 1 пиксель и внутренняя подсветка, помогают кнопке выделяться и выглядеть более профессионально.

Status Board
Кнопка Status Board — это все, что мне нравится в эффективном дизайне кнопок. Это ярко, это жирно, и это заставляет вас хотеть щелкнуть по нему! Эффект скоса действительно выделяет кнопку и делает ее более «нажимаемой», что должно помочь их конверсиям. Выбор текста также интересен, уклоняясь от стандартных веб-шрифтов и выбирая что-то более креативное.

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

My Design Deals
My Design Deals использует эффективный дизайн кнопки, чтобы привлечь подписчиков на свою рассылку. Яркий салатово-зеленый дизайн кнопки очень хорошо контрастирует с темно-серым фоном, а сопровождающая ее желтая стрелка помогает привлечь дополнительное внимание к области. Императив «получить бесплатные обновления сейчас» побуждает пользователей регистрироваться, предоставляя им прямое действие.

Club Divot
Club Divot показывает, что дизайн кнопок не должен быть скучным! Их очаровательная деревянная кнопка идеально сочетается с тематикой игры в гольф и создает очень естественное впечатление от сайта. Встроенный дизайн с резкой белой подсветкой в ​​верхней части также придает глубину.

Kissmetrics
Можно было бы надеяться, что компания, занимающаяся онлайн-метриками и тестированием, имеет эффективный дизайн кнопок, и Kissmetrics вас не разочарует! Их заниженная кнопка профессиональна и гладка и идеально вписывается в окружающий чистый веб-сайт.Копия «Начни с Kissmetrics» эффективна, поскольку она довольно непринужденная, но полностью относится к их компании.

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

Zero Bundle
Zero Bundle — классический пример смелой яркой кнопки, которая очень хорошо конвертируется.Зеленая кнопка призыва к действию сочетается с креативным жирным текстом, чтобы привлечь дополнительное внимание. Белому тексту дается жирная тень, чтобы он выделялся.

App Sumo
Приложение App Sumo начиналось как «живой, а не идеальный» вид бизнеса, но когда они выросли до гиганта на рынке онлайн-сделок, они начали тщательно тестировать каждый элемент своей страницы. Можно с уверенностью сказать, что их нынешние кнопки — лучшая конвертация, которую они когда-либо имели. Кнопка текущей сделки невероятно яркая и использует очень высокий шрифт, чтобы занять большую часть кнопки.

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

Горячий соус Лихорадка
Горячий соус Лихорадка имеет действительно интересный шероховатый дизайн кнопки на своем веб-сайте, чтобы побудить своих посетителей к действию. Кнопка имеет грубую накладку текстуры, а также уникальную актуальную иконку.В целом он большой, привлекательный и хорошо продуманный.

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

Mighty Deals
Mighty Deals использует очень умную кнопку, которая хорошо сочетается с дизайном их сайта. Кнопка имеет форму бирки продаж и поэтому действительно уникальна для их веб-сайта.Жирный текст в сочетании с ярко-оранжевым градиентом кнопки очень привлекает внимание.

Desk Time
Desk Time использует принцип «чем больше, тем лучше», используя ОГРОМНУЮ кнопку призыва к действию, которая побуждает пользователей подписаться на бесплатную пробную версию. Кнопка очень чистая и красочная и использует дополнительный слоган «кредитная карта не требуется» для повышения конверсии.

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

Akismet
Кнопка призыва к действию на Akismet вполне может быть просто другой кнопкой. Тем не менее, это невероятно привлекает внимание по нескольким причинам. Помимо ярко-синего дизайна, жирная белая рамка добавляет гораздо больше контраста на зеленом фоне. Текст дает мгновенную причину для подписки «попрощайтесь со спамом», что дает людям больше стимула кликать.

Ampersand Commerce
Ampersand Commerce — классический пример кнопки, эффектно контрастирующей с окружающим дизайном. Кнопка жирная, красочная и «сплошная», в то время как окружающая область довольно разреженная, монотонная и более простая. Этот контраст гарантирует, что ваш взгляд сразу же будет прикован к кнопке.

Xhtml Genius
Очень четкий и профессиональный дизайн кнопки, классически кликабельной. Текст «ЗАКАЗАТЬ СЕЙЧАС» выделяется тем, что он написан заглавными буквами и выделен жирным шрифтом, чем весь окружающий текст веб-сайта.Красный цвет кнопки дополняет оттенки светло-красного и зеленого в остальной части сайта, выделяясь при этом на простом фоне.

Что ты думаешь?

Мы хотели бы знать, что вы, ребята, думаете! Были ли у вас какие-нибудь любимые примеры из этого поста или, может быть, техника, которая вам особенно запомнилась? Что, по вашему мнению, делает кнопку отличной? (rb)

Фирменная кнопка | Сайт поддержки Omni CMS

Вместо того, чтобы полагаться на простые текстовые ссылки, вы можете создавать кнопки, которые могут менять цвет при наведении курсора мыши или отображаются полужирным черно-белым цветом, что особенно привлекает внимание для призывов к действию, таких как ЗАЯВКА СЕЙЧАС или УЗНАТЬ БОЛЬШЕ.

Кнопки будут выглядеть так:

Применить сейчас! Узнать больше

Есть 2 способа создания кнопки:

Один — создать ссылку и применить к ней класс. Это самый простой способ создать кнопку и именно его мы рекомендуем использовать для большинства кнопок.

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

1. Создание ссылки и применение класса

Выделите текст, который нужно связать, и нажмите кнопку вставки/изменения ссылки на панели инструментов.В диалоговом окне «Вставить ссылку» выберите один из двух вариантов кнопки в раскрывающемся списке «Класс».

 

Один из них — «Кнопка (красный на белом)» — красный текст на белом фоне, а другой это «Кнопка (белое на черном)» — белый текст на черном фоне. Выберите класс щелкните OK. (Если вы ссылаетесь на внешний сайт, также измените цель в «Новое окно».)

Посмотрите наш учебник по использованию класса кнопки

2. Использование фрагмента кнопки бренда

 

Используйте веб-часть «Кнопка»

При добавлении современной страницы на сайт вы добавляете и настраиваете веб-части, которые являются строительными блоками вашей страницы. В этой статье основное внимание уделяется веб-части «Кнопка».

Веб-часть «Кнопка» позволяет легко добавить на страницу кнопку с собственной меткой и ссылкой.

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

Добавление веб-части кнопки

  1. Перейдите на страницу, на которую вы хотите добавить веб-часть «Кнопка».

  2. Если ваша страница еще не находится в режиме редактирования, нажмите Изменить в правом верхнем углу страницы.

    Наведите указатель мыши выше или ниже существующей веб-части, и вы увидите строку с обведенным +, например:

  3. Щелкните + , затем найдите и выберите кнопку из списка веб-частей.

  4. Выберите Изменить веб-часть на панели инструментов слева.

  5. На панели свойств справа введите текст метки в поле Метка .

    Введите ссылку в поле Ссылка . Убедитесь, что ваша ссылка начинается с http://, https:// или mailto: если ваша ссылка добавлена ​​без одного из этих протоколов, вместо вас будет добавлен https://.

  6. В разделе Выравнивание выберите способ выравнивания кнопки (по левому краю, по центру или по правому краю) в ее столбце на странице.

Цвет кнопки

Цвет кнопки основан на акцентном цвете темы сайта и не может быть изменен независимо от темы сайта. Дополнительные сведения об изменении темы сайта см. в статье Изменение внешнего вида сайта SharePoint.

10 распространенных ошибок при создании кнопок веб-сайта | by Trista liu

Кнопки, как и ссылки, являются наиболее широко используемыми элементами взаимодействия в веб-дизайне, и их можно найти почти на каждом веб-сайте. Кнопки, которые обычно появляются на веб-сайтах, можно разделить на две категории: кнопки с функцией отправки и кнопки, эквивалентные ссылке. Ссылки, которые должны быть выделены на веб-сайтах, естественно представлены в виде кнопок. Тогда как правильно создать кнопки веб-сайта , чтобы пользователям было легко завершить свои операции?

Иногда дизайнеры допускают несколько ошибок при создании веб-кнопок.Вот 10 распространенных ошибок, когда UI/UX-дизайнеры создают кнопки веб-сайта .

Ерунда. Зачем пользователю сбрасывать то, что он/она только что завершил? Если допущена ошибка, он может отредактировать ее, а не сбрасывать все содержимое и перезапускать. Что еще хуже, кнопки сброса обычно расположены на левой стороне, и поэтому их можно легко нажать случайно. Кто знает, сколько бизнеса было потеряно разочарованными пользователями, покинувшими сайт после того, как они случайно удалили свои материалы?

Сделайте кнопки БОЛЬШИМИ! Когда вы создаете кнопки на веб-сайте, вы должны убедиться, что люди могут видеть кнопки «заказать сейчас», если вы действительно хотите, чтобы они нажали на них.

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

Просто логично, что кнопки для перемещения вперед должны быть справа, а кнопки для перемещения назад — слева.

Чтобы выглядеть «оригинально», некоторые дизайнеры могут создавать кнопки веб-сайта, которые очень-очень причудливы, но выглядят совершенно иначе, чем привычные кнопки.Таким образом, основное правило состоит в том, чтобы сделать его очень простым, и обычная серая кнопка с черным текстом просто работает. Причудливая кнопка, как показано ниже, не имеет:

Лучшие материалы для дизайна UI/UX бесплатно

СКАЧАТЬ

Когда вы создаете кнопку веб-сайта, имейте в виду, что не все кнопки могут быть названы «отправить» или «далее». на основе последующего действия. В идеале метка кнопки должна четко описывать ее действие. Например, «Следующий шаг», «Оформить заказ» или «Обновить мой профиль». Также рекомендуется добавить «>>» или «<<» к метке, чтобы подчеркнуть направление действия.

Пользователи могут быть очень сбиты с толку и в конечном итоге ничего не делать и просто уйти, если они столкнутся со слишком большим количеством кнопок. Когда вы создаете кнопки веб-сайта , выберите наиболее важное действие, которое вы хотите, чтобы ваши пользователи выполняли, и используйте одну большую и четкую кнопку. Если обязательно требуются другие действия, используйте кнопки меньшего размера. Возьмем, к примеру, GoDaddy, у него так много кнопок, что очень сложно понять, что делать.

Некоторые кнопки настолько уродливы, что все, что вам нужно сделать, это держать курсор как можно дальше от них.Хотите нажать следующие кнопки?

Если от пользователей требуется щелкнуть кнопку, им следует сообщить функцию кнопки перед ее нажатием. Звучит очевидно, не так ли? Не для всех:

Кнопки, которые мигают, вращаются или имеют ужасную анимацию, будут вызывать отвращение и отвлекать ваших пользователей. Такие кнопки были популярны на заре Интернета. К сожалению, некоторые выжили. Если вы хотите, чтобы ваш сайт выглядел по-дилетантски, используйте анимированную кнопку, подобную этой:

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

Обнаружили ли вы какие-либо другие неправильные способы использования при создании кнопок веб-сайта? Поделитесь с нами в области комментариев.

Чтобы узнать больше:

Полное руководство — Разница между удобством использования и пользовательским опытом

Что можно и чего нельзя делать при проектировании, ориентированном на пользователя

4 основные ошибки UX и как их эффективно избежать Эффективные кнопки призыва к действию для вашего сайта

 

Какие элементы делают веб-сайт привлекательным? Привлекательный дизайн? Привлекательный контент? Удобная навигация? Да, эти части имеют решающее значение, когда речь идет о веб-сайте, который люди захотят постоянно посещать и проводить на нем время.Однако другим важным, но часто упускаемым из виду компонентом являются хорошо продуманные кнопки призыва к действию (CTA). Кнопки CTA — это то, что мотивирует посетителей совершать действия на вашем сайте, поэтому они должны быть интересными и визуально привлекательными. Они могут быть небольшими, но они влияют на ваш бизнес несколькими способами.

 

 

Что такое кнопки CTA?

 

 

Кнопки CTA служат для различных целей на веб-сайте, но их основная функция заключается в том, чтобы заставить посетителей вашего веб-сайта что-то сделать (побудить к определенному действию).Вы уже видели их раньше: «Нажмите, чтобы загрузить», «Отправить», «Свяжитесь с нами»… список можно продолжать и продолжать. Эти призывы к действию довольно распространены и могут легко потеряться в мешанине, поскольку они такие же, как и почти на любом другом веб-сайте. Чтобы люди заметили и приняли меры, ваши кнопки CTA должны выделяться на вашей странице и среди других, которые ваши посетители, несомненно, увидят и на других веб-сайтах.

 

Еще одна особенность CTA-кнопок заключается в том, что они просто кнопок .Если вы хотите, чтобы люди обращали внимание на призывы к действию на вашем сайте, они должны выделяться! Если на вашей странице есть только выделенный текст с надписью «Нажмите здесь», это вообще не будет генерировать много трафика. С другой стороны, создание CTA-кнопки выделяется и привлекает читателя.

 

 

Не существует единого способа создать кнопку CTA для веб-сайта, на самом деле все наоборот! Будьте изобретательны и оригинальны в своих призывах к действию. Вся цель CTA состоит в том, чтобы привлечь внимание вашего веб-посетителя, заинтересовать его и побудить его выполнить действие на вашем веб-сайте (например, отправить контактную форму, загрузить электронную книгу или посетить определенную страницу).Вы должны создавать свои кнопки с вашими посетителями и действием, которое вы хотите, чтобы они выполнили. Вскоре вы увидите, что чем более продвинутые, привлекательные и интересные CTA-кнопки у вас есть, тем больше у вас будет достигнутых целей в Analytics.

 

 

Как говорится в старой поговорке, «презентация — это ключ »! Человеческий глаз хорошо выявляет аномалии в рамках общего шаблона, а также замечает объекты, которые выглядят одинаково.Сделайте кнопки CTA очевидными и разместите их в фокусе вашей веб-страницы, чтобы увеличить вероятность действия посетителя.

 

 

советов по созданию лучших кнопок CTA для вашего веб-сайта

 

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

 

 

Ниже приведены 4 обязательных элемента при создании новой кнопки CTA:

 

 

1.Используйте ориентированные на действие глаголы второго лица

 

Здесь текст, который вы используете, инструктирует посетителей что-то делать. Использование таких слов, как «Открыть», «Запросить», «Загрузить» и «Узнать», предоставляет посетителям простое, но описательное действие, которое необходимо предпринять, чтобы перейти к следующему шагу. Это ваш шанс использовать творческие глаголы! Исследования показали, что чем сложнее кнопка, тем больше вероятность того, что посетитель на нее нажмет. Итак, вы захотите использовать что-то еще, кроме «Нажмите здесь», чтобы вдохновить на немедленные действия.

 

 

2. Предоставьте четкое ценностное предложение

 

Прежде чем нажать на любую кнопку CTA, любой посетитель веб-сайта может взвесить ценность того, что он получает в обмен на то, что вы даете ему указания, что делать. Таким образом, вы хотите убедиться, что в вашем CTA четко указаны преимущества продолжения. Как только этот критерий будет выполнен, посетитель должен иметь лучшее представление о том, чего ожидать в будущем. Будьте откровенны с посетителем своего веб-сайта и используйте текст, например «Бесплатная загрузка» или «Бесплатная 30-дневная подписка».Чем честнее вы будете в своих CTA, тем комфортнее вашим посетителям будет в вашей компании.

 

 

3. Создайте ощущение срочности

 

В современном быстро меняющемся технологическом мире люди постоянно выполняют несколько задач одновременно, и их легко отвлечь. Предметы, привлекающие их внимание, постоянно добавляются в их списки дел. Тем не менее, как только CTA вызвал интерес у посетителя, он должен создать представление о том, что они должны действовать немедленно, чтобы действие не было запротоколировано и забыто.Добавление «Спешите», «Ограниченное время», «Сейчас» или «Сегодня» к призыву к действию может создать ощущение срочности и побудить посетителей оставаться сосредоточенными и действовать немедленно.

 

 

4. Обеспечьте согласованность между призывом к действию и целевой страницей

 

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

Добавить комментарий

Ваш адрес email не будет опубликован.