Ana Sayfa Tasarımı

Mobil uygulamanızın ana sayfa tasarımını, uygulamanıza serB2B sisteminize tanımlı dil seçeneklerine göre özelleştirebilir ve App Store, Google Play Store ve Huawei App Gallery* uygulama mağazalarında ek bir güncelleme onayı olmadan anında yayınlayabilirsiniz.

Admin ekranında Tasarım kısmından SerMobileBoss bölümüne girerek ana sayfa tasarımına dilediğiniz kadar widget ekleyerek özelleştirebilir ve kolayca yönetebilirsiniz.

*serMobile PRO uygulamanız hangi uygulama mağazalarında yayında ise tasarım değişikliği gerçekleşir. Uygulamanızın tüm uygulama mağazalarında yer alması ile ilgili bilgi almak için [email protected] adresi ile iletişime geçebilirsiniz.

Başlamadan Önce

serMobile PRO | Image Dosyaları Nasıl Oluşturulur?

Mobil uygulamanızın ana sayfasındaki tasarımınızın nasıl olduğuna karar verip, gerekli imajları oluşturun ve bilgisayarınıza her bir imaj ayrı olacak şekilde kaydedin.

bilgi

serMobile PRO Widget komponentlerinin sunduğu kullanım modellerine bakarak tasarımınızı hazırlayın. İmaj dosyalarınızı ayrı oluşturun ve bilgisayarınıza .png .jpg veya .jpeg formatında kaydedin.

Video içerikler için oluşturduğunuz dosya formatı .mp4 olmalıdır.

ipucu

En yüksek kalitede içerik gösterimi için imaj genişliklerini 1000 px olarak belirleyin.

Uygulamanın optimum hızda çalışabilmesi için hazırladığınız imaj dosyalarının (.png .jpg .jpeg) boyutları 1 MB boyutundan küçük olması daha iyi bir kullanıcı deneyimi sağlamaktadır.

Uygulamanın optimum hızda çalışabilmesi için hazırladığınız video dosyalarının boyutları 2 MB boyutundan küçük olması daha iyi bir kullanıcı deneyimi sağlamaktadır.

serMobile PRO | Yönlendirmeler Nasıl Yapılır?

Eklenen her widget tıklandığında belirli alanlara yönlendirilebilir. Kullanıcı deneyimini daha etkin kılmak için eklenen her bir widget için yönlendirmeleri aşağıdaki senaryolarda yapabilirsiniz.

Eklenen widget türlerinde yönlendirme yapabilmek için id ve type değişkenlerine uyumlu veri girişi yaparak yönlendirmeler sağlanmaktadır.

1.Üye Kayıt Ekranına Yönlendirme

Üye kayıt ekranına yönlendirme yapmak için aşağıdaki değerleri ilgili widget ekleme işlemi yaparken tanımlayınız.

Örnek:

	ID	TYPE
Üye Kayıt	200	register

2.Marka/Tedarikçi Ürün Listesine Yönlendirme

Bir widget türüne tıklandığında belirli bir marka/tedarikçi ürün listesine yönlendirme yapmak için ilgili markanın Id değeri ile birlikte aşağıdaki şekilde tanımlama yapın.

Örnek:

	ID	TYPE
Marka/Tedarikçi	1	brand

bilgi

Markanın Id değerini bulabilmek için admin panelinden Listeler > Markalar bölümüne tıklayın.

3.Ana Kategoriden Alt Kategori Listesine Yönlendirme

Bir widget türüne tıklandığında belirli bir ana kategoriye bağlı alt kategorilerin listesine yönlendirme yapmak için ilgili ana kategorinin Id değeri ile birlikte aşağıdaki şekilde tanımlama yapın.

Örnek:

	ID	TYPE
Ana Kategori	100	main_category

bilgi

Ana Kategorinin Id değerini bulabilmek için Listeler / Kategoriler bölümüne tıklayın ya da sitenizdeki ana kategoriye tıklayın ve URL' in sonunda bulunan sayı değerini not edin.

4.Alt Kategorideki Ürün Listesine Yönlendirme

