Sahneler dikkat dağıtan geçişler olmadan nasıl bağlanır?

Bir geçiş kusursuz uygulanmış olsa bile ürün videosunu anlamayı zorlaştırabilir. Kare döner, arayüz parçacıklara dağılır ve sonraki sahne etkileyici bir kesinlikle yerine oturur. Ardından izleyici, nerede olduğunu anlamaya bir saniye harcar.

O bir saniye önemlidir. Anlatımın sonucu açıkladığı, küçük bir etiketin belirdiği veya yeni bir eylemin başladığı saniye aynı olabilir. Geçiş, sonraki sahnenin ihtiyaç duyduğu dikkati tüketmiştir.

Yararlı hareketli grafik geçişleri, sahneler arasında neyin değiştiğini ve neyin aynı kaldığını anlatır. Bir kartın ayrıntı görünümüne dönüştüğünü, bir eylemin sonuç ürettiğini, karşılaştırmanın diğer sürüme geçtiğini veya konunun değiştiğini anlamamıza yardım ederler. Başarıları, sahneler arasında ne kadar çok şey olduğundan çok, aralarındaki akışta neyin açık kaldığına bağlıdır.

Kurgusal bir raporlama iş akışı düşünün: bir rapor seçmek, grafiği incelemek, sonra sonucu paylaşmak. Material’ın yayımladığı koreografi örnekleri, ortak bir öğenin bu durumları nasıl bağlayabileceğini gösterir.

Sahneler arasındaki ilişkiyle başlayın

Efekt seçmeden önce çıkan ve giren sahne arasında neyin değiştiğini yazın. “Rapor kartı açılarak seçilen rapora dönüşür” bir ilişkidir. “Hızlı yakınlaştırma geçişi kullan” ise ilişki netleşmeden yapılmış bir uygulama tercihidir.

Sık görülen bazı ilişkiler farklı yaklaşımlar gerektirir. Ayrıntı görünümü, zaten görünür olan bir şeye aittir. Sonuç, eylemin ardından gelir. Yeni konunun eski konuyla mekânsal bağı olmayabilir. Önce-sonra karşılaştırmasında izleyici iki durumdaki eşdeğer içeriği tanımalıdır.

Bu değişikliklerin hepsini sağdan kayma olarak ele alırsanız tutarlı bir üslup, ancak zayıf bir açıklama yaratırsınız. Video yalnızca konu değiştirirken bile yön, gezinme ima etmeye başlar. Ortak nesnenin genişlemesi, ilgisiz bir ekranın öncekinin ayrıntısı olduğunu düşündürebilir. Editör amaçlamasa da hareket anlam taşır.

Raporlama örneğinde karttan rapora geçiş, seçilen raporun kimliğini korumalıdır. Grafikten paylaşım onayına geçiş neden-sonuç ilişkisini korumalıdır. Son marka mesajına geçiş ise tartışmanın düzeyini değiştirdiği için doğrudan kesme olabilir.

Bu küçük muhakeme, sonradan zaman kazandırır. Bir inceleyen geçişin yanlış hissettirdiğini söylediğinde ilişkinin mi yanlış olduğunu, ilişkinin mi gizlendiğini, yoksa uygulamanın yalnızca aşırı mı olduğunu sorabilirsiniz. Bunlar farklı revizyonlardır.

Güvenilir tek bir referans noktası koruyun

Google’ın Material koreografi kılavuzu, ortak öğeler üzerinden sürekliliği açıklar. Belirgin bir odak noktasını korumayı önerir ve yüzeylerle içeriğin geçiş boyunca nasıl bağlanabileceğini tartışır. Bunlar etkileşim tasarımı örnekleridir; ancak temel görsel ilke videoda da yararlıdır: izleyicinin takip edebileceği güvenilir bir şeye ihtiyacı vardır. Material’ın koreografi kılavuzu özgün örnekleri gösterir.

Yayımlanan daralma örneğinde, büyük yüzey küçülürken tanınabilir mavi başlık içeriği korunur. Eşlik eden zamanlama diyagramı, kart yüksekliğinin değişimini çıkan ve paylaşılmayan içeriğin opaklığından ayırır. Yararlı ayrıntı, her şeyin birlikte kaybolmamasıdır: korunan içerik kimliği taşırken geri kalanı çekilir. Örneğin kesin zamanlama değerlerini her ürün videosuna uygulanacak kural saymak yerine bu görev dağılımını alın.

Raporlama akışında seçilen rapor kartının başlığı, küçük resmi ve listede bir konumu vardır. Karmaşık bir hareket boyunca üçünü de korumanız gerekmez. Başlıkla raporun tanınabilir bir bölümünü görünür tutmak, gelen ayrıntı görünümünü bağlamak için yeterli olabilir.

