За тези, които просто искат да се насочат към примерния код, той е точно тук.
Ако искате да се насочите направо към предизвикателството, щракнете върху тук
*Микровзаимодействиетое фина визуална опашка за еднократна употреба, която привлича вниманието ви към промяна в състоянието. Индикатор за захранване на кана за кафе или промяна на цвета при задържане на бутон са два примера.
Защо? СЗО?! Какво!? и малко ориентация
Често срещан UX проблем, с който понякога се сблъскват дизайнерите и разработчиците на интерфейса, е необходимостта да се въведе нова функция или да се изложи „добре скрита“ такава, която по някаква причина може би се дължи на безпорядък във функционалността, лош дизайн или някаква друга причина потребителят рядко взаимодействас тази област или функция на вашето приложение.
Независимо дали става въпрос за нова вълнуваща функция, която вашата компания би искала да започне да получава реакции и обратна връзка с данни за употребата от потребителите, или ако това е вече съществуваща функция, която рядко се използва по някаква причина — този проблем съществува и ние се сблъскваме с него от време на време в нашата индустрия.
Попаднах на това изключително възможно решение в мобилното приложение на Facebook. Дизайнерите на взаимодействие и разработчиците на интерфейса във Facebook решиха да премахнат определено действие от моята лента за навигация в приложението и да поставят ново – бързата връзка към моя профил. Независимо дали са изследвали конкретно поведението ми или ако това е по-сериозен феномен, според мен това определено е достойна кауза.
Проблем с UX от първа ръка — решен
Често се улавям, че търся най-бързия начин да навигирам до моя профил чрез приложението Facebook. В повечето случаи насочвам погледа си към няколко области в приложението, като търся визуално, както и щракам върху няколко области, изпълнени с очакване, за да стигна до крайната си дестинация, докато в крайна сметка стигна до профила си (разбира се, в какво състояние на приложението или на екрана се намирате по време на вашата сесия) — в заключение, меко казано не толкова приятно изживяване.
Facebook, и по-конкретно Interaction Designers, както и разработчиците на интерфейса, които заедно измислиха това уникално решение, решиха този проблем перфектно според мен.
Посланието, което се опитаха да предадат, както го възприемам, е, че има нещо Ново, блестящо и забавно, което е подарено на нас, потребителите. Подобно е на подарък, който ни сигнализира, че разплитането и разопаковането на това ново действие ще ни доведе до приятно и много желано изживяване. Освен това, когато погледнете статичния екран на мобилното приложение на Facebook, единствената движеща се част е това прекрасно блестящо и искрящо микровзаимодействие — ясен сигнал за призив за действие.
Нека се потопим дълбоко в това как толкова мощно, внимателно проектирано микровзаимодействие и фанатик на микровзаимодействието (като мен) предизвикаха стремеж за изследване!
Прост, но мощен и привлекателен
Привидно прост елемент на потребителския интерфейс — тези 3 прости синкави искри, появяващи се за кратко над иконата на аватара — намекват, че този елемент е „лъскав нов“ подарък, който потребителят може да разгадае, Ох, какво вълнение – нямам търпение!
Привидно проста корекция заедно с минималистична икона на аватар — слети заедно в елегантно, умно и просто изглеждащо микровзаимодействие, намиращо се в много статичен или неактивен екран на Facebook Mobile App. Това незабавно подтиква наблюдаващия потребител да взаимодейства с този елемент на потребителския интерфейс и да открие неговите скрити добродетели - подходяща, правилно проектирана и внедрена призив за действие.
Приближаване към предизвикателството
Един прост анализ на микровзаимодействието го прави доста ясно - намирането на подобна или точна икона би било относително проста задача, докато проектирането на единичен ефект на "искра" би било доста по-сложната част.
Каня ви да се включите в моя „влак“ на мисловния процес и да споделите моя опит във формирането на идеи, експериментирането и откриването на прозрения по пътя ми за постигане на желания краен резултат.
Също така се надявам да научите нещо ново като мен, като използвате свойството CSS clip-path за справяне с това предизвикателство, научете неговите тънкости.
Без повече шум, нека започнем :) Пристъпих напред, за да разделя ефекта на по-малки, по-управляеми и интуитивни мини предизвикателства.
Клип?! път!? Разработете…
clip-path е свойство на CSS, което изрязва (изрязва) област, която задава коя част от елемента ще бъде показана, докато частите отвън са скрити.
clip-path ни позволява да създаваме сложни форми с CSS, като изрязваме елемент в определена форма (като кръг, триъгълник, елипса, многоъгълник и други). Можем допълнително да анимираме свободно между фигурите и да получаваме улеснени преходи и ефекти на преобразуване извън кутията, стига и двете преходни форми да имат еднакъв брой точки (координати x,y).
Разбивка на анимации
Фокусирането на вниманието ми върху един елемент направи много по-лесно анализирането на всяка активирана анимация. И така, определих следното:
transform: scale(...)— Облекчава се от 0 до 1 и обратно до 0 по време на жизнения цикъл на анимацията.transform: rotate(180deg)— отне ми малко повече време, докато разбера, че въртенето на тази нинджа-звезда до квадрат и обратно е общо 180 градуса (от фазата на поява до крайната й позиция, в която изчезва и Искрата).clip-path: polygon(...)— Тази част би била едно от по-сложните и интересни предизвикателства в рамките на това единствено предизвикателство Spark Effect Challenge — следователно ще го обсъдя допълнително с много повече подробности по-долу.
Мащабиране — градивен елемент на Spark Effect
Времето за мащабиране на елемента има решаваща роля в приноса за „блясъка“ на ефекта, тъй като бързата поява и изчезване на елемента е до голяма степен това, от което се състои искрата – кратко лъскаво посещение, което доставя временно удоволствие на нашите очи.
Въртене — замъгляване на линиите, „лепило“ за ефекта на искра
Заедно с прехода за мащабиране, когато елементът се появи за първи път и веднага започне да се върти отляво надясно, въртенето го прави по-оживен и холистичен. Това принуждава човешкото око да се фокусира върху иконата, украсена с това блестящо или искрящо усещане.
Чистият CSS начин за преобразуване на фигури — Clip Path: Polygon(…)
С определени ограничения, това е „родният“ начин за постигане на ефект на морфинг за CSS форми.
Известен проблем – първото, най-важно ограничение, което трябва да бъде ясно за нас, разработчиците, преди да подходим към тази технология, е, че броят на координатите в началната форма и крайната форма трябва да бъдете равни —превръщането на квадратв правоъгълнике перфектна, проста употреба, която работи безпроблемно с технологията .
Експериментиране
За да бъда напълно честен, това е почти първият път, когато използвам clip-path:Polygon() в реален случай на употреба, свързан с работата. Затова реших да се впусна в някои експерименти, за да разбера по-добре неговите вътре и изходи, преди да се приближа до конкретното предизвикателство.
Експеримент 1 — Наивен подход — Квадрат → 4-лъчева звезда
Уау, това е само първият ми експеримент и вече съм развълнуван от clip-path :) въпреки че тук се случи нещо доста странно... Посоката на преобразуване изглежда се държи странно. Причината е проста: началната форма имаше общо 8 координатни точки, 4 от тях подредени върху всяка ъглова координата, което води до това странно поведение на трансформация.
Няколко стъпки по-нататък в експериментирането открих този прекрасен инструмент и го използвах, за да започна да работя с проценти, а не с пиксели. Също така успях да редактирам своите форми онлайн с него. Като цяло горещо препоръчвам да опитате — това е Clippy!
Експеримент 2 — Коригирани посоки на преобразуване — Квадрат → 4-лъчева звезда
Според моите планове, следният gif показва опростен подход, който предприех, за да се опитам да разреша този проблем с квадрат 200px на 200px:
Едно просто ощипване на координатите – разпределяне на 4 от скритите точки поравно в квадрата (между ъглите) – се надяваме, че ще доведе до по-плавен ефект на преобразуване и в правилната посока (съответно вертикално и хоризонтално), насочена към центъра на двете форми, а не към диагонална посока както преди:
Експеримент 3— Осмоъгълник → Квадрат
Ако погледнем внимателно и многократно единичния ефект на искра по-горе, забелязваме за кратко, че някъде около 50% от анимацията той се превръща в осмоъгълник. Освен това във фазите преди и след Октагона искрата се превръща в квадрат.
Изглежда доста проста задача, нали? Мислех, че просто ще използвам clip-path, за да превърна предишния си квадрат в осмоъгълник като gif-а по-горе. Реалността беше малко по-различна и трябваше да променя първоначалната форма и да начертая polygon(...) малко по-различно, за да имам квадрата в осмоъгълника при прехода.
Начинът, по който работи clip-path, е, че създава желаната област за изрязване в елемента, използвайки свойството и тъй като моят оригинален квадрат зае цялата област на неговия елемент. Не можах да се преобразя извън този регион с текущото разпределение на координатите.
Трябваше да се направят няколко корекции — и аз също преминах към работа с проценти сега, за да поддържам динамична ширина/височина на формите от родителския елемент.
И voilà — постигнахме известен напредък и сега имаме осмоъгълник, който преминава в квадрат и обратно. Но чакайте… още не сме готови!
Експеримент 4— Осмоъгълник → 4-лъчева звезда → Назад (Пълен цикъл)
Сега, след като знаем, че осмоъгълникът е най-големият външен вид на преобразуващата се форма, можем да направим преобразуващата ни форма много по-точна и да преходим между нейните действителни фази на 4-точкова звезда → осмоъгълник → гръб, както се вижда по-долу:
Експеримент 5— Мащабиране и анимация с безкраен цикъл
Така че започнах този експеримент, като първо преминах от събитието на задържане към незабавно задействана безкрайна анимация, която първо използва трансформацията scale(...), за да накара звездата да се появи и изчезне съответно, както се вижда по-долу:
Експеримент 6— Завъртете, начална и крайна позиции
Още няколко настройки, за да увеличите мащаба на звездата до пълен размер в началната позиция и да определите крайната й позиция с transform:rotate(180deg)
Граничното предизвикателство
След известно време, прекарано в експерименти, разбрах, че това, което съм постигнал досега, няма да е задоволително. В оригиналния пример изглежда, че когато искрите се появят над иконата в оригиналното микровзаимодействие, те имат някаква бяла граница по протежение на формата, която се преобразува заедно с формата през всяка стъпка от своето keyframes:
Експеримент 6 — Изграждане на граница, която се трансформира заедно с искрата
След търсене на решения в интернет, препълване на стека и други предложения в статии за подход към проблема, разбрах, че това предизвикателство е доста уникално. Не можах да намеря конкретни решения на моя проблем. Фактът, че границата ми трябваше да се „придържа“ към формата, докато тя се трансформира, усложни още повече. Затова се осмелих да направя няколко теста, докато намеря решението.
„Клонинг на искра“, който се изобразява точно преди основния ми елемент на блясък като братски елемент, беше идеалното решение. И двете трябваше да бъдат display: flex и вертикално, както и хоризонтално разположени в центъра на обвивката си с justify-content: center и align-items: center, за да се постигне следното:
Но Джони почакай! Как ще се уверите, че клонингът следва своя брат по време на преобразуващата се анимация keyframes? След като се опитах да анимирам родителя и детето едновременно и изпитах някои странни проблеми или грешки в браузъра, открих, че подходът за братя и сестри с flex предоставя най-доброто решение, както се вижда по-долу:
Свързване на точките
В този момент вече чувствах, че трудните предизвикателства в този проект са приключили. Всичко, което трябваше да направя сега, беше да намеря подобна икона на аватар, да позиционирам 3 искри, да коригирам позициите им ръчно, докато не съм доволен, и също да коригирам ширината/височината им, докато стигна до крайния резултат.
Резюме
За да завърша нещата, хареса ми да се предизвиквам да пресъздам това микровзаимодействие. Научих много за това как един привидно прост елемент в нашето ежедневие (като покана да щракнете върху нова икона от разработчиците на софтуер, който използваме) всъщност е много повече от просто набор от елементи и анимации, перфектно синхронизирани и правилно ориентирани .
Такова микровзаимодействие по мярка е произведение на изкуството. Това е уникален UI елемент, който е внимателно проектиран за решаване на труден проблем. В нашия случай разработчиците във Facebook промениха навигационната лента на мобилното ми приложение, премахнаха икона, която не използвах често, и я замениха с икона, която ми позволи да извърша действие, което се мъчех да намеря и исках да предприема много пъти - връщам се към моя профил.
Това е умно решение, майсторски изработено микровзаимодействие, което се намира вътре в статичен екран. Това е единствената движеща се част от екрана и въпреки че е много минимална и сравнително малка на екрана, лъскавите искрящи звезди по полетата на иконата примамиха очите и пръста ми автоматично да щракнат върху нея. Сега още повече оценявам работата и мисълта зад нея — затова благодаря на дизайнерите на взаимодействие и разработчиците на интерфейса във Facebook за изграждането на такива страхотни микровзаимодействия!
Заключение
Насърчавам ви всички да се осмелите и да се опитате да разрешите трудни проблеми с UI и UX чрез идеи и експерименти. Въпреки че е хубаво и може да е малко засилващо егото да постигнеш крайния резултат и да успееш, мисля, че това е по-малко значимата част от преживяването.
В моите очи пътуването, през което се осмеляваш, снабден с уменията си да експериментираш, мислиш и се консултираш с другите, е най-добрата част. Процесите на учене и събиране на прозрения, които преживявате, са много по-важни, казано просто, и означават много повече от дестинацията.
Рецензенти
Благодаря много за помощта на тези страхотни хора, които помогнаха за прегледа и дадоха отзиви за моите чернови на статии, вие сте невероятни! ;) — Джаред М. Спул Йони Вайсброд Офир Овадия Дима Вишневецки
*Демо ориентация – Примерите са в конфигурация на Vue.js, хоствана в Codesandbox.io, за да достигнете до чистата HTML/SCSS логика, след като навигирате, щракнете върху папката components → след това щракнете върху spark.vue файл → HTML е обвит около <template> тагове → SCSS е само на един превъртане, обвит около <style> тагове и това е всичко → Насладете се! :)
Сега какво?
Ще се радвам на отзиви, пляскания, споделяния. Разбира се, можете да намерите целия код, демонстрация и пясъчна среда на живо, с които да си поиграете, както и организирани документи за API за удобство на използване точно тук.
Още препоръчани публикации от мен относно Продуктов дизайн, потребителски интерфейс и интерфейс:
- „Как пресъздадох микровзаимодействието на Facebook за откриване на функции“
- „Средно пляскане, пресъздадено във Vanilla JS“ — Пълно ръководство
- Оценка със звезди — Направете SVG страхотен отново — Урок стъпка по стъпка за кодиране
- „Изкуството на кода – защо трябва да пишете повече псевдокод“
Още Vue компоненти с отворен код:
- Vue Dynamic Dropdown — Персонализирано, лесно за използване елегантно падащо меню
- Vue Dynamic Star Rating — Динамичен компонент за оценка на Vue със звезди (подобно на google play)
Аз съм Джонатан Дорон, уеб програмист с голяма страст към потребителски ориентирания интерфейс и модулната клиентска архитектура.
Това, което ме вълнува тези дни, е да изследвам океана от Дизайн на взаимодействие по-конкретно на Микровзаимодействия и тяхното въздействие върху живота ни. Правя го, като пресъздавам съществуващи взаимодействия, както и проектирам свои собствени взаимодействия по време на стремежа си да задълбоча знанията си в областта.
Вие сте добре дошли да ме следвате, туитвате или да ми изпращате съобщения свободно с всякакви въпроси, обратна връзка или предложения! — Туитър
