Java, UX, HTML, CSS, WEB-design

Дизайн для эмоций с эффектами наведения

[ad_1]

  • Дадли Стори

  • 0 Комментарии

Дизайн для эмоций с эффектами наведения

  • 10 минут чтения

  • Кодирование, CSS, JavaScript, jQuery, эмоциональный дизайн, HTML

Краткое резюме ↬

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

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

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

Дальнейшее чтение на SmashingMag:

  • Полное руководство по оформлению веб-ссылок
  • Не просто красиво: создайте эмоции на своих веб-сайтах
  • Полное руководство по псевдоклассам и псевдоэлементам CSS
  • Подарите своему веб-сайту душу с помощью эмоционально интеллектуальных взаимодействий

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

Еще после прыжка! Продолжить чтение ниже ↓

макбук спящий свет_мини
Частота моргания MacBook от Apple в спящем режиме соответствует средней частоте дыхания взрослого человека в состоянии покоя. (Источник изображения: Майкл Стиллвелл)

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

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

спортивный автомобиль front_mini
Обратите внимание, как передняя часть спортивного автомобиля взаимодействует с вами на эмоциональном уровне. (Источник изображения: GabboT)

Дизайн для эмоций

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

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

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

сюрприз в коробках

(Пожалуйста, посмотрите демонстрацию в разделе «Эффект наведения на изображения с разных направлений с использованием чистого CSS» на CodePen.)

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


<img src="https://www.smashingmagazine.com/2013/09/designing-emotion-hover-effects/ngc-1309.jpg" alt="">

(Обратите внимание, что я намеренно оставил alt значение пустого изображения. Вскоре мы вернемся к этому атрибуту.)

Информационные панели созданы из четырех span элементы, при этом вся группа завернута в div тег, который включает в себя class:


<div class="multi-hover">
    <span>Spiral Galaxy NGC 1309</span>
    <span>Approximately 120 million light years from Earth</span>
    <span>Home to several Cephid variable stars</span>
    <span>Member of the Eridanus galactic cloud</span>
    <img src="https://www.smashingmagazine.com/2013/09/designing-emotion-hover-effects/ngc-1309.jpg" alt="">
</div>

Мы напишем код перехода CSS без префиксов поставщиков: Internet Explorer 10 не использует префиксы для анимации, Firefox больше не требует их, Chrome не сильно отстает, а часть магии JavaScript, такая как -prefix-free Леа Веру, займет позаботьтесь о тех браузерах, которые все еще делают.


.multi-hover {
    position: relative;
    font-family: Orbitron, sans-serif;
    max-width: 500px;
    line-height: 0;
}

.multi-hover img {
    max-width: 100%;
}

.multi-hover span {
    position: absolute;
    width: 100%;
    height: 100%;
    line-height: 1.5;
    font-weight: 100;
    text-align: center;
    box-sizing: border-box;
    font-size: 3em;
    transition: .3s linear;
    color: white;
    padding: 15%;
    opacity: 0;
}

CSS использует правило, абсолютно позиционированные элементы внутри относительных контейнеров будут преобразованы относительно их родителя. Поскольку изображение определяет высоту и ширину div, span элементы всегда будут одинакового размера, защищенные от дальнейшего роста с помощью box-sizing, max-width и line-height: 0. В этом примере я использую Orbitron от The League of Moveable Type в качестве подходящего шрифта.

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


.multi-hover span:nth-child(1) {
    top: 0;
    left: 90%;
    background: hsla(0,70%,50%,0.6);  } /* right panel */

.multi-hover span:nth-child(2) {
    top: -90%;
    left: 0;
    background: hsla(90,70%,50%,0.6); } /* top panel */

.multi-hover span:nth-child(3) {
    top: 0;
    left: -90%;
    background: hsla(180,70%,50%,0.6); } /* left panel */

.multi-hover span:nth-child(4) {
    top: 90%;
    left: 0;
    background: hsla(270,70%,50%,0.6); } /* bottom panel */

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

Позиционированные элементы span с текстом.
Позиционированные элементы span с текстом. (Большой вид)

Чтобы обрезать внешние края панелей, используйте overflow: hidden на содержащем div:


