Проектировщик интерфейсов
0,0
рейтинг
24 октября 2013 в 15:18

Дизайн → Анимация в интерфейсах перевод

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

Анимация прокрутки


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



Сравните эти два примера.



Резкие изменения сложны для понимания пользователя.

Динамичные переключатели


Нет ничего более сложного для восприятия человека, чем мгновенные изменения. Потому что в природе просто не существует мгновенных изменений. На следующем примере, мы можем увидеть что поворот знака «плюс» на 45° полностью меняет его смысл.



Такое переключение довольно удобно, к тому же знак «плюс» вращается в том же направлении что и содержание, что является дополнительным индикатором правильности работы системы.

Сворачивающиеся комментарии


Форма добавления комментария, будь то для блога или обсуждения товара в интернет-магазине, до сих пор остаются одними из самых сложных элементов интерфейса. Причина в том, что вместо того чтоб просто начать вводить текст, пользователь должен предпринять еще некоторые другие действия (авторизоваться например). Чтобы хоть как-то мотивировать людей писать комментарии, можно просто показывать только самый важный элемент – поле комментария, которое после нажатия на нее, раскрывается полностью (Например, как на сайте газеты Нью-Йорк Таймс).



Можно пойти и дальше: установить фокус курсора после раскрытия в поле комментария.



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

Потянуть чтобы обновить


Ставшее популярным на iPhone «потянуть чтобы обновить» (анг. «pull to refresh») разработанное Loren Brichter,
позволяет пользователю обновить содержание в обратном хронологическом порядке. Вы можете увидеть это на примере работы Twitter.



Стикеры


Идея стикеров заключается в привязке содержания к контексту, как это например показано на примере ниже, и реализовано в адресной книге iOS.



Метод замечательно подходит к ситуациям, когда информации много, но необходимо рассматривать ее в комплексе.

Приглашающие элементы управления


Посмотрите на пример ниже:



Вы можете увидеть небольшие «ребрышки» вокруг значка «камера». Они как бы приглашают вас коснуться их и потянуть. В новой iOS7 их убрали ввиду уже выработавшейся пользовательской привычки. Так же вы можете заметить анимацию блика на «slide to unlock» который приглашает совершить действие для разблокирования телефона.

Скрытие элементов управления


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



Перемещение фокуса


Примерно около недели назад, Никита Васильев, UI дизайнер из Торонто, придумал довольно интересную идею: плавное перемещение фокуса между элементами интерфейса. В полной мере суть этой идеи вы можете увидеть на видео ниже, или установить расширение для браузера (только Chrome и Safari).



Заключение


Приведенные примеры — это лишь небольшая часть того, что мы можем предпринять, для того чтобы улучшить взаимодействие с пользователем. Но эти незначительные на первый взгляд детали, способны вывести пользовательский опыт на новый, более качественный уровень.
Перевод: Adrian Zumbrunnen
Семен Шишак @ffffffffff
карма
49,7
рейтинг 0,0
Проектировщик интерфейсов
Реклама помогает поддерживать и развивать наши сервисы

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

Самое читаемое Дизайн

