Что такое ролловер Объяснения с примерами!

Рейтинг лучших брокеров бинарных опционов за 2020 год:
  • Бинариум
    Бинариум

    1 место по надежности! Лучший выбор для новичков.

  • Биномо
    Биномо

    2 место! 100% бонус к депозиту для новых трейдеров!

  • ФинМакс
    ФинМакс

    3 место! Хороший выбор для опытных трейдеров.

Что такое ролловер

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

p, blockquote 1,0,0,0,0 —>

Два моих лучших брокера

p, blockquote 3,0,0,0,0 —>

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

p, blockquote 4,0,1,0,0 —>

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

p, blockquote 5,0,0,0,0 —>

Ролловер при переносе активной сделки

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

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

p, blockquote 6,0,0,0,0 —>

Самые надежные платформы для торговли бинарными опционами:
  • Бинариум
    Бинариум

    1 место по надежности! Лучший выбор для новичков.

  • Биномо
    Биномо

    2 место! 100% бонус к депозиту для новых трейдеров!

  • ФинМакс
    ФинМакс

    3 место! Хороший выбор для опытных трейдеров.

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

p, blockquote 7,0,0,0,0 —>

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

p, blockquote 8,0,0,0,0 —>

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

Далее мы подробно остановимся на порядке осуществления начислений/отчислений при ролловере на примере упомянутой выше сделки на покупку, созданной на паре доллар/йена. Так как процентная ставка у доллара(устанавливает ФРС) выше, чем у йены, то в момент переноса ордера, трейдер получит доход. Его доход при ролловере будет соответствовать разнице между ставками доллара и йены (2-0,5=1,5%).

p, blockquote 9,1,0,0,0 —>

Если бы осуществлялся перенос сделки на продажу, созданной на паре доллар/йена, то трейдер получил бы убыток, который бы соответствовал разнице между ставкой йены и ставкой доллара(0,5-2=-1,5%). 1,5% от размера стандартного лота составляет 1500 долларов в год или 4 доллара в сутки. Таким образом, при переносе активной позиции на следующие сутки прибыль/издержки спекулянта составили бы 4 доллара.

p, blockquote 10,0,0,0,0 —>

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

p, blockquote 11,0,0,0,0 —>

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

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

p, blockquote 12,0,0,0,0 —>

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

p, blockquote 13,0,0,1,0 —>

Ролловер при инвестировании

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

p, blockquote 14,0,0,0,0 —>

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

p, blockquote 15,0,0,0,0 —>

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

p, blockquote 16,0,0,0,0 —>

Чтобы избежать подобного варианта развития событий и был создан ролловер для ПАММ-счетов.

p, blockquote 17,0,0,0,0 —> p, blockquote 18,0,0,0,1 —>

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

О создании rollovers-элементов

Без сомнения, «живые» Web-страницы сразу привлекают внимание, и поэтому на просторах Всемирной сети с каждым днем их становится все больше. Одним из способов «оживления» является внедрение элементов дизайна, изменяющих свой внешний вид (или состояние) в зависимости от поведения мыши. По-английски такие элементы называются rollovers (от roll over — перекатываться, переворачиваться). В русском языке эквивалента данному термину не существует, поэтому Web-дизайнеры позаимствовали его из английского языка и называют подобные элементы ролловерами. Примерами типичных ролловеров являются анимированные кнопки; зачастую ролловеры используются и при создании других навигационных элементов сайта.

В действительности любой ролловер представляет собой не одно, а несколько (до четырех) изображений, каждое из которых соответствует конкретному событию. При возникновении того или иного события браузер заменяет текущее изображение другим. Обработкой событий занимается сценарий JavaScript, однако при создании ролловеров в ImageReady знать программирование совсем необязательно — программа в каждом случае сама сгенерирует необходимый HTML-код.

Что же касается событий, то основными среди них принято считать следующие: Normal — обычное состояние, Over — наведение курсора мыши на элемент и Down — нажатие левой кнопки мыши при ее наведении. Теоретически могут быть задействованы и такие события: Click — отпускание левой кнопки мыши после нажатия, Up — после отпускания кнопки, Out — при выходе за пределы активной зоны. Однако на практике чаще ограничиваются изменением реакции элемента только на первые три или даже на первые два события.

