Установка онлайн-записи на сайт (произвольная кнопка). Кнопки на сайт


Установка онлайн-записи на сайт (произвольная кнопка) – База знаний YCLIENTS

После того как все настройки онлайн-записи выполнены, установите виджет на сайт.

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

Пример:

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

<a href="#">Записаться онлайн</a>

В основном меню перейдите в раздел Онлайн-запись – Вебсайт. Выберите нужную форму или добавьте новую (как это сделать, читайте в статье Создание виджетов онлайн-записи).

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

Перейдите во вкладку Код кнопки. Скопируйте код кнопки и установите перед закрывающимся тегом </body> на каждой странице сайта. 

Код имеет следующий вид:

<script type="text/javascript" src="https://w11782.yclients.com/widgetJS" charset="UTF-8"></script>

где 11782 - уникальный идентификатор конкретной формы.

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

В данном случае:

<script type="text/javascript" src="//w11782.yclients.com/widgetJS" charset="UTF-8"></script>

 

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

support.yclients.com

Кнопки HTML

Здравствуйте уважаемые начинающие веб-мастера.

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

В этой статье я покажу Вам несколько вариантов html кода для кнопок которые создаются при помощи тега button.

Тег button не является блочным элементом, и его можно вставлять в другие теги HTML.

Тем более это нужно делать, ведь обычно кнопка располагается как отдельный элемент, и если её не поместить в блок (p или div), то она расположиться в конце той строки, которая находится перед ней.

Первый пример рассмотрим в HTML документе, а в остальных будет изменяться только содержание тега body

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8" /> <title>Кнопки HTML</title> </head> <body> <p><button>Кнопка</button></p> </body> </html>

А вот результат, можно пощёлкать.

Кнопка

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

Код:

<p><button> <table border=1> <tr> <td>Кнопка</table></button></p>

Результат:Кнопка HTML

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

Дальше немного интереснее, так как в следующем примере мы в тег button, введём атрибут style.

А это значит, что кнопке можно будет придать какое либо оформление.

Код:

<button>Кнопка</button>

Результат действующий, можно пощёлкать, и посмотреть, как кнопка работает.

Кнопка

Давайте подробно рассмотрим, какие свойства мы применили для оформления.

1. background: #fdeaa8; — цвет кнопки;

2. width: 80px; — ширина кнопки;

3. height: 40px; — высота кнопки;

4. border-radius: 5px; — закруглённые уголки, если вместо 5px поставить 50%/50%, то кнопка станет округлой;

5. box-shadow: 0px 1px 3px; — создаёт тень, делает кнопку более выпуклой;

6. font-size: 20px; — размер текста;

В тег button можно вставить и картинку.

Код:

<button><img src="images/s20.png">Кнопка</button>

Результат:

s20Кнопка

Ещё один атрибут, который можно применить для кнопки — это title.

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

Обычно в нём указывается место, в которое ведёт данная кнопка.

Код:

<button title="Страница 23"style="border-radius: 5px; box-shadow: 0px 1px 3px; font-size: 20px;"><img src="images/s20.png">Кнопка</button>

Результат:

s20Кнопка

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

Для этого к тегу button применяется специальный атрибут onclick.

В значении этого атрибута указывается адрес, по которому и будет осуществлён переход. К примеру так:.

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

<button title="Страница 23"style="border-radius: 5px; box-shadow: 0px 1px 3px; font-size: 20px;"><img src="images/s20.png">Кнопка</button>

Теперь можно этой кнопкой перенаправлять посетителя на другую страницу сайта, или на другой сайт.

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

1 2 3 4

Все кнопки действующие, можно попробовать как они работают.

Кнопки с различными эффектами при наведении и нажатии, смотрите в статье Кнопки CSS с оригинальными эффектами

Желаю творческих успехов.

Короткий отдыхПеремена

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

Рамки html < < < В раздел > > > Красивая заглавная буква и бегущая строка HTML

starper55plys.ru

Кнопки | htmlbook.ru

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

Кнопку на веб-странице можно создать двумя способами — с помощью тега <input> и тега <button>.

Рассмотрим вначале добавление кнопки через <input> и его синтаксис.

