#фреймер_кейс №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.

Насколько был понятен разбор в Фреймер-кейсе?

Я не читал кейс, кинул в закладки и открою его в 2023 году. Фреймер устареет, а интерфейсы будут анимировать силой мысли. – 63
👍👍👍👍👍👍👍 51%

Я плохо воспринимаю текст, тем более, про код. Было бы здорово посмотреть этот кейс в формате ютюб-урока. – 33
👍👍👍👍 27%

Всё было понятно и не вызвало вопросов. – 25
👍👍👍 20%

Кейс был непонятен из-за подачи. Объяснения непонятны, хотя я честно пытался сделать бесшовный переход. У меня есть вопросы. – 3
▫️ 2%

👥 124 people voted so far. Poll closed.

#GIF: Скругляем только нужные углы

В Скетче легко можно редактировать степень скругления любого из четырёх углов прямоугольника.

1. Рисуем прямоугольник, R.

2. Задаём ему скругление в 2px в поле Radius, дважды ↑.

3. Выделяем прямоугольник снова, переходим в режим редактирования, Enter.

4. Зажимаем Shift и выбираем два верхних угла кликом.

5. Им настраиваем индивидуальное скругление. Или убираем его, если уже есть.

Читатели предлагают вводить значения скруглений через точку с запятой.

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


Значения вводятся по часовой:

1. Верхний левый;
2. Верхний правый;
3. Нижний правый;
4. Нижний левый

Копируем CSS-атрибуты скругления углов

Читатель Артём Фёдоров указал на глюк Скетча, связанный с углами. Если задавать угол способом из гифки и копировать его CSS-свойства, в нём не будет border-radius:

/* Rectangle */
background: #D8D8D8;

Если задать значения через запятую (например, 28; 0; 0; 0), тогда будет:

/* Rectangle */
background: #D8D8D8;
border-radius: 28px 0 0 0;

Наглядное видео:

#классные_люди №6: Дон Норман

Дональд — очень крутой 80-летний дедуля. Профессор психологии, когнитивных и компьютерных наук. Учёный в области пользовательского опыта, классик промышленного и интерфейсного дизайна, автор книги «Дизайн привычных вещей» и термина пользовательский опыт (User Experience).

medium.com/sketchdesigner/don-norman-b124b84ecec0

Посвятил свою жизнь изучению эргономичного дизайна. В 1993 устроился работать в Apple на должность «архитектор пользовательского опыта» и это было первое использование такого выражения в названии должности. Позже Норман стал вице-президентом в Apple. Сейчас возглавляет дизайн-лабораторию The Design Lab в университете Калифорнии.

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

Лекция Дона на TED youtube.com/watch?v=QYNiNv-5Im4

Забавный сюжет на VOX про Дверь Нормана (англ) youtube.com/watch?v=yY96hTb8WgI

Канал «Фреймер-ответы»

Я собрал лучшие вопросы, которые задавали участники @framerchat, добавил несколько хороших от себя и выложил в канал @framerfaq. В нём будут появляться высушенные ответы из Фреймер-чата.

Оглавление:

Вопрос 1 Что такое Фреймер?

Вопрос 2 Год лицензии Framer Studio стоит 144$. Смогу ли я работать в Framer Studio через год, или мне нужно будет покупать новую?

Вопрос 3 Нужно ли мне знать JavaScript, чтобы использовать Фреймер?

Вопрос 4 Будет ли Фреймер использовать КофеСкрипт всегда?

Вопрос 5 Фреймер заточен на создание именно сложных анимаций, или в нём можно быстро делать и что-то простое?

Вопрос 6 Какие плюсы использования Фреймера?

Вопрос 7 Какие возможности анимации даёт Фреймер?

Вопрос 8 Поможет ли фреймер-код программистам в дальнейшей разработке проекта?

Вопрос 9 Можно ли использовать Фреймер в VR?

Вопрос 10 С чего начинать изучение Фреймера?

Вопрос 11 Не будет ли правильным начать изучать Swift и делать анимацию в нативной среде разработки?

Вопрос 12 Подойдёт ли Фреймер, чтобы собрать простой кликабельный прототип приложения или сайта?