Для создания ролловеров предназначена палитра Rollovers, в которой на первом этапе создаются сами состояния изменяющегося элемента (Over State, Down State и др.). Затем требуется внести изменения в каждое из созданных состояний, чтобы при отображении на Web-странице графический элемент реагировал на курсор мыши нужным образом. Как правило, ставить в соответствие состояниям можно либо слои, либо кадры анимации, хотя при создании кнопок процесс можно и ускорить, прибегнув к использованию дополнительной палитры Styles.

Открыть окна Rollovers и Styles можно, применив команды Window=>Show Rollovers (Окно=>Показать ролловеры) и Window=>Show Styles (Окно=>Показать стили).

Создание rollover-элементов на основе слоев

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

Анимированная кнопка

Вначале попытаемся создать самую простую анимированную кнопку, у которой ее состояния будут ассоциироваться с предварительно созданными в Photoshop слоями. Желающие подробнее ознакомиться с данным аспектом, могут заглянуть на следующие сайты: http://www.uwplatt.edu/

web/wtc/rollover.html, http://www.planetphotoshop.com/smith12.html и http://webschool.narod.ru/prof/photoshop/tools/rollover/. Предположим, что создаваемая нами кнопка должна реагировать лишь на нажатие мыши — в этом случае вокруг нее будет появляться черный ободок. На все остальные события реакция будет отсутствовать.

Откройте Photoshop и создайте на белом фоне новый файл в формате RGB. Нарисуйте предполагаемую кнопку — сделать это удобнее всего с помощью прямоугольника или эллипса фиксированного размера. Расположите кнопку по центру. Появится слой Shape1. Растеризуйте его, нажав на имени слоя правую кнопку и выбрав команду Rasterize Layer (Растеризация слоя). Сделайте копию слоя и на копии сформируйте вокруг кнопки рамку с помощью команды Select=>Modify=>Border (Выделение=>Модифицировать=>Граница) с шириной границы в 1 пиксел.

Перейдите в программу ImageReady и создайте кадры на основе слоев, выбрав команду Make Frames From Layers (Создать кадры из слоев) из меню палитры Animation. Окно Animation примет такой вид, как на рис. 1.

Рис. 1. Исходное состояние окна Animation

Удалите в окне Animation кадр, соответствующий фоновому слою. Среди оставшихся кадров выделите первый кадр, активизируйте палитру Rollovers и щелкните на кнопке Create Rollover state (Создать ролловер-состояние). В окне Rollovers появится состояние Over State. Измените тип состояния с Over State на Down State, нажав на имени состояния правую кнопку мыши и выбрав команду Set State=>Down (Установить состояние=>Down) — рис. 2. Окно Animation будет таким, как на рис. 3.

Рис. 2. Выбор команды Set State=>Down

Рис. 3. Окно Rollovers после создания состояния Down State

Теперь нужно отрегулировать состояние видимости слоев в соответствии с рис. 4 и 5.

Рис. 4. Окно Layers для состояния Normal

Рис. 5. Окно Layers для состояния Down State

Теперь нужно удалить последний кадр в окне Animation для состояния Normal — в итоге в каждом из состояний останется по одному кадру. После этого проверьте результат, щелкнув на кнопке Preview in Default Browser (Предварительный просмотр в браузере) на панели инструментов, и перейдите в окно браузера. В открывшемся окне вы увидите не только работающую кнопку, но и информацию о графическом файле кнопки и HTML-код (рис. 6).

Рис. 6. Окно браузера с rollover-элементом

Сохраните файл, применив команду File=>Save Optimized (Файл=>Сохранить с оптимизацией) и указав один из трех типов файлов: HTML and Images (*.html) — HTML-код и графика, Images Only (*.gif) — только графика, HTML Only (*.html) — только HTML-код. В дальнейшем это позволит воспользоваться кнопкой. В данном примере был выбран вариант HTML and Images (*.html) и получены файл button1.html и серия графических изображений в папке images.

Анимированная надпись, меняющая цвет

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

Откройте Photoshop и создайте на черном фоне новый файл в формате RGB. Напечатайте нужный текст (рис. 7), например, белым цветом и сделайте две копии текстового слоя. На первой копии (впоследствии она будет соответствовать наведенному состоянию) перекрасьте текст одним цветом, а на второй (она будет соответствовать нажатому состоянию) — в другой (рис. 8). Перед перекрашиванием каждый слой должен быть растеризован, для чего нужно нажать на имени слоя правую кнопку и выбрать команду Rasterize Layer (Растеризация слоя). Затем на копии тестовых слоев можно наложить какие-нибудь эффекты — в данном варианте применено размытие по Гауссу Filter=>Blur=>Gaussian Blur (Фильтр=>Размытие=>Размытие по Гауссу) с радиусом размытия в 1,5 пиксела.

