Привет, дизайнеры! Готовы получать знания? Для дизайнера | Моушен-джедаи 🎬
Привет, дизайнеры! Готовы получать знания?
Для дизайнера важно знать основы той сферы, на которой он специализируется. Поэтому мы посовещались и решили начать именно с базовых вещей.
Нашли для вас отличную статью по ui анимации. Ловите выжимку из нее об основах физики в анимации. Оставили только самое важное, чтобы быстро ухватить суть или освежить подзабытое.
Основы физики в анимации интерфейсов
Тайминг и темп
Тайминг (Timing) – это количество кадров, необходимое для перемещения объекта из A в B. Тайминг играет ключевую роль в создании реалистичных анимаций. Каждому реальному объекту требуется определенное количество времени для выполнения действия.
Темп (Pacing) задает скорость, с которой происходит движение. Если ваша анимация будет слишком медленная, вы можете утомить пользователей или вызвать разочарование. Если же анимация будет слишком быстрая, пользователь может не уследить за ней, и не понять, где находится или что произошло.
Размер и вес
Элементы интерфейса обладают размером и весом, который используется для определения, например, иерархии. Как и в реальном мире, нам хочется воспринимать центр элемента как его центр тяжести. Это одновременно функционально, и реалистично.
Гравитация – это сила притяжения объектов друг к другу. На устройства действуют две гравитационные силы. Во-первых, сверху вниз по оси Y, а во-вторых, в глубину интерфейса по оси Z. Google одним из первых осознал, что наши устройства обладают глубиной, и основал большую часть философии Material Design на том, что они называют elevation (высота).
Такой подход вполне органично вписывается в нашу картину мира: в реальности мы не раз видели, как ведет себя предмет, когда его смахнули на ось Y.
Сопротивление
С ним мы сталкиваемся ежедневно, когда движемся в пространстве и времени. Сопротивление может быть следствием гравитации, поверхностей или напряжений. Сопротивление используется в UX дизайне довольно часто. Пример «Потяните, чтобы обновить» (pull-to-refresh) – так делают, когда пользователь должен потянуть интерфейс, чтобы получить свежий контент.
Действие и противодействие
Когда вы нажимаете кнопку, вы ожидаете реакцию. В некотором смысле, гравитация принуждает вас двигать мышью, и кнопка реагирует, показывая эффект наведения курсора. Когда пользователь нажимает, чтобы загрузить изображение, он ожидает увидеть какие-либо признаки (индикаторы) прогресса, неудачи или успеха.
На этих основах строится полезная и качественная анимация любого типа.
В следующий раз расскажем о 12 принципах анимации, которые придумали в Disney. Эти принципы придерживаются законов физики, упомянутых ранее, и служат руководством для создания реалистичного движения.
Пишите в комментариях, о чем бы еще хотели почитать?
Ваши Моушн Джедаи
