Bir web tasarımında animasyonu kullanmak mantıklı olduğunda
Web tasarımcıları tarafından yapılan en yaygın hatalardan biri çok fazla animasyon öğesine girmektir. Düşünceleri şöyle yazıyor: “Animasyon havalı, çok daha fazla, daha iyi”. Ancak, bunun gibi çok iyi şey, web sitenizin kullanımını olumsuz etkileyebilir. Animasyon, diğer tüm web öğeleri gibi, pratik hedeflere ulaşmalıdır. Bu makalede, çevrimiçi görebileceğiniz en yaygın animasyon türlerinden bazılarını tartışacağız. O zaman tasarımınızda animasyon kullanımının haklı olduğu dört durumu böle vereceğiz. Haydi bakalım! Web Tasarım Animasyonunda Animasyona Giriş Web’de her yerdedir, ancak bazen bunu fark etmeyebilirsiniz. Geçmişte, animasyon çok daha belirgindi. Örneğin, her öğenin canlandırıldığı Flash’ta çalışan tüm web sitelerini bulmak garip değildir.
Neyse ki, karanlık günler geçti. Şu anda, tüm tasarımın bir parçası olarak animasyon yapmak çok daha yaygındır, ancak ortada değil. Web’de en yaygın animasyon örneklerinden biri, kayar galerideki geçiştir. Diğer animasyonlar daha pürüzsüz. Örneğin, imleci üste yönlendirdiğinizde rengi değiştiren düğme:
Görüşümüze göre, animasyon kullanmadan tüm web sitelerini oluşturmak çok mümkündür, bu nedenle eklemeyi seçerseniz, bir hedefi yerine getirmeleri gerekir. Yani, daha önce bahsedilen tüm örneklerin yanı sıra web sitenizin kullanımını kolaylaştırmalıdır. Bununla birlikte, birçok insan sadece görsel yetenekler eklemek için web sitelerinin her yönünü canlandırma arzusuna hapsolur. Şık bir web sitesi istemekte yanlış bir şey yok. Bununla birlikte, çok fazla animasyon görsel fazlalığa neden olabilir. Bazı durumlarda, onu nasıl uyguladığınıza bağlı olarak sitenizi bile yavaşlatabilirler, bu da herhangi bir şekilde kaçınmak istediğiniz bir şeydir. Bunu göz önünde bulundurarak, bir web tasarımında animasyon kullanmanın mantıklı olduğu bazı durumlar hakkında konuşalım.4 Bir web tasarımında animasyonu kullanmak mantıklı durumlar hatırlanmalıdır – Bu, animasyonları kullanabileceğiniz durumlar için kesin bir rehber değildir. Web tasarımında. Bu sadece deneyimlerimizden doğan bir öneri koleksiyonu. Animasyonun kullanıcı deneyiminizi geliştirebileceğini düşündüğünüz başka durumlar varsa, denemekten çekinmeyin! 1. ‘Micoperaction’ kullanarak eylemi vurgulayın
Animasyonun etkili olmak için çarpıcı olması gerekmez, bu nedenle mikro etkileşim terimi. Mikro etkileşim hakkında konuştuğumuzda, tek kullanımlık vakalara sahip basit animasyonlara atıfta bulunuyoruz. Seçtiğiniz düğmenin tıkladığınızda kendini vurguladığı yukarıdaki örneği alın. Bu tür bir animasyon iki hedefi karşılar, bir öğeyle etkileşime girdiğinizde size görsel geri bildirim verir ve nasıl kullanılacağınız hakkında bilgi verir. Vurguladıkları unsurların spot ışığını çalmamalı, ancak kullanmanızı kolaylaştıracak kadar. Ancak, sitenize ne zaman mikro etkileşim uygulanacağını belirlemek zor olabilir. Sonuçta, en basit sayfalar bile genellikle animasyon potansiyeline sahip düzinelerce unsura sahiptir. İşte uygulamak mantıklı olduğunda bazı hızlı ipuçları:
Özellikleri etkinleştirdiğinizi veya devre dışı bıraktığınızı vurgulamak için.
Kullanıcıya, iletişim formları aracılığıyla mesaj göndermek gibi belirli işlemlerin başarılı olduğunu söylemenin bir yolu olarak.
Tablodaki fiyatlar gibi belirli bilgi bölümlerini vurgularken.
Sitenizdeki simgeyi açmak için.
Mikro etkileşimlerin nasıl uygulanacağına gelince, stil sayfalarının (CSS) nasıl basamaklı olacağını bilmiyorsanız zor olabilir. Ancak, Divi size hemen hemen her modülde birçok öğeyi canlandırmak için varsayılan seçeneği sunar. Daha önce temaları kullanarak uygulayabileceğiniz altı tür mikro etkileşim hakkında konuşmuştuk.
2. Gizli menüden gizli menü ifade etmek, oldukça tartışmalı bir tasarım öğesidir. Birçok kişi menünün her zaman görülmesi gerektiğini düşünüyor, çünkü kullanıcının web sitenizde gezinmesinin ana yolu budur. Kabul etme eğilimindeyiz, ancak bazı durumlarda gizli menüler kolayca erişilebilirse mantıklıdır. Birçok sayfa ile çalışıyorsanız animasyonlu Tull-Redden menüsünü de kullanabilirsiniz. Her iki durumda da animasyon kullanmak mantıklıdır çünkü gizli menülerin açıklanmasını yumuşatmaya yardımcı olur. Onlar olmadan, menü yalnızca ekranda görünecektir, bu çok ani olabilir. Menünüze nasıl animasyon ekleyeceğine gelince, Divi kullanabileceğiniz bazı seçenekler içerir. Örneğin, açılır menünüz için Fade, Genişletme, Slayt ve Flip animasyonları arasında seçim yapabilirsiniz:
Ayrıca gizli menüler açısından birkaç seçeneğiniz var. Örneğin, çok temiz bir tasarım üretebilen kayar bir ekranla ‘hamburger’ menüsünü ayarlayabilirsiniz:
Uygulamayı seçtiğiniz türden ne tür bir animasyon, masaüstü ve mobil cihazda test etmeniz gerektiğini unutmayın. Menü, web sitenizin önemli bir parçasıdır, bu nedenle animasyonun işlevine müdahale etmediğinden emin olmanız gerekir.
3. Bir animasyon kullanarak gizli bilgileri görüntüleyin.
Simple Hover animasyonu, daha fazla bilgiyi daha küçük bir alana koymanın iyi bir yoludur. Animasyon Hover, mevcut alanda sağladığınız bilgileri en üst düzeye çıkarmanın iyi bir yoludur. Örneğin, fare hareketinin etkisini, her bir görüntünün adını veya koleksiyonunun tarihini gösteren galeri öğesine ekleyebilirsiniz. Hover animasyonunun anahtarı, ziyaretçilerinizin okuması için ilginç olacak bilgiler eklemektir. Örneğin, Divi ile ekip üyelerinizi tanıtmak ve insanlar fareyi görüntülerine yönlendirdiğinde görüntülenen biyografi eklemek için bir parça oluşturabilirsiniz: eğer basit kalmasını istiyorsanız, Hover Animation’ı mikro etkileşim olarak da kullanabilirsiniz. Bu şekilde, ziyaretçiler fareyi bir öğeye yönlendirdiklerinde, bunun ‘işlevsel’ olduğunu veya nasıl kullanılacağına dair talimatlar aldığını bileceklerdir. Her iki tipte de animasyon türü, küçük bir CSS kullanmanızı gerektirir. Ancak, uygulanması kolaydır ve basit bir web sitesine biraz derinlik katabilirler. 4. Geçişi kullanarak kayan bir galeri yapınSürgülü galeri zarif ve bir hikaye anlatmanıza izin veriyor. Web sitenize animasyon eklemenin tüm yollarından, kayar galeri en yaygın olanlardan biri olabilir. Aslında, çoğu insan bir resimden diğerine geçtiklerinde basit animasyonlara baktıklarını fark etmeyebilir.
Animasyon olmadan, görüntüler arasındaki geçiş anında olacak, bu da çok şaşırtıcı olabilir. Bu durumda, stil hakkında çoğu animasyon, ancak yine de galerinizi daha kullanıcı dostu hale getirebilirler. WordPress’e animasyon galerileri eklemek için kullanabileceğiniz çok sayıda eklenti var, her biri bir dizi efekt olan. Ancak, Divi kullanıyorsanız, ek eklenti eklemenize gerek yoktur. Divi kaydırıcı modülü, herhangi bir sayfaya kayar bir galeri eklemenize ve geçişi ayarlamanıza olanak tanır: Çoğu web sitesi sayfalarının üstünde ‘kaydırıcı’ kullanır. Bununla birlikte, kalıbı kırabilir ve ürün ve hizmetleriniz için referanslar görüntülemek gibi diğer birçok durumda kayar bir galeri kullanabilirsiniz. Sonuç Çoğu iyi şey genellikle kötü bir şekilde biter ve animasyon bir istisna değildir. Bir web tasarımına geldiğinizde, güzel görünmenin yanı sıra hedefi karşılamak için sayfanıza eklediğiniz her öğenin istersiniz. Ayrıca, animasyonun web sitenizi yavaşlatabileceğini hatırlamanız gerekir, bu da kaçınmak istediğiniz bir şeydir. Web animasyonunuzu iyi kullanmak istiyorsanız, uygulamak için dört makul senaryo: Mikro etkileşim kullanarak eylemi vurgulayın.
Animasyon kullanarak gizli bir menü ifade etmek.
Hover animasyonu ile gizli bilgileri gösterin. Geçiş kullanarak kayar bir galeri yapın.
Web tasarımında animasyonu ne zaman kullanacağınızla ilgili sorularınız var mı? Aşağıdaki yorumlar bölümünde sorun! Thumbnail Makale Görüntüsü Olha Chernova / Shutterstock.com.