Referans noktası bir nesne, etiket, konum veya tutarlı bir görsel özellik olabilir. Yararlı soru, kimliği taşıyıp taşımadığıdır. Başka bir genel mavi dikdörtgene dönüşen genel mavi dikdörtgen, hangi raporun açıldığını anlatmadan sürekli görünebilir. Kısa ve sürekli görünen bir başlık, teknik açıdan etkileyici bir biçim dönüşümünden daha çok açıklama yapabilir.

Çok fazla referans noktası, hiç olmaması kadar kafa karıştırabilir. Her kart, simge, etiket ve araç çubuğu öğesi bağımsız hareket ederse izleyicinin takip edebileceği birden çok aday oluşur. İlişkiyi en iyi anlatan öğeyi seçin, kalan içeriğin onu desteklemesine izin verin.

Aynı Material kılavuzundaki tek ortak öğe örneği, seçimi daha belirgin kılar. Mavi daire, konumu değişirken genişleme boyunca varlığını korur. Yüzey etrafında büyür ve ortak olmayan metin değişir. Daire, eski ve yeni açıklamaları aynı kalmaya zorlamadan süreklilik sağlar.

Ayrıntı görünümü önemli ölçüde farklı içerik barındıran bir rapor kartı için bu yararlı bir modeldir. Raporun küçük resmini veya tanımlayıcı başlığını referans olarak tutun, yalnızca özete ait içeriği çıkarın ve ilişki kurulduktan sonra ayrıntılı kontrolleri getirin. Her eski simgeyi tutmak, daha çok şey açıklamadan geçişi kalabalıklaştırır. İzleyiciye hangi nesnenin açıldığını hâlâ anlatabilen en küçük ortak öğe kümesini seçin.

Kamera hareketini ürün davranışından ayırın

Ürün videosu çoğu zaman gerçek arayüz kaydını editoryal kamera hareketleriyle birleştirir. İzleyici bunları kendiliğinden ayırt etmeyebilir.

Kart tüm kareyi dolduracak kadar büyüdüğünde ürün ayrıntı görünümü mü açıyor, yoksa editör sabit ekran görüntüsüne mi yakınlaşıyor? Araç çubuğu kayarak uzaklaştığında bu gerçek bir uygulama durumu mu, yoksa kompozisyonu sadeleştirmek için kırpıldı mı? İki yaklaşım da geçerli olabilir; ancak kurgu desteklenmeyen bir etkileşim ima etmemelidir.

Ayrımı korumanın bir yolu, editoryal hareketten önce gerçek eylemi göstermektir. Tıklamayı ve oluşan arayüz durumunu gösterin, ardından ilgili içeriğe yakınlaşın. İzleyici ürünün ne yaptığını ve videonun neyi vurguladığını görür.

Bir diğer seçenek, ekran görüntülerinin etrafında açıkça editoryal bir çerçeve kullanmaktır. Kamera yeniden kadrajlarken ekran görüntüsü sabit bir dikdörtgen olarak kalır. Kaynak kayıt değil sabit görsel olduğunda bu özellikle yararlı olabilir. Sahne açıkça temsili bir açıklama olarak sunulmadıkça tek tek kontrolleri canlı ürünün çalışan parçalarıymış gibi canlandırmayın.

Ayrım zamanlamayı da etkiler. İşleme süresi iddianın merkezindeyse gerçek yükleme durumu, anında tamamlanma çağrıştıran bir geçişle kaybolmamalıdır. Kısa bir gösterim için beklemeyi azaltabilirsiniz; ancak bunu ürünün performansını sessizce yeniden tanımlamadan yapın.

Sonraki eylemden önce izleyiciye bir varış noktası verin

Geçiş, mutlaka son hareketli özellik değişmeyi bıraktığında değil, izleyici yeni kareyi anladığında biter.

Raporun genişleyerek ayrıntılı grafiğe dönüştüğünü varsayın. Tam yerleştiği anda imleç küçük Share kontrolüne gider ve anlatım dışa aktarma seçeneklerini açıklamaya başlar. İzleyici grafiği tanımak, imleci yeniden bulmak, kontrolü saptamak ve açıklamayı almak zorundadır. Zaman çizelgesi kusursuz eşleşmiş olsa da deneyim aceleci hissettirebilir.

Kısa bir yön bulma anı ekleyin veya yeniden düzenleme miktarını azaltın. Grafik başlığını sabit konumda tutun. Birlikte takip etmek zorsa kamera ölçeğini ve arayüz durumunu aynı anda değiştirmeyin. Sonraki eylemi, izleyicinin tanıma fırsatı bulduğu bir kareden başlatın.

