Анализ UI-анимации №2: Бесшовный переход между экранами

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

medium.com/sketchdesigner/animation2-8997c9758e7f

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

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

К посту я прикладываю макеты в Скетче и шрифт Titillium.

#для_профи #UI #Framer

Внутри: 4 примера, макет и шрифт.

Что интересного в новой бете Скетча v.48

- Ресайзим символы при помощи Scale
- Меняем цвет по всему документу, наконец-то
- Скачиваем исходники проекта из Скетч Клауда
- Ловим стабильный крэш приложения при попытке показать сетку (Ctrl + G), давно не хватало

Ещё теперь можно работать с цветовым профилем sRGB, но как настраивать профиль мне не удалось найти.

Поковыряться: sketchapp.com/beta/

Как будет работать ресайз символов

#новая_функция: Ресайз символов при помощи Scale

В версиях вплоть до текущей использовать Scale (Cmd + K) на копиях символов было нельзя. Это всегда вызывало недоумение.

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

Теперь сами инстансы умеют в Cmd + K, и это очень здорово, потому что у иконки остаётся один мастер. Не нужно плодить дубликаты.

#новая_функция: Find and Replace Color

Команда будет в меню Edit и займёт горячую клавишу Alt + Cmd + F. Прикольно, что можно использовать пикер Ctrl + C при выборе цветов, которые надо найти и заменить. Функция органично вписывается в логику и стиль Скетча.

Интересная настройка Include all opacities of this color заменит цвет даже в тех объектах, где опасность цвета неполная.

Preserve original opacity сохранит исходную опасность заменяемого цвета. Если снять, заменит на первый цвет новым полностью опасным.

#новая_функция: Скачиваем проект из Скетч Клауда

Веб-сервис Sketch Cloud до сей поры был довольно бессмысленной штукой, поскольку через него нельзя было передавать скетч-проекты. Можно только демонстрировать их содержимое в виде ссылки даже без возможности расставить хотспоты.

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

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

Рамблер выкатил сайт-презентацию о своём визуальном стиле. Красивый и бесполезный

medium.com/sketchdesigner/rambler-f3eddee14f51

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

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

#дизайн_системы #Рамблер

Маскируем Маска

Маски в Скетче работают особым образом, не так как в Илюстраторе и Фотошопе. Для того чтобы обрезать Маска по маске, нужна его фотка и маскирующий шейп.

1. Делаем круглый шейп: O.

2. Поверх него кладём Маска. Сделал его на 50% прозрачным, чтобы было нагляднее.

3. Выделяем шейп и переводим его в режим Use as Mask. Стандартная клавиша: Ctrl + Cmd + M, я назначил удобную Ctrl + M.

4. Теперь важно: Все слои в списке выше маскирующего тоже маскируются, поэтому пару из шейпа и фото нужно сгруппировать: Cmd + G, либо символизировать: Cmd + Y.

Работать с масками в Скетче гораздо проще, чем в Иллюстраторе. Достаточно переключить в маску один объект, а не веделять все. Поскольку маскирующий объект находится снизу, а не сверху, как в Иллюстраторе, у него может быть свой фон. Маску легко развязать, просто удалив маскирующий шейп, либо отключив в нём режим Use as Mask.

Незамкнутые шейпы (линии) тоже можно использовать в качестве маски, но их сложнее контролировать и лучше замкнуть. Для маски будет использоваться та площадь, которую в них будет занимать Fill (F).

#GIF #горячие_клавиши

#классные_люди №5: Екатерина Соломеина

Екатерина — основатель образовательной площадки Future London Academy. Выступает с лекциями, в том числе на TEDx. В рамках FLA она проводит лекции и курсы с участием известных дизайнеров из таких компаний как IDEO, Twitter, British Airways, Marvel, Pentagram и Mail ru.

В лекции для @bangbangeducation Екатерина рассказала много интересного. Я сделал текстовую версию.

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

Как относятся к кириллице британцы
Пищат, как русские от иероглифов.

