Back

Modüler ana sayfa

Written by on Salı 11 Nisan 2017

Ana sayfa uygulamanızın ilk ekranıdır—ve her elementin yerleştiği çok önemli bir öğesidir. GoodBarber 4.0 ana sayfayı yönetmek için ultra esnek modüler bir sistem sunar, bu uygulama üzerinde iyi bir kullanıcı deneyimi için başlangıç noktasıdır. 
Modüler ana sayfa

Temel navigasyon ve seçilen içerik

Ana sayfa çoğu kullanıcı davranışının gerçekleştiği bölgedir—kullanıcıların %90'ı yalnızca uygulamanın ilk bölümünü ziyaret eder! GoodBarber'ın önceki versiyonları ile oluşturulan uygulamaların istatistikleri bize bunu gösterdi.

Sektörün genel trendi olarak, ayrıca her geçen gün daha fazla uygulamanın temel navigasyonu yönetmek için ana sayfayı kullandığını gözlemledik. 

Bu iki gözlem bizi V4 uygulamaları için yeni bir Ana Sayfa konsepti düşünmeye itti. GoodBarber 4.0 ile, Ana Sayfa uygulamayı açtığınızda hangi içeriği ön plana çıkartmak istediğinize karar vermenizi sağlar. Ayrıca uygulamanızı oluştururken ilk varış noktasına doğru linkleri görüntülemenize izin verir. Sonuç olarak, bu konseptin uygulamanızdaki trafiği olumlu etkileyeceğine inanıyoruz. 
Modüler ana sayfa

Sınırsız modülerlik

GoodBarber 4.0 ile, her Ana sayfa özgündür. Bu yeni özellik GB'ı ilk başlattığımızda izlediğimiz yolla aynı yöndedir: her uygulama kendine özgü tasarımı korur. Bu sebeple GoodBarber 4.0 ile ana sayfa oluşturmak için 66 parçacık tasarladık.

Parçacıklar fonksiyonel modüllerdir. Tasarlamak için, öncelikle farklı şablonların mobilde görünümünü göz önünde bulundurduk. Mobil kullanıcı deneyiminde kullanılabilir alan başarılması çok da kolay olmayan bir durum! Bu sebeple mobili ön plana çıkartmak yaratıcılığımızı zorladı, orijinal modern tasarımla zengin, gelişmiş özelliklerin ve temiz bir arayüzün uyumlu olması hedefimizdi. 
Modüler ana sayfa

Arka ofis üzerinden, Ana sayfa mobil görünümden tasarlanmalıdır. Ana sayfanızı yatay dilimlere bölünmüş sanal bir banner olarak düşünebilirsiniz. Her bir dilim bir parçacıktan oluşur. Parçacıkların çeşitliliği sayfayı dinamikleştiren öğedir. 

Parçacıklara bağlı şablonlar mobil, masaüstü ve tablet eğilimi gösterir. Ana sayfanıza parçacık eklediğinizde, her bir ekran boyutuna eklediğiniz parçacıklar ekran boyutuna otomatik olarak adapte olur. Buna ek olarak, belirli detayları ekran boyutuna uygun hale getirerek ayarlamak hala size ait bir görevdir. 

Parçacıklar

Parçacıklar 2 kategoriye ayrılır. İçerik parçacıkları ve navigasyon parçacıkları. 

GoodBarber websitesi UI indeks sayfası üzerinden her bölüm türüne özgü navigasyon ve içerik parçacıkları için mevcut şablonların modellerini inceleyebilirsiniz. 
Modüler ana sayfa

İÇERİK PARÇACIKLARI

İçerik parçacıkları ana sayfa üzerinde uygulamanın bölümlerine bağlı öğeleri görüntülemek için kullanılabilir. 3 aileye bağlıdırlar. 

- liste: görüntülenen içerik liste formatındadır, belirli öğeleri ön plana çıkartmak için (yukarıdaki örnekte parçacık n°1 ve n°6). Bölüm içinde öğeleri kategorilere göre görüntülemeyi seçebilirsiniz (parçacık n°2 "Haberler" bölümünün "Radar" kategorisini görüntüler). 

- banner: bu parçacıklar ana sayfadaki kullanılabilir alanı fonksiyonel hale getirir. İçeriği tarama yatay kaydırma ile gerçekleştirilir (parçacık n°3).

- highlight: bu parçacıklar yarı-dinamiktir. Görüntülenen ilk element bölüme yönlendiren linktir, diğer elementler ise bölüme bağlı öğelerdir (parçacık n°5). Öğeleri görüntülemek için sıralama seçenekleri çeşitlilik gösterir: tarihe göre, rastgele, alfabetik sıraya göre...)

NAVİGASYON PARÇACIKLARI

Bu parçacıklar bölümlere link oluşturmak için kullanılabilir, eylemleri harekete geçirmek için yada harici linklere yönlendirme yapmak için. 3 ayrı aileye bağlıdırlar. 

- liste: bu parçacıklar varolan maksimum alanı kullanırlar. Linkler liste formatında görüntülenir. Harekete geçirilecek eylemi ön plana çıkarmak için başlık, alt yazı, buton, resim veya ikon gösterebilirler (örnekteki parçacık n°4).

- banner: bu parçacıklarda görüntülenen linkleri tarama yatay kaydırma ile gerçekleştirilebilir. Sonuç olarak, kullanılan alanı daraltmak için kullanılabilirler. Başlıklar, alt yazılar, butonlar, resimler ve ikonlar bu parçacık ailesinde mevcuttur. 

- remote: bu parçacıklar 6'ya kadar link bulundurabilir, yalnızca bir başlık ve ikon ile. Genelde sıkıştırılmış halde ve Ana sayfa'nın alt kısmında (alt bilgi olarak) yer alırlar. 

GoodBarber 4.0 modüler ana sayfası uygulama başlatılır başlatılmaz trafiği olumlu yönde etkilemeyi hedefler. İçerik ve navigasyon parçacıklarının kombinasyonu ile, ana sayfanız tamamen özgündür. Artık, uygulamanızda en iyi kullanıcı deneyimini sunmak sizin elinizde! 

Bonus

Konu ile ilgili üstteki öğretici videodan da yararlanabilirsiniz. Ayarlar > Alt yazı seçeneklerinde Türkçe de mevcuttur ;) 

Çeviren Hazal Çelik 



Enter your email address