Comments 28
На анимации смотреть приятно, но бывает перебор и ты ждешь когда же оно натанцуется и даст тебе, что-нибудь сделать
5. Быстрый
Когда элементы изменяют свою позицию или состояние, перемещение их должно быть достаточно быстрым, чтобы не ждать его окончания, но и достаточно медленным, что бы переход был понят правильно.
Не используйте медленные анимации, они создают ненужные задержки и увеличивают продолжительность.
6. Понятный
Анимация не должна быть сложной и многосоставной, так как перемещение и пересечение нескольких элементов по разным направлениям могут сбивать с толку.
Иногда мешает само наличие анимации. Да анимация может быть «быстрой» (п.5). Но когда тебе нужно сделать несколько десятков одинаковых действий подряд, то любую анимацию нужно будет ждать.
Знаете, я на своём старом-старом кнопочном телефоне моментально попадал в любой пункт меню: Для этого было достаточно нажать на кнопку «Меню» и дальше набрать комбинацию цифр вроде «1-7-3-5». Потому что каждому пункту и под-пункту в меню соответствовал порядковый номер, по которому можно было до него достучаться. Когда у молодого меня этот телефон только оказался, я долго любовался красивыми иконками в меню. Возможно там даже была какая-то анимация. Но со временем это всё заменилось на «Меню-3-1-8-1», потому что я начал серьёзно пользоваться этим устройством.
Знаете, я на своём старом-старом кнопочном телефоне моментально попадал в любой пункт меню: Для этого было достаточно нажать на кнопку «Меню» и дальше набрать комбинацию цифр вроде «1-7-3-5». Потому что каждому пункту и под-пункту в меню соответствовал порядковый номер, по которому можно было до него достучаться. Когда у молодого меня этот телефон только оказался, я долго любовался красивыми иконками в меню. Возможно там даже была какая-то анимация. Но со временем это всё заменилось на «Меню-3-1-8-1», потому что я начал серьёзно пользоваться этим устройством.
Кнопочный телефон — прекрасный пример UX, когда со временем можно запомнить шорткаты. Как вы сами отметили, анимацию это не отменяет. В первых версиях win10 рабочие столы переключались без анимации и практически моментально. Это абсолютно сбивало с толку: куда я попал, откуда пришёл.
ну а насчёт десятка действий: либо UX плохо спроектирован, что вам нужно делать десятки действий с изменениями состояний, которые требуют анимацию. Либо в UI тупо лишние анимации запиханы. Анимации должны визуализировать изменение состояния текущего экрана/объекта. В iOS, например, анимации по-умолчанию занимают 0.3 сек (или меньше): переход на новый экран, открытие клавиатуры. Больше делать просто нельзя.
ну а насчёт десятка действий: либо UX плохо спроектирован, что вам нужно делать десятки действий с изменениями состояний, которые требуют анимацию. Либо в UI тупо лишние анимации запиханы. Анимации должны визуализировать изменение состояния текущего экрана/объекта. В iOS, например, анимации по-умолчанию занимают 0.3 сек (или меньше): переход на новый экран, открытие клавиатуры. Больше делать просто нельзя.
В идеальном мире так и должно быть. На практике же так далеко не всегда. Опять же, «быстрый» и «понятный», понятия субъективный, для меня, например, все анимации на андроиде нужно ускорить в 2-3 раза чтобы было быстро. А вот сделать понятным зачастую вообще нельзя, потому что разработчик/дизайнер почему-то решил, что надо «акцентировать внимание» на иконке, в то как контент важнее.
Подскажите, каким инструментом вы пользовались для создания таких гифок?
Автором публикации был применен инструмент Ctrl-C / Ctrl-V.
И не только там он применял данныйИНСТРУМЕНТ
Здорово, что есть клоны хабра, но могу Вас уверить, о подобном ресурсе узнал из Вашего коментария. В следующий раз проигнорирую его еще раз и буду чекать наличие перевода исключительно на хабре.
Существует антиплагиатор, чтобы чекать все сайты. Клон хабра? Пфф, это просто личный блог не более
Антиплагиатор? О чем Вы? Я что претендую на авторские права или какую то прибыль? Я всего лишь хочу сделать полезный контент ближе к русскоговорящему сообществу. Мне жаль, что Вы видите в этом злой умысел.
говноперевод на каком-то левом ресурсе про пельмени жареные. О чём речь вообще?
Данный материал взят автором с доки гугла, вот тут material.google.com
Любопытно, а какие нынче существуют библиотеки для создания такого дизайна применительно к десктопным приложениям (под Windows)? Ну, скажем для C# + WPF? Я это к тому, что изобретать свой велосипед для сложной анимации, самостоятельно просчитывая все эти переходы — довольно накладно. Сложного особо ничего нет, но рутинной работы довольно много.
Могу подсказать бесплатное решение для Unity — UI Tween, почти все что нужно в нем есть. Но некоторые вещи мне пришлось дописывать.
Ещё вопрос, стоит ли делать дектопное win-приложение с такими анимациями. Из cons как минимум размер экрана — когда на смартфоне плашка разворачивается на весь экран с анимацией это не так напряжно, когда она пролетит весь 17..24-дюймовый экран. Ладно сворачивание окна, но если такие спецэффекты будут хотя бы у половины взаимодействий, это пипец, кмк.
Хотя, попробовать такое приложение было бы интересно — может, я ошибаюсь.
Хотя, попробовать такое приложение было бы интересно — может, я ошибаюсь.
Буквально сегодня столкнулся с примером таких микро анимаций — KIS 2016. Не спорю, все выполнено аккуратно и гармонично. Но пучок анимаций на одно диалоговое окно несколько «снижают статус» у антивируса — становят на одну полку со всякими download-менеджерами, левыми браузерами, которые уже давно злоупотребляют дерганными анимациями и мельтешащими цветами.
Я б не рискнул тащить все эти динамические улучшалки в enterprise.
Я б не рискнул тащить все эти динамические улучшалки в enterprise.
Ник Бабич в тренде. Иногда складывается ощущение, что он один публикуется на https://uxplanet.org/ ))
Потом от всего этого счастья вытекают глаза, ты открываешь консоль, и мир снова становится маленьким и безопасным.
Каждый раз при взгляде на анимации из Material замечаю, насколько же все это неюзабельно выглядит. Взять хотя бы тот «выскакивающий» плеер — пользователь нажал на одну единственную кнопку, и из нее вылетел целый блок функциональных элементов, я бы после такого «user experience» постарался все закрыть поскорее и больше к такому устройству не прикасаться вообще. Слишком уж агрессивны все эти анимации, и не везде уместны. Единственное, что мне нравится из Material — динамичные иконки, та же кнопка меню-гамбургер, меняющаяся на крестик.
Имхо, самые хорошие анимации — в Ubuntu и Mac OS, интуитивно понятные и в меру используемые.
Имхо, самые хорошие анимации — в Ubuntu и Mac OS, интуитивно понятные и в меру используемые.
Ох уж эта анимация. Перегружает интерфейс, а зачастую и тормозит. Особенно в браузере я считаю ее неуместной. Пример — Google play music. Какие-то надвигающиеся или выпадающие меню, куча элементов которые зачем-то двигаются независимо друг от друга и хаотично меняют размер и форму. Зачем это все? Вот в Яндекс музыке анимация по минимуму, и пользоваться удобнее.
Все же, эти анимации слишком уж сильно зависят от восприятия и каждого конкретного пользователя. Пока на том же андроиде работает стандартная анимация открытия окна, выдвигающейся шторки я успеваю несколько раз подумать «Ну какого черта, ну быстрее, почему так медленно?». После того, как включу в опциях разработчика коэффициент 0.5 или даже 0.3 для анимации становится более-менее юзабельно. Но тогда эффект грязных пальцев который ripple или circular reveal сразу надо выпиливать навсегда, а для этого простого решения нет. Собственно, ripple и circular reveal хорошо бы убрать даже при обычной скорости анимации.
Спасбо большое за ваши публикации! Я вижу что Material Design повлиял на вас так же сильно как и на меня. Google открыла глаза на простые на первый взгляд вещи. которые раз убеждаюсь, что дизайн — это первое с чео нужно начинать разработку.
Sign up to leave a comment.
Функциональная анимация в UX дизайне. Что делает ее эффективной?