Для тех, кто просто хочет перейти к примеру кода, это прямо здесь.

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

* Микровзаимодействие - это одноразовая незаметная визуальная очередь, привлекающая ваше внимание к изменению статуса. Два примера - это индикатор питания на кофейнике или изменение цвета при наведении курсора.

Почему? Кто?! Какие!? и некоторая ориентация

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

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

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

Проблема UX из первых рук - решена

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

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

Сообщение, которое они пытались передать, как я понимаю, состоит в том, что нам, пользователям, подарили что-то Новое, Блестящее и Веселое. Это похоже на подарок, который сигнализирует нам, что распутывание и распаковка этого нового действия приведет нас к приятному и очень желанному опыту. Кроме того, когда вы смотрите на статический экран мобильного приложения Facebook, единственная движущаяся часть - это чудесное блестящее и искрящееся микровзаимодействие - четкий сигнал для призыва к действию.

Давайте глубоко погрузимся в то, как такое мощное, тщательно продуманное микровзаимодействие и фанатик микровзаимодействия (как я) вызвали поиски исследования!

Простой, но мощный и манящий

На первый взгляд простой элемент пользовательского интерфейса - эти 3 простых голубоватых искорки, ненадолго появляющиеся над значком аватара - намекают на то, что этот элемент - это «блестящий новый» подарок для пользователя, о, какое волнение - я не могу дождаться!

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

Приближаясь к вызову

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

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

Я также надеюсь, что вы узнаете что-то новое, как это сделал я, применив свойство CSS clip-path для решения этой проблемы. Изучите его тонкости.

Без лишних слов, давайте начнем :) Я сделал шаг вперед, чтобы разбить эффект на более мелкие, более управляемые и интуитивно понятные мини-задачи.

Клип ?! дорожка!? Разрабатывать…

clip-path - это свойство CSS, которое отсекает (обрезает) область, которая устанавливает, какая часть элемента будет отображаться, в то время как внешние части скрыты.

clip-path позволяет нам создавать сложные формы с помощью CSS, обрезая элемент до определенной формы (например, круга, треугольника, эллипса, многоугольника и т. Д.). Мы можем дополнительно анимировать между фигурами и получать упрощенные переходы и эффекты морфинга прямо из коробки, если обе фигуры с переходом имеют одинаковое количество точек (координаты x, y).

Разборка анимации

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

  1. transform: scale(...) - изменяется от 0 до 1 и обратно до 0 в течение жизненного цикла анимации.
  2. transform: rotate(180deg) - мне потребовалось немного больше времени, чтобы понять, что поворот этой ниндзя-звезды к квадрату и обратно составляет в общей сложности 180 градусов (от фазы появления до конечного положения, в котором Искра также исчезает).
  3. clip-path: polygon(...) — Эта часть будет в значительной степени одной из наиболее сложных и интересных задач в рамках этого единственного испытания с эффектом искры, поэтому я расскажу об этом подробнее ниже.

Масштабирование - строительный блок эффекта искры

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

Роатация - Размытие линий, «клей» для эффекта искры.

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

Способ морфинга форм на чистом CSS - Путь к клипу: Многоугольник (…)

С некоторыми ограничениями, это «собственный» способ достижения эффекта морфинга для фигур CSS.

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

Экспериментируем

Честно говоря, я впервые использую clip-path:Polygon() в реальных рабочих сценариях. Поэтому я решил немного поэкспериментировать, чтобы лучше понять все аспекты, прежде чем приступить к решению конкретной задачи.

Эксперимент 1 - Наивный подход - Квадрат → 4-конечная звезда

Ух ты, это только мой первый эксперимент, и я уже в восторге от clip-path :) хотя здесь произошло что-то весьма необычное ... Направление морфинга, кажется, ведет себя странно. Причина проста: исходная фигура имела в общей сложности 8 координатных точек, 4 из которых располагались в каждой угловой координате, что приводило к такому странному поведению морфинга.

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

Эксперимент 2 - Скорректированные направления морфа - Квадрат → 4-конечная звезда

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

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

Эксперимент 3 - восьмиугольник → квадрат

Если мы внимательно и несколько раз посмотрим на эффект одиночной искры выше, мы кратко заметим, что где-то около 50% анимации он превращается в восьмиугольник. Кроме того, в фазах до и после восьмиугольника искра превращается в квадрат.

