Web Tasarımında Slider Nedir?
Web Tasarımında Slider Nedir?
Bu yazıda, herhangi bir yerin başlığından sonra izleyici üzerinde belki de en önemli etkiye sahip olan sitenin bu hayati bölümünü tasarlamanın farklı yaklaşımlarını öğrenmek ve bunu yapmanın en iyi yolunu öğretmek istiyoruz.
Bu makalede okuduğunuz
1. Otomatik yüksekliğe sahip tam genişlikte görüntüler
2. Tam genişlikte sabit yükseklikte görüntüler
3. Sabit yüksekliğe ve otomatik genişliğe sahip görüntüler
4. Birden çok boyut için birden çok görüntü kullanın
Sitenin kaydırıcı resimlerinin boyutları tatmin edici değil ve yöneticinin doğru işleyişini gerekçelendirecek ve açıklayacak bir yöntemi yok.
Tartışılan asıl konunun, mobil cihazların ve hatta masaüstü monitörlerin genişlik ve yükseklik farkından dolayı her birinin belirli bir şekilde görüntülenen kaydırıcıların farklı cihazlarda görüntülenme şekli olduğunu açıklamak gerekir. Bazı yönlerden, kullanıcıya düzgün bir görünüm verebilmek için görüntünün bir bölümünü kaybederiz veya tüm resmi gösterebiliriz ve hiçbir şey kaybolmaz. Öte yandan, kullanıcı için nispeten kötü bir deneyim yaşıyoruz.
Örneğin mobilde görüntünün yüksekliği sığ çünkü ekran masaüstünde dikey ve ses veriyor. Sonuçta ekran yatay ve geniş.
Bu yazıda, herhangi bir yerin başlığından sonra izleyici üzerinde belki de en önemli etkiye sahip olan sitenin bu hayati bölümünü tasarlamanın farklı yaklaşımlarını öğrenmek ve bunu yapmanın en iyi yolunu öğretmek istiyoruz.
1. Otomatik yüksekliğe sahip tam genişlikte görüntüler
Web sitesinin tasarımı, herhangi bir boyuttaki görsellerin her zaman tüm sayfa genişliğinin %100’ünü kaplayacağı, yani sol köşeden sağ tarafa tüm fikri gösterecek şekilde yapılabilir. Bu durumda resimlerin yüksekliği bizim kontrolümüzde değil; ekranın ne kadar devam edeceği ekran boyutuna bağlıdır; uzunluğun genişliğe oranı artar veya azalırsa, yükseklik buna göre artar veya azalır.
Genişliğin %100’ü ve hatta genişliğin %100’ü olan ve görüntünün karesine iliştirilmiş gibi tüm ekranı kaplayan, ancak kesinlikle her siteyi aç başka bir cihazda veya yükseklik azaldı. Alt kısım sayfaya girmiş veya boyut küçültülmüş ve görüntünün bir kısmı küçülmüş ve kaydırılması gerekiyor.
2. Tam genişlikte sabit yükseklikte görüntüler
Öncekiyle aynı yöntemi göz önünde bulundurarak yüksekliği sınırlandırırsanız, görüntünün tamamı her zaman enine taraftan ve her iki taraftan da görülür, ancak boyut sabit olduğu için bazı cihazlarda, alt kısımlarda veya ıskalamada mümkündür. resmin üst kısmı.
Çünkü yükseklik ölçülerinde kalıcı olarak sabitlenmiş durumdayız ve bir yandan da görüntü tam genişlikte, üstten ve alttan projeksiyonlarımız olması gerekiyor.
3. Sabit yüksekliğe ve otomatik genişliğe sahip görüntüler
Bu yöntem, Waqaa’da en popüler olan önceki iki yöntemin birleşimidir ve genellikle internette gördüğünüz siteler bu şekilde tasarlanmıştır. Yani, yükseklik her zaman sabittir, bu genellikle cihazın tüm alanını kaplar, ancak önceki durumlarda açıklananla aynı nedenle, çünkü görüntü, boyut farkıyla telefonun yüksekliğinden alınır. farklı cihazlar, fikir sol ve sağ taraftan kaybolur. Başka bir deyişle, görüntünün bir kısmı her iki taraftan da çıkıntı yapıyor, yani artık görünmüyor.
Bu durumda görseller, görsel sayfadan kaldırıldığında kullanıcının kendisini eksik hissetmemesi için dikkat çekici bir hassasiyet ve zekice kullanılmalıdır. Bu, görüntünün birincil amacı ve afiş veya posterin vurgulanmasının merkeze yerleştirilmesi gerektiği anlamına gelir. Örneğin, ortasında benzersiz ve güzel bir mimariye sahip bir ev ve her iki yanında bir göl veya orman olan bir manzara resmini düşünün.
Afişteki yazı fotoğraf şeklinde yazıp köşelere yerleştirildiğinde ekranın genişliği artıp küçüldükçe yazının görüntüden dışarı fırlaması da önemli bir konu. Sitenin bir kusuru olduğu ve resmi kestiği çok açık ama yazı görselde yer almıyorsa veya ortasına yazılmışsa her boyutta tam metin elimizde mevcut.
4. Birden çok boyut için birden çok görüntü kullanın
Bu yöntem, Waqaa‘da en popüler olan önceki iki yöntemin birleşimidir ve genellikle internette gördüğünüz siteler bu şekilde tasarlanmıştır. Yani, yükseklik her zaman sabittir, bu genellikle cihazın tüm alanını kaplar, ancak önceki durumlarda açıklananla aynı nedenle, çünkü görüntü, boyut farkıyla telefonun yüksekliğinden alınır. farklı cihazlar, fikir sol ve sağ taraftan kaybolur. Başka bir deyişle, görüntünün bir kısmı her iki taraftan da çıkıntı yapıyor, yani artık görünmüyor.
Bu durumda görseller, görsel sayfadan kaldırıldığında kullanıcının kendisini eksik hissetmemesi için dikkat çekici bir hassasiyet ve zekice kullanılmalıdır. Bu, görüntünün birincil amacı ve afiş veya posterin vurgulanmasının merkeze yerleştirilmesi gerektiği anlamına gelir. Örneğin, ortasında benzersiz ve güzel bir mimariye sahip bir ev ve her iki yanında bir göl veya orman olan bir manzara resmini düşünün.
Afişteki yazı fotoğraf şeklinde yazıp köşelere yerleştirildiğinde ekranın genişliği artıp küçüldükçe yazının görüntüden dışarı fırlaması da önemli bir konu. Sitenin bir kusuru olduğu ve resmi kestiği çok açık ama yazı görselde yer almıyorsa veya ortasına yazılmışsa her boyutta tam metin elimizde mevcut.
4. Birden çok boyut için birden çok görüntü kullanın
Bu yöntem şüphesiz idealdir ve her mantıklı kişi, her bir cihaz için bir görüntüyü doğru yere tasarlamayı ve yerleştirmeyi sever. İçerik oluşturmak için biraz çalışmak daha karmaşık olabilir ve her slayt için birkaç resim tasarlamamız gerekiyor ama buna değer ve bu en iyi seçim.
Genellikle cihazlar birkaç parçaya bölünür ve bu görüntü 2 veya 3 farklı boyutta tasarlanır; örneğin mobil, tablet ve masaüstü için farklı boyutlarda üç adet resim tasarlanmakta ve siteye cep telefonu ile giren kullanıcı en geniş görsele sahip olmaktadır. Kamera yüksek bir yükseklik görecek ve tablet ve masaüstü ekranı kullanıcısı görünümlerini benzer şekilde görecektir.
Tasarım ekibinde altı standart bedenimizi kullanıyoruz:
360 genişlikte XS boyutu
Genişliği 640 olan SM boyutu
Boyut md, genişlik 768
1024 genişliğinde LG boyutu
1280 genişliğe sahip XL beden
Genişliği 1536 olan XXL beden
Elbette bu ölçüler tasarımlarımızın temeli olarak kabul ediliyor ve sitenin tüm bölümlerini responsive hale getirmek için bu kalıbı takip ediyoruz. Yine de, sitenin ana sayfa slayt gösterisini veya kahraman bölümlerini tasarlamak için, hassas alanlar için genellikle üç resim yüklemek mümkündür. Yeter diyoruz ve altı beden için de tasarım yapmaya gerek yok. Bu üç boyut ile kullanıcı için makul bir memnuniyet ve deneyim yaratabilirsiniz ve genel siteler için iki görsel de yeterlidir.
Mobil görünüme uygun görüntüyü, masaüstü için ideal olan fikirden ayırmanız yeterlidir ve kullanıcıya büyük ölçüde mükemmel bir deneyim sunabilirsiniz.
