Команда Mailchimp Ux: Шаблоны И Svg-Анимация [Часть 5 Книги]

[ ТЛ;ДР ] [ Часть 1 книги ] [ Часть 2 книги ] [ Часть 3 книги ] [ Часть 4 книги ] [ Часть 6 книги ] [ Часть 7 книги.

] [ Часть 8 книги.

]

Понимание библиотеки шаблонов

Авторы этой книги сравнивают архитектуру с автомобильной, аэрокосмической и судостроительной отраслями, обсуждая близкую стагнацию строительных процессов (с фундаментальной точки зрения) за последние 80 лет в отличие от быстрых изменений в других отраслях производства и дизайна.

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

Архитектор проводит обследование объекта, снимает необходимые замеры и готовит соответствующие чертежи; Далее строительная бригада интерпретирует результаты своей работы, подготавливает площадку с помощью различных приемов и приступает к работе над фундаментом.

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

Киран и Тимберлейк сравнивают этот процесс с аналогами из других отраслей.

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

Автомобильные комплектующие не производятся в рамках одного завода, а заказываются у сторонних подрядчиков.

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

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

Результатом будет система, состоящая из взаимозаменяемых частей или «атомов» — мельчайших компонентов.

Более крупные компоненты будут состоять из этих «атомов» и составлять ядро приложения.

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

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

Далее я расскажу о практическом использовании этой библиотеки.

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

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

Мы постарались ввести два режима: с красивыми карточками и более информативной сеткой.

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

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



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

В результате оно оказалось полезным сразу в трех своих разделах.

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

Несколько месяцев, потраченные на разработку реечной системы, окупились множеством преимуществ.

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

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

Адаптация стеллажной системы под пульт управления вывозом зала занимает всего 45 минут с учетом мобильной версии.

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

космос.

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

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

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

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

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

Теперь бэкенд-разработчики могут готовить универсальные системы, которые можно использовать повторно.

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

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

Сегодня у нас есть стандартизированная система, позволяющая дальнейшее развитие.

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

СВГ, садись, 5!

Не только для того, чтобы сделать наш продукт лучше, но и в целом понять те чувства и мысли, которые возникают у клиентов при работе с ним.

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

Чего только не делают люди перед отправкой писем своим подписчикам: кусают губы, потирают ладони и иногда чуть не потеют. Мы проходим через все это сами, работая над собственным UX Newsletter. Понимая эмоциональный контекст этого процесса, мы хотели поддержать наших клиентов, продемонстрировав им наше понимание происходящего.

Мы решили, что в этом нам может помочь Фредди [талисман MailChimp], который по задумке дает пять всем, кто успешно завершил отправку.

Ранее мы отображали статическую ладонь Фредди и решили немного оживить этот момент с помощью SVG-анимация .

SVG-анимация — не новая технология, но многие люди только недавно начали с ней работать.

Чтобы структурировать наш рассказ, мы разделили его на две части: подготовка к работе с SVG и реализация на примере ладони Фредди.

Калеб: «Лучший» SVG Начнем с подготовки файлов.

Сначала вам нужно понять иерархию слоев.

Это ключевой элемент при создании иллюстраций SVG в Illustrator. Мы решили разделить кадры анимации на группы, чтобы каждая иллюстрация не содержала ничего лишнего: только самое необходимое.

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

Удаление лишних точек привязки Чем меньше точек, контуров и их групп содержит каждый слой, тем «проще» будет выполнять SVG-код. А если вы установите набор сценариев Illustrator Хироюки Сато, вы сможете удалить лишние опорные точки, просто выбрав «Файл» > «Сценарии» > «Удалить опорные точки».

Маски хороши, но только в меру



На изображении выше «дай пять» Фредди была создана из 3 групп элементов, объединенных в один SVG-файл без использования масок.

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

Впоследствии мы решили создать маски, чтобы сделать SVG-анимацию более управляемой и «чище».

Отключить редактирование в Illustrator Теперь вам нужно экспортировать свои проекты из Illustrator в файл SVG. Это легко упустить: при сохранении файла в формате SVG обязательно отключите параметр «Оставить возможность редактирования в Illustrator» на вкладке «Параметры».

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

Эту процедуру следует выполнять только с финальной версией иллюстрации – как нетрудно догадаться, после этого файл уже не так просто будет снова открыть и отредактировать в Illustrator. Формы против контуров Вы можете открыть файл SVG в текстовом редакторе и оценить сгенерированный код. В примере мой SVG-файл содержит два элемента — прямоугольник и контур.

