Интерактивный дизайн не обязательно должен быть сложным

Автор оригинала: Jonas Naimark
  • Перевод


Интерактивность помогает сделать пользовательские интерфейсы выразительными и простыми в использовании. Несмотря на большой потенциал, интерактивность, пожалуй, наименее понятно из всех дисциплин дизайна. Это может быть связано с тем, что интерактивность является одним из новых членов семейства пользовательских интерфейсов. Визуальный дизайн и дизайн взаимодействия восходят к ранним графическим интерфейсам, но интерактивный дизайн должен был дождаться более современного оборудования для плавного рендера анимации. Наслаивание интерактивности пользовательского интерфейса на традиционную анимацию вносит свою лепту недопонимания. Целую жизнь можно потратить на освоение 12 основных принципов Диснея, означает ли это, что интерактивность пользовательского интерфейса также сложно? Люди часто говорят мне, что проектировать интерактивность сложно или что выбор правильных значений неоднозначен. Я утверждаю, что в областях, наиболее важных для пользовательского интерфейса, интерактивный дизайн может и должен быть простым.




С чего начать?


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

Паттерны перехода


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

  1. Переходы на основе контейнера
  2. Переходы без контейнера.

Переходы на основе контейнера



Элементы, такие как текст, значки и изображения, группируются внутри контейнеров

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

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


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




* Анимация замедлена, чтобы проиллюстрировать, появление и исчезания элементов

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


* Анимация замедлена, чтобы проиллюстрировать, как начальная и конечная композиции связаны контейнером

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



Если контейнер из за границ экрана, он плавно появляется и увеличивает масштаб. Вместо анимирования от 0%, он начинает анимацию с 95%, чтобы избежать чрезмерного внимания к переходу. Масштабная анимация использует смягчение замедления, то есть начинается с максимальной скорости и мягко замедляется. Чтобы исчезнуть, контейнер просто плавно затухает без масштабирования. Окончание анимации должно быть менее выраженным, чем начало, чтобы сосредоточить внимание пользователя на новом контенте.


* Анимация замедлена, чтобы проиллюстрировать, как контейнеры могут возникать благодаря постепенному изменению элемента (масштабирование, появление и исчезание)

Переходы без контейнера


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

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


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

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


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

Лучшие практики


Чем проще тем лучше


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


* Анимация замедлена, чтобы проиллюстрировать, различные стили движения

Выберите правильную продолжительность и смягчение


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

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


* Анимация замедлена, чтобы проиллюстрировать, различные типы смягчения

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

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


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

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

Подробнее
Реклама

Комментарии 12

    +2
    Вся анимация выглядит замечательно. Если смотреть ее один раз. Но если таким пользоваться постоянно, то это страшно бесит. Любая реакция должна быть мгновенной (еще несколько лет назад эти исследования публиковали и даже нашли точно время). Понятно, что реакция и здесь мгновенная, но искусственно создается пауза перед следующим действием. Это очень утомляет при постоянном использовании, когда все делается на автомате.
      0
      «Основная задача интерактивного дизайна — помочь пользователям ориентироваться в приложении, проиллюстрировав взаимосвязь между элементами пользовательского интерфейса.» — я думаю вся суть вот в этом. А пользуетесь вы анимацией не замечая того повседневно (если конечно у вас не нокиа 3310) Ну и опять же про исследования: они же не на века, а ведутся постоянно (у исследований разные вводные и разные условия? соответственно и результаты тоже разные).

      P/S/ И если не сложно, можно ссылку на публикацию? Полюбопытствовать.
        0
        Вы кажется не поняли. Задержка происходит на любом устройстве. Это в примерах показано. Между действием и следующим действием пользователь должен посмотреть «анимацию».

        По запросу «время реакции интерфейса» можно найти много статей. Вот например habr.com/post/345584

        Вряд ли новые исследования покажут, что пользователь готов ждать минуту пока красиво прорисуется следующий пункт меню. Сомневаюсь, что нас эволюция заведет такую… глубь.
          0
          В стандартных мобильных операционках тоже имеются анимации, и видят эти анимации каждый несколько десятков/сотен раз в день. Просто суть в том, что анимации не должны быть повсюду и везде без видимой на то причины… Если грамотно подойти к этому вопросу и сделать их минимальными по продолжительности, то вреда вообще не вижу. Опять же люди разные, кому-то до сих пор нравится, упомянутая выше, Nokia 3310 ;)
            +1
            Люди часто путают причину и следствие.

            Если что-то может открыться мгновенно — ОНО ДОЛЖНО ТАК ОТКРЫТЬСЯ, без дополнительных анимаций, потому что для сознания это и есть прямая связь между намерением и действием. Если мгновенно не может — то тут и нужно манипулировать восприятием, чтобы сгладить этот негативный опыт, для чего и служат анимации.

              0
              Кому должно?

              Скорость взаимодействия человека с UI в любом случае очень конечна, и быстрые анимации (быстрые — это 100 ± 50ms) на неё не влияют.
                +1
                Я в том смысле, что если скорость реакции на действие в пределах 150мс, то анимации не нужны в принципе, более того — вредны.
                  0
                  Задержки взаимодействия с каким-нибудь андроидным приложением (не считая тыканья в экран вслепую на скорость) — значительно больше этих 150мс.
            0
            За собой часто замечаю, что если нет никакой анимации и действие происходит мгновенно, то я могу даже не понять, что произошло. Особенно с новыми приложениями. Из-за этого у меня может уйти от 2 до 10 секунд на понимание того, что же произошло. А если я не разобрался с приложением, то что я сделаю? Удалю его (если это не супер специфичное приложение, которое в любом случае нужно будет).

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

            Конечно, никто не будет ждать минуту. Покажете реальное приложение, где красиво рисуется меню целую минуту? Вы слишком утрируете.
              0
              Может я очень быстрый, но стандартная задержка в меню Пуск в Windows меня страшно бесит, так как я пользуюсь им постоянно. Когда один раз что-то там не торопясь отрисовывается — не страшно, а вот когда пользуешься постоянно — то просто видишь, как тебя искусственно замедляют. Причем цель здесь непонятна — ведь вы уже не первый раз видите и не можете «не понимать, что происходит».
        • НЛО прилетело и опубликовало эту надпись здесь
            0
            Анимацией зачастую прячут подгрузку контента, в девайсе или из интернета. Отклик железа не мгновенный, и полное отсутствие анимации будет восприниматься куда хуже, чем хоть какое-то ее присутствие.

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

          Самое читаемое