web-gelistirme-sc.com

Uygulamanızda animasyonu nasıl ve ne zaman kullanmalısınız?

Bazen uygulamalar kullanıcı arayüzündeki animasyonlardan yararlanabilir.

  • Animasyonu ne zaman kullanmanız gerektiğini belirlemek için hangi ipuçlarınız var?
  • Animasyonların kullanışlılığını nasıl en üst düzeye çıkarabilir ve yanlış kullanımdan nasıl kaçınabilirsiniz?
12
Dair

Sebebini ve etkisini düşünün. Bir düğmenin üzerine gelirsem, bir tür geri bildirim almak isterim. Bir şeyi sürükleyebilirsem bunu bir şekilde belirtin. Bir uyarı veya bildirim varsa, dikkatimi dikkatle çekerim. Bunun ötesinde, animasyon için çok spesifik bir nedeniniz yoksa bir tane kullanmayın. Devam ederse sinir bozucu olabilecek her şeyden kaçının. Animasyon önemli değilse ve sayfanın ana amacından uzaklaşıyorsa, ortadan kaldırın.

6
Virtuosi Media

Animasyonun uygun olabileceği bazı yerler:

  • Bir paneli belirli bir konuma küçültme - animasyon, kullanıcıya küçültülmüş panelin nereye gittiğini ve nasıl geri yükleneceğini öğretmeye yardımcı olur.
  • Gezinme çubuğu gibi animasyonları otomatik gizleme - animasyon, kullanıcının bir şeyin kaybolduğuna ve nereden alınabileceğine dikkat çeker.
  • Buna neden olan değişikliğin gerçekleştiği bölgenin hemen yakınında olmayan bir alanı güncelleme. Örneğin, bir listedeki/ızgaradaki verileri düzenlemek, bu verilerin başka bir paneldeki görsel temsilini değiştirir.

Animasyon (değişim/hareket) diğer birçok şeyden daha fazla dikkat çeker, bu nedenle kullanıcının dikkatini başka şekilde atmış olabilecek bir eyleme dikkat çekmek istediğinizde harikadır.

Bununla birlikte, yukarıdaki öğeler için bile, sadece ilk birkaç kez yapmak faydalı olabilir - göz otomatik olarak çizildiğinden, dikkat dağıtıcıdır ve bu nedenle ilk "rehberlik" tamamlandıktan sonra kaçınılmalıdır. .

6
Dan Barak

Kullanıcılarınızın uygulamanın çalışmayı durdurduğunu düşünmesini önlemek için her zaman bir tür meşgul/çalışan animasyona sahip olmalısınız (özellikle ajax uygulamaları için önemlidir).

Genel kullanıcı deneyimine katkıda bulunurlar, ancak çok fazla koymuyorlarsa basit hızlı geçişler tamamdır.

Hiç "geliştiricinin gerçek UI efektlerini planladığı gibi gerçek özellikleri planlamak için çok fazla zaman harcamasını isterdim" diye düşündüğünüz bir uygulama kullandınız mı? Animasyon eklerken bunu aklınızda bulundurun.

4
Sruly

Harika soru. Her zamanki gibi, uygulamaya bağlıdır (oyunlar muhtemelen verimlilik uygulamalarından çok daha fazla UI animasyonu kullanmalıdır), ancak bazı genel ilkeler vardır.

İThings yeni ve sıcakken, her şey canlandırılmalıydı, ancak VS2010 ve Office 2010'a bakmak ve ne kadarının değil canlandırılması ilginç. Özellikle, Office 2010'da geçişli fareyle üzerine gelme/düğme üzerine gelme (Office 2007 bunu yaparken). IMO, daha duyarlı hissediyor. Menüler hala içeri/dışarı soluyor (menülerin solması yaklaşık iki kat daha uzun sürdüğünü belirtmekle birlikte dışarı solmaya yaptıkları gibi in, algılanmayı artırabilir cevaplanabilirlik).

Genel olarak, kullanıcı arayüzü bileşenleri kullanıcı onları açıkça sürüklemeden/kaydırmadan hareket ettiğinde animasyon kullanılmalıdır . Kullanıcı bir simgeyi yerine sürüklüyorsa, diğer simgeleri "dışarı atmak" kullanıcı eyleminin etkilerini iletir (ancak bazen bir ekleme noktası çizgisi yeterlidir). IE/Firefox'taki "bilgi çubuğu", zıplamayı azaltmak ve kullanıcının dikkatini çekmek için diğer öğeleri aşağı doğru iter. Akordeon ve ağaç menüleri, kullanıcı diğer öğelerin nereye gittiğini gördüğü için animasyonla daha iyi test edilmiştir.

Bir keresinde, her seviyedeki kullanıcıların animasyonlu bir UI öğesiyle etkileşim kurma eğiliminde olmadığını gösteren bir çalışma gördüm (bağlantıyı bulursam bunu güncelleyeceğim). Dolayısıyla, kullanıcı üzerine geldiğinde bir düğmeyi 2 saniyeden fazla aydınlatırsanız, düğme animasyon sırasında work olsa bile, kullanıcılar animasyonun bitmesini bilinçli olarak bekler. Bunun hakkında fikir edinmek için WPF Temaları örneğine göz atın. Bazı temalar, diğerlerinden daha fazla havada asılı duran animasyonlara sahiptir ve hangilerinin yavaşladığını hemen belirleyebilirsiniz. Yavaş solma efektleri, Vista'nın Win7'de yavaş hissettiğini söyleyen kullanıcılara da katkıda bulunmuş olabilir, aynı animasyonların hepsi oradadır (bu yüzden işlemci/grafik kartı üzerinde yavaştır), ancak birçoğu daha kısadır.

