M01-D02
Zamanlama ve süre
Bir hareketin süresinin algıyı nasıl belirlediğini ve arayüzde kısa, açıklamada uzun hareketin gerekçesini açıklar.
Hareketli Grafik Akademisi — M01, Hareket ilkeleri · 1.667 kelime · 8 örnek durum · 2 kanıt kartı · ≈ 8 dk okuma · 11 dk dinleme
Dayanak: Meslek kaynağı: platform hareket kılavuzları (yayıncı ve tarih yazımda doğrulanır)
Önce özete göz atDersin sonundaki özet, okumaya başlamadan önce yol haritası olarak.
Bir hareketin süresi onun ne söylediğini değiştirir: çok kısa bir hareket kaçırılır, çok uzun bir hareket okuru bekletir. Klein ile Bederson'un çalışmasında animasyonlu kaydırma okuma belgelerinde 300 milisaniyede, simge belgelerinde 500 milisaniyede en büyük yararı sağladı; en iyi süre işe göre değişti. Saniyede 60 karelik bir ekranda 300 milisaniye 18, 500 milisaniye 30 kare eder. Geri bildirimi kısa tut, kaydırmaya yer ver, açıklamayı adımlara böl.
Açılış sahnesi
Arda'nın ekranında aynı damla üç kez yan yana duruyor. Üçünde de hareket aynı, iki zıplama ve bir duruş; değişen yalnız süre. Soldaki yarım saniyede bitiyor, ortadaki bir saniyede, sağdaki iki saniyede.
Selin üçünü de kullanıcılarına göstermiş. Yarım saniyelik damla için biri «bir şey oldu ama ne olduğunu kaçırdım» demiş. İki saniyelik damla için bir başkası, telefonunun donduğunu sanıp ekrana dokunmuş. Bir saniyelik damla için kimse bir şey söylememiş.
Deniz bundan memnun. «Demek ki bir saniye doğru süre,» diyor. «Bütün animasyonları bir saniye yapalım.»
Emre başka bir dosya açıyor: Yeşerti'nin ilk açılışındaki tanıtım. Bir saksının nasıl sulanacağını, toprağın nemini ölçen çubuğun nereye takılacağını anlatan yirmi saniyelik bir animasyon. «Bunu da bir saniyeye mi indireceğiz?» diye soruyor. Kimse gülmüyor; soru yerinde.
Bu derste ne olacak
Aynı hareket, kısaltılınca ya da uzatılınca başka bir şey söyler. Çok kısa bir hareket fark edilmeden biter; çok uzun bir hareket okuru bekletir. Ama «doğru süre» diye tek bir sayı yok: bir düğmeye basınca gelen geri bildirim, bir sayfanın kayması ve bir kurulumu anlatan bir animasyon farklı işler yapar ve farklı süreler ister. Bu derste bir hareketin süresini, o hareketin işine göre seçmeyi ele alacağız. Bir belgenin animasyonlu kaydırılmasını dört farklı hızda sınayan bir çalışma, en iyi sürenin belgenin türüne göre değiştiğini gösteriyor. Bu süreleri de bir ekranın saniyede çizdiği kare sayısıyla kendimiz hesaplayacağız; çünkü bir animasyon tasarımcısı süreyi çoğu zaman milisaniye değil kare olarak düşünür.
Kanıt ne diyor
Bir hareketin süresi çoğu zaman bir zevk meselesi gibi ayarlanır; aşağıdaki kartlar sürenin ölçülebilir bir etkisi olduğunu ve en iyi sürenin işe göre değiştiğini gösteriyor.
Sahada
Yaygın yanlış«Hangi hareket olursa olsun, onun için tek bir ideal süre bulunur.»
Klein ile Bederson'un çalışmasında en iyi kaydırma süresi okuma belgelerinde ve simge belgelerinde farklıydı. Bir geri bildirim hareketi, bir kaydırma ve bir açıklayıcı animasyon farklı işler yapar ve farklı süreler ister.
Yaygın yanlış«Kısalttıkça iyileşir; en hızlı hareket okuru en az bekleten harekettir.»
Yarım saniyelik damla, iki zıplamayı fark edilemeyecek kadar kısa bir sürede bitiriyordu. Klein ile Bederson'un çalışmasında bir anda atlamaya göre kısa bir animasyonlu kaydırma bile görev süresini kısaltmış ve hataları azaltmıştı; hiç hareket olmaması her zaman en hızlısı değildir.
Yaygın yanlış«Bir açıklayıcı animasyon da arayüz hareketi gibi kısa olmalıdır.»
Bir kurulumu anlatan bir animasyon, izleyicinin her adımı takip etmesini gerektirir. Uzun bir açıklama kısaltılırsa adımlar kaybolabilir; daha iyi bir yol, onu adımlara bölüp hızını okura bırakmak olabilir.
Gri alan
Bir hareketin ne kadar sürmesi gerektiği büyük ölçüde işe, okura ve bağlama bağlı ve yoruma açık. Klein ile Bederson'un çalışması kaydırmayı ve belirli belge türlerini ölçtü; bir simgenin zıplaması ya da bir geri bildirim hareketi için en iyi sürenin ne olduğunu göstermedi. Çalışmanın yalnız özetini okuduk ve dört sürenin tam değerlerini bilmiyoruz. Selin'in kullanıcılarının söyledikleri birkaç kişinin deneyimi; bir saniyenin bütün kullanıcılar için uygun olup olmadığı bundan çıkarılamaz. Platform üreticilerinin yayımladığı hareket kılavuzları çoğu zaman geri bildirim ve geçiş için belirli milisaniye aralıkları önerir; bu sayıların hangi deneyden geldiğini kılavuzlar çoğu zaman yazmıyor; bu derste onları ayrıca incelemedik. Bir hareketin süresinin yaşlı kullanıcılarda, dikkat güçlüğü olanlarda ya da hareket hassasiyeti olanlarda nasıl algılandığı da belirsiz ve ayrıca sınanmayı gerektiriyor.
Senin işinde
Bir hareketin süresini seçmeden önce onun işini yaz: bir geri bildirim mi, bir kaydırma ya da geçiş mi, bir açıklama mı? Geri bildirim hareketlerini kısa tut; kullanıcıyı bekletmemeli. Kaydırma ve geçişlerde hareketin okura nerede olduğunu gösterecek kadar sürmesine izin ver. Açıklayıcı animasyonlarda süreyi kısaltmak yerine adımlara böl ve hızı okura bırak. Süreyi milisaniyeyle yazdığında karşılığını kare olarak da hesapla; bir zıplamanın kaç kare sürdüğünü bilmek hareketi kurarken işini kolaylaştırır. Aynı hareketi üç farklı sürede hazırla ve birkaç kullanıcıyla dene; birinin «kaçırdım», öbürünün «dondu» demesi, aralığın iki ucunu gösterir. Tek bir sayıyı bütün animasyonlara uygulama; her hareketin süresini ayrı ayrı seç ve seçtiğin süreleri bir tabloda topla, böylece ekipteki herkes aynı işe aynı süreyi verir. Yükleme göstergeleri gibi süresi senin elinde olmayan hareketler için, uzadıklarında okura ne söyleyeceklerini tasarla.
Kendin dene
Aklında kalsın
Bir hareketin süresi onun ne söylediğini değiştirir: çok kısa bir hareket kaçırılır, çok uzun bir hareket okuru bekletir. Klein ile Bederson'un çalışmasında animasyonlu kaydırma okuma belgelerinde 300 milisaniyede, simge belgelerinde 500 milisaniyede en büyük yararı sağladı; en iyi süre işe göre değişti. Saniyede 60 karelik bir ekranda 300 milisaniye 18, 500 milisaniye 30 kare eder. Geri bildirimi kısa tut, kaydırmaya yer ver, açıklamayı adımlara böl.
Sonraki derse köprü
Damla artık bir saniyede iki kez zıplıyor; ama Arda hâlâ memnun değil. Ekrandaki damla yerden yükseliyor ve aynı hızla iniyor, sanki bir ipe bağlı bir mekanizma gibi. Leyla Hanım bir topu masaya bırakıyor: top düşerken hızlanıyor, yere çarpınca yavaşlayıp yeniden yükseliyor, tepede bir an duruyor. Aynı bir saniyelik süre, hızın nasıl dağıldığına göre bambaşka bir hareket gibi görünebilir. Bir hareketin sabit hızla mı, yoksa hızlanıp yavaşlayarak mı ilerlediği onun algılanışını nasıl değiştirir ve yumuşatma eğrisi nasıl seçilir? M01-D03 doğrusal hareket ile hızlanan ve yavaşlayan hareket arasındaki farkı ele alıyor.
Kendini sına
Soru 1 · Kavram
Klein ile Bederson'un çalışmasında okuma belgelerinde en büyük görev süresi kazancı hangi animasyon süresiyle elde edildi?
- A) 300 milisaniye.
- B) 500 milisaniye, simgelerde.
- C) 2 saniyelik uzun bir kayma.
- D) Animasyonsuz kaydırma.
Cevap: A. Okuma belgelerinde görev süresi 300 milisaniyelik animasyonlarla yüzde 5,3'e kadar kısaldı; simge belgelerinde ise en büyük kazanç 500 milisaniyede, yüzde 24'e kadar elde edildi.
Soru 2 · Kavram
Bir düğmeye basınca düğmenin hafifçe çöküp geri gelmesi hangi tür harekettir?
- A) Açıklayıcı animasyon.
- B) Animasyonlu kaydırma.
- C) Geri bildirim hareketi.
- D) Yükleme göstergesi, çünkü kullanıcı düğmeye basınca bir şeyin yüklenmesini bekler.
Cevap: C. Düğmenin çökmesi kullanıcının dokunuşunun kabul edildiğini gösteren kısa bir geri bildirim hareketidir.
Soru 3 · Hesap
Saniyede 60 kare çizen bir ekranda 500 milisaniyelik bir hareket kaç kare sürer?
- A) 18 kare, 300 ms.
- B) 50 kare, çünkü her 10 milisaniye bir kare eder.
- C) 120 kare, 2 s.
- D) 30 kare.
Cevap: D. 500 milisaniye 0,5 saniyedir; saniyedeki kare sayısıyla çarpılınca 0,5 çarpı 60, 30 kare eder. 18 kare 300 milisaniyenin, 120 kare iki saniyenin karşılığıdır.
Soru 4 · Tuzak
Deniz «Kullanıcılar bir saniyelik damlayı sevdi; bundan sonra uygulamadaki her animasyon, tanıtım dahil, bir saniye olsun» diyor. Bu derste okunanlar bu kurala ne söylüyor?
- A) Kural yerinde; bir saniye her hareket için uygun süredir ve kullanıcılar bunu gösterdi.
- B) Kural doğru, ama tanıtım yarım saniyeye indirilmelidir.
- C) Süre hiçbir şeyi değiştirmez, kural önemsizdir.
- D) En iyi süre işe göre değişir; tanıtım adımlara bölünmeli.
Cevap: D. Klein ile Bederson'un çalışmasında bile en iyi süre belge türüne göre değişti; bir geri bildirim, bir kaydırma ve yirmi saniyelik bir açıklayıcı tanıtım farklı süreler ister.
Anlamadığın bir yer mi var?
Mentor yalnız bu dersin metnine dayanarak cevap verir. Metinde geçmeyen bir şey sorarsan uydurmaz, geçmediğini söyler.