Рис. 7. Исходный текст

Рис. 8. Окно Layers

Перейдите в программу ImageReady и создайте кадры на основе слоев, выбрав команду Make Frames From Layers (Создать кадры из слоев) из меню палитры Animation. Окно Animation примет вид, как показано на рис. 9.

Рис. 9. Исходное состояние окна Animation

Теперь в окне Animation выделите кадр, соответствующий наведенному состоянию, перейдите в палитру Rollovers и щелкните на кнопке Create Rollover state (Создать ролловер-состояние). Активизируйте в палитре Rollovers состояние Normal, вернитесь в палитру Animation и сделайте активным кадр, соответствующий нажатому состоянию. Вновь перейдите в палитру Rollovers и щелкните на кнопке Create Rollover state (Создать ролловер-состояние). Обратите внимание, что внешний вид палитры Animation напрямую зависит от состояния, выбранного в палитре Rollovers. Например, состоянию Over State в данном примере будут соответствовать такое окно Animation, как на рис. 10, состоянию Down State — как на рис. 11, а состоянию Normal — как на рис. 12.

Рис. 10. Внешний вид окна Animation для состояния Over State

Рис. 11. Внешний вид окна Animation для состояния Down State

Рис. 12. Внешний вид окна Animation для состояния Normal

Активизируйте состояние Normal в палитре Rollovers и удалите в палитре Animation все кадры, кроме того, который должен соответствовать состоянию Normal (рис. 13).

Рис. 13. Окно Animation для состояния Normal после удаления кадров

Скорректируйте видимость слоев для каждого из состояний в соответствии с рис. 14, 15 и 16.

Рис. 14. Окно Layers для состояния Normal

Рис. 15. Окно Layers для состояния Over State

Рис. 16. Окно Layers для состояния Down State

После этого изменится и внешний вид окна Animation для каждого из состояний (рис. 17, 18 и 19).

Рис. 17. Окончательный вид окна Animation для состояния Normal

Рис. 18. Окончательный вид окна Animation для состояния Over State

Рис. 19. Окончательный вид окна Animation для состояния Down State

Проверьте результат, щелкнув на кнопке Preview in Default Browser (Предварительный просмотр в браузере) на панели инструментов и перейдя в окно браузера (рис. 20).

Рис. 20. Окно браузера с rollover-элементом

После этого сохраните файл, применив команду File=>Save Optimized (Файл=>Сохранить с оптимизацией) и указав один из трех типов файлов: HTML and Images (*.html); Images Only (*.gif); HTML Only (*.html). В данном примере был выбран вариант HTML and Images (*.html) и получены файл button2.html и серия графических изображений в папке images.

Генерация rollover-элементов с использованием стилей

Анимированная кнопка на основе стилей 3-state

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

Откройте ImageReady и создайте новый файл подходящих размеров и на белом фоне — в данном примере размер «холста» составляет 150×150 пикселов. Выберите нужный цвет для переднего плана, например коричневый. Цвет должен соответствовать будущему стилю кнопки.

Нарисуйте кнопку и расположите ее по центру (рис. 21). Исходное изображение будет соответствовать состоянию Normal в палитре Rollovers (рис. 22).

Рис. 21. Исходное изображение

Рис. 22. Исходное состояние окна Rollovers

Теперь нужно на основе состояния Normal кнопки создать наведенное и нажатое состояния кнопки. Самое простое — выбрать стиль, автоматически предполагающий три состояния кнопки, например стиль Wood 3-state Rollover (рис. 23). Подобные стили в палитре стилей обозначены в верхнем левом углу значком черного треугольника (рис. 24).

Рис. 23. Окно Rollovers после выбора стиля Wood 3-state Rollover

Рис. 24. Палитра Styles

После этого кнопка готова к предварительному просмотру. Чтобы посмотреть кнопку в работающем виде, в окне браузера щелкните на кнопке Preview in Default Browser (Предварительный просмотр в браузере) на панели инструментов (рис. 25).

Рис. 25. Окно браузера с анимированной кнопкой

После этого нужно сохранить файл, применив команду File=>Save Optimized (Файл=>Сохранить с оптимизацией) и указав один из трех типов файлов: HTML and Images (*.html), Images Only (*.gif), HTML Only (*.html). В данном примере был выбран вариант HTML and Images (*.html) и получены файл button3.html и серия графических изображений в папке images.

