Duyarlı Görüntü Galerileri için 9 Temel Kural
Duyarlı tasarım, web geliştirmenin gerekli ve gerekli bir parçasıdır. Geç yanıt veren web tasarımının en büyük sorunlarından biri de görüntü olmuştur. Birçok kişi, duyarlı bir sitede görüntülerin görüntülenmesinin en iyi yolunu tartışıyor. Ve sonra, resim galerileri ne olacak?
Görüntü galerileri, tek görüntülerden çok daha karmaşıktır; Web sitenizdeki tüm duyarlı görsel galerileri uygularken düşünmek için daha fazla değişken ve şeyler var. Duyarlı görüntü galerilerini doğru şekilde uygulamak için bazı yararlı ipuçlarına bir göz atalım.
1) Slayt gösterileri: mümkün olduğunda gizle nav
Bir tablette veya mobil cihazda gezinme öğeleriniz olmayabilir, ancak bir masaüstünde, bu öğeleri gerekene kadar gizlemek iyi bir fikirdir. İleri ve geri oklar ve gezinme noktaları gibi öğeler, yalnızca bir kişi kayan resim galerisi üzerinde fareyle görüntülendiğinde görüntülenecek şekilde ayarlanmalıdır. Bu, dikkat dağınıklıklarını önler ve içerik ve nav unsurları arasındaki çelişkileri önlersiniz. Tüm deneyim daha az hırpalanmış hissediyor.
2) Çok fazla portre görüntüden kaçının
Resimlerin bir ızgarası olan bir galeri uyguluyorsanız, manzaraya sahip görüntüleri veya mümkünse kare seçmek isteyeceksiniz. Bu onları küçük bir ekranda görmeyi kolaylaştırır. Portre görüntüleri portre modunda akıllı telefonlarda iyi olurdu, ancak manzara yönelimli telefonun geniş izleme alanı portre görüntülerini görüntülemeyi zorlaştırıyor. Peyzaj en iyisi, ama manzara bir seçenek değilse, meydan için yerleşebilirsiniz. Tüm görüntüler bir görüntüleme alanına sığacak şekilde ayarlanabilir, ancak yatay ekranda dikey görüntüler çok küçük görünecektir. Resimleriniz, ekranın daha fazla alanını dolduracak ve daha büyük görünecek şekilde kare veya yatay görüntüler olarak görünmeyecek. Görüntüleri seçerken, kişinin bunları göz önünde bulundurduğundan emin olun.
3) Tabletlerde ve mobil cihazlarda hareketleri kullanın
İnsanlar dokunmatik ekranlarında jestleri kullanmayı seviyor. Bir görüntüyü kayıyor gibi hissettiklerinde daha fazla güçlenirler, çünkü deneyim daha çekicidir. Bir mobil cihazda küçük oklara veya seyir noktalarına dokunmaya çalışmak çok yorucudur. Parmağınızı alıp bir görüntüyü yukarı, aşağı, sola veya sağa kaydırmak çok daha doğal.
4) Işık kutularından kaçının: bunları mobil cihazlarda devre dışı bırakın
Daha ayrıntılı olarak görüntülenmesi gereken makineler veya öğeler gibi ürün görüntüleriniz varsa (kumaş, mücevherler vb.), Daha büyük görüntülere sahip bir ışık kutusu anlamlıdır. O zaman bile, sadece masaüstünde kullanılmalıdır. Tablet ve mobil ekran boyutlarına ayırdığınızda, ışık kutuları devre dışı bırakılmalıdır. Çok sayıda kullanıcı deneyimi sorunlarına neden olabilirler. Bir şey olursa ve ışık kutusu doğru boyutta değilse, çıkış düğmesine erişemeyebilir veya görüntüler düzgün görüntülenmeyebilir.
5) nav elemanları kullanırken, onları göze batmayan
Önemli sayıda slayt içeren kayan bir resim galeriniz varsa, navigasyon mantıklı. Kullanıcıları her şeyden geçmek için beklemek istemezsiniz. Kendi hızlarında kolayca tıklayabilir, içeri girebilirler, neye ihtiyaç duyduklarını alabilir ve dışarı çıkabilirler. Bu öğeleri kullanırken, yolun dışında kalan yerlere koyduğunuzdan emin olun. Metin veya diğer bağlantıların üzerinde gezinme noktaları yok. Ayrıca aşırı karmaşık kontrollerden kaçının. Bunlar çok yer kaplar, kullanıcıları içeriden ayırır ve dağınık bir görünüm yaratır. Kullanıcıların belirli görüntülere geçiş yapmak veya atlamak için tıklayabilecekleri noktalara sahip olmaları, ileri ve geri oklara sahip olmaları yeterlidir. Abartma!
6) görüntüleri ve videoları karıştırmayın
Farklı medyaları karıştırmak genellikle iyidir, ancak videoları beklenmedikleri yerlerde karıştırmak sorunlara neden olabilir. Bir kullanıcının yanlışlıkla duyması için ses çalan bir videoyu başlatmasını istemezsiniz. Ayrı videolar ve görüntüler, ne beklemeleri gerektiğini biliyorlar. Kimse bu tür sürprizlerden hoşlanmaz.
7) Görüntülerin maksimum genişliklerinin ötesine ölçeklemediğinden emin olun.
Bu önemlidir, çünkü bir alan için çok küçük olan görüntülerin pikselli ölçeklemesinden kaçınabilirsiniz. Görüntüler, bir mobil cihazın (çoğu durumda)% 100'ünü dolduracak kadar geniş olmalı, ancak masaüstü boyuttaki siteler yalnızca maksimum genişlik% 100'e ayarlanmalıdır. Birisinin bu büyük 27 ”ekranlardan birine sahip olduğu ve tarayıcı genişliğini sürüklediğinde, resmin, istenen boyutta geçmiş ile ölçeklendiği bazı durumlar gördüm.
8) Görüntü ölçeklendirme
Görüntü ölçeğiniz varsa, aşağı ölçeklendiğinden emin olun, yukarı değil. Resimleriniz için tam boyutları ayarlamak en iyisidir. Çoğu kez, bir boyut için bir yüzde kullanılırken, diğer boyut otomatik olarak ayarlanır. Örneğin, bir resmin tarayıcının genişliğinin% 50'sini kapsamasını istiyorsanız, resmin genişliğini% 50 ve yüksekliği otomatik olarak ayarlayabilirsiniz.
9) Resim altyazıları kullanmaktan kaçının
Resim altyazıları veya diğer herhangi bir metin, siz ve kullanıcılarınız için her türlü soruna neden olabilir. İlk sorun, metni bir mobil cihaza sığdırmanın zor olmasıdır. Akıllı telefonlarda olduğu gibi alanınız sınırlıdır, ancak metin eklemeyi denemek, tüm deneyimin karmaşık ve tıkanmış hissetmesine neden olabilir. Başka bir sorun, kullanabileceğiniz metin miktarında sınırlı olmanızdır. Bir başlık veya herhangi bir ek metin eklemek, karşılık gelen metin değişkenini karışıma ekler. Sözcük aralarını ve görüntü ile birlikte görünen birden fazla metin satırının nasıl olacağını düşünmelisiniz. Metin bir bindirme olarak kullanılıyorsa, resmin üzerine düştüğü yer ile de ilgilenmeniz gerekir. Görüntünün ışık alanına ışık metni, metni okunamaz hale getirecektir. Kontrast anahtardır ve her görüntü farklıdır.
Sonuç
Web tasarımının herhangi bir yönüne gelindiğinde alt satır, iyi çalışması ve kullanıcının akılda tutulması gerektiğidir. Web sitenizi kimse kullanamazsa, geri gelmeyeceklerdir. Bu basit dozu takiben ve yanıt veren resim galerilerinin yapılmaması, kullanıcıların resimlerinizi görüntülerken sık karşılaşılan sorunlara girmeyecek şekilde yapmasını sağlayacaktır.