Zasady animacji interfejsu użytkownika: Disney is Dead

Fotografia była przewidywana jako śmierć malarstwa (wczesny dagerotyp)

(Jeśli chcesz otrzymywać moje artykuły na temat animacji interfejsu użytkownika pocztą e-mail i zostać dodanym do mojego newslettera, kliknij tutaj.)

Nowe medium

Kiedy mniej więcej w 1839 r. Paul Delaroche spotkał daguerreotyp, oznajmił: „Od dziś malarstwo nie żyje!”

Do tego czasu jedynym sposobem wizualnego dokumentowania świata zewnętrznego było użycie medium nakładanego ręcznie na powierzchnię. Stulecia rzemiosła w różnych dyscyplinach doprowadziły do ​​odkrycia wielu zasad i technik w różnych mediach. W różnych kulturach i wraz z upływem epok styl i język wizualny tego, jak „powinny wyglądać” reprezentacje wizualne, ewoluowały - oryginalne wzorce projektowe.

Wcześni fotografowie, starając się, aby ich obrazy przypominały popularne obrazy dnia, często używali kombinacji technik oświetleniowych i drukarskich, aby zmiękczyć swoje obrazy i stworzyć malarski wygląd. Ich zrozumienie tego, na czym mógł polegać medium fotograficzne, było ściśle powiązane, wpłynęło i ograniczone przez ich rozumienie świata malarstwa.

Prawie sto lat minęło, zanim fotografowie tacy jak Ansel Adams, Imogen Cunningham, Edward Weston i inni w „Grupie f / 64” zrobili znaczący postęp w języku wizualnym, który odróżnia fotografię od malarstwa jako wyjątkowego medium - z własną wizualnością język i zasady, a tym samym zrewolucjonizowali dziedzinę fotografii.

Edward Weston, Imogen Cunningham, Ansel Adams

Disney rozwiązał inny problem

Na szczęście znajdujemy się w takiej rewolucji w animacji interfejsu użytkownika.

W 1981 Ollie Ollie Johnston i Frank Thomas wydali Disney Animation: the Illusion of Life i wprowadzili tak zwane „12 podstawowych zasad animacji”. Zasady te rozwiązały problem tworzenia „realistycznego ruchu”, który występuje, gdy ciała organiczne poruszaj się i reaguj w przestrzeni fizycznej (zasady obejmują także takie rzeczy, jak wyczucie czasu i atrakcyjność postaci).

Animacja interfejsu użytkownika, jako część interfejsu użytkownika, ma zaledwie 20 lat i wciąż jest w powijakach. Gdy pojawiła się domena animacji interfejsu użytkownika, jedynymi dostępnymi narzędziami opisującymi zachowanie interfejsu użytkownika w czasie były 12 zasad animacji. Podobnie jak wcześni fotografowie próbowali zrozumieć fotografię za pomocą zasad malowania, projektanci próbowali zrozumieć animację interfejsu użytkownika za pomocą zasad animacji Disneya.

Na powierzchni jest to zrozumiałe, ponieważ zachodzi pewien stopień nakładania się. Łagodny ruch, jedna z 12 zasad animacji, wzmacnia poczucie „poprawności” poprzez ruch, co jest kluczowe dla doświadczenia użytkownika. Bez złagodzenia animacja interfejsu użytkownika jest niezręczna i dziwna.

Pełny podział jest widoczny, gdy przyjrzymy się bliżej 12 zasadom w kontekście interfejsu użytkownika.

Squash and Stretch nadaje obiektom ciężar i elastyczność, co stanowi raczej wyjątek niż regułę w interfejsach użytkownika.

Oczekiwanie stwarza wrażenie, że coś się wydarzy i jest również prawie bezużyteczne, jeśli chodzi o wrażenia użytkownika. Działa tylko w ograniczony sposób dla wybranych mikro interakcji i stanów przycisków.

Inscenizacja odnosi się do układu animacji, co ma sens w kreskówce Disneya, ponieważ postacie są w ciągłym ruchu, ale w odczuciu użytkownika jest to po prostu „projekt”.

Działania z wyprzedzeniem i pozowanie stanowią mniej zasad niż podejście do rzeczywistego procesu rysowania / animacji: możesz stworzyć płynniejszą animację, jeśli rysujesz ciągłe klatki, lub użyj pozy, aby pozować, aby ustawić kilka kluczowych klatek i wypełnić luki . W doświadczeniach użytkowników ten proces prawie się nie tłumaczy, chyba że dzieje się tak naprawdę, animacja klatka po klatce. Domyślnie, niezależnie od używanego narzędzia, prawie wszystkie animacje interfejsu użytkownika są tworzone przy użyciu klatek kluczowych.

Podążanie i nakładanie się działań ma związek z przestrzeganiem praw fizyki i bezwładności oraz z reakcją ciał fizycznych, które mają niewiele wspólnego z interfejsami użytkownika, chyba że liczymy na następną zasadę, która jest najbardziej przydatna w grupie .

Zwolnienie i zwolnienie mówi, że obiekty potrzebują czasu, aby przyspieszyć i zwolnić. Jest to niezwykle istotne, ponieważ 100% animacji interfejsu użytkownika powinno stosować tę zasadę. Jest to powszechnie określane jako „łagodzenie” i jest niezwykle ważne.

Łuk (wymagany do odtwarzania ruchu fizycznego) jest prawie bezużyteczny dla animacji interfejsu użytkownika, a także stanowi raczej wyjątek niż regułę.

Pomocnicza akcja jest przydatna i doskonale nadaje się do przejścia ekranu i konfiguracji hierarchii wizualnej.

Podczas rysowania znaków istotne jest wyczucie czasu, ale w interfejsach użytkownika, w których ruch musi być wyraźny, aby czuć się wrażliwym, lepiej polegać na ułatwieniu projektowania poczucia interakcji, a nie na czasie.

Przesada odnosi się do stopnia realizmu lub karykatury, znów mało istotnego dla animacji interfejsu użytkownika, ponieważ projekt jest z góry ustalony.

Rysowanie bryłowe jest również w większości dyskusyjne, ponieważ animacja interfejsu użytkownika zajmuje się zachowaniem obiektów interfejsu w czasie, a nie rzeczywistym projektem samych obiektów.

Odwołanie mówi również o obróbce wizualnej, ponownie bez znaczenia dla zachowania interfejsu w czasie.

Podsumowując

Pozostaje więc pytanie: dlaczego 12 podstawowych zasad animacji nie opisuje dokładnie animacji interfejsu użytkownika?

Podział najlepiej można zrozumieć na podstawie prostej obserwacji: animacja interfejsu użytkownika nie przestrzega tych samych reguł ani nie ma takich samych zasad jak ciała organiczne poruszające się w przestrzeni fizycznej. Animacja interfejsu użytkownika jest odrębnym medium, tak samo jak fotografia różni się od malowania - z nakładającymi się cechami (zarówno fotografia, jak i malarstwo są statycznymi kompozycjami wizualnymi opartymi na świetle i kompozycji), ale są zasadniczo różnymi mediami.

Mówiąc wprost, 12 podstawowych zasad animacji nie ma zastosowania do animacji interfejsu użytkownika, ponieważ rozwiązują inny problem.

W następnych kilku artykułach zbadam, czym są te zasady animacji interfejsu użytkownika, jaki problem rozwiązują zasady animacji interfejsu użytkownika, czym różnią się one od technik oraz jak można zaprojektować i używać animacji interfejsu użytkownika w bieżących i przyszłych projektach, aby wpłynąć na użyteczność i tworzyć bardziej atrakcyjne i efektywne doświadczenia użytkownika.