<input type="button" атрибуты>

Атрибуты кнопки перечислены в табл. 1.

Табл. 1. Атрибуты кнопок Атрибут Описание
name Имя кнопки, предназначено для того, чтобы обработчик формы мог его идентифицировать.
value Значение кнопки и одновременно надпись на ней.

Создание кнопки показано в примере 1.

Пример 1. Добавление кнопки

HTML5IECrOpSaFx

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Кнопка</title> </head> <body> <form> <p><input type="button" value=" Нажми меня нежно "></p> </form> </body> </html>

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

Вид кнопки

Рис. 1. Вид кнопки

Второй способ создания кнопки основан на использовании тега <button>. Он по своему действию напоминает результат, получаемый с помощью тега <input>. Но в отличие от него предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML включая изображения и таблицы. На рис. 2 показаны разные виды кнопок, полученные с помощью <button>.

Кнопки, созданные с помощью <button>

Рис. 2. Кнопки, созданные с помощью <button>

Синтаксис создания такой кнопки следующий.

<button атрибуты>Надпись на кнопке</button>

Атрибуты перечислены в табл. 1, но в отличие от кнопки <input> атрибут value определяет только отправляемое на сервер значение, а не надпись на кнопке. Если требуется вывести на кнопке изображение, то тег <img> добавляется внутрь <button>, как показано в примере 2.

Пример 2. Рисунок на кнопке

HTML5IECrOpSaFx

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Кнопка</title> </head> <body> <form> <p><button>Кнопка с текстом</button> <button> <img src="images/umbrella.gif" alt=""> Кнопка с рисунком </button></p> </form> </body> </html>

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

Кнопка Submit

Для отправки данных на сервер предназначена специальная кнопка Submit. Её вид ничем не отличается от обычных кнопок, но при нажатии на нее происходит выполнение серверной программы, указанной атрибутом action тега <form>. Эта программа, называемая еще обработчиком формы, получает данные, введенные пользователем в полях формы, производит с ними необходимые манипуляции, после чего возвращает результат в виде HTML-документа. Что именно делает обработчик, зависит от автора сайта, например, подобная технология применяется при создании опросов, форумов, тестов и многих других вещей.

Синтаксис создания кнопки Submit зависит от используемого тега <input> или <button>.

<input type="submit" атрибуты> <button type="submit">Надпись на кнопке</button>

Атрибуты те же, что и у рядовых кнопок (пример 3).

Пример 3. Отправка данных на сервер

HTML5IECrOpSaFx

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Кнопка</title> </head> <body> <form> <p><input name="login"></p> <p><input type="submit"></p> </form> </body> </html>

Атрибут name для этого типа кнопки можно не писать. Если не указать значение value, то браузер автоматически добавит текст, он различается в зависимости от браузера. Так, Firefox пишет «Отправить запрос», IE — «Подача запроса», Opera и Chrome — «Отправить». Сам текст надписи никак на функционал кнопки не влияет.

Кнопка Reset

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

Синтаксис создания указанной кнопки прост и похож на другие кнопки.

<input type="reset" атрибуты> <button type="reset">Надпись на кнопке</button>

В примере 4 показана форма с одним текстовым полем, которое уже содержит предварительно введённый текст с помощью атрибута value тега <input>. После изменения текста и нажатия на кнопку «Очистить», значение поля будет восстановлено и в нём снова появится надпись «Введите текст».

Пример 4. Кнопка для очистки формы

HTML5IECrOpSaFx

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Кнопка</title> </head> <body> <form> <p><input value="Введите текст"></p> <p><input type="submit" value="Отправить"> <input type="reset" value="Очистить"></p> </form> </body> </html>

Значение кнопки Reset никогда не пересылается на сервер. Если надпись на кнопке опустить, иными словами, не задавать атрибут value, на кнопке по умолчанию будет добавлен текст «Очистить».

htmlbook.ru

Как создать кнопку для сайта онлайн: самый простой способ

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

И, безусловно, зря…

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

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

Поскольку в Фотошопе или др. подобном редакторе мне сделать кнопку сложнее и дольше, онлайн-конструкторы – это оптимальный вариант. С ними все быстрее и проще любому новичку.

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

