Микровзаимодействия: 15 примера и как да ги проектираме
Обяснени микровзаимодействия: дефиниция, четирите части на Dan Saffer, 15 реални примера, групирани по тип, правила за проектиране и как да ги изградите в CSS, Framer Motion, GSAP или ExodeUI.
Ядро за вкъщи
Микровзаимодействието е малък, ограничен момент в интерфейс, който прави едно нещо: харесване на публикация, превключване на настройка, потвърждаване на формуляр или завършване на жест. Терминът и неговата анатомия идват от Дан Сафър, който дефинира четири части. Стартира го тригер, правилата решават какво се случва, обратната връзка показва резултата, а циклите или режимите управляват какво прави с течение на времето. Добрите микровзаимодействия са кратки, отговарят на собственото въвеждане на потребителя и остават прекъсваеми.
Какво е микровзаимодействие?
Микровзаимодействието е най-малкото пълно взаимодействие в даден продукт: единична задача с начало, промяна и край. Не е цял поток. Харесването на публикация е микровзаимодействие; писането и публикуването на коментар е поток. Идеята и нейната структура идват от книгата на Дан Сафър Микровзаимодействия, която разделя всяка от тях на четири части.
Четирите части на микровзаимодействието
Рамката на Дан Сафър разделя микровзаимодействието на четири компонента. Наименуването им е полезно, защото повечето грешки и най-лошото движение живеят в един от четирите, а не в цялото.
Тригер
Събитието, което го започва. Инициирано от потребителя (докосване, задържане, дълго натискане, плъзгане) или инициирано от системата (завършване на изтеглянето, пристигане на мрежова грешка). Кредит: Дан Сафър.
правила
Какво се случва, след като започне: валидни състояния, ограничения като граници на плъзгане или минимални и максимални стойности и последователност от събития. Кредит: Дан Сафър.
Обратна връзка
Как продуктът съобщава на потребителя какво се е случило: пролетно утаяване, промяна на цвета, преобразуване на иконата, актуализация на текста. Това е мястото, където живее по-голямата част от дизайна на движението. Кредит: Дан Сафър.
Цикли и режими
Какво прави взаимодействието с течение на времето и как режимите го променят. Същият превключвател може да се държи различно в тъмен режим или в компактно оформление, без да променя логиката си. Кредит: Дан Сафър.
Защо микровзаимодействията имат значение
Микровзаимодействието е как интерфейсът отговаря на потребителя без абзац от текст. Потвърждава, че е получено действие, показва, че нещо все още работи, или обяснява какво току-що се е променило. Когато липсват, един и същ продукт се чувства по-тежък: потребителите докосват два пъти, защото нищо не им е подсказало, че първото докосване е кацнало, или чакат на екран, който не показва признаци на напредък. Добрите се усещат повече, отколкото се забелязват, което е смисълът.
15 примера за микро взаимодействие
Те са групирани според това, което комуникират. Когато ExodeUI доставя съответстващ пример, името се дава, за да можете да го отворите и редактирате.
Бутони и превключватели (натискане и състояние)
1. Натискане на бутон: мащабиране до около 0,92 при показалеца надолу и връщане назад при освобождаване (пример ExodeUI: Jelly Button). 2. Превключвател: базиран на пролетта превод с промяна на цвета при извършване (Gooey Toggle). 3. Превключвател на режима: сегментиран контрол, който плъзга своя индикатор и променя активния етикет (превключвател за движение).
Обратна връзка за формуляр (проверка и подаване)
4. Невалидно разклащане при въвеждане: кратко хоризонтално побутване, което казва „проверете това поле“ без диалогов прозорец (Wiggle Text Input). 5. Изпращане в процес: бутонът става индикатор за напредъка, така че потребителят никога да не губи мястото си (анимиран бутон за изпращане). 6. Потвърждение за успех: малък празничен изблик на бутона, когато действието кацне (бутон за изстрелване на ракета).
Зареждане и прогрес
7. Кръгов ход: пръстен, който се запълва до реалната стойност и се установява с пружина (радиален уред). 8. Измервател на ниво или активност: лента, която реагира на живо на входящи данни, като например ниво на звука (звукова вълна).
Навигация
9. Превключване на менюто: икона, която преминава между две състояния и разкрива менюто на място (Morph Nav). 10. Увеличение на дока: елементите близо до курсора се повдигат и растат, след което се установяват (магнитен док). 11. Избор на раздел: индикатор, който се плъзга между разделите, вместо да мига (Liquid Tab Bar).
Празни и успешни състояния
12. Празно състояние: малка илюстрация, която се анимира веднъж, за да смекчи празен екран. 13. Разкриване на награда: подарък или значка, която се отваря с очакване, когато бъде достигнат крайъгълен камък (кутия за подарък изненада).
Издърпайте за опресняване
14. Издърпване за опресняване: еластично превъртане, което проследява съпротивлението, след което пружинира и се установява при освобождаване. Обратната връзка е разтягане, а не въртене.
Обратна връзка в стил Haptics
15. Импулс за потвърждение: кратка скала и блясък върху елемента, който отразява хаптичното докосване на мобилен телефон, така че същото действие се усеща по същия начин на устройство без вибрационен мотор.
Правила за проектиране, които ги поддържат добри
Няколко правила разделят микровзаимодействието, което помага, от това, което дразни.
- Бъдете кратки: най-пълното за приблизително 200-400ms; по-продължителното движение върху малък елемент се чувства бавно
- Започнете в същия кадър като входа; забавеното начало нарушава чувството за причина и следствие
- Поддържайте го прекъсваем: ако потребителят обърне действието по време на движение, пренасочете със скорост, вместо да рестартирате от нула
- Respect prefers-reduced-motion: осигурете статично или кръстосано избледняване, което все още комуникира промяната
- Дайте му една работа: ако взаимодействието се нуждае от повече от едно решение, това е поток
Как да изградим микровзаимодействия
Правилният инструмент зависи от това на колко платформи трябва да работи същото взаимодействие.
Само CSS
Добър за прости, самостоятелни случаи: повдигане на курсора, фокусни пръстени и превключватели, управлявани от :checked или промяна на класа. Преходите и @keyframes са достатъчни и няма нищо за изпращане извън таблицата със стилове.
Framer Motion или GSAP (уеб)
Добре, когато движението се нуждае от пружини, жестове или оркестрация и трябва да се изпълнява само в мрежата. И двете ви дават прекъсваеми пружини и могат да се управляват от състояние React.
ExodeUI (уеб, iOS и Android от един файл)
Използвайте това, когато едно и също взаимодействие трябва да се държи еднакво в приложение React, приложение SwiftUI и Flutter. Вие го създавате веднъж във файл .exode и времето за изпълнение го възпроизвежда на всяка платформа, така че няма пренаписване за всяка платформа.
Фрагмент за внедряване на продукцията
import { ExodeUICanvas } from 'exodeui';
// Springs, states and timing live in the .exode file (designed in the
// editor). Your code passes inputs in and hears events back.
export function SendButton() {
return (
<ExodeUICanvas
src="/send_button.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}Ключове Principle, които трябва да запомните
- Микровзаимодействието е една малка задача с тригер, правила, обратна връзка и цикли или режими, четирите части, посочени от Дан Сафър
- Повечето добри завършват за около 200-400 ms, започват в същия кадър като входа и остават прекъсваеми
- Обратната връзка е това, което върши работа: тя потвърждава действието и обяснява какво се е променило, често без никакъв текст
- Винаги предоставяйте предпочитан резервен вариант с намалено движение, който носи същата информация без движение