Yerleşimler

Konu Anlatımı

Yerleşimler

Yerleşimler, Mobil Uygulamalar dersi kapsamındaki Arayüz Tasarımı ünitesinin temel konularından biridir. Bu konu alanın gerektirdiği bilgi ve becerilerin kazandırılmasına temel oluşturur.

Temel Bilgiler

• Mobil arayüz küçük ekrana uygun tasarlanmalıdır.
• Buton, metin kutusu ve liste temel bileşenlerdir.
• Duyarlı yerleşim farklı ekran boyutlarına uyar.

Uygulama ve Dikkat Edilmesi Gerekenler

Bu konunun uygulamasında iş güvenliği kurallarına uyulmalı, kullanılan araç ve malzemeler amacına uygun seçilmeli ve yapılan işlemler standartlara göre kontrol edilmelidir. Öğrenilen bilgiler atölye ve iş yeri uygulamalarıyla pekiştirildiğinde kalıcılık artar.

Yerleşimin Temel Kavramları

Arayüz yerleşimi, bileşenlerin ekrandaki düzenini ve sırasını belirler. Kutu modeline göre her öğenin iç boşluğu, kenar boşluğu, çerçevesi ve dış boşluğu ayrı ayrı tanımlanır. Ölçü birimi seçimi de yerleşimi etkiler: piksel sabit boyut verir, yüzde değeri kapsayıcıya göre uyarlanır, rem ise kullanıcının yazı boyutu tercihine göre ölçeklenir ve erişilebilirliği artırır.

Flexbox ve Grid

Flexbox, tek boyutlu dizilimler içindir: satır ya da sütun hizalaması, boşluk dağıtımı ve öğelerin büyüme oranı esnek kutu ile ayarlanır. Grid ise iki boyutlu düzenlerde kullanılır; satır ve sütun çizgileri tanımlanıp alanlar kolayca yerleştirilir. Tek bir satırda öğeler yan yana ve eşit sütunlar gerekiyorsa grid, sıralı akış ve hizalama gerekiyorsa flexbox tercih edilir.

Adım Adım Yerleşim Sırası

1. Ekranı içerik bölgelerine ayır, kapsayıcı genişliklerini belirle.
2. Dizilim yöntemini seç: satır içi akış için flex, tablo benzeri alanlar için grid.
3. Birimleri seç: sabit öğelerde piksel, oransal alanlarda yüzde, metin ölçeğinde rem kullan.
4. Kırılma noktalarıyla mobilden masaüstüne uyumu dene ve dar ekranda taşmayı kontrol et.

Örnek Uygulama

Dar ekranda iki sütunlu bir listenin tek sütuna düşmesi, kırılma noktası eklenerek sağlanır: kapsayıcı genişliği eşik altındayken sütun sayısı bire iner, boşluklar yeniden hesaplanır. Böylece yatay kaydırma oluşmaz.

Sınav ve Uygulama Odaklı Noktalar

Sınavda flex ile grid'in kullanım farkı, birim seçimi ve taşma sorununun kaynağı sorulur. Uygulamada her kutunun içine taşma durumu için esnek uzunluk sınırı ve metin sarma kontrolü yapılır.

Yerleşim Modelleri ve Uygulama Örnekleri

Arayüz tasarımcıları, mobil uygulamalar için iki temel yerleşim modelini kullanır: Flexbox ve Grid. Bu modeller, ekran boyutlarına uyumlu ve kullanıcı deneyimini optimize eden çözümler sunar. Flexbox, tek boyutlu dizilimler için tasarlanmıştır; satır veya sütun hizalaması, boşluk dağıtımı ve öğelerin büyüme oranları esnek olarak ayarlanır. Grid ise iki boyutlu düzenlerde kullanılır; satır ve sütun çizgileri tanımlanarak alanlar kolayca yerleştirilir. Bu modellerin doğru seçimi, uygulamanın görsel ve işlevsel kalitesini belirler.

Örnek olarak, bir e-ticaret uygulamasında Flexbox kullanılarak ürün listesi yatayda hizalanır. Bu durumda, her ürünün butonu ve metin kutusu tek satırda yer alır. Ancak ekran boyutu küçüldükçe, Flexbox'un esnekliği sayesinde sütun sayısı azalır ve ürünler dikeyde sıralanır. Grid modeli ise, daha karmaşık düzenlerde tercih edilir; örneğin, bir sosyal medya uygulamasında kullanıcı profilleri ve mesajlar iki boyutlu bir yapıda yerleştirilir. Bu şekilde, kullanıcı deneyimi daha dinamik ve kullanıcı dostu olur.

Ne Öğreneceğiz