Анимированная кнопка в общем случае

С более сложными и оригинальными примерами создания кнопок на основе имеющихся стилей вы можете ознакомиться на следующих сайтах: http://www.metamorephosis.com/ir3tutorial1.html и http://www.gurusnetwork.com/tutorials/photoshop/irrollovers1.html. Рассмотрим один из примеров подробнее.

Откройте ImageReady и создайте новый файл размером 150×150 пикселов на белом фоне, выберите нужный цвет для переднего плана, например коричневый, как в данном примере. Нарисуйте кнопку и расположите ее по центру (рис. 26).

Рис. 26. Исходное изображение

Чтобы сделать кнопку более привлекательной, наложите на нее подходящий стиль, например стиль Floating Plastic, как в этом случае (рис. 27).

Рис. 27. Внешний вид кнопки после наложения стиля Floating Plastic

Внесите небольшие изменения в настройках отбрасываемой тени, воспользовавшись командой Layer=>Layer Styles=>Drop Shadow (Слой=>Стили слоя=>Отбросить тень). Появится окно настройки тени, в котором следует изменить параметр Opacity (Непрозрачность) до значения 50% и установить Distance (Дистанция) равной 10 (рис. 28). Вид кнопки представлен на рис. 29.

Рис. 28. Окно настройки параметров Drop Shadow

Рис. 29. Внешний вид кнопки после корректировки параметров Drop Shadow

Теперь на основе состояния Normal кнопки нужно создать наведенное и нажатое состояния кнопки. Для этого в палитре Rollovers дважды щелкните на кнопке Create Rollover state (Создать ролловер-состояние) — в итоге в окне Rollovers появится три состояния кнопки (рис. 30).

Рис. 30. Окно Rollovers после генерации наведенного и нажатого состояний кнопки

После этого потребуется наложить подходящие стили на два новых состояния кнопки. Выберите вначале состояние Over State (Наведенное состояние) и кликните на стиль Button Up. Затем выберите состояние Down State (Нажатое состояние) и кликните на стиль Button Down (рис. 31, 32 и 33).

Рис. 31. Нормальное состояние кнопки

Рис. 32. Наведенное состояние кнопки

Рис. 33. Нажатое состояние кнопки

Проверьте результат, щелкнув на кнопке Preview in Default Browser (Предварительный просмотр в браузере) на панели инструментов и перейдя в окно браузера (рис. 34).

Рис. 34. Окно браузера с анимированной кнопкой

После этого сохраните файл, применив команду File=>Save Optimized (Файл=>Сохранить с оптимизацией) и указав один из трех типов файлов: HTML and Images (*.html), Images Only (*.gif), HTML Only (*.html). В данном примере был выбран вариант HTML and Images (*.html) и получены файл button4.html и серия графических изображений в папке images.

Кроме того, в данном случае дополнительно сохраните файл кнопки в формате psd с помощью команды File=>Save Optimized (Файл=>Сохранить с оптимизацией) — он понадобится нам в следующем разделе.

Наложение узора на анимированную кнопку

Очень интересный пример формирования оригинального дизайна кнопки за счет наложения на нее узоров приводится на сайте http://www.metamorephosis.com/ir3tutorial2.html. С ним и ознакомимся.

Откройте в ImageReady сохраненный в предыдущем разделе в формате psd файл и выберите в палитре Rollovers состояние Down State (Нажатое состояние). Перейдите в меню Layer=>Layer Style=>Pattern Overlay (Слой=>Стиль слоя=>Наложить узор). В появившейся палитре Pattern Overlay выберите стрелку, которая находится справа от окна просмотра узоров, и выберите узор Intricate Surface или любой другой по вашему усмотрению (рис. 35).

Рис. 35. Выбор узора в палитре Pattern Overlay

После этого кликните на каждом из двух других состояний кнопки и повторите команду Layer=>Layer Style=>Pattern Overlay (Слой=>Стиль слоя=>Наложить узор). Вновь выбирать данный узор вам не придется, поскольку он сразу же окажется наложенным на данное состояние кнопки. В итоге, например, в состоянии Normal кнопка будет выглядеть примерно так, как на рис. 36.

Рис. 36. Внешний вид кнопки после наложения узора (состояние Normal)

Сохраните файл, применив команду File=>Save Optimized (Файл=>Сохранить с оптимизацией) и указав один из трех типов файлов: HTML and Images (*.html), Images Only (*.gif), HTML Only (*.html). В данном примере был выбран вариант HTML and Images (*.html) и получены файл button5.html и серия графических изображений в папке images.

