Mobile UI Prototipleme

Bu öğrenme içeriğinde, tasarımını hazırladığımız mobil uygulamanın arayüz prototiplemesini gerçekleştireceğiz. Prototipleme işlemi sürecinde Kuika tarafından sunulan sistem aksiyonlarını kullanacağız.

Hazırsanız başlayalım.

1. Dashboard ekran tasarımının bulunduğu Homepage isimli ekranı açın.
2. Header’da yer alan bildirim ikonunu seçin ve Navigate aksiyonu ekleyin.
3. Açılacak ekran olarak Notifications isimli ekranı seçin ve Current Page seçiminde bırakın.
4. Yine Dashboard'da ekranda yer alan fikirlere yönelik detay ekranına erişmek için GalleryView içinde yer alan Kolon'u seçin ve Navigate aksiyonu ekleyin.
5. Yönlendirilecek olan SuggestionDetail ekranını seçin ve Current Screen seçimini yapın.
6. Fikirlerin listelendiği alanda Vote ve Comment ikonlarına ilgili ekranlara yönlendirmeyi sağlayan Navigate aksiyonunu ekleyin, ekran açılma biçimlerini seçin ve ekran boyutlarını düzenleyin.
7. Tabbar’da yer alan kolonların her birini, temsil ettiği ekranlara Navigate aksiyonu ile yönlendirin. Yönlendirme işlemlerinde ekran açma biçimi ve boyutlarını düzenleyin.

Tabbar’da yer alan kolonların Navigate aksiyonlarını bağladıktan sonra Fikir listelerinin yer aldığı listeleme ekranını açın.

8. Listeleme ekranında Header’da yer alan filtreleme ikonunu seçin ve Navigate aksiyonu ekleyin.
9. İlgili ekranı seçip ekran açılma biçimini Drawer olarak seçin.
10. Açılacak ekranın yönünü ve boyut ayarlamasını yapın.
11. Header’da yer alan diğer bir ikon olan bildirim ikonunu seçin ve Navigate aksiyonu ekleyin.
12. Açılacak ekran olarak Notifications isimli ekranı seçin ve Current Page seçiminde bırakın.
13. Fikirlerin detay ekranına yönlendirme sağlamak için GalleryView içinde yer alan Kolonu seçin ve Navigate aksiyonu ekleyin.
14. Yönlendirilecek olan SuggestionDetail ekranını seçin ve Current Screen biçiminde açılmasını sağlayın.
15. Listeleme alanında Vote ve Comment ikonlarına ilgili ekranlara yönlendirmeyi sağlayan Navigate Aksiyonunu ekleyin, ekran açılma biçimlerini seçin ve ekran boyutlarını düzenleyin.
16. Tıpkı Dashboard’da olduğu gibi bu ekranda da Tabbar’da yer alan kolonların her birini, temsil ettiği ekranlara Navigate aksiyonu ile yönlendirin. Yönlendirme işlemlerinde ekran açma biçimi ve boyutlarını düzenleyin.

Şimdi New Suggestion başlıklı yeni fikir ekleme ekranına geçelim.

17. Header’da yer alan ikonu seçin.
18. GoBack aksiyonunu ekleyin.
19. Tabbar için Navigate aksiyonu ekleme işlemlerini gerçekleştirin.

New Suggestion ekranında prototipleme işlemini gerçekleştirdikten sonra diğer bir ekranımız olan Suggestion Detail ekranına geçelim.

20. Header’da yer alan bildirim ikonunu seçin ve Navigate aksiyonu ekleyin.
21. Tıpkı Dashboard ve fikir listeleme ekranında olduğu gibi Navigate aksiyonu altında Notifications isimli ekranı seçin ve Current Page seçiminde bırakın.
22. Listeleme alanında Vote ve Comment ikonlarına ilgili ekranlara yönlendirmeyi sağlayan Navigate Aksiyonunu ekleyin, ekran açılma biçimlerini seçin ve ekran boyutlarını düzenleyin.
23. Tabbar’da yer alan kolonlara Navigate aksiyonu ekleyerek ilgili ekranlara yönlendirin. Yönlendirme işlemlerinde ekran açma biçimi ve boyutlarını düzenleyin.

Mobil uygulama için tasarımlarını birlikte hazırladığımız ekranların prototiplemesini tamamladık. Dilerseniz Run butonunu tıklayarak prototipinizi test edebilirsiniz.

Bu öğrenme içeriğinde yer alan işlemleri daha önce ödev olarak size sunulan form ekranları, detay ekranları ve profil ekranları için de gerçekleştirmenizi bekliyoruz.