Bir widget türüne tıklandığında belirli bir alt kategoriye bağlı ürünlerin listesine yönlendirme yapmak için ilgili alt kategorinin Id değeri ile birlikte aşağıdaki şekilde tanımlama yapın.

Örnek:

	ID	TYPE
Alt Kategori	101	category

bilgi

Alt Kategorinin Id değerini bulabilmek için Listeler / Kategoriler bölümüne tıklayın ya da sitenizdeki alt kategoriye tıklayın ve URL'in sonunda bulunan sayı değerini not edin.

5.Filtrelenmiş Ürün Listesine Yönlendirme

Bir widget türüne tıklandığında filtre edilmiş belirli bir ürün listesine yönlendirme yapmak için aşağıdaki şekilde tanımlama yapın.

Örnek:

	ID	TYPE
Filtrelenmiş Liste	filter_kumas=5	filter

Bilgi: Filtrelenmiş bir ürün listesinin Id değerini bulabilmek için sitenizdeki ilgili filtreyi seçtikten sonra URL'in sonunda bulunan "urunler/all?filter_mevsim=172" ? ile tanımlı alandan sonraki uzantıyı kopyalayıp Id alanına yapıştırın.

6.Pop-Up İçeriğine Yönlendirme

Bir widget türüne tıklandığında bir Pop-Up ekranı açmak için Pop-Up listesinde önceden tanımlanmış içeriklerin gösterimi için aşağıdaki şekilde tanımlama yapın.

Örnek:

	ID	TYPE
Pop-Up İçeriği	1	modal

bilgi

Pop-Up içeriklerine erişmek veya yeni bir Pop-Up içeriği oluşturmak için Admin paneli üzerinden Tasarım > SerMobileBoss ekranına gidin.

serMobile PRO | Hangi Widget Ne İşe Yarar?

Mobil uygulamanızın ana sayfa tasarımını doğru bir biçimde SerMobileBoss ekranından ilgili widget türlerinden seçim yaparak ekleyin.

Widget Türleri

Widget | IMAGE

Bu widget ile dilediğiniz resmi mobil uygulamanıza kolayca ekleyebilirsiniz.

1. Widget Ekle butonuna basın.
2. IMAGE widget türünü seçin.
3. Url bölümündeki Choose File tıklayarak yüklemek istediğiniz imaj dosyasını seçin.
4. Kaydet butonuna basın.

Eğer yüklemek istediğiniz imaj dosyasına yönlendirme yapmak istiyorsanız id, type değerlerini girin.

ipucu

En uygun görüntü kalitesini elde edebilmek için height percent değerini doğru girin.

Height Percent hesaplamak için örnek:

Çıktı Örneği:

Widget | IMAGECAROUSEL

Bu widget ile dilediğiniz resimleri öncelikle Admin paneli üzerinden Tasarım > Slaytlar bölümüne ekleyin. Oluşturmuş olduğunuz Slayt'ın ID değerini IMAGECAROUSEL widget eklerken id alanına girin.

bilgi

IMAGECAROUSEL için Slayt bölümü üzerinden eklenmiş olan resimler horizontal olarak hareket eder.

ipucu

Slayt ID değerini bulmak için oluşturduğunuz Slayt ın bulunduğu sayfa URL' in sonunda bulunan sayı değerini not edin.

1. Widget Ekle butonuna basın.
2. IMAGECAROUSEL widget türünü seçin.
3. Item_count alanına kaç adet resim görüntülenmesini istiyorsanız belirtin. (Örnek:4)
4. Slayt ID değerini id alanına girin.
5. Kaydet butonuna basın.

Eğer yüklemek istediğiniz imaj dosyasına yönlendirme yapmak istiyorsanız Slaytlar içerisine resim eklerken karşınıza çıkan penceredeki Type bölümüne type değerini URL bölümüne id değerini girin.

ipucu

En uygun görüntü kalitesini elde edebilmek için height percent değerini doğru girin.

Height Percent hesaplamak için örnek:

Çıktı Örneği:

Widget | SLIDER

