Registration Ekran Tasarımı

Bu öğrenme içeriğinde, registration ekranlarından biri olan Giriş Yap (Sign In) ekranının tasarımını nasıl yapabileceğinizi adım adım öğreneceğiz. Öncelikle, bu eğitim sonunda oluşturacağımız örnek Giriş Yap ekran tasarımını inceleyelim.

Giriş Yap ekranı, üst kısmında uygulamanın logosunu yerleştirebileceğimiz bir görüntü alanı içerecek. Logonun altında kullanıcıları karşılayacak bir mesaj bulunacak; bu, bir Label elementi ile sağlanacak. Kullanıcı karşılama mesajının hemen altında, e-posta ve parola bilgilerinin girileceği giriş alanları (Input) yer alacak. Parola için Kuika tarafından sunulan Password elementinin kullanıldığını görüyoruz. Password elementi parolanın giriş anında karakterleri yıldız şeklinde gösterir. Bu özellik şifre gizliliğini korur.

Bu alanların yanı sıra, unutulan parolayı sıfırlama sayfasına yönlendirecek bir Forgot Pasword butonu da olacak.

Giriş alanlarının altında, Giriş Yap işlemi için bir buton bulunuyor. Yeni kullanıcıların uygulama kullanıcı kayıt sayfasına yönlendirileceği bir Kayıt Ol yönlendirme butonu bulunacak.

Bu ekranı, uygulamanın varsayılan Giriş Yap ekranı üzerinde birlikte oluşturacağız. 

1. Sol kenarda Screens paneli ile Sign in ekranını açın.
2. Item Tree aracılığıyla Panel elementini seçin.
3. Styling Paneli, Layout alanında None olarak gelen stili kaldırın ve RegistrationPadding stilini ekleyin.
4. Fill alanından White seçimini yapın.
5. Panel elementinin ebeveyni Columnu Breadcrumb aracılığıyla seçin.
6. Layout alanında varsayılan olarak gelen Column stilini kaldırın ve boşluğu azaltmak için None stilini seçin.
7. Column'u yatayda sola hizalayın.
8. Ardından Column'un ebeveyni Row elementini seçin.
9. Varsayılan olarak gelen Row stilini kaldırın ve None stilini ekleyin.
10. Varsayılan olarak gelen ekran arka plan rengini kaldırarak devam edelim. Ekranda boş bir yere tıklayın. Fill alanında tanımlı rengi kaldırın.
11. Ekranda bulunan Welcome Back Label'inin üstüne bir Row sürükleyin-bırakın.
12. Row’u tek kolona dönüştürün.
13. Row içerisine bir Image elementi ekleyin ve geçici bir resim yükleyin.
14. Image elementini seçin ve Image64 stilini ekleyin ve Border alanından Radius stilini ekleyin.
15. Ardından karşılama mesajının yazdığı Label’i seçin.
16. Varsayılan olarak gelen rengi değiştirin ve H1 stilini seçin.
17. Karşılama mesajının altında yer alan alt başlığı seçin ve silin.
18. Devamında Email Input’un bulunduğu Row’u seçin, Row stilini kaldırın, None stilini ekleyin ve varsayılan olarak gelen Top Padding değerini silin.
19. Email Input’u seçin ve Fill rengini değiştirin.
20. Email Input’ta Border alanında tanımlı stilleri kaldırın ve InputBorder stilini ekleyin.
21. Şimdi benzer işlemleri Pasword Input’un bulunduğu Row ve Password Input elementi için de yapın.
22. Ardından Forgot Password içerikli Label’ı seçin ve rengini değiştirin.
23. Sign In butonunun bulunduğu Row’u seçin, Row stilini kaldırın ve None stilini ekleyin.
24. Aynı işlemi buton altında yer alan Row için de uygulayın.
25. Devamında Row seçiliyken, Row’u iki kolonlu yapıya dönüştürün.
26. İlk kolon içerisinde bulunan Sign Up Label’ını ikinci kolona taşıyın.
27. Soldaki kolonu seçin ve sola hizalamayı gerçekleştirin.
28. Şimdi sağdaki kolonu seçin ve sağa hizalayın.
29. Sign Up Label’ını seçin ve rengini değiştirin.
30. Son olarak ekran arka planına görsel ekleyin ve ImageFit’i Fit, Position’u Right olarak ayarlayın.

İşte Sign In ekran tasarımı hazır. Siz de benzer şekilde farklı registration ekran tasarımlarını ihtiyaçlarınız doğrultusunda yapabilir ve kullanabilirsiniz.