Цифровые переживания эмуляции реальной жизни все больше и больше с каждым днем.
Это может показаться нелогичным, учитывая ненависть, что обрушивает на skeuomorphic визуального дизайна, но there’ Это много больше, чтобы подражать реальной жизни, чем эстетики.Дизайнеры интерфейсов может эмулировать физику реальной жизни и движения на цифровом экране.Этот тип движения становится все более распространенным, что почему it’ ы становится легче для людей, чтобы понять, computers.We’ вновь не становится лучше, интерфейсы

Быстро и распространенным примером является, как IOS открывает и закрывает приложения.Переходы очень тонкие, но they’ повторно реалистичным.Нажатие значка приложения doesn’ т просто щелкнуть новое приложение на экране.Вместо этого, пользователи видят приложение физически расти из иконы.В обратном направлении, при нажатии клавиши стартовой сжимается приложение обратно на значок .

Эти взаимодействия основаны на свойствах реального мира.Приложение появляется откуда-то физическое и исчезают обратно к тому месту.Высокое качество и реалистичные переходы здесь пройти долгий путь к помощи пользователю понять what’ происходит сейчас и почему .

В этой статье I’ опишем немного истории движения в Интернете, почему that’ важно, и то, что будущее движения на сети будет выглядеть.(Подсказка: движение, это действительно важно для удобства использования и it’ меняющемся все.) Затем I’ буду объяснять CSS-за движения и как использовать движения хорошо .

История движения на Web

Это было только 2011, когда все основные браузеры официально признан CSS анимации, и даже сейчас она требует префиксы браузера, чтобы работать везде.В значительной степени, толчок для CSS инициативе анимация был вызван смертью Flash, где “ движение было common” является занижение .

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

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

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

Itwasn’ т задолго до того, CSS3 анимации и переходы данные были приняты и реализованы современные браузеры .

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

Будущее движения на Web

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

Layers

Слои везде в современных веб-и приложений интерфейсов.Apple, действительно толкнул концепции слоев с iOS7.Примером может служить Центр управления, который скользит вверх от нижней в виде нового слоя, который частично покрывает whatever’ с на экране .

Хотя слои aren’ т движение в себе, они идут рука об руку, потому что они работают лучше, когда они анимации в и анимации из .

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

Context

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

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

Хотя это, вероятно, будет понятной для большинства пользователей, взгляните на рисунок ниже GIF, чтобы увидеть, что происходит вместо этого.Мы видим item’ Фотография пользователя перейти от текущего положения до новой позиции выше просмотра подробной информации.Мы полностью понять, что произошло и как он относится к предыдущему виду.В самом деле, это doesn’ даже не чувствую, что we’ Re переключении с одного вида в другой.Это, кажется, гораздо более естественно, чем .

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

Если пользователь нажимает значок и вся их экран мгновенно заменяется на меню, они не имеют никакого контекста, как, где, что меню пришли и почему.Это won’ т полностью сорвать никому, но it’ ˘S не хороший опыт пользователь .

Все, что нужно, чтобы скользить по левому флангу и вдруг пользователь имеет контекст для what’ происходит сейчас: “ О, меню просто сидел за кадром, ожидая, чтобы назвать .”

Вы можете увидеть пример меню ящик почти в каждом популярных приложений в эти дни и на большинстве мобильных версий сайтов.В GMail и Facebook приложения являются прекрасными примерами этой концепции .

Одна страница Application

Следующая тенденция we’ увидите одиночные страница приложения (СПАС).Как добавить движение и переходы на части наших пользовательских интерфейсов, we’ начну хотеть больше контроля интерфейса в целом (а не интерфейса На каждой странице).Теперь веб-сайты могут обрабатывать все виды переходов из состояния в состояние в пределах страницы, но то, что о переходе от страницы к странице?Любой небольшой зазор, когда экран становится белым или переводит содержание вокруг больно удобство .

Это объясняет Росту популярности одной страницы application.Прямо сейчас, есть много популярных фреймворков для построения СПА, и they’ повторно более как родные мобильных приложений, чем веб-страниц (по крайней мере в некоторых отношениях) .

Вход в систему и процесс регистрации для танца It Yourself (SPA I’ м в настоящее время строит) иллюстрирует это хорошо.Если вы идете в HTTP: //app.danceityourself.com ¹ , you’ увидите страницу первоначально загружает как обычный сайт, но если нажать на Зарегистрироваться кнопку, вместо обновлениястраница, содержание либо скользит вверх от дна (на небольших экранах) или с левого (большие экраны).Метод использует технологию Java, чтобы добавить класс к знак вверх страницы, который вызывает CSS переход .

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

Как сделать CSS Motion

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

Чтобы понять основы движения CSS, it’ важно, чтобы начать simple.Что следует объяснения с примерами, но they’ Re определенно Минимальная жизнеспособная examples.Следуйте некоторые из ссылок, чтобы узнать больше о работе по углубленному аспектов каждого типа движения CSS .

CSS Transitions

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

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

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров