Принципи на анимационния интерфейс: Disney е мъртъв

Предвиждаше се, че фотографията е смърт на живописта (ранен дагеротип)

(Ако искате да получавате моите статии за анимация с потребителски интерфейс по имейл и да бъдете добавени в бюлетина ми, щракнете тук.)

Ново средство

Когато Пол Деларош се сблъсква с дагереотип някъде около 1839 г., той прочуто заяви: „От днес картината е мъртва!“

Дотогава единственият начин за визуално документиране на външния свят беше чрез използване на среда, нанесена върху повърхността с ръка. Векове на майсторство в различни дисциплини доведоха до откриването на множество принципи и техники в различни медии. В културите и с напредването на епохите се развиват стилът и визуалният език за това как трябва да изглеждат визуалните представи - оригиналните дизайнерски модели.

Ранните фотографи, опитвайки се да направят изображенията си да приличат на популярните картини на деня, често използваха комбинация от техники за осветление и печат, за да омекотят изображенията си и да създадат живописен вид. Тяхното разбиране за това, на което е способен носителят на фотографията, беше тясно свързано, повлияно и ограничено от тяхното разбиране за света на живописта.

Минаха почти сто години, преди фотографи като Ансел Адамс, Имоген Канингам, Едуард Уестън и други от „Group f / 64“ да направят значителни посегателства във визуалния език, който отделя фотографията освен живописта като уникален медиум - със собствен визуален език и принципи и по този начин те направиха революция в областта на фотографията.

Едуард Уестън, Имоген Кънингам, Ансел Адамс

Дисни реши друг проблем

За щастие се оказваме на такава революция в анимацията на потребителския интерфейс.

През 1981 г. Оли Джонстън и Франк Томас издават Disney Animation: The Illusion of Life и въвеждат онова, което днес е известно като "12 основни принципа на анимация." Тези принципи решават проблема как да се създаде "реалистично движение", което се случва, когато органичните тела движете се и реагирайте във физическото пространство (принципите обхващат също неща като емоционално време и привличане на характера).

Анимацията на потребителския интерфейс, като част от потребителското изживяване е едва на 20 години и все още е в ранна детска възраст. С появата на домейна на UI анимацията единствените налични инструменти за описание на това как се държи потребителският интерфейс във времето са 12-те принципа на анимация. Подобно на това как ранните фотографи се опитват да разберат фотографията чрез правилата на рисуването, дизайнерите се опитаха да разберат UI анимацията чрез правилата на анимацията на Disney.

На повърхността това е разбираемо, тъй като има известна степен на припокриване. Изчезналото движение, един от 12-те принципа на анимацията, подсилва усещането за „правота“ чрез движение, нещо, което е от решаващо значение за потребителското изживяване. Без да облекчава, анимацията на потребителския интерфейс се чувства тромава и странна.

Пълната разбивка е очевидна, когато човек разгледа по-подробно 12-те принципа в контекста на потребителския интерфейс.

Squash and Stretch придава тежест и гъвкавост на обектите, нещо, което е по-скоро изключение, отколкото правило в потребителските интерфейси.

Очакването създава усещането, че нещо е на път да се случи и също е почти безполезно, що се отнася до потребителските преживявания. Той работи само по ограничен начин за избрани микро взаимодействия и състояния на бутони.

Постановката се отнася до оформлението на анимацията, което има смисъл за анимационния филм на Дисни, тъй като героите са постоянно в движение, но в опит на потребителите, това се мисли само като „дизайн“.

Правото напред действие и позирането за позиране са по-малко принципи, отколкото подходите към действителния процес на рисуване / анимация: можете да създадете по-течна анимация, ако рисувате непрекъснати рамки, или използвате поза за позиране, за да настроите няколко ключови кадъра и да попълните пропуските , В потребителските преживявания този процес почти дори не се превежда, освен ако не се случи действителна рамка по анимация на кадрите. По подразбиране, независимо от използвания от вас инструмент, почти цялата анимация на потребителския интерфейс се създава с помощта на ключови кадри.

Следвайте действието и припокриването има общо с спазването на законите на физиката и инерцията и как физическите тела реагират, като и двете имат малко общо с потребителските интерфейси, освен ако не разчитате на следващия принцип, който е най-полезен в групата ,

Slow In и Slow Out казва, че обектите се нуждаят от време, за да се ускорят и забавят. Това е изключително уместно, тъй като 100% от UI анимацията трябва да използва този принцип. Той обикновено се нарича „облекчаване“ и е изключително важен.

Дъгата (необходима за възпроизвеждане на физическо движение) е почти безполезна за анимация с потребителски интерфейс и освен това е по-скоро изключение, отколкото правило.

Вторичното действие е полезно и е чудесно за преходи на екрана и настройка на визуална йерархия.

Времето е уместно, когато рисувате символи, но в потребителските интерфейси, където движението трябва да е ясно, за да се почувства отзивчив, ми е по-добре да разчитате на облекчаване, за да проектирате усещането на взаимодействието, а не продължителността.

Преувеличението е свързано със степента на реализъм или карикатура, отново, едва ли има отношение към анимацията на потребителския интерфейс, тъй като дизайнът е предварително определен.

Плътният чертеж също е предимно спорен, тъй като анимацията на потребителския интерфейс се занимава с поведението на интерфейсните обекти във времето, а не с реалния дизайн на самите обекти.

Обжалването говори и за визуалното третиране, отново не е от значение за това как интерфейсът се държи във времето.

В заключение

Така че остава въпросът: защо 12-те основни принципа на анимацията не описват точно анимацията на потребителския интерфейс?

Разбивката може да се разбере най-добре от простото наблюдение: анимацията на потребителския интерфейс не се подчинява на същите правила, нито имат същите принципи като органичните тела, движещи се във физическото пространство. UI анимацията е различна среда, толкова различна, колкото фотографията е от рисуването - с припокриващи се характеристики (както фотографията, така и рисуването са статични визуални композиции, разчитащи на светлина и композиция), но са фундаментално различни медиуми.

По-просто казано, 12-те основни принципа на анимация не се прилагат за UI анимацията, защото те решават различен проблем.

В следващите няколко статии ще проуча какви са тези принципи за анимация на потребителския интерфейс, какви проблеми решават принципите за анимация на потребителския интерфейс, как принципите са различни от техниките и как можете да проектирате и използвате анимацията на потребителския интерфейс във вашите текущи и бъдещи проекти, за да повлияете на използваемостта и създайте по-убедителни и ефективни потребителски изживявания.