Как влияет среда на дизайнера
Меняет дизайн, потому что дизайнеры как губки, впитывают то что видят.

Рассказала о творческом опыте
Нужно смотреть на дизайн прошлого и гордиться дизайн-предками вроде авангардистов.

Как стать гениальным дизайнером
Нужно найти дизайнера из прошлого, который максимально близок по духу и продолжить его дело.

Как связаны дизайн и еда
И кулинария и дизайн — творческие процессы. Через еду можно понять качество дизайна, развивая вкус.

Нужна ли в наше время специализация
Нужна, но не слишком узкая. Нужно вариться в нескольких творческих сферах.

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

Текстовая версия: medium.com/sketchdesigner/solomeina-e52d98c772ce

Видео беседы: bangbangeducation.ru/talk/dizain-bez-granits

Бесплатный ежемесячный Дайджест продуктового дизайна Юрия Ветрова обзавёлся телеграм-каналом @pdigest.

Пока Юрий не планирует вести полноценный телеграм-канал, но первый шаг сделан. Очень не хватало его в обойме хороших телеграм-каналов про дизайн.

Юрий Ветров — руководитель дизайн-команды в Mail ru, подробнее о нём можно узнать в jvetrau.com/about.
___
Я же готовлю новый большой пост про Фреймер-анимацию бесшовного перехода.

Зеплин обновился: завезли новую пару клавиш, чтобы раскрывать и скрывать секции

Я писал об этом им в поддержку и неожиданно достучался. В версии 1.22.1 появились новые пункты меню:

Ctrl + Cmd + ↑ – Collapse All Sections (свернуть все секции)
Ctrl + Cmd + ↓ – Expand All Sections (развернуть)

Ужасно не хватало.

Также появилась функция Show Screen Grid (Alt + Cmd + G), но её использовать не получилось: всегда неактивна. Если в Зеплине появится нормальная сетка-восьмёрка, будет здорово.

#зеплин #горячие_клавиши

#фреймер_кейс №1: Бесшовный переход между экранами

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

Мегапост: medium.com/sketchdesigner/framer-case-1-e46e3c073d60

Получившийся проект: https://framer.cloud/vPUBb/

Это готовое решение, которое можно разобрать и интегрировать в твой дизайн.

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

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

В начале этого пути некоторые вещи мне казались неприступными. Я понятия не имел, как сделать одометр и пайчарт. Я не перестану повторять, насколько круто иметь полную свободу действий и логики, которую даёт фреймер-подход.

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

Все жалуются, что в Фреймере всё очень долго делать. Это так, если ты не умеешь его использовать и мало практикуешься. Если умеешь, Фреймер наоборот ускоряет работу и окрыляет. Особенно, если делаешь типовые штуки на базе заготовок.

#лучшее #фреймер #UI_анимация

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

Все вопросы и комментарии по этому кейсу пиши в @framerchat.


Внутри framer-case-1-examples.zip:

prototype.sketch – скетч-проект, подготовленный к импорту в Фреймер

framer-case-1.framer – исходник проекта

01_shadowBug – Пример глюка координат из-за тени

02_animationQueue – Реализация очереди анимаций

03_states – Состояния слоя

04_avatarZoom – изолированный зум-аватар

05_position – Состояния с изменением позиции

06_piechart – Проект с анимацией круговой диаграммы

Что ты думаешь о Фреймере?
anonymous poll

Я уже использую Фреймер или планирую ему учиться. Фреймер-кейс был полезен и открыл что-то новое. Спасибо! – 104
👍👍👍👍👍👍👍 54%

Я не использую Фреймер, и не хочу. Мне неинтересно делать бесшовные переходы и сложные прототипы. Посты спокойно пролистываю. – 42
👍👍👍 22%

Фреймер интересен, но у меня Windows XP, Photoshop CS2 и Nokia 3310. – 34
👍👍 18%

Любые посты про Фреймер навевают на меня тоску и раздражение. Код это слишком больно. Ненавижу. – 14
👍 7%

👥 194 people voted so far.