Mobil Uygulamalar dersi kapsamında Yerleşimler konusu. Bu konuda ögrenme çıktıları:

• Yerleşimler ile ilgili temel kavramları açıklar.
• Yerleşimler konusunun Mobil Uygulamalar dersi içindeki yerini ve önemini belirtir.
• Konuyla ilgili araç, gereç ve malzemeleri amacına uygun seçer.
• İş sağlığı ve güvenliği kurallarına uygun çalışır.
• Öğrendiği bilgi ve becerileri atölye/iş yeri uygulamalarında kullanır.

Ön Bilgi

Bu konuya başlamadan önce temel kavram ve ön koşulları kavramanız yardımcı olacaktır. Konunun çerçevesinde şu kavramlar dikkat ister:

• Mobil arayüz küçük ekrana uygun tasarlanmalıdır.
• Buton, metin kutusu ve liste temel bileşenlerdir.
• Duyarlı yerleşim farklı ekran boyutlarına uyar.
• Flexbox tek boyutlu, grid iki boyutlu düzen içindir; ikisinin görevi karıştırılmaz.
• rem birimi, kullanıcının yazı boyutu tercihine uyarlanarak erişilebilirliği artırır.

Basit Örnek ve Günlük Yaşam

Günlük yaşamda ve mesleki bağlamda bir uygulama:

Soru: Mobil arayüz küçük ekrana uygun tasarlanmalıdır.

1. Konuyu tanımla ve ilgili kavramları belirle.
2. Doğru yöntem veya hesaplamayı uygula.
3. Sonucu standartlara göre kontrol et.

Sonuç/cevap: Doğru uygulama sonucunda konuyla ilgili kazanım elde edilir.

İleri Örnek

Daha ileri bir uygulama:

Soru: 600 piksel altında iki sütun tek sütuna düşecektir. Nasıl tanımlanır?

1. Adım 1: Eşik değeri olarak 600 pikseli belirle.
2. Adım 2: Bu genişliğin altında sütun sayısını bire indiren kural yaz.
3. Adım 3: Dar ve geniş ekranı deneyip taşma olmadığını doğrula.

Sonuç/cevap: 600 piksel eşiğinde sütun sayısı bire inerek tek sütun düzenine geçilir.

Karşılaştırma Tablosu

Sık Yapılan Hatalar

Yerleşimler ile ilgili kavramları birbirine karıştırmak: Temel kavramları tablo veya zihin haritasıyla ayırt et.

Uygulamada standartlara ve iş güvenliği kurallarına uymamak: Her adımda güvenlik ve kalite kurallarını uygula.

Kullanılan araç-gereci amacına uygun seçmemek ve bakımını ihmal etmek: Doğru ekipmanı seç, kullanım öncesi ve sonrası kontrol et.

Her yeri mutlak piksel ile kurmak: Sabit piksel farklı ekranlarda taşmaya yol açar; oransal ve esnek birimlerle uyum sağlanır.

Özet

Yerleşimler, Mobil Uygulamalar dersi kapsamında ele alınan temel konulardan biridir. Mobil arayüz küçük ekrana uygun tasarlanmalıdır. Buton, metin kutusu ve liste temel bileşenlerdir. Duyarlı yerleşim farklı ekran boyutlarına uyar. Bu bilgiler uygulama ve iş güvenliği kurallarıyla birlikte pekiştirilmelidir.

Kendini Dene

Soru: Yönerge: Bir mobil uygulama ekranı için yerleşim tasarımı yaz. Tasarımda kutu modelinin hangi bileşenlerini kullanacağını, piksel, yüzde ve rem birimlerinin ne zaman tercih edileceğini, tek boyutlu ve iki boyutlu düzen araçlarının görev ayrımını ve taşma kontrolünün nasıl yapılacağını ayrı maddeler hâlinde belirt.

Örnek cevap: Puanlama anahtarı: kutu modelinin içerik, iç boşluk, çerçeve ve dış boşluk olarak yazılması 4 puan; pikselin sabit, yüzdeyi kapsayıcıya göreli, rem'in yazı ölçeğine göreli olduğunun yazılması 4 puan; tek boyutlu dizilim ile iki boyutlu düzenin ayrımının yazılması 4 puan; taşma kontrolünde kapsayıcı genişliği ve birim denetiminin yazılması 4 puan; rem'in erişilebilirlik katkısının belirtilmesi 2 puan; örneğin ekranın hangi ölçülerle kurulduğunun yazılması 2 puan. Toplam 20 puan. Model cevap: Kutu modeli ve birim seçimi önce tanımlanır, düzen aracı boyut sayısına göre seçilir, taşma kontrolü genişlik ve birim denetimiyle yapılır.