Bu, her geçişten sonra sabit bir duraklama gerektirmez. Tekrar, akışı mekanik hissettirebilir. Tanıdık görünümler az yön bulma süresi isterken yoğun yeni ekran daha çok isteyebilir. Yerleşme süresini, değişen bilgi miktarına uydurun.

Yararlı bir inceleme, geçişten hemen sonra durup izleyicinin sırada nereye bakması gerektiğini sormaktır. Yanıt çoktan geçmiş bir anlatıma bağlıysa görsel devri düzeltin. Varış noktası sonraki olayı destekleyecek kadar açık olmalıdır.

Geçiş yararlı bir süreklilik eklemiyorsa doğrudan kesmeyi seçin

Tasarımcılar bazen doğrudan kesmeyi tamamlanmamış iş sayar. Birçok ürün videosunda mevcut en açık geçiş budur.

Kesme, mekânsal ilişki varmış gibi davranmadan yeni konu kurabilir. Sorun ifadesinden gerçek ürün kaydına, arayüz demosundan müşteri alıntısına veya kanıttan son eylem çağrısına geçebilir. İzleyici editoryal konunun değiştiğini anlar.

Güçlük, iyi bir çıkış ve giriş karesi seçmektir. Yoğun bir arayüzden diğerine kesme, ikisi aynı ölçekte ama farklı bilgilerle gösteriliyorsa yön kaybı yaratabilir. Kısa başlık, tanınabilir görsel yapı veya bilerek değiştirilmiş kompozisyon geçişi açıklığa kavuşturabilir.

Çözülmemiş bir kesmeyi gizlemek için karmaşık geçiş kullanmayın. İki sahnenin yararlı ilişkisi yoksa biçim dönüşümü yalnızca arayı doldurur. İlişkileri varsa belirleyip koruyun. Her iki durumda da editoryal bağlantıyı çözmek efekt eklemekten daha etkilidir.

Doğrudan kesmeler ritim de sağlayabilir. Sürekli süzülen hareketli video ağırlıksız ve taraması zor hissettirebilir. Temiz bir kesmenin ardından sabit kare, izleyiciye açık bir sınır verir. Ayrıntılı geçişleri ilişkinin o dikkati hak ettiği anlara saklayın.

Yönü hikâyeyle tutarlı tutun

Hareket; mekân, sıra ve hiyerarşi hakkında beklentiler yaratır. Akışta soldan sağa ilerleyip sonra beklenmedik biçimde yön değiştirmek, süreci geriye gidiyormuş gibi hissettirebilir. Geri alma eyleminde bu yararlı, başarılı bir sonraki adımda ise kafa karıştırıcı olabilir.

İş akışı videosunda yönün ilerlemeyi mi, gezinmeyi mi, yoksa yalnızca kompozisyonu mu temsil ettiğine karar verin. İlerlemeyi temsil ediyorsa ilgili akış boyunca kuralı koruyun. Arayüzün kendisi farklı yön modeli kullanıyorsa gerçek ürün davranışı, keyfî bir editoryal alışkanlıktan önce gelmelidir.

Video gerektirmiyorsa her yöne anlam atamayın. Kısa bir çapraz erime, coğrafi model kurmadan vurguyu değiştirebilir. Vurgulu sabit genel görünüm, bütün diyagramı ekran boyunca taşımadan sürecin ilerlediğini gösterebilir.

Karşılaştırmalarda dikkatli olun. Önceki sürüm sola çıkıp sonraki sürüm sağdan giriyorsa hareket, değiştirme olarak okunabilir. Amaç dikkatli karşılaştırmaysa eşleşen kesme veya bölünmüş görünüm karşılıkları daha açık koruyabilir. Seçim, izleyicinin karşılaştırması mı, takip etmesi mi, yoksa yalnızca değişimi tanıması mı gerektiğine bağlıdır.

Yön, okuma alışkanlıkları ve arayüz düzenlerinin farklılaşabildiği yerelleştirilmiş sürümlerde özellikle önemlidir. Her geçişi ters çevirmenin yeterli olduğunu varsaymayın. Hareket, dil ve ürün durumu arasındaki gerçek ilişkiyi inceleyin.

Eş zamanlı değişiklikleri azaltın

Sahne geçişi içeriği, ölçeği, konumu, rengi, derinliği ve yönelimi değiştirebilir. Altısını aynı anda değiştirmek çarpıcı olabilir; ancak izleyicinin kimliği izlemek için kullanacağı neredeyse bütün ipuçlarını da kaldırır.

