Тренди дизайну: інноваційні ефекти при наведенні курсору мишки
Куди б ви не подивилися в інтернеті - всюди побачите приголомшливий анімаційний ефект. Якщо анімація була обов`язковим елементом дизайну 2016 року, то інноваційні ефекти «наведення» - це майбутній дизайнерський тренд-2017.
Частково завдяки популярності посібників Apple по анімації, hover-ефекти повертаються, з акцентом на невеликі руху. Але замість миготливих, підстрибувати і обертових ефектів минулого, анімація стала простий і чудовою одночасно. Вона допомагає користувачеві і покращує UX.
Ефекти при наведенні можуть варіюватися від широкого руху, яке змінює картинку на екрані, до навігаційного елемента.
У цій статті розглянемо всі ці варіанти окремо.
Рух на головній сторінці
Ефекти при наведенні можуть бути ключовою частиною користувацького досвіду. З анімацією, яка заповнює екран, додаткові hover-ефекти створюють чарівну пару.
Haus, вище, чудово справляється з цим, використовуючи героїв мультфільмів, які рухаються по екрану. При наведенні мишки кожен персонаж виконує дію, а без нього - просто дефілює по екрану.
При роботі з повноекранної анімацією, такий як ця, хитрість полягає в тому, щоб захоплювати користувачів. Це досить складно. Потрібно подбати про те, щоб інша частина екрану була максимально простий - чистий фон, шрифт без зарубок. Анімація повинна бути єдиним трюком на екрані, який спонукає користувачів взаємодіяти, перш ніж перейти далі. Інакше ви просто втомити людини.
ефекти кнопок
Відео: CSS анімація елементів при наведенні
Проста анімація може спонукати користувача натиснути на кнопку. І це одна з причин, чому цей тип анімації такий популярний.
Створіть такий ефект на кнопці, який допоможе користувачам краще зрозуміти дизайн. В наведеному вище прикладі показано, як кнопка змінює колір і повідомляє користувачам, що станеться після кліка. Це корисна і функціональна анімація, яка ще й чудово виглядає.
Галереї і слайд-шоу
Веб-сторінки заповнені різними галереями і слайд-шоу. Майже всі з них включають в себе декілька анімованих ефектів, від переміщення між слайдами до стрілок, які повідомляють користувачам, як перегорнути далі або повернутися назад.
Ключ до проектування сучасної анімації можна отримати прямо з керівництва по Material Design:
Рух має бути швидким
Рух має бути зрозумілим
Рух має бути зв`язковим (без ривків)
Відмінна анімація - це коли рух відбувається таким чином, що користувач не питає, що буде далі, грань між елементами контенту очевидна, все відбувається плавно, одним потоком.
Навігація і меню
Найпопулярніший елемент дизайну. Великі фрагменти анімації або ефекти наведення допомагають користувачам краще орієнтуватися в контенті, і переміщатися по сайту.
За допомогою значків-гамбургерів анімація пунктів меню може стати сильним спрямованим інструментом.
Oxen Made використовує анімацію наведення на головній сторінці двома способами, щоб направляти користувачів до потрібних дій. «Меню» змінює колір при наведенні, щоб користувачі знали, що воно є клікабельним елементом. Потім повне меню переміщається в лівій стороні сторінки. Далі невелика трикутна стрілка сигналізує про те, що на прокручуванні є більше вмісту.
Форми і поля
Деякі з кращих прикладів hover-ефектів реалізовані в формах і полях. Майже кожен відвідуваний вами веб-сайт запитує якісь дії або інформацію. Чим простіше користувачам надати цю інформацію, тим імовірніше, що ви дійсно її зберете.
Це не означає, що форми повинні бути нудними. Важливі візуальні підказки, які допомагають користувачам зрозуміти, що вводити в поле (і в якому форматі), а також підтвердження успіху.
На прикладі вище реалізовані всі ці речі. Користувачам повідомляється, яку інформацію потрібно вводити, а після заповнення вони бачать сигнал про успіх. Швидка перевірка на екрані сигналізує про те, що вони можуть продовжувати далі.
Якщо ви не знаєте, з чого почати використання анімації на сайті, форми можуть стати гарною відправною точкою. Користувачі вже очікують, що ця частина веб-сайту буде інтерактивною. Забезпечте швидку зворотний зв`язок за допомогою простої анімації.
Ресурси і код для тестування
Чи готові додати анімовані ефекти в свій дизайн? Ось ресурси, які можуть допомогти вам приступити до роботи.
Відео: CSS3 ефект при наведенні
Hover.css:колекція ефектів CSS для посилань, кнопок, логотипів, SVG, зображень і т. д ... Доступно в CSS, Sass і LESS.
Imagehovereffects:колекція ефектів для зображень. Скопіюйте код і використовуйте в своїх проектах.
Iconhovereffects:ефекти для іконок.
AmazingWordPresshovereffects:колекція ефектів, які відмінно підходять для користувачів WordPress.
W3Schools- CSS3 Transitions:урок, як використовувати переходи в CSS3, з нуля.
висновок
Анімація наведення - одна з тих технік дизайну, які виглядають складно і важко. Але за допомогою CSS кожен може легко додати просту анімацію на свій сайт.
Просто майте на увазі золоте правило використання будь-якого трюку в вашому дизайні: воно повинно бути значущим. Використовуйте ефекти наведення або анімацію, тільки тоді, коли вони потрібні. Будьте обережні, не відволікайте користувачів від дій, які їм необхідно зробити. Успіхів!