Объединение rollover-эффектов с движением

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

Откройте Photoshop и создайте на черном фоне новый файл в формате RGB. Напечатайте нужный текст (рис. 37). На новом слое создайте изображение, которое планируете перемещать. В данном примере (рис. 38) изображение было скопировано из вспомогательного файла bullet.gif (он заимствован с сайта http://brat2.film.ru/). В итоге в случае видимости обоих слоев изображение будет напоминать рис. 39; вид окна слоев представлен на рис. 40.

Рис. 37. Исходный текст

Рис. 38. Вспомогательная картинка из файла bullet.gif

Рис. 39. Исходный текст с наложенным дополнительным слоем

Рис. 40. Окно Layers

Перейдите в программу ImageReady и создайте кадры на основе слоев, выбрав команду Make Frames From Layers (Создать кадры из слоев) из меню палитры Animation. Окно Animation примет такой вид, как на рис. 41.

Рис. 41. Исходное состояние окна Animation

В окне Animation выделите кадр, соответствующий наведенному состоянию (в данном примере это последний кадр), перейдите в палитру Rollovers и щелкните на кнопке Create Rollover state (Создать ролловер-состояние) — будет создано состояние Over State. Активизируйте состояние Normal и удалите лишний кадр, соответствующий наведенному состоянию «кадр с пулей», в результате чего останется один кадр (рис. 42).

Рис. 42. Конечное состояние окна Animation для состояния Normal

Активизируйте состояние Over State, перейдите в палитру Animation и создайте дублирующий кадр, щелкнув на иконке Duplicates current frame (Дублировать текущий кадр) палитры Animation. Немного переместите на созданном кадре пулю вправо (рис. 43).

Рис. 43. Внешний вид окна Animation для состояния Over State

При активном втором кадре создайте промежуточные кадры, щелкнув на кнопке Tweens animation frames (Связать кадры) в палитре Animation при установках, представленных на рис. 44. Палитра Animation для состояния Over State показана на рис. 45.

Рис. 44. Окно настройки команды Tween

Рис. 45. Конечное состояние окна Animation для состояния Over State

Отрегулируйте состояние видимости слоев для каждого из состояний: в состоянии Normal должны быть видны фон и текстовый слой, а в состоянии Over State — фон и слой с пулей.

Проверьте результат, щелкнув на кнопке Preview in Default Browser (Предварительный просмотр в браузере) на панели инструментов и перейдя в окно браузера (рис. 46).

Рис. 46. Окно браузера с rollover-элементом

После этого сохраните файл, применив команду File=>Save Optimized (Файл=>Сохранить с оптимизацией) и указав один из трех типов файлов: HTML and Images (*.html), Images Only (*.gif), HTML Only (*.html). В данном примере был выбран вариант HTML and Images (*.html) и получены файл button6.html и серия графических изображений в папке images.

23 примера использования Ролловера в письмах

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

С каждым годом спрос на такие элементы возрастает, но почтовики не спешат поддерживать фантазии отправителей и многие из интерактивных фишек пока работают только в вебе. В свою очередь маркетологи не сдаются, стараясь использовать максимум “вау-блоков” и в письмах объясняют подписчикам: “Если вы хотите увидеть это письмо интерактивным — жмите веб-версию”. А стоит ли игра свеч, если получатель даже не удосужится перейти по этой ссылке?

Идеи для использования ролловера в рассылках

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

Держите идеи для чего можно использовать интерактивные картинки.

Ролловер в карточках товаров:

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

1.Выделите один товар в списке

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

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

2. Покажите товар на модели

Бывает, что товары на картинках и во время примерки кардинально отличаются и покупка клиента становится воплощением популярного демотиватора “Ожидания/ реальность”. Немного помочь с выбором помогут фотографии, которые покажут товар в действии.

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

3. Покажите товар с разных сторон

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

Например, для интернет-магазинов будет актуально показать как сядет вещь.

4. Дайте возможность рассмотреть поближе

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

В емейл-рассылке proskater.ru представлены пуховики с тремя разными видами карманов, которые так важны в холодную зимнюю пору.

5. Покажите ассортимент

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

Ролловер в текстовых блоках

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

6. Показывайте цены самым любопытным

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

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

7. Давайте подробную информацию

Компания freshinbox.com привела интересный пример рассылок DirecTV Cinema. Получатель может навести курсор на заголовок фильма и картинка изменится на информацию о фильме:

устройства, на которых можно воспроизвести фильм.

Или ещё один вариант — спрятать под картинку длинное текстовое описание, которое обычно находится в карточке товара.

8. Разнообразьте блоговые статьи

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

9. Покажите функциональность

Как говорится: «Лучше один раз увидеть, чем сто раз услышать». А тем более — подписчик не будет тратить время на прочтение длинного текста о возможностях и фишках товара. Да и драгоценного места текст может занять довольно много. Чтобы долго не описывать функциональность, иногда достаточно показать её в нескольких картинках.

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

Хотите испытать Ролловер?

Использование ролловера на баннерах

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

10. Объединяйте баннера

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

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

11. Сохраняйте интригу

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

12. Запускайте анимацию

Rollover подразумевает смену двух картинок, но для разнообразия можно “оживлять” картинку с помощью анимации.

Также использование подмены поможет решить проблемы, когда гифка:

Запускается сама по себе и клиент видит кадры непоследовательно.

Не зациклена и она уже полностью проигралась, когда клиент долистал до неё.

Находится рядом с другими анимированными элементами.

Теперь только клиент будет решать когда сработает гиф-анимация.

Ролловер и кнопки призыва к действию

Чтобы добиться желаемого действия от клиента необходимо добавлять кнопки СТА: перехода по ссылке, покупки товара, просмотра видео). С другой стороны — кнопки уже настолько приелись, что некоторые компании сокращают их количество в письме или вовсе отказываются от использования, оставляя только текстовые СТА. Что же делать?