Olayı açıklayan boyutları seçin. Rapor kartının rapora açılması ölçek ve konum değişimi isteyebilir. Muhtemelen dönme, renk tersine çevirme ve bulanıklığa da ihtiyacı yoktur. Grafik vurgusu, tüm sahneyi değiştirmek yerine vurgunun değişmesini gerektirebilir.

Ölçülülük burada yalnızca estetik değil, işlevseldir. Eş zamanlı değişimi azaltmak, neyin dönüştüğünü ve neyin aynı kaldığını görmeyi kolaylaştırır. Sonraki karenin öncekiyle daha bağlı hissedilmesini de sağlar.

Kaynak kod tabanlı animasyonda kapsayıcının zamanlamasını ikincil içeriğinkinden ayırın. Önce yüzeyi hareket ettirebilir, varış noktası kurulduktan sonra ayrıntılı kontrolleri gösterebilirsiniz. Gecikmeyi ürün yavaşmış gibi hissettirmeyecek kadar kısa tutun ve anlamlı bir adımı gizlemediğinden emin olun.

Kaydedilmiş arayüzlerde istemeden yinelenen harekete dikkat edin. Gerçek panel zaten hareketle içeri giriyor olabilir. Tüm kayda eklenen editoryal kayma, paneli farklı koordinat sistemlerinde iki kez hareket ettirebilir. Her efekt tek başına akıcı olsa da sonuç çoğu zaman tuhaf biçimde kaygan hissettirir.

Geçişi komşu bilgileriyle birlikte inceleyin

Geçişi yalnızca bağımsız animasyon olarak onaylamayın. Öncesindeki son cümleyi, geçişi ve sonrasındaki ilk anlamlı eylemi birlikte izleyin.

Çıkan sahne, izleyicinin hâlâ okuması gereken bir koşul içerebilir. Geçiş onu erken kaldırabilir. Giren sahnede öncekiyle karşılaştırılması gereken sayı olabilir. Uzun efekt, ilk sayının gereksiz yere bellekte tutulmasını zorunlu kılabilir. Müzikteki bir vurgu, önemli olay hemen sonraki sonuçken dikkati geçişe çekebilir.

Gayriresmî bir ilk izleyiş kontrolü bu sorunları gösterebilir. Birine hangi raporun açıldığını, onaya hangi eylemin yol açtığını veya ikinci grafiğin yeni veri kümesi mi yoksa aynı kümenin başka görünümü mü olduğunu sorun. Yanıtlar, geçişin amaçlanan ilişkiyi koruyup korumadığını gösterir.

Birleşme çevresindeki dışa aktarılmış kareleri de inceleyin. Kısa siyah kare, kesilmiş gölge, uyumsuz kırpma veya geç yüklenen görsel, akıcı önizlemenin sakladığı biçimde sürekliliği bozabilir. Bunlar, az ya da çok hareket isteğine ilişkin öznel tercihten ayrı, somut kusurlardır.

Yararlı bir dayanıklılık testi, geçici incelemede müziği kaldırıp renkli üslubu nötr yüzeylerle değiştirmektir. Seçilen rapor ayrıntı görünümüne dönüşürken hâlâ tanınıyorsa sürekliliği gerçek ilişki taşıyordur. Bağlantı yalnızca iki sahne de mavi olduğu için çalışıyorsa referans fazla genel olabilir. Kontrolün ardından son üslubu geri getirin; amaç nötr bir görsel tarz dayatmak değil, kimliği teşhis etmektir.

Anlamı adlandıran bir geçiş brifi yazın

Ajandan “üst düzey geçişler ekle” istemek yerine ilişkiyi ve referansı belirtin: “Seçili rapor kartı rapor ayrıntısına dönüşsün. Rapor başlığı baştan sona görünür kalsın. Araç çubuğu ayrıntı yerleştikten sonra belirsin. Gerçek ürün tıklamasını ve sonucunu koru.”

Konu değişiminde yönerge daha basit olabilir: “Yeni bölüme doğrudan kesmeyle geç. Sonraki arayüz eyleminden önce yeni başlığa sabit kare ver.” Bunu değerlendirmek soyut bir üslup sıfatından daha kolaydır.

Bitmiş video, izleyici bir sahnenin diğerine nasıl bağlandığını anladığı için bağlantılı hissettirmelidir. Geçiş; kimliği, nedeni veya sırayı koruyarak yerini hak eder. Bunu iyi yaptığında izleyici çekimler arasındaki efekti değil, ürünün hikâyesini hatırlar.