Bu widget ile dilediğiniz resimleri öncelikle Admin paneli üzerinden Tasarım > Slaytlar bölümüne ekleyin. Oluşturmuş olduğunuz Slayt'ın ID değerini SLIDER widget eklerken id alanına girin.

bilgi

SLIDER için Slayt bölümü üzerinden eklenmiş olan resimler horizontal olarak hareket eder.

ipucu

Slayt ID değerini bulmak için oluşturduğunuz Slayt ın bulunduğu sayfa URL' in sonunda bulunan sayı değerini not edin.

1. Widget Ekle butonuna basın.
2. SLIDER widget türünü seçin.
3. Slayt ID değerini id alanına girin.
4. Kaydet butonuna basın.

Eğer yüklemek istediğiniz imaj dosyasına yönlendirme yapmak istiyorsanız Slaytlar içerisine resim eklerken karşınıza çıkan penceredeki Type bölümüne type değerini URL bölümüne id değerini girin.

ipucu

En uygun görüntü kalitesini elde edebilmek için height percent değerini doğru girin.

Height Percent hesaplamak için örnek:

Çıktı Örneği:

Widget | DIVIDER

Bu widget ile dilediğiniz widget türleri arasına divider ekleyebilirsiniz.

1. Widget Ekle butonuna basın.
2. DIVIDER widget türünü seçin.
3. Height değerini px cinsinden girin. (Örnek: 10px ise height:10)
4. Kaydet butonuna basın.

Widget | IMAGELIST

Bu widget ile dilediğiniz resimleri mobil uygulamanıza kolayca ekleyebilirsiniz.

1. Widget Ekle butonuna basın.
2. IMAGE widget türünü seçin.
3. Url bölümündeki Choose File tıklayarak yüklemek istediğiniz imaj dosyasını seçin.
4. Kaydet butonuna basın.
5. Yukarıdaki 4 adımı yüklemek istediğiniz resim sayısı kadar aynı widget detay üzerinde tekrar edin.

Örnek:

Eğer yüklemek istediğiniz imaj dosyasına yönlendirme yapmak istiyorsanız id, type değerlerini girin.

ipucu

En uygun görüntü kalitesini elde edebilmek için height percent değerini doğru girin.

Height Percent hesaplamak için örnek:

Çıktı Örneği:

Widget | TEXT

Bu widget ile dilediğiniz metni mobil uygulamanıza kolayca ekleyebilirsiniz.

1. Widget Ekle butonuna basın.
2. TEXT widget türünü seçin.
3. Text bölümündeki Choose File tıklayarak yüklemek istediğiniz imaj dosyasını seçin.
4. Kaydet butonuna basın.

Çıktı Örneği:

Widget | GRID

Bu widget ile dilediğiniz miktarda serB2B'ye eklediğiniz ürünleri 2'li gösterim olacak şekilde mobil uygulamanıza kolayca ekleyebilirsiniz.

1. Widget Ekle butonuna basın.
2. GRID widget türünü seçin.
3. limit alanına gösterimi olacak ürün adetini giriniz. (Örnek:40)
4. order_by alanına son eklediğiniz üründen itibaren gösterim için desc (azalan), ya da ilk eklediğiniz üründen itibaren gösterim için asc (artan) şeklinde tanımlayın.
5. Kaydet butonuna basın.

Çıktı Örneği:

Mobil Uygulamanız Artık Hazır!

Yukarıdaki adımları izleyerek serMobile PRO mobil uygulamanızın tanımlı dil seçeneklerinden biri için uygulamanızın tasarımı artık hazır!

serMobile PRO | Farklı Dillerde Tasarım

Mobil uygulamanızda farklı dillerde tasarım yapabilmek için öncelikle serB2B sisteminizde tanımlı dil seçeneklerinden birini seçin (Örnek:TR, EN, RU, FR, AR) ve ardından ilgili dile özgü widget türlerini ekleyin. Tasarımınızı serMobile PRO | Ana Sayfa Tasarımı dokümanındaki adımları izleyerek tamamlayın.

bilgi

serMobile PRO uygulamanız yeni dil eklemek ve bilgi almak için [email protected] adresi ile iletişime geçebilirsiniz.