13. Спрячьте призывы к действию

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

Таким образом клиент увидит кнопку только если наведёт курсор на интересующий товар и ваше письмо не будет перенасыщено лишними элементами.

14. Усиливайте кнопки СТА

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

Согласитесь, кнопка так и зазывает кликнуть по ней и перейти к игре Super Mario.

15. Давайте несколько кнопок

Пусть они будут одинаковыми по форме и внешнему виду, но при наведении на кнопку происходит настоящая магия.

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

Делайте коллажи

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

16. Разнообразьте коллажи

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

17. Делайте интерактивным каждый элемент

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

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

18. Используйте несколько ролловеров

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

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

Используйте ролловер для любого элемента письма

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

19. Побудите посмотреть видео

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

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

20. Собирайте отзывы

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

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

21. Расскажите, что за QR-кодом

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

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

22. Играйте с клиентом

С помощью ролловер можно добавить небольшой элемент геймификации:

провести викторину прямо в письме

добавить опросник со скрытыми ответами

загадать загадку и т.д.

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

23. Сделайте кнопки соцсетей более привлекательным

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

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

Как в eSputnik добавить Ролловер в письмо?

Можно найти немало примеров о том, как добавить Rollover через код. Когда мы тестировали такие “заготовки”, оказалось много подводных камней — один пример заточен только под gmail, другой наоборот не воспроизводится в этом почтовике.

Для наших пользователей мы добавили возможность размещать ролловер-эффект прямо в редакторе без работы с кодом.

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

Rollover применяется только для картинок. Текстовые блоки, кнопки и т.д. тоже придётся делать картинками. В противном случае придётся добавлять дополнительные стили через CSS.

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

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

Указывайте ссылку. Ссылка на сайт проставляется одна общая для обеих картинок.

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

Важно помнить, что функция работает в ограниченном количестве почтовых сервисов: Yahoo! Mail, Ukr.net, AOL, Gmail, iCloud Mail, Outlook 2003, MacOS Apple Mail. Если почтовик не поддерживает такую интерактивность — будет просто статичный блок, который не сменится при наведении.

А как насчет мобильного?

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

Если ссылка указана — ролловер сработает слишком быстро и пользователь отправится на целевую страницу.

Если для изображения не указана ссылка — нажатие на него откроет альтернативное изображение.

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

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

А под блоком разместить кнопку с призывом к действию — купить на сайте. Если же пользователь откроет письмо на ПК — у него будет картинка меняться при наведении мышкой.

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

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

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

Брокеры бинарных опционов на русском языке:
  • Бинариум
    Бинариум

    1 место по надежности! Лучший выбор для новичков.

  • Биномо
    Биномо

    2 место! 100% бонус к депозиту для новых трейдеров!

  • ФинМакс
    ФинМакс

    3 место! Хороший выбор для опытных трейдеров.

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