Первый и, на мой взгляд, самый удобный редактор – это dabuttonfactory.com. Вот так выглядит его интерфейс:

как создать кнопку онлайн

Он обладает самым нужным функционалом: позволяет редактировать текст, размеры, цвет, стиль кнопки, а на выходе загружать ее в png, jpeg, gif, ico форматах или использовать специальный CSS-код.

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

Второй онлайн-конструктор – As Button Generator имеет похожие возможности редактирования, с некоторыми своими особенностями. Выглядит он вот так:

сгенерировать кнопку онлайн

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

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

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

конструктор кнопок и логотипов онлайн

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

Посмотрите небольшой обзорный урок по работе с данными сервисами и выберите подходящий для себя:

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

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

Желаю успехов!

С уважением, Виктория Карпова

o-zarabotkeonline.ru

Создать красивую кнопку для сайта на CSS3 онлайн

Обзор онлайн сервисов генерации кнопок для вашего сайта на чистом CSS.

buttons generator

Кнопка – один из элементов сайта, стиль оформления которого может активно повлиять на решение пользователя о выполнении какого-либо действия. Или об отказе от него.

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

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

Раньше при создании кнопок для моего сайта я использовал упомянутый Photoshop. Делал 2 исходника, 1 – в дефолтном состоянии, 2-й при наведении. Но при знакомстве с CSS3 надобность в использовании изображений для создания кнопок напрочь отпала.

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

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

У вас будет 2 области: 1 - в которой вы будете делать настройки, 2 – поле, где можно увидеть в реальном времени результат этих настроек.

Среди настроек:

  • Размер кнопки;
  • Размер текста;
  • Настройка цвета кнопки;
  • Скругление углов;
  • Создание градиента;
  • Фон;
  • Выбор шрифта;
  • Обводка;
  • Отступы;
  • Тень;
  • Оформление кнопки при наведении;
  • Оформление кнопки при нажатии;

Генераторы кнопок на чистом CSS3

Подборка 5 онлайн сервисов генераторов (конструкторов) кнопок на CSS3:

Генератор кнопок Cssdrive

Очень хороший генератор кнопок с большим количеством настроек. Среди возможностей есть поворот и искажение кнопок.

генерация кнопок

Перейти на сайт

Конструктор кнопок Uiparade

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

создать кнопку

Перейти к конструктору

Генератор кнопок Css-tricks

Еще один очень простой онлайн генератор кнопок.

генератор кнопок

Перейти к генератору кнопок

Конструктор кнопок Bestcssbuttongenerator

У данного конструктора имеется множество готовых шаблонов кнопок.

конструктор кнопок на css

Перейти на сервис

Button Generator Coveloping

Еще 1 генератор кнопок, с небольшим количеством готовых шаблонов.

онлайн генератор

Перейти к генерации кнопок

needsite.net

какими должны быть кнопки на сайте

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

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

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

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

Как отличить важное действие от менее важного? Задайте себе вопрос: «Влияет ли предполагаемое действие на мой бизнес или мой сайт?»

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

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

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

Создавая кнопки, помните:

  • Человек воспринимает кнопку, освещенную в верхней части и затемненную в нижней, как выпуклую.
  • Человек воспринимает кнопку, освещенную в нижней части и затемненную в верхней, как вогнутую или нажатую.

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

Как сделать кнопку убеждающей

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

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

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

  • Используйте контрастные цвета

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

  • Сделайте кнопку достаточно большой, но не неестественно огромной

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

  • Используйте слова, создающие эффект срочности

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

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

  • Правильно используйте заглавные и строчные буквы

Если ваш CTA состоит из двух слов, пишите оба с заглавной буквы. Заглавные буквы делают текст побуждающим. Если ваш CTA состоит из трех слов и более, пишите с заглавной буквы первое слово, а остальные пишите со строчных. В этом случае текст воспринимается в качестве диалога. Формулы выглядят так: жесткий CTA = одно или два слова + каждое слово с заглавной; мягкий CTA = три слова и более + с заглавной только первое.

  • Иллюстрируйте призывы к действию

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

  • Используйте эффекты при наведении

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