Кажется, довольно простая задача, не так ли? Я подумал, что просто использую clip-path, чтобы преобразовать предыдущий квадрат в восьмиугольник, как на гифке выше. Реальность была немного другой, и мне пришлось изменить исходную форму и нарисовать ее polygon(...) немного иначе, чтобы при переходе был квадрат внутри восьмиугольника.

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

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

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

Эксперимент 4 - восьмиугольник → четырехконечная звезда → спина (полный цикл).

Теперь, когда мы знаем, что восьмиугольник - это самый крупный вид изменяющейся формы, мы можем сделать нашу морфирующую форму намного более точной и переходить между ее фактическими фазами 4-точечная звезда → восьмиугольник → спина, как показано ниже:

Эксперимент 5. Масштабирование и анимация бесконечного цикла.

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

Эксперимент 6 - поворот, начальная и конечная позиции

Еще несколько настроек, чтобы увеличить масштаб звезды до полного размера в начальной позиции и определить ее окончательное положение с помощью transform:rotate(180deg)

Пограничный вызов

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

Эксперимент 6 - Построение границы, которая трансформируется вместе с искрой

После поиска решений в Интернете, переполнения стека и других предложений в статьях по решению этой проблемы я понял, что эта проблема была довольно уникальной. Я не смог найти конкретных решений своей проблемы. Тот факт, что моя граница должна была «придерживаться» формы, пока она трансформируется, усложняет еще больше. Поэтому я рискнул провести несколько тестов, пока не нашел решение.

«Клон искры», который визуализирован непосредственно перед моим основным элементом Sparkle как родственный элемент, был идеальным решением. Оба должны быть display: flex и расположены вертикально и горизонтально по центру их оболочки с помощью justify-content: center и align-items: center, чтобы добиться следующего:

Но Джонни, подожди! Как вы собираетесь убедиться, что клон следует за своим братом во время анимации морфинга keyframes? Попытавшись одновременно оживить родительский и дочерний элементы и столкнувшись с некоторыми странными проблемами или ошибками браузера, я обнаружил, что подход братьев и сестер с flex обеспечивает лучшее решение, как показано ниже:

Соединение точек

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

Резюме

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

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

Это умное решение, мастерски созданное микровзаимодействие, которое находится внутри статического экрана. Это единственная движущаяся часть экрана, и хотя она очень маленькая и относительно небольшая на экране, блестящие сверкающие звезды на полях значка заманили мои глаза и палец, чтобы автоматически щелкнуть по нему. Теперь я ценю работу и еще больше обдумываю ее - так что спасибо дизайнерам взаимодействия и разработчикам интерфейса в Facebook за создание таких потрясающих микровзаимодействий!

Заключение

Я призываю вас всех осмелиться и попробовать решить сложные проблемы UI и UX с помощью идей и экспериментов. Хотя это приятно и может немного усилить эгоизм для достижения конечного результата и успеха, я думаю, что это менее значимая часть опыта.

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

Рецензенты

Большое спасибо за помощь этим замечательным людям, которые помогали проверять и оставлять отзывы на черновики моих статей, вы потрясающие! ;) - Джаред М. Спул Йони Вайсброд Офир Овадия Дима Вишневецкий

* Демонстрационная ориентация - примеры находятся в конфигурации Vue.js, размещенной на Codesandbox.io, чтобы достичь чистой логики HTML / SCSS после перехода, щелкните папку components → затем щелкните файл spark.vue → HTML обернут вокруг тегов <template> → SCSS - это просто прокрутка, обернутая вокруг тегов <style>, и все → Наслаждайтесь! :)

Что теперь?

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

Еще мои рекомендуемые сообщения о Продуктовом дизайне, пользовательском интерфейсе и интерфейсе:

Дополнительные Компоненты Vue с открытым исходным кодом:

  • Vue Dynamic Dropdown - настраиваемый, простой в использовании элегантный раскрывающийся список.
  • Vue Dynamic Star Rating - компонент динамического звездного рейтинга Vue (аналогично Google Play).

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

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

Вы можете подписаться на меня, написать в Твиттере или написать мне любое сообщение с любыми вопросами, отзывами или предложениями! - Twitter