Теоретически это два одинаковых прямоугольника, но код, который их генерирует, принципиально отличается.

Если вы не привыкли работать с контурами, вы можете легко преобразовать их с помощью команды «Объект» > «Развернуть».

Заключение



Это не так уж и сложно, правда? После небольшой вдумчивой подготовки можно легко создать SVG-анимацию, которая привлечет внимание и не будет тормозить работу браузера.

Альваро: что скрывает жест «дай пять»? Калеб объяснил, как мы готовили нашу SVG-анимацию, а теперь я попытаюсь объяснить, что мы делали дальше.

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

Подготовка Когда я впервые взялся за анимационный проект Фредди, мне дали прототип, созданный в After Effects, а затем экспортированный в GIF. Калеб помог мне воссоздать объекты-прототипы в Illustrator: лапу Фредди, мех и т. д. Как только все элементы оказались на нужном слое, я экспортировал их в файлы SVG. В результате у нас получилось 3 SVG-файла, по одному на каждое изображение лапы Фредди.

Тогда я задумался над тем, как анимировать созданные изображения.

Немного покопавшись в библиотеках JavaScript, я решил поработать с Snap.svg .

Snap поддерживает такие функции, как создание масок, обрезка и выравнивание, создание узоров, градиентов и группировка элементов.

Он также предоставляет простой и интуитивно понятный API анимации.

Реализация функции анимации - "мина" (это "аним" [от слова "анимация"] наоборот) использует запрос AnimationFrame, благодаря чему анимация воспроизводится в браузере без глюков, как объяснил Пол Айриш.

(Кстати, если вы используете библиотеку, которая не поддерживает запрос AnimationFrame для анимации элементов, имейте в виду возможность чего-то вроде « перекройка макета «Это происходит, когда JavaScript снова и снова добавляет и удаляет элементы из DOM, тем самым замедляя работу браузера).

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

Чтобы итоговое изображение выглядело как единый объект, занимающий разные позиции, мне нужно было создать «плавные» переходы от одной позиции к другой.

Для этого я использовал технику пошаговой анимации и соединил три основных изображения дополнительными «переходами».

(Почему я не анимировал просто одно изображение? Учесть все точки на мохнатой лапе Фредди, подсчитать и настроить угол «кривизны» лапы в каждом положении оказалось слишком сложно в сжатые сроки проекта) .

Чтобы загрузить все три изображения, я использовал функцию Snap.load. Сначала я вызывал эту функцию для каждого изображения отдельно.

В результате итоговое изображение хорошо анимировалось в Firefox, но были проблемы с анимацией в Google Chrome. В итоге я понял, что Firefox «распознал» все переходы и начальные значения, сколько бы раз я ни вызывал функцию Snap.load. Chrome, однако, не сохранял информацию о переходах и установленных значениях, поскольку каждый новый вызов Snap.load создавал новый SVG-фрагмент со своим окном просмотра и системой координат. Я решил эту проблему, сохранив все исходные материалы (3 варианта положения лапы Фредди) в одном SVG, поэтому мне нужно было вызвать функцию только один раз вместо трех.

Следующим шагом было определить порядок, в котором элементы будут появляться в финальной анимации.

Чтобы добиться этого, мне нужно было использовать функцию Snap.svg для группировки элементов.

Например, для этой группы:

   

 // Order of grouping is important!!!
 // s = SVG canvas created by Snap
 var group = s.group(
 

   

• Почему Программное Обеспечение Для Резервного Копирования Системы Необходимо Прямо Сейчас

  19 Oct, 24

• Обзор Pocketbook 632 И 632 Aqua — Маленьких Флагманских 6-Дюймовых Ридеров С E Ink

  19 Oct, 24

• Инвалидность — Не Повод Не Играть: Проект «Контроллер» С Использованием 3D-Печати Дарит Особенным Людям Радость Игры С Геймпадом

  19 Oct, 24

• Сатоши Накамото Входит В Число 50 Богатейших Людей Мира

  19 Oct, 24

• Php-Расширение Sass

  19 Oct, 24

• Выпуск Alternativa3D 8.5.0 (С Поддержкой Графического Процессора)!

  19 Oct, 24

• Реализуем Протокол Icq В Adium

  19 Oct, 24

• В Поисках Справедливости: Очевидные Принципы Мотивации Профессионалов, Которые Не Сразу Пришли В Голову

  19 Oct, 24

• Панк-Рок – Два Метра Влево

  19 Oct, 24

• Кейс: Как Определить Готовность Лида Совершить Покупку Без Назойливых Телефонных Звонков?

  19 Oct, 24