OTOH, yeni google.com'da solmakta olan şeyler ve google resim arama artık ışık kutuları içeriyor. Yani trend her iki yöne de gidiyor.

3
Robert Fraser

Özetlemek gerekirse, animasyonların beyin üzerinde kullanabileceğiniz iki güçlü etkisi vardır:

  • Bilişsel yükü azaltın: Kullanıcının iki durum arasında ne olduğunu görmesini sağlar, böylece beynin "boşluğu doldurması" gerekmez. Bu, kullanıcının her şeyin daha net ve kullanımı kolay olduğunu hissettirir --> Geçişler için animasyonları kapsamlı bir şekilde kullanın (cf Apple yazılım)

  • Kullanıcıların dikkatini çekin: İnsan, doğrudan bakmadıkları bir yerdeki hareketi algılamak için gerçekten iyidir. Bu, çubuk hücrelerimiz , retinanın dış kenarlarında gerçekten yoğun olan hareketi tespit etmek için kullanılan hücreler (düşman ortamında hayatta kalmakla ilgili bir şey olması gerekir) sayesinde yapılır -> Uzak bir yerde gerçekten önemli bir şey olursa animasyon kullanın.

Bu etki çok güçlüdür, çünkü sürüngen beynimize doğrudan bağlıdırlar. Güçlü ve aynı zamanda tehlikeli.

3
user396

Bir web/yerel uygulama için animasyonlar oluştururken, içerik yüklenirken her zaman github yaklaşımını, neredeyse "kullanıcıyı rahatsız eden" bir saniyeliğine alırım. Uygulamanın en yavaş kısımlarını bulun (özellikle bir düğmeye bastığınız parçalar ve yarım saniye boyunca hiçbir şey olmuyor gibi görünüyor ve bir animasyon yapmak için bir yol bulmak, bu kullanıcı için hayal kırıklığını en aza indirmek (" Düğmeyi ittim ama hiçbir şey olmuyor "), lütfen kaygan bir yanılsama yaratmak için dönen bir yükleme tekerleği veya bir çeşit yükleme animasyonu demek istemediğimi, kayan bir animasyon veya benzeri bir şey gibi , hızlı kullanıcı arayüzü, (bkz: https://github.com/github/linguist bir şeyi tıkladığınızda, github'un süper hızlı ve pürüzsüz görünmesini sağlayan bu slayt animasyonu vardır, lütfen aşırıya kaçmayın bu (uygulamalarınızın 500 ms'den fazla süren kısımlarında bu tekniği kullanarak) 500 ms gibi hissediyorum, sihirli sayı, ama deneme ve sizinkini bulun.

2
David

Şunu sormalısınız: Bu animasyon kullanıcının neler olduğunu anlamasına yardımcı oluyor mu? OS X'in cin efektini hemen kapattım, ancak basit simge durumuna küçültme/geri yükleme animasyonunu takdir ediyorum çünkü hızlı ve yeni olanlara ekstra bir ipucu veriyor. Aynı şekilde Uzaylar/Sergileme ile. Ya da belki bir şeyin daha az ani ve daha insani görünmesini sağlayan kısa, basit, yumuşak bir solma geçişidir.

Sonra tekrar, Star Wars'dan 'Lucas wipe' gibi bir marka olabilir.

2
John Ferguson

Animasyonun bir amacı vardır ve bu amaç durumdaki değişiklikleri görselleştirmektir.

Modern CSS'de webkit tarafından ortaya konan tür gibi bildirici animasyonlar düşündüğünüzde daha kolay anlaşılır. Bu bağlamda, öğelerin belirli bir durumda nasıl göründüğünü belirtir ve ardından CSS'ye farklı bir durumda nasıl göründüklerini anlatırsınız. Durumları nasıl belirtirsiniz? Sınıf adları ve kimlikleri gibi CSS kuralları ile. Mesela (ve burada kodu kullandığım için beni affet!):

.myBox { width: 100px; height: 100px; border: solid 1px red; -webkit-transition: linear .3s; }
.myBox.open { width: 100px; height: 120px; border: solid 3px red; }

Burada açıkladığımız, açılan bir kutu ve koda iki CSS kuralı arasında nasıl animasyon oluşturacağımızı anlatıyoruz. Bu onları ifade eder ve bunu fark ettiğinizde uygulamanıza animasyon uygulamak aniden çok daha mantıklı hale gelir. Animasyonun nereye gittiğini düşünmek yerine, animasyonu bir durum değişimlerinin yan ürünü olarak görüyorsunuz; bir şey olduğunu gösteren bir gösterge veya bir değişikliğin gerçekleştiğini kullanıcıya geri bildirir.

Saf "animasyon" (programlama bakış açısından) ve "durum değiştirme" (bildirimsel bakış açısından) arasında ayrım yapmayı öğrendiğimde, tüm kullanıcı arayüzü tasarımlarımı daha sağlam ve mantıklı hale getirdi.

1
Rahul