UI Animation Principles: Disney is Dead

Er werd voorspeld dat fotografie de dood van de schilderkunst zou zijn (vroege Daguerreotype)

(Als u mijn artikelen over UI-animatie via e-mail wilt ontvangen en aan mijn nieuwsbrief wilt toevoegen, klik hier.)

Een nieuw medium

Toen Paul Delaroche ergens rond 1839 een Daguerreotype tegenkwam, verklaarde hij beroemd: "Vanaf vandaag is schilderen dood!"

Tot die tijd was de enige manier om de buitenwereld visueel te documenteren het gebruik van een medium dat met de hand op een oppervlak werd aangebracht. Eeuwen van vakmanschap in verschillende disciplines hadden geresulteerd in de ontdekking van talloze principes en technieken in verschillende media. In verschillende culturen, en naarmate de tijd vorderde, evolueerde de stijl en de beeldtaal van hoe visuele representaties eruit zouden moeten zien - de originele ontwerppatronen.

Vroege fotografen die hun afbeeldingen probeerden te laten lijken op de populaire schilderijen van die dag, gebruikten vaak een combinatie van belichting en druktechnieken om hun afbeeldingen te verzachten en een schilderachtige uitstraling te creëren. Hun begrip van waartoe het medium fotografie in staat was, was nauw verbonden, beïnvloed en beperkt door hun begrip van de schilderwereld.

Het duurde bijna honderd jaar voordat fotografen zoals Ansel Adams, Imogen Cunningham, Edward Weston en anderen in de 'Group f / 64' de visuele taal van de fotografie overtuigden, die fotografie onderscheidt van schilderen als een uniek medium - met een eigen visuele taal en principes, en daarmee hebben ze een revolutie teweeggebracht in het domein van de fotografie.

Edward Weston, Imogen Cunningham, Ansel Adams

Disney loste een ander probleem op

Gelukkig bevinden we ons in een dergelijke revolutie in UI-animatie.

In 1981 brachten Ollie Johnston en Frank Thomas Disney Animation: the Illusion of Life uit, en introduceerden wat nu bekend staat als de '12 basisprincipes van animatie. 'Deze principes loste het probleem op van het creëren van' realistische beweging 'die optreedt wanneer organische lichamen bewegen en reageren in fysieke ruimte (de principes hebben ook betrekking op zaken als emotionele timing en karakteraantrekkelijkheid).

UI-animatie, als onderdeel van de gebruikerservaring is amper 20 jaar oud en staat nog in de kinderschoenen. Toen het domein van UI-animatie ontstond, waren de 12 animatieprincipes de enige beschikbare hulpmiddelen om te beschrijven hoe de gebruikersinterface zich in de tijd gedraagt. Net als hoe vroege fotografen probeerden om fotografie te begrijpen door de regels van het schilderen, probeerden ontwerpers de UI-animatie te begrijpen door de regels van Disney-animatie.

Op het eerste gezicht is dit begrijpelijk omdat er enige mate van overlapping is. Gemakkelijke beweging, een van de 12 animatieprincipes, versterkt een gevoel van ‘juistheid’ door beweging, iets dat cruciaal is voor de gebruikerservaring. Zonder te versoepelen, voelt de UI-animatie onhandig en raar aan.

De volledige uitsplitsing is duidelijk wanneer men de 12 principes in de context van de gebruikersinterface onder de loep neemt.

Squash and Stretch geeft een gewicht en flexibiliteit aan objecten, iets dat eerder uitzondering dan regel is in gebruikersinterfaces.

Anticipatie creëert het gevoel dat er iets gaat gebeuren en is ook bijna nutteloos als het gaat om gebruikerservaringen. Het werkt op slechts een beperkte manier voor geselecteerde micro-interacties en knopstatussen.

Enscenering verwijst naar de lay-out van de animatie, wat logisch is voor een Disney-cartoon omdat de personages constant in beweging zijn, maar in een gebruikerservaring wordt dit alleen gezien als 'het ontwerp'.

Straight Ahead Action en Pose to Pose zijn minder principes dan benaderingen van het eigenlijke teken- / animatieproces: je kunt een meer vloeiende animatie maken als je continue frames tekent, of pose gebruiken om te poseren om een ​​paar keyframes in te stellen en de gaten in te vullen . In gebruikerservaringen vertaalt dit proces zich nauwelijks zelfs, tenzij er sprake is van frame-voor-frame animatie. Standaard, ongeacht de tool die u gebruikt, wordt bijna alle UI-animatie gemaakt met behulp van keyframes.

Follow Through en overlappende actie heeft te maken met het volgen van de wetten van fysica en inertie, en hoe fysieke lichamen reageren, die beide weinig te maken hebben met gebruikersinterfaces, tenzij u op het volgende principe rekent, dat het nuttigst is in de groep .

Slow In en Slow Out zegt dat objecten tijd nodig hebben om te versnellen en te vertragen. Dit is uiterst relevant omdat 100% van de UI-animatie dit principe zou moeten gebruiken. Het wordt gewoonlijk 'versoepelen' genoemd en is uiterst belangrijk.

Arc (vereist voor het reproduceren van fysieke beweging) is bijna nutteloos voor UI-animatie en is ook eerder uitzondering dan regel.

Secundaire actie is nuttig en is geweldig voor schermovergangen en het instellen van visuele hiërarchie.

Timing is relevant bij het tekenen van tekens, maar in gebruikersinterfaces, waar de beweging scherp moet zijn om responsief te voelen, vind ik het beter om te vertrouwen op het verlichten van het gevoel van de interactie, in plaats van de duur.

Overdrijving heeft betrekking op de mate van realisme of karikatuur, wederom nauwelijks relevant voor UI-animatie, omdat het ontwerp vooraf is bepaald.

Solide tekenen is ook meestal onbeleefd omdat UI-animatie het gedrag van interfaceobjecten in de loop van de tijd behandelt, niet het feitelijke ontwerp van de objecten zelf.

In hoger beroep spreekt ook de visuele behandeling, opnieuw niet relevant voor hoe de interface zich in de loop van de tijd gedraagt.

Ten slotte

Dus de vraag blijft: waarom beschrijven de 12 basisprincipes van animatie UI-animatie niet nauwkeurig?

De uitsplitsing kan het best worden begrepen door de eenvoudige observatie: UI-animatie voldoet niet aan dezelfde regels en heeft niet dezelfde principes als organische lichamen die in de fysieke ruimte bewegen. UI-animatie is een duidelijk medium, net zo verschillend als fotografie van schilderen - met overlappende kenmerken (zowel fotografie als schilderen zijn statische visuele composities op basis van licht en compositie) maar zijn fundamenteel verschillende mediums.

Eenvoudig gezegd, de 12 basisprincipes van animatie zijn niet van toepassing op UI-animatie omdat ze een ander probleem oplossen.

In de volgende verschillende artikelen zal ik onderzoeken wat deze UI-animatieprincipe zijn, voor welk probleem UI-animatieprincipes oplossen, hoe principes verschillen van technieken en hoe u UI-animatie kunt ontwerpen en gebruiken in uw huidige en toekomstige projecten om de bruikbaarheid en creëer meer aantrekkelijke en effectieve gebruikerservaringen.