WidgetKit: Giriş
Widget’lar iPhone, iPad ve Mac’te bir bakışta görebileceğiniz pencere öğeleridir.
Merhaba TurkishKit okuyucuları. Bu yazımızda, Widget’lar nedir yakından öğreneceğiz. Eğer sizler de hazırsanız başlayalım! 🤙🏻
Widget’lara Yakından Bakış
Küçük, orta veya büyük boyutlarda pencere öğesi oluşturabileceğiniz Widget’lar, konum olarak taşınabilir ve çoğu durumda yapılandırılabilen bir düzenleme moduna girebilir. Örneğin, cihazınızın ana ekranına birden çok küçük “Hava Durumu” Widget’ı ekleyebilir, her birinin farklı konumları göstermesini sağlayarak onları yapılandırabilirsiniz.
Faydalı Bir Widget Oluşturma
Widget’ınızda daha fazlasını görmek için tıklanması gereken durumlar olsa bile bunlardan kaçınmak gerekiyor. Bir Widget’ın ana amacı kullanıcıların kısa ve öz bir bilgiye uygulamayı açmadan anlık erişebilmeleridir. Oluşturulacak pencere öğesi için tek bir fikrin belirlenmesi ve görüntülenecek bilgilerin detayının belirlenmesi, Widget tasarımının en önemli adımlarından birisidir. Bu sebeple Widget oluşturmak için gerekenleri başlık olarak ayırabiliriz.
Widget’ınızı Tek Bir Fikre Odaklayın
Widget’lar göz atılabilir ve istenilen bilgiye tek bakışla ulaşılabilir uygulamalardır. Bu sebeple uygulamanın ana amacını basit bir fikre indirgemek en iyi sonucu verebilir. Bazı durumlarda ise, uygulamanın ana amacına benzeyen bir fikir seçmek en iyi sonucu verebilir. Örneğin, bir hava durumu uygulamasının Widget’ı tek bir konumu gösterebilir ya da bir kalori uygulamasının gün içerisinde ne kadar kalori yaktığınızı göstermesi olabilir. Bunun yanında komplike uygulamalarda basit ama ilgilenilen bilgileri göstermesi etkili olabilir. Buna örnek olarak bir çizim uygulamasında favori çizimlerinizi Widget ile göstermek etkileyici olabilir.
Yalnızca Widget ile Doğrudan İlgili Olan Bilgileri Görüntüleyin
Widget’lar küçük, orta ve büyük boyutlarda oluşturulabilir, ancak oluşturulan Widget’ın ayrıntılı görselleştirilmesi verilen bilgiye göre yapılmalıdır. Örneğin Hava Durumu uygulamasında oluşturulan küçük Widget yalnızca geçerli sıcaklığı ve hava koşullarını ve bir konum için günün yüksek ve düşük sıcaklık değerlerini gösterir. Orta Widget ise aynı verileri gösterir ve altı saatlik bir hava tahmini ekler. Son olarak büyük Widget altı saatlik hava tahmini de dahil olmak üzere aynı verileri gösterir ve sonraki beş gün için hava tahminini ekler.
Uygulamanızı Başlatmaktan Başka Hiç Bir Şey Yapmayan Bir Widget Oluşturmaktan Kaçının
Widget, kullanıcılar için içeriğe hızlı bakış ile erişebilme özelliğine sahip olmalıdır. Uygulamaya erişmek için Widget kullanımı kullanıcılar için pek tercih edilmez. Bu sebeple tasarlamak istediğiniz Widget’ın erişilmesi istenilen bilgisine tıklanarak değil bakarak erişilmesi daha sağlıklı olacaktır.
Widget’ınızı Birden Çok Boyutta Sunun
Oluşturmak istediğiniz Widget’ınızda göstermek istediğiniz içeriği en uygun boyutta sunmaya çalışmanız, kullanıcı tercihi açısından önem arz edebilir. Bu sebeple Widget’larınızda uygun boyutu seçmek önemlidir.
Gün İçinde Değişen Dinamik Bilgileri Tercih Edin
Widget’larda sık görüntülenmeye sebep olacak dakika dakika bilgiler olmasa da değişkenlik gösteren içeriklerin bulunması tercih edilir. Widget’larda bulunan içeriğin hiç değişmemesi kullanıcı tarafından pek tercih edilmez ve kullanılmaz.
Widget Yapılandırmasını ve Etkileşimi Destekleme
Widget’ınız için bir konfigürasyon kullanıcı arayüzü tasarlamanıza gerek yoktur çünkü sistem bunu sizin için otomatik olarak oluşturur. Bu sebeple, oluşturacağınız Widget’ta dikkat etmeniz gereken içerik yapısıdır. Çok fazla ayar gerektirmeyen ve insanların bulması için zorlanmayacağı bir yapılandırmayı göz önünde bulundurmak Widget kullanımı için önemlidir.
İnsanların Widget’ınıza dokunduğunda derin bağlantılar kurmak için ve daha çok bilgiyi edinmesi için Widget’ın uygulamasına geçmesi gerekir. Bu sebeple Widget’ınıza dokunduğunuzda uygulamanızı doğru konumda açtığından emin olmak önemlidir.
Widget’larda 3 farklı pencere öğesi mevcuttur. Küçük pencere öğesinde tek bir dokunma hedefi desteklenirken, orta ve büyük pencere öğelerinde birden çok dokunma hedefi desteklenir. Oluşturmak istediğiniz Widget içeriğinde birden çok dokunma hedefi olması mantıklı olsa da, kullanıcıların istedikleri bilgiye dokunmalarını zorlaştıracak fazla içeriği Widget’a sıkıştırmamak kullanıcı deneyimi açısından önemlidir.
Widget İçeriğini Güncelleme
Widget’ınızın alakalı ve kullanışlı kalması için, Widget bilgisini periyodik bir şekilde yenilemelidir. Pencere öğeleri, sürekli, gerçek zamanlı güncellemeleri desteklemez ve sistem, çeşitli faktörlere bağlı olarak güncelleme sınırlarını ayarlayabilir. Widget’ınız için doğru güncelleme sıklığını bulmak, verilerin ne sıklıkta değiştiğini bilmenize ve insanların yeni verileri ne sıklıkla görmesi gerektiğini tahmin etmenize bağlıdır. Bu sebeple Widget’ınızın tarihleri ve saatleri güncellemesine izin verin.
Güzel Bir Widget Tasarlama
iOS 14 ile birlikte gelen Widget’lar zengin, göze hoş gelen renkler ve en önemlisi bir bakışta okunabilmesi ile kullanıcıların hayatında hızlıca yer edindi. Güzel bir pencere öğesi insanlara yalnızca yararlı bilgiler sağlamakla kalmaz, aynı zamanda giriş ekranlarını kişiselleştirmesini sağlar. Şimdi ise güzel bir Widget nasıl tasarlanır onu yorumlayalım! 🤟🏻
Markanızın Kimliğiyle Bağlantılı Tasarım Öğeleri Ekleyerek İnsanların Widget’ınızı Tanımasına Yardımcı Olun
Size ait markanın renkleri, yazı tipi ve markaya özgü özelliklerini Widget’ınıza eklemek hızlı bir şekilde Widget’ınızın tanınmasına yardımcı olur. Ancak aşırı bir şekilde markayı ön plana çıkarmak istenilen bilgiyi kullanıcıya aktarmanın önüne geçebilir.
Rahat Bir Bilgi Yoğunluğu Hedefleyin
İnsanların temel parçaları anında kavrayabilmesi ve ilgili ayrıntıları daha uzun bir bakışta görebilmesi için içeriği iyileştirmenin yolları Widget’larda önemlidir. Seyrek görünen Widget’lar dikkat çekmeyeceği gibi, dolu olan Widget’lar da fazlasıyla itici gelebilir. Bu sebeple göze hoş gelecek Widget’lar tasarlamak ve içerik oluşturmak kullanıcı deneyimi açısından önemlidir.
Rengi Mantıklı Kullanın
Widget’ın içeriğinin üstüne çıkmayacak, asıl önemli noktanın içerik olduğunu hissettirecek renkler kullanmak kullanıcı deneyimi açısından önemlidir. Arayüz uyumları için koyu mod desteklenmesi de oldukça önemlidir.
SF Pro Fontunu Kullanın
Özel bir yazı tipi kullanmak istiyorsanız, kullanacağınız yazı tipini idareli kullanmayı düşünmeniz yararlı olacaktır. Bir bakışta okunmasının kolay olduğu yazı tipi kullanmak önemlidir. Bir Widget’taki büyük metin için özel yazı tipi kullanmak ve küçük metinler için SF Pro kullanmak genellikle işe yarar.
SF Pro kullanılan metinlerde SF Symbols kullanmak hizalama ve ölçeklendirmede uyumludur. Bu sebeple ortak kullanımı kullanıcı deneyimi için önemlidir.
Widget Galerisinde Görüntülenecek Gerçekçi Bir Önizleme Tasarlayın
İnsanları Widget’ınızı kullanmaya teşvik etmek için etkili ve vurgulayıcı bir önizleme tasarlamak çok önemlidir. Gerçekçi bir simüle edilmiş veriyi önizleme de kullanarak Widget’ınız için kullanıcıları teşvik edebilirsiniz.
İnsanların Pencere Aracınızı Tanımasına Yardımcı Olacak İçerikler Tasarlayın
Bir Widget, verileri yüklenirken yer tutucu içeriğini görüntüler. Kullanıcı arayüzünün statik bölümlerini gerçek içerik için duran yarı opak şekillerle birleştirerek etkili bir önizleme oluşturabilirsiniz. Örneğin, metin satırları önermek için farklı genişliklerde dikdörtgenler, glifler ve görüntüler yerine daireler veya kareler kullanabilirsiniz.
Widget’ınızın Görünümünü Uygulamanızda Yansıtmaktan Kaçının
Kullanıcılar bir öğeye dokunmanın uygulama içerisine yönlendirdiğini bilir. Bu sebeple, uygulamanız Widget’ınıza benzeyen ancak onun gibi davranmayan öğe görüntülüyorsa, kullanıcıların kafası karışabilir. Ayrıca, kullanıcıların Widget gibi davranmasını beklediği uygulamada farklı yolları deneme olasılığı düşük olabilir.
Widget’ınız için Kısa ve Öz Bir Açıklama Yazın
Kullanıcılar Widget eklemek istediğinde pencere öğe galerisi, insanların her bir Widget’ın ne yaptığını anlamalarına yardımcı olabilecek açıklamalar görüntüler. Bu sebeple, oluşturduğunuz Widget’ınızı tanımlamaya kısa ve öz bir eylem fiili ile başlamak genellikle işe yarar. Örneğin, “Mevcut hava koşullarını ve bir konumun tahminini görün” gibi. Ulaşılabilir bir dil ve cümle tarzı kullanarak kullanıcının Widget’ınızı kullanmanızı sağlayabilirsiniz.
Farklı Ekran Boyutlarına Uyum Sağlama
Widget’lar farklı cihazların ve ekran alanlarının ekran boyutlarına uyum sağlamak için ölçeklenir. Uygun boyutlarda içerik sağlayarak Widget’ınızın her cihazda harika görünmesini sağlayın.
Genel olarak, içeriğinizin rahatça okunabilir olması için standart kenar boşlukları bırakmak kullanıcı deneyimi açısından önemlidir. Widget’ınız içeriğinde, metin, glifler vb. içeriyorsa standart kenar boşlukları bırakmak önemlidir. Standart kenar boşluğu genişliği ise 16 pixeldir.
Widget Hakkında Teknik Bilgiler
Dört ana başlıkta Widget’ları incelememiz teknik açıdan önemlidir. Bu başlıklar:
- Widget’ı Tanımlama
- Göz Atılabilir Bir Deneyim Oluşturmak
- Görüntülemeler, Zaman Çizelgeleri ve Yeniden Yüklemeler
- Kişiselleştirme ve Zeka
Widget Tanımlama
Widget’lar basit ve güçlü yapılardır. Widget’larda tanımlama yapmak için birkaç kavramdan bahsedebiliriz. Bu kavramlar; “kind”, “configuration”, “supportedFamilies” ve “placeholder”.
Projeye başlamadan önce kullanılabilir Widget türlerinden emin olmalıyız. WidgetKit uzantıları, SwiftUI, AppKit ve Catalyst macOS uygulamalarını destekler. Ayrıca Widget türleri hangi tür yapılandırmayı desteklediğini de ifade eder.
- Örneğin fitness Widget’ı herhangi bir yapılandırma gerektirmediği için “StaticConfiguration”a sahiptir. Ancak, Hatırlatıcı uygulamasının Widget’ı kişiselleştirilebildiği için “IntentConfiguration”a sahiptir.
- Widget türlerinin hepsi “supportedFamilies”i etkinleştirebilir. Bu sayede 3 farklı Widget büyüklüğü kullanılabilir.
- Ayrıca “placeholder” da temel bilgiyi Widget’ınızın içerisinde içerir. Widget’ınızın ne işe yaradığını temsil eder.
Yukarıda bahsettiğimiz kavramları kullandığımız basit bir örnek kod ile açıklayalım ve bir tür belirleyelim.
@main
public struct OrnekWidget: Widget {
private let kind: String = "OrnekWidget"
public var body: some WidgetConfiguration {
StaticConfiguration(kind: kind, provider: Provider(), placeholder: PlaceholderView()) { entry in
OrnekWidgetView(entry.entry)
}
.configurationDisplayName("Benim Widget'ım")
.description("Bu örnek bir Widget.")
}
}Artık bir Widget nasıl tanımlanır öğrenmiş olduk.
Göz Atılabilir Bir Deneyim Oluşturma
Hava Durumu uygulaması göz atılabilir Widget için en iyi örneklerden birisidir. Kullanılabilir bilgileri tek bir bakışla uygulama içerisine girmeden öğrenebiliyoruz.
Görüntülemeler, Zaman Çizelgeleri ve Yeniden Yüklemeler
Artık Widget deneyiminin gerçek özü hakkında sohbete başlıyoruz. “Views”, “Timelines” ve “Reloads”. UI deneyimi için 3 farklı kavram üzerine yoğunlaşmalıyız; “Placeholder”, “Snapshot”, “Timeline”.
- Snapshot: Sistemin tek bir girişi hızlı bir şekilde görüntülemesi gereken yerdir.
- Timeline: Belirli bir görünümün ne zaman gösterilmesi gerektiğini söylemenize olanak tanıyan, döndürülen görünümlerin ve tarihlerin birleşimidir.
- Reloads: Sistemin uzantınızı uyandıracağı ve cihaza yerleştirilen her bir Widget için yeni bir zaman çizelgesi isteyeceği yerdir.
public struct Provider: TimelineProvider {
func getSnapshot(in context: Context, completion: @escaping (Entry) -> Void) {
let date = Date()
let entry: SampleEntry
} func getTimeline(in context: Context, completion: @escaping (Timeline<Self.Entry>) -> Void)
let date = Date()
let entry = SampleEntry(date: date, Sample: SampleFromServer)
let timeline = Timeline(entries:[entry], policy: .atEnd)
completion(timeline)
}
}
Yenilenmesini istediğimiz Widget’ımız için .atEnd, .never ve .after(date: Date) elemanları kullanılabilir.
Kişiselleştirme ve Zeka
Widget’a kişiselleştirme katabilmemiz için daha önce gördüğümüz “Intent” framework’ü kullanılabilir. (Bu da başka bir makalenin hattta makalelerin konusu olsun. 😉)
Bir makalemizin daha sonuna geldik! Bu makalemizde WidgetKit teknolojisine bir giriş yaptık. Bu makale serimizin devamında da kullanışlı Widget’lar kodlamayı öğreneceğiz. Bizi takipte kalın! 🖥