Вопрос 13 Как записать фреймер-прототип в формат видео?

Вопрос 14 Почему все макеты из Скетча нужно импортировать в двойном размере (2x) ?

Вопрос 15 Фреймер может осилить любую анимацию?

Вопрос 16 Как сделать слой кликабельным?

Вопрос 17 Как импортировать макет из Скетча в Фреймер?

Вопрос 18 В чём смотреть фреймер-прототипы?

Упорядочиваем слои автоматом

Пара отличных плагинов для ускорения работы и создания порядка в слоях. Rename It и Sort Me.

#плагины #автоматизация

Плагин: Rename It
Используется, когда нужно заменить или удалить фрагмент текста в названии слоёв.

rodi01.github.io/RenameIt/

Пример: Допустим, в макетах есть страница «Кредит». Все слои на ней начинаются с слова credit. При экспорте все они попадут в папку с таким названием.

credit/backgrounds/back-big.png
credit/backgrounds/back-small.png
credit/icons/credit-icon-big.png
credit/icons/credit-icon-small.png
credit/icons/credit-icon-transparent.png

Чтобы не заменять вручную слово credit, используем Rename It. Выделяем все слои, по которым будем искать, ищем credit и заменяем на deposit. Оно меняется во всех местах. Все картинки выгружаются в папку deposit.

Плагин: Sort Me
Используется когда надо отсортировать названия по возрастанию или убыванию. Помогает сделать уборку в названиях слоёв перед выгрузкой в Марвел или Зеплин.

github.com/romashamin/sort-me-sketch

Выделяем все артборды, сортируем по возрастанию или убыванию через меню:

Plugins — Sort Me — Sort Z9→A1

Почему-то плагин воспринимает слои от нижнего к верхнему. Чтобы они выстроились в нормальном порядке сверху вниз, нужно использовать Z9→A1.

Оба плагина доступны через Runner.

Спасибо каналу DUI

Когда в конце сентября Скетч-дизайнер был маленький и насчитывал всего 300 читателей, немногие каналы соглашались его поддерживать. @duiux был одним из первых. Тогда я заметил, сколько у него читателей и запомнил эту цифру: 2700. Я хочу поблагодарить его автора Андрея Астракта за то что он первым заметил мои посты. Желаю ему вдохновения и новых читателей. Андрей ведёт еженедельную рубрику «5 в Пят», где по пятницам собирает 5 лучших ссылок за неделю:

https://t.me/duiux/388

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

То, насколько мы доброжелательны к новым лицам, очень влияет на климат в дизайн-сообществе. Когда меньше развлекательной псевдодизайн-херни вроде Десигна и ЮиксЛайва, а больше годных проектов вроде Оди, Кости Горского, Design Pub, Интерфейсов без шелухи, Contented, Secret Design и DUI. Это далеко не все, кто заслуживает упоминания.

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

Как улучшить любую веб-форму

В журнале Телеграф.дизайн вышел перевод статьи «16 дизайн-правил в дизайне форм» Дмитрия Коваленко из Readdle. Он проанализировал проблемы веб-форм и рассказал как их улучшить:

http://telegraf.design/16-dizajn-printsipov-kotorye-uprostyat-zapolnenie-lyuboj-formy/

Оригинал:
https://medium.com/@justd/the-18-must-do-principles-in-the-form-design-fe89d0127c92

Я выделил 10 лучших советов и добавил примеров от себя:

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

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

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

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

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

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

В сообщении об ошибке пиши причину
Если поле введено неверно, это понятно уже из красного цвета. Фраза «Что-то пошло не так» не делает мир лучше. Лучше писать что-то вроде: «В пароле должно быть 8 символов».

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

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

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

Бонус не из статьи: Сохраняй введённые данные
Данные пользователя бесценны. Если после нажатия кнопки «Отправить» пользователь видит ошибку 404, о красивом дизайне формы он уже не вспомнит и в бешенстве закроет страницу. Современный фронтенд позволяет проверять, произойдёт ли успешная отправка. Если нет интернета или есть ошибки, сайт должен выводить предупреждение до того, как случилась катастрофа.

#UX #дизайн_форм #высушено