07/07
Görsel Akış Nedir?
Görsel akış, izleyicinin gözünü belgenin tüm önemli öğelerinin ön plana çıktığı şekilde taşır ve hiçbir şey görmeyi engeller ya da izleyicinin parça hissini kaybetmesine neden olmaz. Oklar veya sayılar gibi bariz akış elemanlarının kullanılması, Web tasarımcılarının akışı kullandıkları en yaygın yoldur, ancak okuyucunuzu belirli bir yol boyunca hareket ettirmek için kullanılabilecek ve kullanılabilecek diğer öğeler vardır. Bu eğitimdeki adımlar size iyi ve kötü akış örneklerini gösterecek ve tasarımdaki görsel akış bilgisini öğrenmenize yardımcı olacaktır.
Görsel akış birçok yönden başarılabilir:
- Oklar
- Sıralı görüntüler veya metin öğeleri
- Perspektif
- Renk Geçişleri
- Boyut değişiklikleri
- Eğriler
- Görüntülerde hareket
- Yüzler - özellikle gözler
Aşağıdaki resimlerde, Web sayfalarındaki akıştaki bazı yaygın hatalar ve bunların nasıl düzeltileceği gösterilecektir.
02/07
Soldan Sağa Batılı Metin Akışı
Bir Batı dilini okurken büyüdüyseniz, metnin soldan sağa doğru hareket etmesi gerektiğini düşünürsünüz. Dolayısıyla, göz bir metin çizgisi boyunca ilerledikçe, soldan sağa doğru hareket ediyor.
Yukarıdaki resimde, şelale sağdan sola doğru akıyor ve metin şelaleden akıyor. Hepimizin şelalenin düştüğünü bildiğimiz için, metnin akışıyla suyun akışı yönünde bir bağlantı kesilir. Metni okumak için izleyicinin gözü yanlış yönde hareket eder.
03 of 07
Metniniz Görüntüler ile Akmalıdır
Bu durumda, görüntü tersine çevrildi, böylece metin suyla aynı yönde akıyor. Tüm elemanlar, izleyicinin gözünü su akışı ve metin akışıyla gösterir.
04/07
Soldan Sağa Hızlı Eşittir
Bu fotoğraftaki at sağdan sola doğru koşuyor, ancak metin İngilizce ve soldan sağa doğru. At yarışının görsel yönü, bir yönün tüm metninin hızını yavaşlattığı için metinden farklı bir yön çiziyor.
Batılı kültürlerde, dillerimiz soldan sağa doğru hareket ettiğinden, soldan sağa ve soldan sağa doğru, soldan sağa doğru ve soldan sağa doğru, soldan sağa doğru bir görsel yönelimi ilişkilendirdik. Hız ifadesi içeren bir düzen oluştururken, bunu hatırlamanız gerekir ve resimlerinizin metinle aynı yönde hareket etmesini sağlayın.
05/07
Görüntüleyicinin Gözünü Yavaşlatmaya Zorlama
At ve metin her ikisi de aynı yöne gittiğinde, ima edilen hız artar.
06/07
Web Fotoğraflarındaki Gözleri İzle
Fotoğraflı birçok Web sitesi bu hatayı yapar - sayfadaki bir kişinin fotoğrafını çeker ve kişi içeriğinden uzaklaşır . Bu eski tasarımında About.com Web Tasarım sitesinde bile görülebilir.
Gördüğünüz gibi, fotoğrafım bazı metnin yanında yer alıyor. Ama ben bu metinden uzağa bakıyorum, neredeyse sırtım ona döndü. Bir gruptaki iki insan arasında vücut dilini gördüyseniz, yanında olduğum kişiyi sevmediğimi (bu durumda metin bloğu) varsaymak kolay olurdu.
Birçok göz izleme çalışması, insanların web sayfalarında yüzleri gördüğünü göstermiştir. Ve ilgili çalışmalar gösteriyor ki, resimlere baktığımızda insanlar, resmin neye baktığını görmek için gözlerini bilinçsizce takip edecekler. Sitenizdeki bir fotoğraf tarayıcının kenarına bakıyorsa, müşterileriniz burada görünecek ve ardından geri düğmesine basacaktır.
07/07
Herhangi Bir Fotoğraftaki Gözler İçeriği Karşılamalıdır
About.com için yeni tasarımda, fotoğraf biraz daha iyi. Şimdi gözlerim daha ileriye doğru bakıyor ve sol tarafa baktığım küçük bir ipucu var - metnin nerede olduğu.
Bu pozisyon için daha iyi bir fotoğraf, omuzlarımın da metne doğru açıldığı bir yer olurdu. Ama bu ilk fotoğraftan çok daha iyi bir çözüm. Ve görüntünün solda olduğu gibi içeriğin sağında olacağı durumlar için, bu iyi bir uzlaşma olabilir.
Unutmayın ki, insanların yüzlerinin görüntüleri en çok dikkat çekerken, aynı şey hayvan fotoğrafları için de geçerlidir. Örneğin, bu örnek düzende, köpeklerimin sola baktığını görüyorum, ancak görüntü doğru değil. Yani sayfadan bakıyorlar. Bu düzen, köpeklerin oryantasyonunu değiştirdiysem ekranın merkezine bakacak olursak daha iyi olur.