Почему кнопки OK больше не о’кей

Разработчики интерфейсов часто используют кнопки типа «OK», «Cancel», «Да», «Нет» и т.п. Если вы пользуетесь ПК, то видите такие кнопки каждый день.

Эти кнопки никак не связаны с действием, которое совершает пользователь. Чтобы ваш сигнал был более ясным и убедительным, связывайте CTA с желаемым/планируемым действием пользователя.

Почему конверсионные кнопки лучше располагать в правой нижней части страницы

Ответить на этот вопрос можно после изучения диаграммы Гутенберга.

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

Почему в диалоговых окнах кнопка желаемого действия должна находиться справа

В диалоговых окнах кнопки желаемого действия («Купить», «Оформить», «Да», «ОК» и т.п.) работают лучше, когда расположены справа. Обратите внимание на следующую иллюстрацию:

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

Когда кнопка желаемого действия находится справа, путь к конверсии сокращается на один шаг:

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

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

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

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

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

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

Почему иконки должны иметь прозрачный фон

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

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

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

Как использовать стрелки и многоточия

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

Стрелки в меню указывают на доступность дополнительных опций.

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

Стрелки и многоточия делают кнопки и меню интуитивно понятными.

Кнопки должны быть заметными и убедительными

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

Адаптация материалов с сайта UX Movement.

Читайте также:

yuzabiliti-dlya-chaynikov-kakimi-dolzhny-byt-knopki-na-sayte

texterra.ru

Как добавить социальные кнопки на сайт: разные варианты

Как добавить социальные кнопки на сайт

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

Важность социальных кнопок

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

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

Варианты размещения в шаблонах

Вообще есть три основных варианта:

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

Над статьей. Это гораздо менее распространено. Тут расчет делается на заголовок и первые абзацы публикации. Например, увидел я заголовок “102 варианта приготовления каши”. О, интересно, сразу нажал, сохранил себе в соц. сеть, чтобы позже радовать себя разнообразием за столом.

Сбоку (вертикальное расположение + фиксация). Также достаточно распространенный вариант. Он подходит для сайтов, где сбоку есть место для расположения там узенького блока. Обычно в таком случае соц.сетей немного, от 3 до 10, чтобы поместиться по высоте на экране.

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

Как добавить на сайт кнопки соц. сетей: вариант для верстальщиков

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

Но решение есть! Это кнопки от GoodShare. Вот так прямо и введите в поиске, и вам наверняка выдаст их сайт. Скрипт от goodshare очень легкий и простой, устанавливается с пары кликов (можно подключить из очень быстрого CDN). Если вы верстальщик или хоть немного разбираетесь, я не буду вам объяснять, как устанавливаются скрипты, потому что вы в курсе.

Гораздо более важная информация – это непосредственно вывод кнопок. В том месте шаблона, где нужно вывести иконку, например, ВК, вставляем такой код:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

<div data-type="vk"> Поделиться Вк <span data-counter="vk"></span> </div>

<div data-type="vk">

Поделиться Вк

<span data-counter="vk"></span>

</div>

При этом span data-counter является необязательным элементом. Это счетчик, который будет показывать кол-во кликов по иконке. Чтобы он работал, у вас должна быть подключена jQuery. В большинстве случаев счетчик вам не нужен, поэтому этот кусок кода вам не нужен. Собственно, все остальные кода есть в документации:

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

Кстати, а как же эти самые кнопки стилизовать? Ну тут есть 2 выхода. Вы можете просто добавить каждой новый стилевой класс, а можно использовать селекторы атрибута. Вот так:

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

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

Другие способы

Ладно, если вам не нужно существенным образом менять внешний вид кнопок и вы готовы удовлетвориться тем оформлением, которое предоставляет сторонний сервис, то используйте один из следующий сайтов, где можно установить соц. кнопки: share42.com, pluso, блок “Поделиться” от Яндекса

Или любой подходящий плагин для вашего движка. Я уверен, таких расширений достаточно много. Просто вбейте в поиск по плагинам слова вроде “social” и “share” и сразу получите что-то такое.

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

webformyself.com


ternet-->