Комментарии (59)

  • +15
    Это все, конечно, просто отлично, но оно кушает ресурсы.
    Согласен, удобно и прикольно, когда на сайте все гармонически сделано, но когда открываешь 5-10 таких вкладок и видишь, что куда-то ушло гиг оперативки а процессор загружен сильнее, чем при фарме биткоинов, то за такую красоту хочется кому-то хорошенько выписать.

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

    И на счет формы с плюсом, возожно лучше ее справа вытаскивать, а не слева? Ведь совсем непонятно получается, то ли нажал Submit и оно потянуло на следующий шаг, то ли отменил и оно куда-то тоже переместило.

    PS. Замечания делаю как пользователь, а не как проэктировщик интерфейсов, скорей всего где-то не прав и что-то важное не заметил.
    • +6
      Поддержу, особенно в плане автопрокррутки, беспонечная подгрузка коментариев, изображений и тому подобного — ужасное решение, ибо убивает возможность поиска. Я запомнил что на 14 странице коментариев есть нужный мне и могу легко найти, а тут…
      Зато это хорошо смотрится в поиске гугл картинок, так как там я явно не буду запоминать что картинка находиться на 14 странице ибо это не имеет смысла из-за переодического изменения поисковой выдачи
    • +7
      Автоподгрузка с бесконечной прокруткой — весьма неудобная штука. В дополнение к уже перечисленным недостаткам, после сотни-другой виртуальных «страниц» браузер начинает жутко тормозить.
      Еле умудрился отговорить начальство от реализации такого в блоге компании.
      • +1
        Казалось бы, простая идея: n раз подгружать порцию автоматически, на n+1 вешать кнопку «Следующая страница», повторить — и почти нигде не используется.
        • +1
          Google использует в картинках
        • +1
          Всё равно неудобно: нужна предпоследняя загрузка, хочешь к ней вернуться, и пять n раз ждать подгружения? Тут надо хитрее делать, например, по мере менять адрес на соответствующий номер страницы, например, чтобы можно было и поделиться им, и назад вернуться к тому, что смотрелось.
          • +3
            Посмотрите, каr эту задачу решила команда Вконтакта. Как по мне, то вполне удобно и комфортно. Одновременно идет бесконечный скролинг и сверху висит нумерация страниц. При желании можно перейти на определенную страницу и читать бесконечную простыню комментариев.
  • +14
    А странно выглядят первые 2 гифки. Анимированы они так, как будто происходит клик по «Home», а переход идет на «Contact». Я понимаю, не существенно, но тут же поднимаются вопросы юзабилити, понятности интерфейсов.
    • 0
      я по этим гифкам там и не понял, кто куда переходит…
  • +6
    Резкие изменения сложны для понимания пользователя.

    Я считаю, что этот пример не очень удачный. Одно дело — когда что-то само изменяется, а другое — когда человек нажал на кнопку и уже был готов к изменению. Я согласен с тем, что «стихийные» изменения должны происходить не так резко, дабы было понятно, что вообще происходит. Но когда человек, например, сворачивает окно, и оно сворачивается полсекунды, то это только отвлекает.
    • +2
      Может быть не совсем в тему, но в excel в последнем, подобные плавные изменения есть. Мне это доставило некоторые неудобства с непривычки. Плавное заполнение ячеек при зажатом ctrl и растягивании выделенного диапазона раздражали. И плавные переходы между ячеек тоже. Из-за них я промахивался и вводил данные не туда, может быть из-за спешки.
      • +4
        Имелось в виду, повидимому, что когда при нажатии PageDown, например, экран мгновенно меняется, вы не можете понять, куда и насколько он сдвинулся. А если он быстро-быстро прокрутится, вам будет ясно, что перемотана одна страница вниз.

        Проблемы, как это обычно бывает, вытекают из двух недостатков любого проектирования дизайна UI
        1. Программировать сложно — в результате это всё подглючивает, подтормаживает и, например, неправильно реагирует, если вы нажмете PageDown, а затем резко PageUp. Или, того хуже, анимация стопорит всё и дизайн становится неотзывчивым. Непропускаемые анимации, кстати, раздражают даже в играх, а не только в серьёзных программах.
        2. У разработчиков (или дизайнера) часто не хватает вкуса — очень велико искушение сделать медленную красивую анимацию в полсекунды длиной там, где два последовательных действия юзера могут идти в промежутке 0.1 секунды. Некоторые считают, что чем больше анимаций и чем они заметнее — тем лучше. А между тем, давно известно, что лучший дизайн — тот, который никто не замечает.
        • 0
          Ну с экселем я тоже не мог сразу удостовериться что данные заполнились до нужных мне ячеек. А так я с вами полностью согласен
  • +7
    По поводу раздела «Скрытие элементов управления». По моему не совсем удачный пример с браузерами.
    При поиске это ужасно раздражает: немного промотал, хочешь изменить запрос, а строка ввода пропала.
  • +13
    Не знаю — не знаю. У меня почти никогда не возникало проблем с мгновенной реакцией интерфейса на мое действие. За редкими исключениями, когда эта реакция была совсем не такой, как я ожидал, и приходилось понимать, что же произошло. В таких случаях анимация, возможно, дала бы мне более быстрое понимание. Однако, в большинстве случаев, особенно при использовании гиперссылок, меня раздражает анимация, я не хочу смотреть на нее даже пару сотен миллисекунд, я предпочту сразу видеть результат моего действия.
    Отдаю себе отчет, что я, скорее всего, маргинал в плане интерфейсных предпочтений.
    • +7
      По поводу анимации в интерфейсе, у меня был случай. В школе на информатике мы что-то на турбо-паскале писали, кажется программку, которая отрисовывает кнопочки с разными символами. У части класса эта программа просто показывала табличку, а вот у некоторых бала симпатичная анимация: кнопочки отрисовывались постепенно. На вопрос к учителю последовал вполне закономерный ответ, мол компы разные, в одних не тормозит, в других тормозит, и еще цитата: «Жаль агаты выбросили, они косинус рисовали, как мультик показывали». Так что у меня похоже гдето на подкорке отложилось, что видимая глазу анимация есть результат тормозов компа, а не работа дизайнера.
    • +1
      Тут следует различать гиперссылки на внешние страницы и на якоря на той же странице. Автор рассматривает второй случай. Здесь анимация позволяет понять, что мы никуда со страницы не ушли, а лишь отмотали на нужное место.
      • 0
        Для меня разницы никакой. Вы используете два разных глагола «уйти» и «отмотать». Для меня это один глагол — «перейти». По ссылке я перехожу от одной информации к другой, безотносительно того где размещается эта информация.

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

        Я не говорю, что анимация это однозначно плохо или однозначно хорошо. Я говорю, что мне без нее лучше.
    • +1
      Часто мешает работать рвение авторов напихать бесполезной (но пусть даже красивой) анимации где ни попадя. Анимация ведь может быть и 0.1 секунды длиной, давая пользователю визуальную связь между его действием и элементом или между двумя элементами. Плохая анимация — когда нужно очевидно ждать.

      Меня, например, безумно раздражает анимация модальных окон во многих современных системах (да, Бутстрап, я смотрю на тебя), когда сначала треть секунды появляется overlay, затем еще треть — само окно, а затем начинает загружаться содержимое этого самого окна. И даже если загружать ничего не нужно — больше, чем пол-секунды ожидания каждый раз во время сосредоточенной работы — адски бесят.
  • +6
    На счет анимации не совсем согласен, в большинстве случаев, это только мешает.
    Стикеры, отличное решение, но бывают случаи когда их суют не к месту.
    Полностью поддерживаю идею с «преследующим меню», для некоторых своих проектов, даже реализовал такую фичу, а недавно даже залил на GitHub как jQuery плагин, правда реализовал только для bootstrap, все никак руки не доходят.
    • +2
      По-моему, дико не удобно при работе с мышкой. Мне кажется, что гораздо удобнее было бы просто всплывающая панелька, показывающаяся при наведении. А при работе с пальцем — ну в том же хроме будет появляться и ваша панельяка, и хромовская. Спорное решение
      • +1
        Неудобно при работе с класическим колесиком мыши, это решение я использовал на внутренних ресурсах, где люди в основном используют мыши и трекпады Apple, про проблему с колесиком даже и не думал, пока не выложил на GitHub и не показал другу. Решение действительно спорное и использовать его нужно только при полной уверенности, что он необходимо.
        • +2
          Если честно, меня больше смутило само поведение. Я, не прочитав комменатрий, начал скроллить. Ничего не произошло — матнул вверх — появилось. Подумал, что баг и поздно отрисовалось, а потом только догнал. Вероятно, дело привычки, но мне было бы удобнее, если бы оно все время там было. Но идея действительно интересная, вот хочу придумать юзкейс, когда она себя оправдает сполна)
          • +1
            Я ее использовал на двух страницах внутренних ресурсов, где очень большие списки и много разной метрики, когда фиксированная панель отвлекает и отбирает полезное пространство монитора, но при этом панель была нужна, без нее сложно ориентироваться на странице, решение с кнопкой «вверх» как на хабре и в вк, тоже не подходило.
  • +14
    Все опытные игроки в Цивилизацию отключали анимацию боев и вообще почти всю анимацию (в 3-4 версиях по крайней мере). И даже не столько ради экономии времени, а просто потому что когда ты играешь 1000-ю игру то эти анимации только раздражают.

    Так и здесь, если ты впервые на сайте, презентационном, то анимация может тебе и поможет и восхитит. А если ты постоянно интерфейсом пользуешься — оно тебе не надо.

    Но тут да, надо различать анимацию и ПОЧТИ НЕ ЗАМЕТНУЮ анимацию. Как вот в Виндоус 7 у меня окошки появляются и исчезают. Анимация там есть, но ее практически не замечаешь. Такая да, лучше чем без нее.
  • +5
    Это правда удобнее, но главное считаю должна быть предсказуемость системы. Если система предсказуема, то пользователю проще принять мгновенные изменения. Я не удивлюсь, если ссылка «наверх» меня мгновенно перебросит наверх. Меня гораздо больше пробесит, если ссылка «наверх» меня медленно протащит по всей странице. А если это умная ссылка, то она вычислит длину страницы и перетащит с необходимой скоростью, чтобы я остался удовлетворенным, в лучшем случае она, конечно, еще опознает мой браузер и решит стоит ли грузить его такими задачами или не стоит, и так далее. Все хорошо в меру.
  • +1
    Подгрузка при прокрутке актуальна для всяких социальных сетей и твиттеров, где лента постов условно бесконечна. Для отображения конечного числа комментариев это чертовски неудобно. Даже если их несколько сотен — уж лучше разбить постранично.
    • +1
      А лучше простой кнопкой «Подгрузить еще». Тогда до футтера можно без проблем добраться и не нужно искать страницу на сайте, где ничего не продолжается бесконечно.
      • +1
        В случаях с автоматической подгрузкой, не должно быть футера, многие об этом забывают.
      • +1
        Думаю кнопкой не лучше.
        В комментария сверху уже приводили в пример, что найти комментарий на пятой страницы легче, чем пять раз нажимать «Подгрузить ещё»
  • +5
    Главное в анимированных интерфейсах — не переборщить с анимацией. В идеале пользователь вообще не должен замечать из чего она состоит. Примерно так же, как не должен замечать применение стилей слоя photoshop.
  • +1
    Google Chrome для iOS еще с момента своего появления использовал идею скрытия поля поиска, во время прокрутки контента.

    Появилось только в последних версиях для iOS 6, и очень плохо реализовано( Когда строка нужна ее нет, и наоборот =)
  • +1
    Анимации нужно стараться быть гармоничной.

    Я недавно писал о идеи анимировать логотипы: habrahabr.ru/post/188266/
    Анимация нужна всем элементам, которые что-то делают. Ссылка меняет цвет при наведении, а фотография, которую можно увеличить по клику, даёт знать о себе иконкой, фоном или текстом, в общем анимацией.
  • +1
    Анимация здорово помогает понять что произошло при нажатии на ссылку. В свое время долго думали как повысить дружелюбность этого интерфейса для отображения текущих событий для одной букмекерской конторы. В итоге инерционная прокрутка списков, плюс плавное всплывание/исчезание изменений сделали эту страницу настолько популярной среди пользователей, что пришлось реализовать специальный кэширующий прокси сервер для нее.
  • +1
    Насчёт плавного перемещения фокуса — подобная идея уже давно реализована в MS Office 2013. Особенно заметно в Excel.
  • +1
    Хотя часть примеров довольно полезна, но в общем случае действует простое правило: если для улучшения интерфейса его понадобилось анимировать — значит, с ним что-то явно не так.
    • +5
      Не соглашусь, умеренная анимация часто идёт на пользу, делая интерфейс понятнее и приятнее.



      А иногда и неумеренная

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

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

        Второй пример хорош внесением метафоры сдвоенного альбома вместо привычной длинной ленты, но подходит только для блоков ровно в половину экрана, и чётного их количества. Боковое сгибание настроек тут немного ломает метафору, открывая бесполезное белое поле с неудобным крестиком. Стандартное всплывание с блюром фона смотрелось бы логичнее.
  • +2
    Перемещение фокуса между полями — действительно крутой концепт. Особенно если реализовать его едва так заметно для пользователя, а не кричащим «смотри, как я круто перемещаюсь», как обычно бывает со многими новыми эффектами.
  • +2
    Перемещение фокуса между полями не зря сначала продемонстрировано на примере хаотично разбросанных инпутов. Чем лучше сделана форма ввода, тем меньше необходимость в таких костылях.

    Вот есть два основных сценария ввода — мышкой/тачем или с клавиатуры. В первом случае вообще мало понятен смысл анимации — и так ясно, что фокус установился там, куда ткнули.
    Табом же переключаются статистически намного реже, и обычно просто на экране смотрят какое поле следующее, а дальше утыкаются в клавиатуру.
  • +1
    Ещё немного критики по примерам:

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

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

    Теперь про «pull to refresh». По-моему, типичный пример временной моды на малологичное решение.
    Pull всегда использовалось для скролла непрерывного содержимого. Рефреш — отдельное логическое действие, по сути костыль для условий медленного и сеансного соединения.
    То есть попытка обычного скролла приводит к неожиданному поведению системы, какой-то подгрузке. Для быстрого соединения лучше обновлять фид автоматически с минимальным интервалом. Для медленного мобильного инета — логичнее выделить события рефреша в отдельный контрол.
    • +1
      Не согласен насчёт «pull to refresh». По крайней мере, в случаях, когда это не обновление в смысле замены текущего содержимого на новое, а добавление новых элементов. Т.е. пользоователь как бы пытается промотать список/ленту дальше, чем она сейчас подгружена, и вполне логично при этом подгрузить обновления, чтобы было куда мотать дальше.
      • +1
        Ну я понимаю, для чего это сделано и какая тут логика. Но вот пример из жизни — я сел в кафе, подключился к вайфаю, от нечего делать загрузил ленту. Потом ушёл оттуда, но захотел что-то дочитать и скроллю туда-сюда. Вдруг случайно упираюсь в границу и тут вдруг начинается реакция системы, нежелательная подгрузка по мобильному инету и пр.

        Ниже уже сравнили такую «чрезмерную» реакцию с обманом файлообменников и прочей троянской активностью. Интерфейс должен быть предсказуем и делать только то, что от него требуют. Как минимум, необходимо иметь возможность такие фичи отключать.
        • +2
          Ну, на гифке-то всё как раз прозрачно — написано, что контент обновится только если отпустите. А если вернёте на место, то нет.
          сама гифка, чтобы не искать
          image
  • +3
    > Нет ничего более сложного для восприятия человека, чем мгновенные изменения. Потому что в природе просто не существует мгновенных изменений.

    Раз в пару лет какой-нибудь дизайнер делает открытие что в природе нет черного цвета или квадратных форм или текстовых интерфейсов и рассказывает о том как людям поплохеет если вы срочно не исправите свой интерфейс. Скоро наверное кто-то скажет что нет ничего хуже для человека чем передвигаться транспортном средстве с колесами, потому что в природе не существует колес.
  • +1
    Пример с полем ввода комментария, разворачивающимся в форму с кучей полей, никак нельзя назвать хорошей практикой. Я не спорю, что это стимулирует писать комментарии, но я это воспринимаю как обман. Вместо того, чтобы просто принять мой комментарий, мне внезапно предлагают сделать несколько нежелательных действий. Возникает ассоциация с недобросовестными файлообменниками, которые при нажатии на красивую кнопку «Скачать файл» предлагают зарегистрироваться, отправить SMS, посмотреть рекламу и ввести капчу.

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

    Конечно, если дополнительные поля — только имя и город, то это будет не сильное негодование, а легкое разочарование («я надеялся, что всё будет так просто, но увы»). А если полей больше и они сложнее, то есть ненулевой шанс разозлить пользователя, и он больше не вернется на этот сайт.
  • +1
    >>>В новой iOS7 их убрали ввиду уже выработавшейся пользовательской привычки
    забавно, а новым пользователям эта привычка будет передаваться воздушно-капельным путём от старых или как?
    • +1
      :) Там еще при клике экран пытался уехать вверх на 10px и возвращался, с анимацией. Я думаю не смогли сначала определиться как лучше, а прошло время и поняли что с анимацией понятнее достаточно.
      • +2


        для наглядности
  • +1
    Дельно написано. Вот казалось бы 20е версии браузеров, а до сих пор скролл по PageDn/PageUp не анимирован. И вроде помню что лет 10 назад где-то это было опционально. Конечно maximw скажет что он и так поймет почему вдруг все на экране поменялось, но есть рассинхронизации юзера и фейса: я постоянно на хабре/везде скролю пробелом, и каждый раз ищу глазами «на чем я остановился».
    • +1
      Позвольте сказать, как я скажу :)

      Я скажу, что если на экране _вдруг_ все поменялось, то это, скорее всего, плохой интерфейс, понимание которого можно облегчить анимацией. А если для пользователя изменения происходят не _вдруг_, а в ответ на его действия и происходят логично, то тут да, вы совершенно правы, «он и так поймет».
      • +1
        Может я много букв написал :) Вкратце: юзер нажал PageDown — все поменялось без анимации. Вроде ожидаемо, но нужно распознавать где то, куда я глядел. Думаю об этом и статья.
        • +1
          Ну я тоже обрадовался плавному скроллу, когда увидел как он выглядит при прокрутке колесом. Глазу намного проще понять, где он остановился в прошлый раз.

          А вот в случае PageDown вскоре понял что не очень-то он и нужен — при таком листании уже выработана привычка переводить взгляд в верхнюю точку и сразу читать оттуда. А приходится ждать когда промотается весь экран.
    • +1
      В Опере (до хрОперы, по крайней мере) плавный скролл включен по умолчанию, если что. В ФФ включается через about:config, в Хроме — в chrome://flags
      • +1
        В FF он тоже по умолчанию, AFAIK.
  • +1
    И вот еще, анимацию можно делать с jQuery.animate(), а с недавнего времени еще и с CSS3 transition. Последний работает на «низком» уровне, явно проворнее, да и облегчает программу (css декларативен), очень вкусный. Пока столкнулся лишь с одним неудобством — не найду метода узнать что анимация закончилась, приходится делать setTimeout на то же количество секунд как и в CSS (и константу нельзя). Пример: чтобы нечто улетало за экран и только после этого само-удалялось.
  • +1
    Великолепная статья. Отличная подборка примеров!
    Очень много коментов в стиле «а вот я видел, как анимация а) сожрала все рессурсы б) загрузила пользователя до смерти»
    Для любых, даже общепринятых норм дизайна я берусь найти пример отвратительного использования.

    В конкретных примерах анимация приведенная выше автором МОЖЕТ сделать интерфейс живым и понятным.
    При условии что будет пользоваться умеренно, к месту итд.…
  • 0
    На мой взгляд не всегда удаётся реализовать естественно воспринимающуюся анимацию, а не просто такую, которая здорово смотрится. По сути в основе большинства приведенных примеров лежит в так или иначе эффект задержки (delay). Идея с концептом Flying Focus мне понравилась.

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