UI Animasyon Prensipleri: Disney Öldü

Fotoğrafın, resmin ölümü olduğu tahmin edildi (Dagerreyotipi'nin başlarında)

(UI animasyonu hakkındaki makalelerimi e-posta yoluyla almak ve bültenime eklemek istiyorsanız, buraya tıklayın.)

Yeni bir ortam

Paul Delaroche 1839'larda bir Dagerreyotipi ile karşılaştığında, ünlü bir şekilde “Bugünden itibaren resim öldü!” İlan etti.

O zamana kadar, dış dünyayı görsel olarak belgelemenin tek yolu, bir yüzeye elle uygulanan bir ortamın kullanılmasıydı. Çeşitli disiplinlerde yüzyıllarca süren işçilik, çeşitli medyada sayısız ilke ve teknik keşifle sonuçlanmıştır. Kültürler arasında ve çağlar ilerledikçe, görsel temsillerin "nasıl geliştiği" biçiminin stil ve görsel dili - özgün tasarım desenleri.

Görüntülerini günün popüler tablolarına benzetmeye çalışan erken fotoğrafçılar, görüntülerini yumuşatmak ve ressam bir görünüm oluşturmak için sıklıkla ışık ve baskı tekniklerini bir arada kullandılar. Fotoğraf ortamının neler yapabileceğini anlamaları, resim dünyasını anlamalarıyla yakından bağlantılı, etkilenmiş ve sınırlı kalmıştır.

Ansel Adams, Imogen Cunningham, Edward Weston ve 'Grup f / 64'teki diğer fotoğrafçıların fotoğrafçılığı resimden ayrı bir ortam olarak belirleyen görsel dile, yani kendi görselleriyle önemli ölçüde atmaları neredeyse yüz yıl aldı. dil ve ilkeler ve bunu yaparken fotoğrafın alanında devrim yarattılar.

Edward Weston, Imogen Cunningham, Ansel Adams.

Disney farklı bir sorunu çözdü

Neyse ki, UI animasyonunda kendimizi böyle bir devrimde buluyoruz.

1981'de Ollie Johnston ve Frank Thomas Disney Animation: Life Illusion of Life'ı piyasaya sürdüler ve şimdi “animasyonun 12 temel prensibi” olarak bilinenleri tanıttılar. Bu prensipler, organik cisimler ortaya çıktığında meydana gelen “gerçekçi hareket” oluşturma problemini çözdü. fiziksel uzayda hareket et ve tepki ver (ilkeler ayrıca duygusal zamanlama ve karakter çekiciliği gibi şeyleri de kapsar).

Kullanıcı deneyiminin bir parçası olarak UI animasyonu ancak 20 yaşında ve hala başlangıç ​​aşamasında. UI animasyonu alanı ortaya çıktıkça, kullanıcı arayüzünün zaman içinde nasıl davrandığını açıklayan tek araç 12 animasyon ilkesiydi. Fotoğrafçıların fotoğrafçılığı resim kuralları ile nasıl anlamaya çalıştıkları gibi, tasarımcılar da UI canlandırmasını Disney canlandırma kuralları ile anlamaya çalıştılar.

Yüzeyde, bir miktar örtüşme olduğu için bu anlaşılabilir bir durumdur. 12 animasyon prensibinden biri olan gevşemiş hareket, kullanıcı deneyimi için kritik öneme sahip olan hareket yoluyla “doğruluk” duygusunu güçlendirir. Gevşetmeden, kullanıcı arayüzü animasyonu tuhaf ve garip hissettirir.

Kullanıcı arayüzü bağlamında 12 ilkeye daha yakından bakıldığında, tam bir arıza ortaya çıkmaktadır.

Squash ve Stretch, kullanıcı arayüzlerinde kuraldan ziyade istisna olan nesnelere ağırlık ve esneklik kazandırır.

Beklenti, bir şeylerin gerçekleşeceği ve kullanıcı deneyimleri söz konusu olduğunda neredeyse işe yaramaz olduğu hissini yaratır. Seçilmiş mikro etkileşimler ve düğme durumları için yalnızca sınırlı bir şekilde çalışır.

Sahneleme, bir Disney karikatürü için anlam ifade eden animasyonun düzenini ifade eder, çünkü karakterler sürekli hareket halindedir, ancak bir kullanıcı deneyiminde bu sadece “tasarım” olarak düşünülür.

Düz Devam Etme ve Pozlama Pozlama, gerçek çizim / animasyon işlemine yaklaşımlardan daha az prensiptir: sürekli kareler çizerseniz veya birkaç anahtar kare oluşturmak ve boşlukları doldurmak için poz vermek için poz kullanmak için daha akışkan bir animasyon oluşturabilirsiniz. . Kullanıcı deneyimlerinde, kare animasyonun gerçekleştiği gerçek kare olmadığı sürece, bu işlem neredeyse hiç çevirmiyor. Varsayılan olarak, kullanmakta olduğunuz araca bakılmaksızın, neredeyse tüm UI animasyonları anahtar kareler kullanılarak oluşturulur.

Takip Etme ve Örtüşme Eyleminin, fizik ve atalet yasalarını takip etmekle ve grupta en yararlı olan bir sonraki prensibi hesaba katmadığınız sürece, her ikisi de kullanıcı arayüzleriyle çok az ilgisi olan fiziksel organların nasıl tepki verdiği ile ilgili olmalıdır. .

Yavaş İçeri ve Yavaş Dışarı nesnelerin hızlanması ve yavaşlaması için zamana ihtiyacı olduğunu söylüyor. Bu, kullanıcı arayüzü animasyonunun% 100'ünün bu prensibi kullanması gerektiği için son derece önemlidir. Genel olarak 'kolaylaştırma' olarak adlandırılır ve son derece önemlidir.

Ark (fiziksel hareketi çoğaltmak için gereklidir) UI animasyonu için neredeyse işe yaramaz ve aynı zamanda kuraldan ziyade bir istisnadır.

İkincil Eylem yararlıdır ve ekran geçişleri ve görsel hiyerarşi kurma için mükemmeldir.

Karakterler çizerken zamanlama önemlidir, ancak hareketin duyarlı hissetmek için net olması gereken kullanıcı arabirimlerinde, etkileşim hissini, süreyi değil, tasarımı kolaylaştırmaya güvenmeyi daha iyi buluyorum.

Abartı, tasarım önceden belirlendiği gibi, yine UI animasyonuyla pek ilgili olmayan gerçekçilik veya karikatürün derecesi ile ilgilidir.

Katı çizim, UI animasyonu, nesnelerin kendilerinin gerçek tasarımı değil, zaman içindeki arabirim nesnelerinin davranışını ele aldığından, aynı şekilde çoğunlukla zordur.

Temyiz ayrıca, ara yüzün zaman içinde nasıl işlediğiyle ilgili olmayan yine görsel tedaviyle de ilgilidir.

Sonuç olarak

Öyleyse soru devam ediyor: neden 12 animasyonun temel prensipleri kullanıcı arayüzü animasyonunu doğru şekilde tanımlamıyor?

Bozulma basit gözlemle en iyi şekilde anlaşılabilir: UI animasyonu aynı kurallara uymaz, fiziksel alanda hareket eden organik gövdelerle aynı prensiplere sahip değildir. UI animasyonu, fotoğrafın resimden farklı olduğu gibi, birbiriyle örtüşen özelliklere sahip (hem fotoğraf hem de resim, ışığa ve kompozisyona dayanan statik görsel kompozisyonlardır), ancak temel olarak farklı ortamlardır.

Basitçe ifade edersek, animasyonun 12 temel prensibi UI animasyonuna uygulanmaz çünkü farklı bir problemi çözmektedirler.

Gelecek birkaç makalede, bu UI animasyon ilkesinin ne olduğunu, UI animasyon ilkelerinin hangi problemi çözdüğünü, prensiplerin tekniklerden nasıl farklı olduğunu ve mevcut ve gelecekteki projelerinizde kullanılabilirliği etkilemek için UI animasyonunu nasıl tasarlayıp kullanabileceğinizi keşfedeceğim. daha çekici ve etkili kullanıcı deneyimleri yaratın.