Технология разработки анимации для web страниц. Использование веб-анимации. Анимация в Сети: Краткая история

• Предоставить механизм переопределения таблицы стилей (чтобы парни-локаторы могли изменять стиль элемента)
• Назначить уникальный идентификатор для каждого элемента отображаемой HTML-страницы (это позволит им нацеливать точное управление с их переопределенным стилем)
• Используйте кодировку UTF-8, где бы вы ни находились (явно HTML-страницы, электронные письма, если они есть, но, возможно, файлы ресурсов (т.е. свойства))

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

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

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

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

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

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

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

И последнее, но не менее важное: типичный способ реализации (это не лучшее слово здесь, потому что у него много других значений). Локализуемость - это просто извлекать строки для некоторых файлов ресурсов (то есть ResourceBundle в мире Java) и сохранять их в отдельном jar (я бы предложил одну банку на язык, названный в соответствии с идентификатором локали, то есть ja.jar, de.jar, fr-CA.jar). Файл jar также должен содержать дополнительный файл CSS (содержимое которого будет использоваться для переопределения определенных стилей). Все остальное, что вы найдете в моем предыдущем ответе...

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

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

Анимация в Сети: Краткая история

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

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

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

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

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

Но к середине прошлого десятилетия в W3C уже работали над тем, чтобы включить анимацию в CSS . В 2009 году была выпущена первая спецификация CSS-анимации .

Сейчас для анимации на сайте HTML мы можем задействовать аппаратное ускорение для визуализации, сочетая CSS-анимацию с SVG-файлами , библиотеками JavaScript , расширить основные функциональные возможности анимации и многое другое.

Анимация больше не является диковинкой для веб-дизайнеров. В кино она стала основой для нового способа рассказа. Для нас она становится платформой для эффективного проектирования взаимодействий:

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

Типы веб-анимации

Недостаточно просто добавить анимацию для элементов веб-страницы и надеяться, что это автоматически повысит ее конверсию:

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

Начнем с того, что рассмотрим различные виды анимации, используемые в Сети.

Анимации элементов интерфейса

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

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

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

Анимация ожидания

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

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

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

Анимация повествования

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

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

Посмотреть пример

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

Два моих любимых примера на эту тему связаны с брендами, которые имеют большой опыт работы с подобными вещами: Apple и Sony . Страница, посвященная Mac Pro при прокрутке вниз, показывает, что находится под «капотом » этого устройства:

Посмотреть пример

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

Декоративная анимация

Посмотреть пример

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

Простой поиск в Google покажет, что есть несколько сайтов, на которых что-то происходит с помощью кода Konami. Другие ресурсы включают в себя известные пасхальные яйца Google , и один из них — photojojo.com :

Посмотреть пример

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

Анимация в рекламе

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

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

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

Реализация анимации

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

Производительность, производительность, производительность

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

У меня стоит видеокарта Nvidia GTX 750 TI , которая обошлась мне приблизительно в $200. И с ней-то анимация точно не должна проигрываться прерывисто. Но я все равно встречаю в Сети сайты, заходя на которые ловлю себя на мысли: «Марио работает быстрее, чем этот сайт «.

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

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

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

Начните с малого

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

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

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

Продолжительность анимации должна быть небольшой

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

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

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

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

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

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

Прогрессия

Анимация загрузки

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

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

Анимация выполнения

Анимация может представить процесс выполнения посредством линейной прогрессии. Классическая «полоса загрузки» — это самый распространенный пример такой анимации.

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

Скелетные экраны

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

Визуальный отклик

Анимированный ответ на действия пользователя

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

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

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

Привлечение внимания

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

Навигация

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

Смена состояния

Переходы очень важны для отображения смены состояний. В своей статье Smart Transitions In User Experience Design (англ), Эдриан Зумбруннен показывает, как анимация может помочь пользователю сохранить контекст после нажатия на ссылку, перемещающую его в другую секцию той же страницы.

Просто сравните этот статичный, мгновенный переход:

С анимированным поведением:

Креативные эффекты

Креативная анимация может сделать ваш UX действительно красивым и запоминающимся. Она добавляет в UI развлекательный элемент.

Сторителлинг и длинный скроллинг

Совсем недавно, правило «над складкой» было бесспорным. Дизайнеры концентрировали большую часть своего внимания на заполнении этой области ценной информацией. К счастью, теперь мы знаем, что это правило не обязательно верно. На самом деле, 66% внимания на обычной медиа странице, тратится на область под складкой (англ). Такой сдвиг делает скроллинг важным элементов интерактивного дизайна.

Анимация вдыхает в скроллинг жизнь и интерес

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

Заключение

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

Перевод статьи Ника Бабича