.multi-hover {
    position: relative;
        overflow: hidden;
    font-family: Orbitron, sans-serif;

Теперь результат выглядит следующим образом:

Элементы Span, обрезанные по изображению.

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

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


.multi-hover span {
    position: absolute;
    width: 100%;
    height: 100%;
    line-height: 1.5;
    font-weight: 100;
        z-index: 2;
    text-align: center;
    box-sizing: border-box;
    font-size: 3em;
    transition: .3s linear;
    color: white;
    padding: 15%;
    opacity: 0;
}

.multi-hover span:hover {
    opacity: 1;
}

.multi-hover span:nth-child(odd):hover {
    left: 0;
        z-index: 3;
}

.multi-hover span:nth-child(even):hover {
    top: 0;
        z-index: 3;
}

То odd и even объявления устанавливают каждую панель на противоположной стороне поля, полностью располагая их над изображением и завершая дизайн. Обратите внимание, что этот шаблон интерфейса требует исследовательского движения мыши снаружи блока внутрь, чтобы активировать каждую панель; в качестве альтернативы можно создать полностью «коробочную» модель разведки, понизив z-index принадлежащий :hover состояния до 1.

Тестирование доступности

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

Средства чтения с экрана рассматривают такой контент как действительно «невидимый» (оставляя его, следовательно, непрочитанным), в зависимости от контекста; содержание, которое настроено на display: none обычно оставляют непрочитанным, например. Тем не менее, непрозрачность нет вызвать это поведение. На Mac вы можете легко проверить это, активировав VoiceOver и прочитав страницу, которую мы создали в браузере:

  • Command + F5 чтобы запустить VoiceOver,
  • Control + Option + A читать содержимое веб-страницы,
  • Command + F5 чтобы остановить VoiceOver.

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


<div class="multi-hover">
<span>Spiral Galaxy NGC 1309</span>
<span>Approximately 120 million light years from Earth</span>
<span>Home to several Cephid variable stars</span>
<span>Member of the Eridanus galactic cloud</span>
<img src="https://www.smashingmagazine.com/2013/09/designing-emotion-hover-effects/ngc-1309.jpg" alt="Photograph of NGC 1309">
</div>

Обратите внимание, что это относится только к визуальным аспектам доступности. Есть и другие важные области (когнитивная, двигательная и языковая), которые я не буду затрагивать в этом примере для экономии места, но они были подробно описаны другими авторами Smashing Magazine.

Добавление сенсорной поддержки

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

Чтобы решить эту проблему, мы добавим немного JavaScript (с помощью jQuery) на страницу:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
function is_touch_device() {
  return !!('ontouchstart' in window)
      || !!('onmsgesturechange' in window);
};

$(document).ready(function() {
  if (is_touch_device()) {
    $('span').unbind('mousenter mouseleave touchend touchstart');
    $('span').bind('touchstart', function() {
      $('span').removeClass('hover');
      $(this).addClass('hover');
    });
  }
});
</script>

JavaScript применяет класс hover любому span элемент, к которому прикасаются. Итак, нам просто нужно изменить наши объявления CSS, чтобы сделать это class эквивалентно :hover событие:


.multi-hover span:hover { opacity: 1; }
.multi-hover span:nth-child(odd):hover { left: 0; z-index: 3; }
.multi-hover span:nth-child(odd).hover { left: 0; z-index: 1; }
.multi-hover span:nth-child(even):hover { top: 0; z-index: 3; }
.multi-hover span:nth-child(even).hover { top: 0; z-index: 1; }
}

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

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


.multi-hover span {
  -ms-touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

Этот шаблон пользовательского интерфейса исследования на мобильном устройстве теперь может быть описан как «нажатие на край». Это может быть дополнительно улучшено за счет увеличения перекрытия исходного положения span элементы в @media запрос, чтобы обеспечить более крупные точки доступа, упрощая активацию панелей, а также дальнейшие улучшения для смартфонов. Этот код — не единственный способ добиться такого эффекта: Ана Тюдор написала альтернативную технику с использованием CSS-преобразований и SASS.

Вывод

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

(ал) (эа)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Дизайн для эмоций с эффектами наведения

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

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

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

Краткое описание по статье Дизайн для эмоций с эффектами наведения

Название: Дизайн для эмоций с эффектами наведения . Краткое описание: [ad_1] ⭐ Дадли С . Дата публикации: 12.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

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

Сколько лет сайту?

Возраст составляет 3 года

Кнопка «Наверх»