Detay Ekran Tasarımı
About this lesson
Bu öğrenme içeriğinde kayıtlı bir fikrin detayını gösteren bir ekran tasarımı hazırlayacağız.
Öğrenme içeriği sonunda tasarlamayı hedeflediğimiz ekran tasarımını inceleyelim.
Header tasarımına baktığımızda, daha önce Dashboard ekranında hazırladığımız Header'a benzer şekilde, uygulama logosu ve bildirim ekranını açabileceğiniz bir bildirim ikonu mevcut.
Header altında ise fikir detayları ve fikre yapılan yorumları listeleyen alan mevcuttur. Fikre ait detaylar ve yorumlar Tab elementinde gösterilmektedir.
En altta ise daha önce oluşturduğumuz Tabbar Menü yer almaktadır.
Fikir detay ekranının genel hatlarını inceledik. Şimdi bu ekranı birlikte tasarlayalım.
- Screens paneli aracılığıyla SuggestionDetail adında yeni bir ekran oluşturun.
Daha önce Dashboard ekranda kullandığımız Header tasarımını detay ekranında da kopyalayarak kullanabiliriz. Kopyalama işlemi öncesinde detay ekranında gerekli işlemleri yapalım.
- Ekrana bir Header elementini sürükleyin ve bırakın.
- Header’ın arka plan rengini değiştirin.
- Dashboard ekranını açın. Header içerisinde yer alan Row’u seçin ve detay menüsü aracılığıyla kopyalayın.
- Tekrardan detay ekranını açın.
- Header'ı seçin ve detay menüsü aracılığıyla yapıştırın.
Şimdi fikir detay yapısını hazırlayarak ilerleyelim.
- Ekrana bir Row sürükleyin ve bırakın.
- Fikir detayını sunmak için Dashboard'da bulunan, GalleryView içerisindeki yapıyı kullanabiliriz.
- Dashboard ekranını açın.
- GalleryView içerisindeki Row’u seçin ve kopyalayın.
- Detay ekranını açın.
- Ekrana sürükleyip bıraktığınız Row’u seçin ve Detay menüsü aracılığıyla yapıştırın.
- Ekranda boş olarak duran Row’u silin.
- Yapıştırdığınız Row’da yer alan kolon içine en alta bir Tab elementi sürükleyin ve bırakın.
- Tab elementinin bulunduğu kolonu seçin ve varsayılan gelen Padding stilini kaldırıp None seçimi yapın.
- Tab elementini seçin ve üçüncü Tab öğesini silin.
- Tab öğelerinin başlıklarını ve seçili sekmenin başlık rengini güncelleyin.
- Details başlıklı Tab öğesinin içerisine bir Row ekleyin ve tek kolona dönüştürün.
- Kolonu seçin ve varsayılan gelen Column stilini kaldırın ve None stilini ekleyin.
- Kolon içerisine Vertical Stack ekleyin.
- Vertical Stack içerisine bir Label sürükleyip bırakın.
- Label’in içeriğini güncelleyin ve H3 stilini ekleyin.
- Label’i Duplicate edin.
- Alta gelen Label’in içeriğini güncelleyin.
- Text stillerini kaldırıp, H6 stilini ekleyin.
Details sekmesinin içeriği hazır. Şimdi Comments sekmesinin içeriğini hazırlayarak devam edelim.
- Comments başlıklı Tab öğesinin içine bir Row ekleyip, tek kolona dönüştürün.
- Row’da ve Column’da yer alan varsayılan Layout stillerini kaldırın ve None stilini ekleyin.
- Kolon içerisine bir Table sürükleyip bırakın.
- Table Header’i gizleyin.
- Table’de varsayılan gelen Table stilini kaldırıp None seçimi yapın.
- TableRow’u seçin ve Border stilini kaldırıp, BorderBottom seçimini yapın.
- TableRow içine bir Row sürükleyip bırakın ve iki kolona dönüştürün.
- Row’da yer alan Row stilini kaldırıp None stilini ekleyin.
- İlk kolon içerisine bir Label elementi ekleyip, metni güncelleyin.
- Label’in Text stilini H6 olarak güncelleyin.
- Kolonda hizalama işlemlerini gerçekleştirin.
- Label’i kopyalayın ve sağdaki kolona yapıştırın.
- İçeriği güncelleyin.
- Ebeveyn kolonu hizalayın.
- TableRow içine bir Row daha sürükleyip bırakın ve tek kolona dönüştürün.
- Row’da yer alan Row stilini kaldırıp None stilini ekleyin.
- Kolon içerisine bir Label ekleyin ve içeriğini güncelleyin.
Ekranın tasarımımızı tamamlamak için son yapı olan Tabbar tasarımımızı ekleyerek devam edelim.
- Dashboard ekranda hazırladığımız Tabbar menüyü buraya kopyalayalım.
- Ekrana bir Footer sürükleyin.
- Dashboard ekranını açın.
- Tabbar menü tasarımını yer tutucusu olan Row’u kopyalayın.
- Detay ekranına dönün.
- Footer’ı seçin ve yapıştırın.
- İkon renk düzenleme işlemini gerçekleştirin.
İşte mobil uygulamanız için kullanacağınız Detay ekran tasarımınız hazır. Benzer yapıdaki detay ekranlarını hazırlayabilir ve kullanabilirsiniz.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Block quote
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript
Bu öğrenme içeriğinde kayıtlı bir fikrin detayını gösteren bir ekran tasarımı hazırlayacağız.
Öğrenme içeriği sonunda tasarlamayı hedeflediğimiz ekran tasarımını inceleyelim.
Header tasarımına baktığımızda, daha önce Dashboard ekranında hazırladığımız Header'a benzer şekilde, uygulama logosu ve bildirim ekranını açabileceğiniz bir bildirim ikonu mevcut.
Header altında ise fikir detayları ve fikre yapılan yorumları listeleyen alan mevcuttur. Fikre ait detaylar ve yorumlar Tab elementinde gösterilmektedir.
En altta ise daha önce oluşturduğumuz Tabbar Menü yer almaktadır.
Fikir detay ekranının genel hatlarını inceledik. Şimdi bu ekranı birlikte tasarlayalım.
- Screens paneli aracılığıyla SuggestionDetail adında yeni bir ekran oluşturun.
Daha önce Dashboard ekranda kullandığımız Header tasarımını detay ekranında da kopyalayarak kullanabiliriz. Kopyalama işlemi öncesinde detay ekranında gerekli işlemleri yapalım.
- Ekrana bir Header elementini sürükleyin ve bırakın.
- Header’ın arka plan rengini değiştirin.
- Dashboard ekranını açın. Header içerisinde yer alan Row’u seçin ve detay menüsü aracılığıyla kopyalayın.
- Tekrardan detay ekranını açın.
- Header'ı seçin ve detay menüsü aracılığıyla yapıştırın.
Şimdi fikir detay yapısını hazırlayarak ilerleyelim.
- Ekrana bir Row sürükleyin ve bırakın.
- Fikir detayını sunmak için Dashboard'da bulunan, GalleryView içerisindeki yapıyı kullanabiliriz.
- Dashboard ekranını açın.
- GalleryView içerisindeki Row’u seçin ve kopyalayın.
- Detay ekranını açın.
- Ekrana sürükleyip bıraktığınız Row’u seçin ve Detay menüsü aracılığıyla yapıştırın.
- Ekranda boş olarak duran Row’u silin.
- Yapıştırdığınız Row’da yer alan kolon içine en alta bir Tab elementi sürükleyin ve bırakın.
- Tab elementinin bulunduğu kolonu seçin ve varsayılan gelen Padding stilini kaldırıp None seçimi yapın.
- Tab elementini seçin ve üçüncü Tab öğesini silin.
- Tab öğelerinin başlıklarını ve seçili sekmenin başlık rengini güncelleyin.
- Details başlıklı Tab öğesinin içerisine bir Row ekleyin ve tek kolona dönüştürün.
- Kolonu seçin ve varsayılan gelen Column stilini kaldırın ve None stilini ekleyin.
- Kolon içerisine Vertical Stack ekleyin.
- Vertical Stack içerisine bir Label sürükleyip bırakın.
- Label’in içeriğini güncelleyin ve H3 stilini ekleyin.
- Label’i Duplicate edin.
- Alta gelen Label’in içeriğini güncelleyin.
- Text stillerini kaldırıp, H6 stilini ekleyin.
Details sekmesinin içeriği hazır. Şimdi Comments sekmesinin içeriğini hazırlayarak devam edelim.
- Comments başlıklı Tab öğesinin içine bir Row ekleyip, tek kolona dönüştürün.
- Row’da ve Column’da yer alan varsayılan Layout stillerini kaldırın ve None stilini ekleyin.
- Kolon içerisine bir Table sürükleyip bırakın.
- Table Header’i gizleyin.
- Table’de varsayılan gelen Table stilini kaldırıp None seçimi yapın.
- TableRow’u seçin ve Border stilini kaldırıp, BorderBottom seçimini yapın.
- TableRow içine bir Row sürükleyip bırakın ve iki kolona dönüştürün.
- Row’da yer alan Row stilini kaldırıp None stilini ekleyin.
- İlk kolon içerisine bir Label elementi ekleyip, metni güncelleyin.
- Label’in Text stilini H6 olarak güncelleyin.
- Kolonda hizalama işlemlerini gerçekleştirin.
- Label’i kopyalayın ve sağdaki kolona yapıştırın.
- İçeriği güncelleyin.
- Ebeveyn kolonu hizalayın.
- TableRow içine bir Row daha sürükleyip bırakın ve tek kolona dönüştürün.
- Row’da yer alan Row stilini kaldırıp None stilini ekleyin.
- Kolon içerisine bir Label ekleyin ve içeriğini güncelleyin.
Ekranın tasarımımızı tamamlamak için son yapı olan Tabbar tasarımımızı ekleyerek devam edelim.
- Dashboard ekranda hazırladığımız Tabbar menüyü buraya kopyalayalım.
- Ekrana bir Footer sürükleyin.
- Dashboard ekranını açın.
- Tabbar menü tasarımını yer tutucusu olan Row’u kopyalayın.
- Detay ekranına dönün.
- Footer’ı seçin ve yapıştırın.
- İkon renk düzenleme işlemini gerçekleştirin.
İşte mobil uygulamanız için kullanacağınız Detay ekran tasarımınız hazır. Benzer yapıdaki detay ekranlarını hazırlayabilir ve kullanabilirsiniz.
Kuika Platformunda yeni bir kullanıcı arayüzüne geçiyoruz ve Kuika Akademi kurslarımızı ve videolarımızı mümkün olan en kısa sürede güncelliyoruz.
Bu öğrenme içeriğinde kayıtlı bir fikrin detayını gösteren bir ekran tasarımı hazırlayacağız.
Header tasarımına baktığımızda, daha önce Dashboard ekranında hazırladığımız Header'a benzer şekilde, uygulama logosu ve bildirim ekranını açabileceğiniz bir bildirim ikonu mevcut.
Header altında ise fikir detayları ve fikre yapılan yorumları listeleyen alan mevcuttur. Fikre ait detaylar ve yorumlar Tab elementinde gösterilmektedir.
En altta ise daha önce oluşturduğumuz Tabbar Menü yer almaktadır.
Bu öğrenme içeriğinde kayıtlı bir fikrin detayını gösteren bir ekran tasarımı hazırlayacağız.
Öğrenme içeriği sonunda tasarlamayı hedeflediğimiz ekran tasarımını inceleyelim.
Header tasarımına baktığımızda, daha önce Dashboard ekranında hazırladığımız Header'a benzer şekilde, uygulama logosu ve bildirim ekranını açabileceğiniz bir bildirim ikonu mevcut.
Header altında ise fikir detayları ve fikre yapılan yorumları listeleyen alan mevcuttur. Fikre ait detaylar ve yorumlar Tab elementinde gösterilmektedir.
En altta ise daha önce oluşturduğumuz Tabbar Menü yer almaktadır.
Fikir detay ekranının genel hatlarını inceledik. Şimdi bu ekranı birlikte tasarlayalım.
- Screens paneli aracılığıyla SuggestionDetail adında yeni bir ekran oluşturun.
Daha önce Dashboard ekranda kullandığımız Header tasarımını detay ekranında da kopyalayarak kullanabiliriz. Kopyalama işlemi öncesinde detay ekranında gerekli işlemleri yapalım.
- Ekrana bir Header elementini sürükleyin ve bırakın.
- Header’ın arka plan rengini değiştirin.
- Dashboard ekranını açın. Header içerisinde yer alan Row’u seçin ve detay menüsü aracılığıyla kopyalayın.
- Tekrardan detay ekranını açın.
- Header'ı seçin ve detay menüsü aracılığıyla yapıştırın.
Şimdi fikir detay yapısını hazırlayarak ilerleyelim.
- Ekrana bir Row sürükleyin ve bırakın.
- Fikir detayını sunmak için Dashboard'da bulunan, GalleryView içerisindeki yapıyı kullanabiliriz.
- Dashboard ekranını açın.
- GalleryView içerisindeki Row’u seçin ve kopyalayın.
- Detay ekranını açın.
- Ekrana sürükleyip bıraktığınız Row’u seçin ve Detay menüsü aracılığıyla yapıştırın.
- Ekranda boş olarak duran Row’u silin.
- Yapıştırdığınız Row’da yer alan kolon içine en alta bir Tab elementi sürükleyin ve bırakın.
- Tab elementinin bulunduğu kolonu seçin ve varsayılan gelen Padding stilini kaldırıp None seçimi yapın.
- Tab elementini seçin ve üçüncü Tab öğesini silin.
- Tab öğelerinin başlıklarını ve seçili sekmenin başlık rengini güncelleyin.
- Details başlıklı Tab öğesinin içerisine bir Row ekleyin ve tek kolona dönüştürün.
- Kolonu seçin ve varsayılan gelen Column stilini kaldırın ve None stilini ekleyin.
- Kolon içerisine Vertical Stack ekleyin.
- Vertical Stack içerisine bir Label sürükleyip bırakın.
- Label’in içeriğini güncelleyin ve H3 stilini ekleyin.
- Label’i Duplicate edin.
- Alta gelen Label’in içeriğini güncelleyin.
- Text stillerini kaldırıp, H6 stilini ekleyin.
Details sekmesinin içeriği hazır. Şimdi Comments sekmesinin içeriğini hazırlayarak devam edelim.
- Comments başlıklı Tab öğesinin içine bir Row ekleyip, tek kolona dönüştürün.
- Row’da ve Column’da yer alan varsayılan Layout stillerini kaldırın ve None stilini ekleyin.
- Kolon içerisine bir Table sürükleyip bırakın.
- Table Header’i gizleyin.
- Table’de varsayılan gelen Table stilini kaldırıp None seçimi yapın.
- TableRow’u seçin ve Border stilini kaldırıp, BorderBottom seçimini yapın.
- TableRow içine bir Row sürükleyip bırakın ve iki kolona dönüştürün.
- Row’da yer alan Row stilini kaldırıp None stilini ekleyin.
- İlk kolon içerisine bir Label elementi ekleyip, metni güncelleyin.
- Label’in Text stilini H6 olarak güncelleyin.
- Kolonda hizalama işlemlerini gerçekleştirin.
- Label’i kopyalayın ve sağdaki kolona yapıştırın.
- İçeriği güncelleyin.
- Ebeveyn kolonu hizalayın.
- TableRow içine bir Row daha sürükleyip bırakın ve tek kolona dönüştürün.
- Row’da yer alan Row stilini kaldırıp None stilini ekleyin.
- Kolon içerisine bir Label ekleyin ve içeriğini güncelleyin.
Ekranın tasarımımızı tamamlamak için son yapı olan Tabbar tasarımımızı ekleyerek devam edelim.
- Dashboard ekranda hazırladığımız Tabbar menüyü buraya kopyalayalım.
- Ekrana bir Footer sürükleyin.
- Dashboard ekranını açın.
- Tabbar menü tasarımını yer tutucusu olan Row’u kopyalayın.
- Detay ekranına dönün.
- Footer’ı seçin ve yapıştırın.
- İkon renk düzenleme işlemini gerçekleştirin.
İşte mobil uygulamanız için kullanacağınız Detay ekran tasarımınız hazır. Benzer yapıdaki detay ekranlarını hazırlayabilir ve kullanabilirsiniz.
Sözlük
Ödev
Mobil Arayüz Tasarımı modülü kapsamında aşağıda belirtilen başlıklarda platform üzerinde uygulamalı çalışmalar yapmanız beklenmektedir. Bu çalışmalar, modül boyunca edindiğiniz bilgi ve becerileri geliştirmeniz amacıyla ödev olarak teslim edilmelidir:
- Tabbar Menü Tasarımı
- Dashboard Ekran Tasarımı
- Form Ekran Tasarımı
- Liste Ekran Tasarımı
- Modül içerisinde yer alan Fikir Liste ekranı
- Modül içerisinde beraber tasarlamadığımız, Kullanıcı Liste ekranı tasarımı
- Detay Ekran Tasarımı
- Modül içerisinde yer alan Fikir Detay ekranı
- Modül içerisinde beraber tasarlamadığımız, Kullanıcı Detay ekranı tasarımı
Tasarım süreçlerinde mobil kullanıcı deneyimi (UX) ilkeleri ve arayüz tasarımı (UI) prensiplerine dikkat edilmesi önemlidir. Hazırladığınız tüm arayüzlerin aşağıdaki forma eksiksiz yüklenmesi gerekmektedir.