0:01 Ты занимался тем, что записывал экран, а потом 10 раз перематывал экран?
0:06 Конечно, не один раз.
0:08 Иогически тем заболем.
0:10 Землешься, просто галерея.
0:13 Так вот, ты какая кнопка плей.
0:15 Вот я поставлю АС 13, когда на свой личный телефон.
0:18 Я буду каждую анимацию пересматривать, потому что они там понаделали.
0:26 Привет, я Никита, дизайнер продукта и дизайнер хренового кода на свифте.
0:31 Привет, я Роман, дизайнер сервисов, инструментов и идеал мужчины для меня - это бакс бани.
0:37 А это подкаст дизайн такой?
1:01 В этом выпуске мы говорим об анимации.
1:03 Ее месте в создании продукта, в принципах построения взаимодействий, хороших и плохих примерах использования, а также адаптации на различные платформы.
1:18 Я думаю, по стариночке надо просто с самых азов начинать, с самых первых вот слоев этой темы.
1:25 Давай начнем с того, что.
1:27 допустим, предположим, или просто вспомним, что анимации нет.
1:34 Скорее всего, все не так уж и плохо.
1:37 Ну, где-то не так уж плохо, да.
1:39 Да, если зайти на сайт ДЧЛ, там будет все дубово, сверстна, таблица для трекинга, анимации там нет никакой, но как твоя посылка идет из одного пункта в другой, я прекрасно понимаю.
1:55 Ну да, понять, можно, какие-то не сильно сложные интерфейсы или интерфейсы, которыми ты должен пользоваться.
2:01 Есть интерфейсы, которыми тебе просто нужно пользоваться, например, госуслуги, какие-нибудь, когда ты задаешь тест на права, о, там ужасный интерфейс.
2:11 Но тебе приходится им пользоваться, потому что деваться некуда.
2:14 Когда мы с тобой визу оформляли, по-моему, тоже анимации особо не было.
2:17 Не было никакой анимации, да, оформления визы в Индию.
2:20 Там и юзубили-то никакого не было.
2:23 Ну, то есть, давай резюмируем.
2:27 Это самый быстрый вывод, что у нас был за все выпуски.
2:30 Можно без анимации, да?
2:32 То есть, не умрет ничего.
2:34 Транспортная компания энергия позволит рассчитать тебе стоимость отправки груза.
2:40 Например, если ты стартап, и у тебя нет сейчас возможности заниматься такими красивостями, как анимация, микроанимации,, да тебе се нужнойчас сконцентрироваться, и у тебя один дизайнер есть в твоем стартапе, или ты сейчас дизайнер на стартапе, и тебе говорит владелец: делай что хочешь, да?
2:58 Ты лучше займешься прототипами, юзабилити-тестированиями, ты лучше займешься
3:04 вещами, которые сейчас первостепенные, нежели анимация.
3:07 Анимацию можно начать дорабатывать позже, когда продукт уже начнет окупаться, когда амортизационный период пройдет.
3:15 Не знаю, как там эти еще вещи произойдут.
3:17 Ну, серьезно, в бэклоге вот эти анимации будут висеть, и спринтов спринт, но их никто не будет добавлять.
3:26 Гораздо важнее собирать данные о том, что работает, что не работает.
3:30 А о том, как себя проявила анимация, ну, это вот это реально, это по-английски - рефайнмент, ну, это допиливание, улучшение согласен, того же мнения.
3:42 Но мы собрались поговорить про анимацию, поэтому да, без анимации можно существовать, сразу снимаем этот вопрос.
3:50 Ну, да, нам анимацией можно.
3:51 Нам надо еще минут 38 записать про то, что она про анимацию, а не про то, что она не нужна.
3:56 Так, но мы все-таки собрались обсудить анимацию, поэтому если все-таки у тебя есть время заниматься, анимацией, есть бюджет, если ты компания там уже большая, и тебе дают порный.
4:10 порный, полный карт-бланш.
4:16 Если у тебя есть полный карт-бланш на анимации - то зачем она вообще нужна, в интерфейсах?
4:22 Давай поговорим - типа нафига она.
4:24 Я сейчас зайду, вот как всегда, я люблю примеры ни оттуда, ни по теме и ни в кассу, но я почему-то хочу вспомнить Яндекс.Танцию.
4:35 Так в чем проблема с Яндекс.Танцией?
4:37 С Яндекс.Танцией все прекрасно.
4:39 Классный звук, плейлисты твои подцепляются.
4:42 Мне у Яндекс.Станции не хватает визуального отклика.
4:44 То есть, когда я смотрю на нее,
4:47 она стоит, ну там на столе, на подоконнике.
4:51 Я не вижу, мой голос считывается или не считывается.
4:54 Записался я или не записался.
4:56 А еще я не понимаю, то есть, какая до нее реплика дошла.
5:00 Когда вот Яндекс.Танция связана с телеком, твоя реплика отображается, и можно сразу понять,
5:08 что голос распознан правильно или неправильно.
5:15 просто в комнате без телека усложняется.
5:19 А вот это кольцо оно сверху находится, светящейся, то есть оно уровень громкости показывает режим.
5:24 Я его не вижу, то есть, оно в торце утоплено.
5:28 Если бы она мерцала, например, как-то ну сверху, ну нет, не сверху, сбоку, был бы вот уровень громкости моего голоса входящий.
5:37 Я бы понимал, слышит она меня или не слышит.
5:39 Поэтому в голосовых интерфейсах очень важно понимать, отклик есть, запись идет, какой уровень звука и еще какая реплика.
5:47 Ну, кроме тудунс, который произносится станция, какого-то звука, который там ту-дун, это такое логическое.
5:55 Кстати, вот к тебе контрпример: вот у Алисы то, что сверху светится, не видно с другой стороны, а вот на джойстике Плейстейшна ты видишь полосочку
6:07 джойстик Плейстейна 4, он светится с торца.
6:12 И ты, если сидишь и смотришь на него сверху, ты не видишь, как он светится там спереди.
6:17 И чтобы ты видел, они во второй версии дуалшока 4 сделали такую полоску сверху, на которой видно такая дырочка, через которую видно, какого цвета у тебя джойстика.
6:27 То есть, рассеивается свет?
6:29 Ну да, типа вот там панель такая на джойстике - сверху, и на ней есть такая не прорезь, а прозрачная полосочка - и через нее видно, какого цвета лампочка светит.
6:40 и люди, которые с другой стороны смотрят на тебя, и ты видел, какого цвета у тебя джойстик.
6:46 Это не было в первой версии дуа-шока, это появилось во второй версии дуа-шока.
6:49 То есть, Яндекс вполне может во второй версии точно так же сделать лампочку откуда-нибудь сбоку, или там пророчь, чтобы ты видел.
6:58 То есть, то, чего не хватает мне, этого визуального отклика.
7:04 как в мире вещей, как и в промышленном дизайне, вот с чего мы с тобой начали, так и в интерфейсе.
7:10 Если кнопка нажата, она должна либо кликнуть, либо клацнуть, либо проражаться, тогда я понимаю, что я совершил действия.
7:19 О, кстати, вот опять буду не в тему.
7:23 Клацающие звуки в клавиатуре тоже помогают тебе понимать, что кнопка нажалась - и форстач.
7:32 Это все бывает тактильно.
7:36 Это как Таптик Енджин или там форс тач, как клацание клавиатуры.
7:41 Очень многие сейчас до сих пор любят механические клавиатуры.
7:44 Именно за ход за отклик который дается на экране надо это повторить то есть перенести опыт имеющийся из твоего из реального мира из мира вещей в мир интерфейса в мир Фул-Дикранов и в мир сенсорных мониторов.
8:03 Так что первый пункт - это визуальный отклик, который должна дать анимация.
8:09 Она должна ее обеспечить.
8:10 Визуальный отклик - это очень важно.
8:12 Например, даже визуальный отклик важен, когда ты нажимаешь на кнопку и понимаешь, что ты на нее нажал - то есть кнопки без ховера и без
8:23 состояния нажатого, ну, на десктопе, в вебе, это очень плохо.
8:27 Ты не понимаешь, нажалась кнопка, не нажалась кнопка, что сейчас произошло, никакого визуального отклика.
8:31 Это очень самое один из самых простых примеров.
8:33 Слушай, мы с тобой вообще, когда к выпуску готовились, об этом, не вспоминали, не думали, но сейчас я понял, что курсор.
8:43 И мерцает, и что делать.
8:46 Хотя это вот это не веб, это текстовый редактор.
8:48 Да, то есть, анимация нужна, чтобы человек понимал, чтобы был какой-то отклик.
8:53 И чтобы он понимал, что сейчас происходит.
8:55 Например, когда иконка медленного иконка крестика превращается, точнее, иконка бургера, когда иконка бургера превращается в крестик, а это понятно, анимация сейчас состояние изменилось.
9:07 То есть открылось меню.
9:09 И в том месте, где был бургер, теперь ты можешь закрыть меню.
9:12 Например, когда холодильник не закрыл, и слышишь?
9:14 Ккри: Кто холодильник не закрыл?
9:19 Вот тебе отклик от холодильника поступает.
9:23 Дальше, конечно, анимация помогает сымитировать физическую модель, сымитировать живое взаимодействие.
9:31 Например, там в вайбу у тебя страницы листаются, и ты привык к тому, что есть определенное время для перелистывание странички, ты по жизни не привык к тому, что книга листается бесконечно, что это бесконечная страница.
9:45 Для тебя, как для человека, это же непривычная штука.
9:48 А если в интерфейсе текст идет бесконечно, ты даже на эти миллисекунды не отдыхаешь.
9:53 И это непривычно для человека, поэтому перелистый страниц вот таким образом перенеслось - и в приложение.
10:00 Я это замечаю на грубом прототипировании.
10:03 Когда макеты связываю, но ничего не происходит.
10:07 И то есть изменений бывает настолько мало, что
10:11 непонятно, куда взор свой обратить, что вообще поменялось.
10:16 Если бы что-то колыхнулось, лист бы перевернулся.
10:20 или добавился Но, кстати, материал он же про то и говорит: о том, что он имитирует текстуры, поведение физических вещей.
10:29 Листков, да, картона, можно сказать.
10:31 Да, собственно, слои наложения их.
10:35 Это опять повторение, имитация.
10:39 Она нужна для того, чтобы эффективно задействовать твой имеющийся опыт взаимодействия с реальным миром с бумагой, заметкой, о стикером
10:51 стикер приклеился, стикер стопки как в почте, как в любом приложении
10:57 сейчас на рабочем столе.
10:58 Да, стекс тоже стопки, они сворачиваются, приложения у тебя сворачиваются вниз, они
11:05 там не знаю, не скручиваются, не
11:08 улетают вверх, ничего, они сворачиваются вниз.
11:12 Не, этот джинни, по-моему,
11:15 его можно отключить.
11:17 Можно без него, но с ним приятнее.
11:20 А приложение разворачивается, когда у тебя ты на иос нажимаешь, оно такой хоп, и стало больше, что развернулось.
11:26 То есть, очень много анимаций у нас, которые мы даже не замечаем, но это такая физическая модель взятая из реального мира.
11:33 Ты занимался тем, что записывал экран, а потом 10 раз перематывал.
11:40 Конечно, не один раз.
11:43 Земля, что просто: галерея.
11:47 Так вот ты какая кнопка плей?
11:49 Вот я поставлю айос 13, когда на свой личный телефон.
11:52 Я буду каждую анимацию пересматривать, потому что они там понаделали, ой, понаделали.
12:00 Я посмотрел на прекрасные часы, переворачивающиеся у меня на свернутом экране.
12:08 Они тоже, кстати, повторили реальный мир - такой уютненький скеоморфизм.
12:12 Вот, кстати, скеоморфизм.
12:15 Он повторял физическую модель.
12:18 кнопки имитировали кнопки для того, чтобы объяснить, что кнопки делают то же самое, что кнопки в реальном мире.
12:24 Вот человек, скажем так, без
12:28 стажа использования интерфейса какого-то графического.
12:33 Давай, допустим, пришел пенсионер в Вашан, смотрит на экран, и кнопка выглядит как прямоугольник, на котором написано распечатать чек штрих-код.
12:47 Вот от того, что непонятно, как с ней повзаимодействовать, она не выглядит как кнопка, и никак себя не ведет, никак не реагирует.
12:56 Можно просто замечать, как пенсионер стоит и думает, что делать.
13:00 Они никак не призывают.
13:02 Они не привыкли к этому.
13:03 Мы привыкли, нас приучала долго вся Айти-индустрия адский аморфизма, вот к флету мы пришли.
13:10 Сейчас придем обратно.
13:12 Ну это разговор вообще про другое.
13:14 Мы сейчас уходим, и это вообще разговор для отдельного выпуска.
13:18 Об ас и андроид Кати Мельникова.
13:21 Хорошая анимация - это основное преимущество айфона, перетелефона на андроиде.
13:27 Причем по статичной картинке разница не так очевидна.
13:30 Макеты могут быть красивыми, и тех других приложений.
13:35 Но когда возьмешь в руки,
13:38 все это чувствуется, и красота, и объемность интерфейса именно на айфоне достигается за счет отличных анимаций микро взаимодействий.
13:54 Я как пользователь айфона могу сказать.
14:01 Так, ну что, мы обсудили то, что
14:07 у нас есть визуальный отклик элементов, и визуальный отклик элементов появился из-за реального мира.
14:16 Он опирается на накопленный в реальном мире опыт и имитирует поведение.
14:24 Третья, такая третья тема и третий пункт, который стоит опять же обсудить, это укрепление связей.
14:33 Тут очень важно сказать, что анимация здесь никак не развлекает тебя.
14:39 Переход экрана вправо-влево
14:42 ну, это не интертеймент, это не развлечение.
14:45 На самом деле, когда ты сейчас взять в руки телефон, прикинуть, сколько информации в один момент времени он может дать тебе, отобразить - там довольно мало.
14:56 И только переходы экранов справа, налево, слева, направо дают тебе такую ментальную карту: того, где находятся экран.
15:04 У тебя в голове формируется карта.
15:06 Так как ты не можешь прям вставлять какой-то, знаешь, как Бред Крампс - вебби, да, вот на мобиле такого в принципе, нет.
15:19 показывать все это анимацию.
15:21 Что экраны уехали слева направо, или снизу вверх приехали, они должны сверху вниз и уехать.
15:27 То есть, когда ты открываешь, например, плеер в Апл Муси, который у нас уже появлялся в выпусках, ты когда открываешь плеер в Апл Музи, он у тебя снизу, вверх такой раз, и открылся.
15:37 И ты понимаешь, что ты можешь его свернуть, просто свайпнув вниз, типа, как будто ты его берешь и толкаешь вниз, он обратно уезжает.
15:44 То есть это все реально так помогает тебе простроить в голове вот эту навигацию.
15:49 Типа, эта штука слева, а эта штука снизу, а эта штука слева - она три шага назад влево - она вот там.
15:55 То есть у тебя в голове строится определенная такая карта, и это не потому, что тебе показали карту, а благодаря тупо анимации.
16:04 Я вижу в один момент времени
16:08 в историях инстаграма аккаунт, аватарку, профиль,
16:15 какое количество сторисов у аккаунта, и возможность отправить сообщения или переслать, но я не вижу указателей вправо и влево.
16:25 И только смена экранов объясняет мне, что я могу это сделать, что я могу их сменить, тем самым навигируюсь.
16:33 Ну да, примеров есть много, которые просто показывают нам анимацию, помогают.
16:37 И даже те же примеры, когда на сайтах на любых ты нажимаешь на карточку, она у тебя не просто загружается, следующая страница с резкой анимацией, точнее без, а анимации.
16:47 у тебя карточка такая, раз, и на весь экран такая раскрылась, и ты понимаешь, что ты вот сейчас в ней, ты внутрь вошел и нее, и когда ты закрываешь ее, она такая хоп и сжалась обратно.
16:57 Это и про приложение на ЙОС на главном экране также работают.
17:01 То есть это все помогает пользователю ориентироваться в приложении, помогает пользователю не потеряться и понимать, где он находится.
17:08 Ведь навигация нужна для того, чтобы человек понимал, где он находится.
17:12 В реальном мире он идет, он понимает, откуда он пришел, куда.
17:15 Тут была дверь, тут я свернул налево.
17:18 А в приложении такого нет.
17:19 Если анимация не подсказывает ему, то он путается.
17:23 Вот эти направления, кстати, они мне напомнили, как у меня на ай-подцах разделены
17:28 эти двойные двойные этапы.
17:30 То есть, у меня правое ухо - это следующий трек, а левое ухо у меня пауза.
17:35 То есть, тут то же самое получается.
17:37 У меня в правом направлении у приложения туда уйдет один сайт-бар, а влево у меня уйдет другой.
17:46 И я буду об этом причем помнить.
17:52 Кстати, если вернуться к примеру, просто прогулок по улице.
17:58 Вот ты когда идешь по незнакомому городу, да, куда-то приехал в основном незнакомый город или незнакомый район, ты идешь и запоминаешь, как ты шел, например, до магазина от гостиницы, и потом помнишь, как тебе обратно пройти.
18:11 А теперь представь, если ты вышел из гостиницы, потом провал, и ты возле магазина.
18:17 А теперь как тебе обратно пройти?
18:19 Ты просто запутаешься, испугаешься, и не будешь понимать, что происходит.
18:23 Точно так же без анимации.
18:25 Но это, конечно, утрированный пример, но примерно одно и то же.
18:29 Да, нет, это очень хороший пример.
18:31 Потому что навигация действительно указывает путь: что куда пришло, что куда ушло, что во что входит.
18:39 Вот, кстати, я считаю, что в таком случае анимация более критична и важна нам в мобиле.
18:49 Потому что мы ограничены экранами.
18:51 Да, они сейчас становятся больше.
18:54 Да, информация можно отобразить больше, но тем не менее, все равно руки больше не становятся.
19:00 В веб есть Брэд Крампс, тоже очень удобная тема.
19:04 Это если опять вернуться к этой же метафоре, это как будто ты переместился с одного места в другое, но там у тебя насыпаны хлебные крошки, и ты по ним пройдешь обратно.
19:13 Чем был бы веб, если бы не ганзели игры, там прекрасно.
19:16 Помогает нам навигироваться.
19:20 Да, обязательно помогает понимать, что мы взаимодействуем все-таки с интерфейсом, и ну, это со стороны пользователя.
19:28 А так как мы с тобой работаем дизайнерами, она делает еще одну важную такую вещь: она помогает скрыть всякие изъяны.
19:37 Надо грузить, надо запускать приложение, и загрузку проще
19:43 загрузки проще скрасить, действительно, приятные анимации.
19:48 Да, действительно, можно приятные анимации просто скрасить время человека, когда он ждет, когда у него что-то загружается, потому что, ну, это реально бывает.
19:56 Бесит, когда ты долго ждешь.
19:58 Я даже читал исследования на эту тему, когда я занимался лоудерами в приложении, я читал исследования на тему лоудеров: что лоудеры в которых не дается нигде информации, в которых нет процентов прогружающихся, в котором нет прогресс-бара.
20:15 Человек ему на таких лоудерах кажется, что загружается дольше, потому что он не понимает, когда загрузится.
20:21 Если ты ему даешь информацию о том, когда что-то загрузится, то он как-то время это проще каротает.
20:28 Можно вообще на лоудерах делать красивую анимацию, как там человечек бежит по планете или что-нибудь такое происходит.
20:34 Тогда вообще загрузка очень быстро пролетает, типа как шоу смотришь.
20:38 Загрузка, кстати, тоже очень интересный.
20:40 Сегодня читал у Олега Чулакова.
20:45 Интересный пример читал у Олега Чулакова.
20:50 С лоудерами, с анимацией лоудеров, это как будто ты встал в очередь, вот ты стоишь, потом люди застыли, потом бац, и ты укассы.
20:59 Наконец-то не расписались.
21:01 Но ты такой, ты стоял и очень долго очередь просто не двигалась, и ты не понимал, что происходит.
21:06 Потом бац, и она резко пропала, и ты оказался указ.
21:10 А пока ты видишь, как очередь медленно двигается, тебе кажется, что время идет быстрее.
21:15 Это все просто примеры из жизни.
21:16 Опять же, возвращаясь к физически модели, в которой людям просто проще воспринимать интерфейс.
21:26 Позитивно влияет на опыт пользователя анимация, которая подсказывает навигацию.
21:31 Опять же, там товар положил в корзину, он улетел прямо в корзину, там, или переместил какой-нибудь чат в архив, он улетел в иконку архива.
21:41 Кроме того, классно, если анимация дает обратную связь.
21:45 Я заполнил поле неправильно.
21:46 Вместо того, чтобы орать на меня красным текстом, что-нибудь там обязательное поле, он может просто помахать им с красной обводочкой например у 1 так на айфоне когда ты вводишь неправильный пин-код на входе
22:04 вот кроме того анимация может отлично развлекать и спрашивать ожидания.
22:08 Это какие-нибудь милые занимательные загрузки или скрытые фишки, когда, например, в мобильном приложении скайпа начинаешь потихонечку свайпать вниз, вниз, вниз, вниз, там открываются.
22:23 Сейчас, по-моему, так не делается, но раньше так было, и было интересно, сколько вниз я могу долистать всеми чатами скайпа.
22:30 Это развлекало и казалось о, прикольно.
22:38 Дана последний пункт по поводу того зачем нужна анимация.
22:41 Блин, да кайфа ради.
22:43 Ну да, я люблю приложение Хэдспейс потому, что там классные чувачки, я в них просто влюблен.
22:50 У меня с ними реально есть эмоциональная связь.
22:53 Да, есть приложения, которые, в принципе, и сами приложения для кайфу сделаны, и там анимация просто тоже для кайфа будет работать.
23:01 И, например, на ландосах анимация тоже для кайфу.
23:04 Она для того, чтобы впечатление создавать.
23:07 На ландос человек заходит максимум раза 3-4.
23:10 И поэтому в на лендосе можно прям разойтись с анимацией.
23:14 Вот чем студия Ребедева любит еще гореть.
23:16 Так это анимация туда.
23:17 Нахуй в свой сайт, чтобы вообще прям там все
23:21 сделать и переделать.
23:22 Задача влюбить и продать.
23:25 Поэтому анимация работает во всю Ивановскую.
23:30 Так что там ей самое место.
23:33 А вот какой должна быть анимация вообще в интерфейсах?
23:36 То есть мы уже чуть-чуть затронули эту тему, но все-таки какой она должна быть?
23:41 Она должна быть гениальной.
23:43 Все, выпуск закончен.
23:46 Это вот я на виси у Джонни Айва прочитал.
23:50 Он выступил тут со статьей, ну, закинул там.
23:54 Нет, на самом деле она должна А.
24:00 И ее надо не замечать - по-хорошему, то есть она должна быть заметна действительно, когда записан экран, и я сижу, перелистываю раз, два, три.
24:13 Для того, чтобы понять, что произошло вообще.
24:18 Наверное, контрпримером будет анимация, которую в твиттере видел дриблшот, с корзинкой.
24:29 Корзинкой интернет-магазина, которая раскрывалась, там было видно содержание этой корзинки.
24:36 В эту корзинку вкладывался товар.
24:39 Там не корзинка, там такой картонный пакет, а потом пакет закрывался.
24:43 Все клево, но это происходит у меня под большим пальцем.
24:47 Вот здесь, вот моя ладонь, правая рука, под большим пальцем что-то происходит.
24:52 Наверное, вот это уже не нужно, я не замечу.
24:56 Но то, что товар переместился, то, что в товаре добавилось значение, вот это мне нужно, что происходит под ним, под моим большим пальцем.
25:11 То есть она еще и должна быть не совсем броска, она не должна бросаться в глаза, прям быть.
25:21 Она бросалась в глаза нам все нулевые.
25:26 Спасибо Вебу, что он обновился, отмылся, переродился, открестился от флеша, стал приятным, ненавязчивым и просто помогает.
25:36 Она должна быть не оручиваю, она должна помогать, она должна подсказывать, она
25:41 должна быть аккуратная, и она при этом должна быть еще.
25:46 Она должна имитировать физическую модель не только по тому, что там карточки и
25:52 это там стопки или это перемещение слева направо.
25:56 По твоей роже вижу, что что-то хочет сказать.
25:58 Давай, не говори, прогони.
26:00 Она должна быть как официант на свадьбе.
26:02 Подливает так, что ты не замечаешь.
26:09 Просто действительно, ты его не замечаешь, но что-то меняется, что-то происходит, и твой свадебный опыт остается приятным.
26:21 Вова Крылов, уих-дизайнер.
26:24 Думаю, анимация должна помогать пользователю в путешествии по интерфейсу.
26:31 Такие вещи, как затемнение или проявление объектов, помогут пользователю сориентироваться, направят его внимание на нужные элементы и подскажут правильный путь трансформации объектов помогут отследить влияние одного объекта на другое или помогут увидеть взаимосвязь
26:58 Также скорее анимация не должна отвлекать пользователя от интерфейса.
27:03 Она должна быть плавной, незаметной и быть исключительно только в помощь, а не просто ради того, чтобы раскрасить интерфейс.
27:15 Что касается негативного влияния думаю
27:20 самое плохое это анимация ради анимации какая-то резкая долгая и никак не связанная с интерфейсом
27:32 Помимо того, что это карточки, стопки, перелистывание слева направо, и все вот это происходит, она должна еще и имитировать то, как анимация, то, как двигаются объекты в реальном мире.
27:45 Нам нравятся, когда объекты интерфейса похожи на объекты из реального мира.
27:51 Раньше ли это рисовали суперреалистичные иконки с всякими бликами, тенями, полутенями, текстурами.
28:00 Была эпоха скеоморфизма.
28:02 А сейчас эту же функцию выполняет анимация.
28:05 Мы можем нарисовать плоские геометрические фигуры, но так их сеннимировать, что они будут вести себя - прям как настоящие предметы - будут отскакивать, двигаться с корением, дрожать, пульсировать.
28:20 Получается, что интерфейс перешел на другой уровень абстракции и он подражает реальному миру уже не в статике, а в динамике.
28:30 Это как 12 правил анимации, основ анимации Диснея.
28:34 Их уже все знают, они ни для кого не секрет.
28:39 Это сжатие и растягивание, что в интерфейсах не всегда используется, потому что это прям мультяшный такой эффект.
28:45 Но у нас в реальном мире, если ты берешь и
28:48 у тебя какой-нибудь очень жидкий объект начинает движение, он растягивается и при торможении и сжимается.
28:54 А вот паралакс и вот движение пултурефреш - оно относится сюда?
29:00 То есть оно сжимается и растягивается.
29:06 Эта сценичность, это не сильно нам нужно.
29:12 Вот это вот упреждение здесь написано, но это типа такое передвижение, можно сказать.
29:18 Когда у тебя объект двигается, и он не может начать двигаться без инерции определенной.
29:22 Ты когда двигаешься вперед, тебе нужно немножко назад двинуться для этого.
29:25 Ну,, ста стартартанунутьть..
29:27 Это все, дальше идем.
29:30 Переход от позы к позу - он плавный должен быть.
29:32 Поэтому иконки у вас не должны резко сменяться.
29:35 Классно, когда на иконках анимация такая, что одна иконка медленно перетекает в другую.
29:40 Это намного естественнее для человека воспринимается, человеком намного естественнее воспринимается, потому что в жизни в реальной объекты резко не сменяют друг друга.
29:49 Они перетекают из одного в другой.
29:51 Надо проделать путь.
29:53 Плюс сквозное движение - захлест уже сказали, что это определенно статочное движение.
29:58 Например, ты начинаешь двигаться, должна быть инерция, и когда останавливаешься, у тебя объект должен чуть-чуть дальше заходить.
30:07 Когда ты сам бежишь и пытаешься резко остановиться, тебя чуть-чуть вперед так вот еще двигает.
30:12 Мы вставим ссылку на 12 правил анимации, или можете сам найти 12 правил анимации Диснея почитать, и потом их обязательно в интерфейсах использовать.
30:22 Интерфейсы должны двигаться как в реальной жизни.
30:24 У них должна быть инерция, у них должна быть определенная скорость и определенные.
30:30 Кривые, по которым они двигаются.
30:33 Забавно, что концепции, которые мы смотрели в нулевых, про фильмы, про интерфейсы,
30:42 они были холодные, бесчеловечные.
30:46 Вот эти клип с Тим Баллендом, где он что-то передвигает.
30:54 индустрия развилась так, что отклик оказался необходим.
30:58 Про разные скорости хотелось бы еще упомянуть поподробнее.
31:02 Ну, собственно, про скорость, что хотел сказать, что скорость отличается в зависимости от устройств.
31:10 Это вроде как логично, да?
31:12 Вроде бы да, а вроде бы нет.
31:16 На какие устройства можно разделить?
31:19 мобильники на сотики, классно,
31:26 На планшетики, назвонильники и на компики.
31:32 Мобильное устройство, планшеты, десктоп.
31:36 И давай вспомним: что есть вообще-то смарт- ТВ, есть телевизоры, онлайн-кинотеатры, сериалы.
31:45 Есть ли распределять их?
31:47 Вот так, прям, по очереди, да, то самые быстрые интерфейсы должны быть на часах.
31:53 Ач, Андроидвай, на них самые быстрые интерфейсы.
31:57 Потому что, ну, это они очень маленькие, и мы привыкли, что очень маленькие объекты, они очень быстро двигаются.
32:02 И опаздываю на митинг.
32:05 И там нужна информация, которая будет быстро очень отображаться.
32:09 Ну и плюс маленькие объекты реально быстро двигаются.
32:11 Это те же тараканы, попробуй, его поймай.
32:14 Вспомнил, что меня раздражает, в этом, где сяомишный трекер, я его использую.
32:21 Ну, днем я с ним не хожу, но я с ним сплю, чтобы он трекал мой сон.
32:28 Вот это движение, когда я руку поднимаю и долго жду,
32:34 чтобы отобразились цифры, бесит.
32:38 Ну, казалось бы, такая тривиальная вещь, но так долго ждать, реально бесит.
32:44 То есть, это, наверное, потому что скорость не особо соблюдена, да, которая должна быть.
32:50 Скорость, которая должна быть на носимых устройствах в часах, там неважно, что вы носите на руках, фитнес-трекерах, это примерно 150-200 миллисекунд.
32:59 Если мы говорим о мобилке, то на мобилках скорость должна быть 200-300 миллисекунд то есть 150-200 часы 200-300 мобилка потому что она побольше и тут уже можно по но
33:13 для человека объекты на мобилке они тяжелее.
33:18 Чисто психологически, поэтому там можно подольше анимацию делать.
33:22 И она, если будет быстрее, то она будет мельтешить.
33:26 А на планшетах еще на 30% медленнее - это примерно 400-450 миллисекунд, потому что на планшетах еще больше интерфейс, и для человека нужно, ну то есть ему кажется, что вес еще больше, поэтому нужно еще помедленнее двигать, но не прям критично медленнее.
33:42 Вот, 450, я бы сказал, это прям порог анимаций в интерфейсах, которым люди постоянно пользуются.
33:47 Снова под твоей рожей вижу, что ты хочешь сказать, что ты хочешь мочкануть.
33:50 Ты как мой эндокринолог.
34:05 Вот насколько я помню, десктоп по материалу исключает анимации во многих случаях.
34:12 Это да, но при этом десктоп у него скорость.
34:15 Давай попробуй угадателей вспомнить, какая она должна быть.
34:21 как наносимых, здесь ставим звук типа победы - когда люди хлопают.
34:28 Что меня удивило, но потом я подумал: что реально, это логично, потому что мы привыкли, что в вебе с самого начала все очень быстро происходит логично было бы этот ряд продолжать да на часах очень быстро на мобилке помедленно на планшетах медленно и на дестопе должно быть совсем медленно но оно не так потому что мы привыкшие реально с самого начала существования компьютеров - что оно все быстро.
34:51 95-я винда, 98-я винда - не так уж много анимаций там было.
34:56 Ты привык, что окно открывается быстро.
34:59 Ты нажал и увидел открывшееся окно.
35:02 Давай смажем открывающееся окно.
35:06 Сколько было на планшете?
35:09 400, давай на 30% это значит задерем.
35:12 Это мы полсекунды будем сидеть и ждать, когда же окно откроется.
35:16 А даже если ты сделаешь 400, то для тебя в вебе это будет очень медленно.
35:19 Ты привык в вебе решать задачу определенную.
35:23 И поэтому тебе нужны анимации побыстрее.
35:26 И ты привык к тому, что в вебе все очень резко происходит.
35:30 Поэтому здесь не нужно делать их медленными.
35:32 Только в случае, если нужно добиться, наверное, ну, какой-то очень прикольной анимашки на ландосе или чего-нибудь очень красивого, но в интерфейсах, которые часто используются, заметьте, например, какой-нибудь Яндекс.Маркет или Ламода или 6 - там вообще нет анимации, практически нет.
35:49 Ну, объяснить анимации, куда дроп-даун свернулся, стоит.
35:54 Сменить страницу - пожалуйста, не надо.
35:56 Полсекунды - это просто агрессия и раздражение.
36:00 Анимации веб-эбычно кроются в ховерах кнопок, в ховерах, в изменениях
36:06 иконок, в изменениях карточек, вот там анимации в вебе строятся.
36:12 В нем гораздо больше микроанимаций, нежели анимация каких-то глобальных, крупных.
36:16 Ну да, полусекундные изменения, вот эти вот 25-дюймовый лист будет ходить и уходить, будет скорее бесить меня.
36:25 Но вот на планшетах - да, то, что медленно все двигается, это наверное, это зависит от того, что десктоп - это все-таки управление объектами с помощью мышки и клавиатуры, а планшет ты прям двигаешь пальцами.
36:37 Поэтому тебе хочется, чтобы медленнее было.
36:38 Наверное, от этого - вот такая скорость - более.
36:41 Это исследование, доказанные, скорости, самые оптимальные.
36:44 Кстати, можно уменьшить движение в настройках иос.
36:51 Если тебя раздражает, если ты считаешь, что это тебе не надо, можно уменьшить.
36:57 Нет, не анимацию, а движение.
36:59 Это все аксесабилити.
37:05 довольно гибкие настройки аксесбили.
37:07 Ты можешь телефон построить под себя так, как тебе нужно.
37:11 Сейчас в тебя такой тапок прилетит из андроида.
37:15 Ты так нахвалил про настройку.
37:18 Ну, настройку я не имел в виду, что ты можешь перенастроить все иконки и поставить вместо иконки времени фотографию своей бабули и сделать весь инфейс
37:32 Но при этом ты можешь шрифты увеличить, войс овер, сделать черно-белый экран сделать.
37:37 То есть, все, что тебе нужно для того, чтобы удобнее пользоваться интерфейсом, оно можно.
37:42 А все, что красивости, ну извините.
37:44 Кстати, так боролись на вот на понижении они.
37:49 На уменьшение движения боролись с тем, что на старых айфонах плохо новые оси работали.
37:54 Советовали просто включить уменьшить движение, и твой старый айфон работал дольше.
37:59 Кстати, на винде многие так делали, на очень медленных компьютерах просто аэро отключали, и все.
38:04 Ну вот, это про производительность.
38:06 Опять такой рефрен пошел.
38:09 Смотри, получается: дошли от часов к телефонам, от телефонов к планшетам от планшетов к десктопу.
38:18 О, кстати, вот десктоп десктоп получается не учитывает.
38:21 У нас 15 дюймов экран или 25.
38:23 Десктоп он десктоп есть.
38:25 Да, десктоп он дестопу есть, веб-дестоп он и есть.
38:27 Наверное, я же говорю, это, наверное, от того, что
38:35 с планшетом телефона и часами ты взаимодействуешь прямо пальцем по экрану, а с компьютером с любым ты взаимодействуешь через мышку, через тачбар, через клавиатуру, поэтому наверное так разделяется.
38:49 Это более стремительное такое движение.
38:51 Получается, так получается, прошли до десктопа.
38:55 Введем к телевизору.
38:57 У телевизора какой контрол?
39:01 И диагональ телевизора от 40 дюймов, да?
39:08 примером анимации на телевизоре у нас является: что нефликс?
39:12 Вот ты нефликс смотришь.
39:13 Я нефликс не смотрю.
39:14 Я вот вебинар смотрел по тому, как Нетфликс Разрабатывают свои интерфейсы, расскажи про
39:26 Нетфликс у них такой прикол: когда ты пользуешься нефликсом на телеке, там, на плейстейшн, на самом телеке, на приставке любую, все, что ты к телеку подключаешь.
39:36 У нее есть не слишком уж быстрая анимация, наверное, она где-то 500-600 миллисекунд происходит анимация
39:45 переключения между фильмами, анимация раскрытия фильмов.
39:51 очень хорошо работает, там фильмы включаются, все красиво, все свистит, пердит, да, но что меня удивило, когда я открыл нефликс на компе, я ожидал, что анимация будет быстрая, но она медленная.
40:02 Такая же медленная, как и на телевизоре, потому что, ну, во-первых, она запатентованная у них такая, во-вторых, это для того, чтобы сохранить Уикс - тот же самый, который был у меня на телеке.
40:12 Я благодаря тому, что анимация сохраняется, она такая же точно, с такой же скоростью.
40:18 Ты понимаешь, что это тот самый Нефликс.
40:20 Да, вот он, этот Нетфликс, и он так и работает.
40:22 Плюс эта анимация, скорее всего, опять же, каратает время, пока прогружается превьюха фильма.
40:29 А грузить там много.
40:30 А грузить там много, да.
40:31 Потому что нефликса включается на весь экран просто кусок фильма.
40:34 Ты просто такой листаешь сериалы, останавливаешься на одном, и у тебя начинает проигрываться просто кусок сериала с субтитрами.
40:41 Это какая-то магия просто.
40:43 Я пользовался Нефликсом сначала на телике на слабом, и там был нефликс старый стоял, а на плейстейшне я поставил новый нефликс.
40:51 И я тебе скажу: это такой космос.
40:53 Придешь, я тебе покажу, закачаешься.
40:56 Приходи ко мне домой посмотрим телевизор.
40:58 То есть это даже не веб.
41:00 Он там работает прекрасно.
41:01 Но факт в том, что анимация медленная как на телеке, так и на веб.
41:05 Хотя на веб она должна быть быстрая.
41:06 Но это для того, чтобы сохранять уикс, ведь нетфликсом чаще всего пользуются именно на телеке.
41:12 Поэтому веб - это уже второстепенная очень штука.
41:16 Вот такой прикол с анимацией нефликса.
41:20 К сожалению, не могу вспомнить прям точных примеров, когда анимация раздражала.
41:24 Но обычно она как раз была связана со скоростью.
41:28 Например, я нажимаю на меню товаров на сайте, и он медленно, красиво, столбик по столбику появляется.
41:35 Первый раз это было классно, второй раз я уже ненавидел ждать, я знал, что мне нужно под меню в нижнем правом углу.
41:46 Самый яркий пример, который я запомнил на всю жизнь, когда анимация меня раздражала, это было
41:57 Там анимация в меню была излишняя, оно постоянно шаталось.
42:02 И чтобы сохрани игру, нужно было нажать Эскей, Появлялась шатающееся меню, сохранить появлялась куча сохранений.
42:10 Сохранить на эту запись.
42:11 Он еще спрашивал, точно да или нет.
42:13 Уже на пятое сохранение за час у меня кружилась голова, и я впервые в жизни таким образом освоил быстрые сохранения и быстрые загрузки, лишь бы не видеть наконец-то меню в Дейво секси.
42:26 То есть, да, я согласен с Ваней, что медленная анимация может заколебать, и это очень неприятная штука.
42:35 И в принципе, скорее всего, там речь шла об анимации, которая тормозила миллисекунд на 150, но эти 150 миллисекунд делали опыт Вани вот таким вот неприятным.
42:46 А знаешь, что еще интересно?
42:50 сейчас свяжу между собой, стадис, вот эти вот кейсы, которые обсуждали
42:58 в Нетфликс, про то, в какой обстановке люди смотрят телевизор, люди смотрят нетфликс.
43:05 Это семья, диван, все расслабленные, все собрались вечером и смотрят.
43:11 Если я играю и я напряжен, мне вообще не до анимации.
43:19 Ну, то есть, можно таким образом, с игр перейти на какие-то важные вещи, то есть приложения, которые
43:29 ну не знаю, в районе денег и страховки тебе важно будет, чтобы анимация лишний раз
43:38 не оттягивала процесс.
43:42 Да, выборах - это очень важно.
43:43 Ну вот, тебе надо сохраниться, сделать то, что там, не знаю, а из акмести.
43:53 И вернуться быстро - в процесс, не ждать, да.
43:58 Или там быстренько костюм человека - паука сменить,.
44:01 И илили не знаю, быстренько поменять оружие, что-нибудь сделать, анимация в играх - вообще
44:07 Я бы очень бы хотел в этом сезоне сделать выпуск про геймдеф, про игровые интерфейсы.
44:17 Вова Крылов, уикс-дизайнер, про его опыт с приложением Теле 2: В качестве не очень удачного примера применения анимации в интерфейсе, хочется привести в пример приложения Теле2
44:32 и их новую функцию ми.
44:35 У теле2 есть такая возможность: раз в месяц, исходя из анализа потребляемых пакетов, звонков смс с интернета, рассчитать более выгодный тариф: и либо принять, либо отказаться от него.
44:52 Заходим в приложение
44:55 и видим плавную анимацию загрузки.
44:58 После этого она сменяется надписью анализирует риф.
45:05 Переходим на следующий экран и видим там большую, красивую, плавную, градиентную анимацию и долго появляющийся текст, который гласит Ямия, помощник, такого-то числа ты можешь принять или отказаться от моего предложения.
45:28 И все, что мы видим, это ссылочка, вернуться на главную страницу.
45:35 Я уточнял у работников салона, как же оно на самом деле работает, и нужно просто зайти в этот день, и там появятся какие-то кнопки, наверное, да, нет, что-то в этом роде.
45:51 И это как раз пример анимации ради анимации.
45:56 Вместо того, чтобы помочь мне понять, что происходит, быстро донести информацию, что мне нужно сделать, как мне это сделать, и помочь мне это сделать, к примеру, возможностью уведомления о том
46:12 когда мне нужно зайти в приложение я вижу долгую анимацию которую не могу остановить и все что могу сделать это вернуться назад.
46:26 Да, очень грустный пример.
46:28 Потому что когда анимация ради анимации, ты смотришь ее раз за разом, это не очень удобно, и вообще не понимаешь, зачем это здесь сделано, лучше бы
46:37 что-нибудь поприятнее было.
46:39 А потом ты еще и понимаешь, что за этим ничего не стоит.
46:41 Да, то есть, это не зачем было сделано.
46:43 Это, скорее всего, какой-то дизайнер сказал: о, как красиво!
46:47 Все-таки, о, красиво!
46:48 Давай вставим, и все.
46:49 Можно с пониманием отнестись к солнышку в сбер онлайн, который поднимается.
46:55 Да они там грузятся, но при этом желают мне приятного дня.
47:00 Да, вот это к месту - это заполняет такой пробел во времени, и очень-очень полезно.
47:08 О анимации сайта Дизайн-студии.
47:10 Например, раздражающая анимация.
47:12 Наткнулась где-то месяц назад.
47:14 Это сайт компании АДН, сайт диджитал-агентства АДН, агентство избранаула.
47:21 У них очень красивый сайт - с кучей симпатичных анимаций, на наведения
47:29 с классными иллюстрациями, хорошими проектами в портфолио.
47:36 У них анимирован курсор таким образом, что есть ощущение, что он запаздывает.
47:43 И сайт не тормозит и работает хорошо, но постоянно фоновое ощущение, будто бы ты не можешь прицелиться точно и от этого бесит потихонечку накапливается до фоновое раздражение даже может быть ты не понимаешь от чего смотришь классные работы классные ребята и просто хочешь уйти с него.
48:08 Я даже написала ему поддержку, вот этот вот кружочек в правом нижнем углу.
48:14 И мне ответил директор этого агентства писала, в чем проблема, он обещал сделать что-нибудь.
48:23 И сейчас захожу, а курсор обычный.
48:27 Может быть, дело в том, что я сейчас зашла с винды, а в прошлый раз заходила с мака, нужно будет проверить.
48:33 Хорошо, что исправили.
48:34 Вот что могу сказать.
48:35 Да, это вообще прекрасно.
48:37 Да, когда курсор медленно двигается, это еще и тот паттерн из старых компьютеров остается.
48:42 Когда у нас были старые компы, когда они подвисали Видоск, у тебя реально курсор не успевал за мышкой.
48:49 То есть ты двигал мышкой, а курсор медленнее двигался, и это воспринималось как подвисание.
48:53 Когда на сайтах сейчас это делается в качестве такой приблуд,ный анимированный красивый, то это скорее мозгом воспринимается как подвисание - отставания.
49:03 Ну, визуальный отклик, опять же:
49:07 критично и перо стилус будет описано о том, что у него низкий маленький отклик.
49:14 Опять же, возвращаясь к скорости веби 150-200, и курсор он по всему опыту пользователя за всю историю блин, использования компа говорит о том, что курсор должен четко двигаться за движениями твоей мышки.
49:30 Он не должен вставать.
49:31 Если он встает, он больной, болеет курсор.
49:36 Это экран, как будто он чем-то смазан.
49:40 Или со столом что-то не начинаешь батарейки сели.
49:44 Или много вкладок вкладывает.
49:46 Это вот машина на радиоуправлении, которое нажимаешь кнопку, она так
49:52 не двигается совсем, не едет, да.
49:54 Ну колеса-то еще поворачивается, да, да, и все на это в качестве хороших примеров анимации мы уже приводили анимацию в ас, когда все переходит из одного состояния в другое, двигается, там есть карточки, там есть, например, в почте снизу, эти вот карточки сделаны, сложены.
50:10 Это как письма твои недописанные, да?
50:12 Ты же знаешь, что внизу нажмешь и там - хоп, они выйдут.
50:17 То есть они как сложные под столом у тебя недописанные письма.
50:22 Это пример хорошей анимации.
50:23 Хорошая анимация есть и в андроиде, в мальтерии или, хоро хорошашияе анимации в нефликсе уже приводили пример.
50:30 То есть хороших анимаций так же много, как и плохих.
50:33 Просто плохие мы как-то запоминаем лучше, наверное.
50:38 Потому что для того, чтобы разглядеть хорошую, нужно
50:42 обратить на это внимание.
50:50 Анимация является одной из таких трех составляющих хорошего интерфейса.
50:57 То есть сам УА - это графический интерфейс, это техническая составляющая, это разработка,
51:06 анимация, которая обеспечивает отклик при взаимодействии.
51:11 Да, и я считаю, что анимация все-таки без нее может существовать интерфейс, и работать может, но интерфейс полноценным и сформировавшимся можно считать только когда с анимацией там все хорошо она проработана точно так же протестирована как и все остальное в интерфейсе как и цвета текст и без анимации интерфейс не будет полноценным.
51:33 С анимацией он уже сформированный, полноценный, работает, и анимация очень сильно улучшает пользовательский опыт.
51:38 Не стоит ей пренебрегать.
51:41 Я хочу поблагодарить всех, кто принял участие в этом выпуске и дал свои комментарии, поделился историями.
51:48 Спасибо Вове Крылову, моему коллеге
51:52 моим коллегам Кате Мельниковой и Ване Милюшкину.
51:56 Мы дадим ссылки на их телеграм, и если что, вы можете им про их опыт у них спросить лично.
52:06 Подписывайтесь на нас в соцсетях.
52:09 Это был второй выпуск второго сезона подкаста Дизайн Такой.
Комментарии
Войдите, чтобы оставить комментарий.