Arayüz Tasarım Kılavuzları

Önceki derste sahne işleyicisi uygulama işleyicisine üstün geldi. Bu derste aynı çözüm iki yeni tarafı buluşturur: uygulamanın yazı boyutu varsayılanı ile kullanıcının ayarı. Soru değişmez: bu iki tanım buluşunca nasıl çözülüyor? Üç buluşma ölçülecek: öncelik, kesişim ve birleşim.

Arayüz tasarım kılavuzları (interface design guidelines), platformun arayüz için koyduğu beklentilerdir: dokunma hedefinin büyüklüğü, yazının okunabilirliği, renklerin açık ve koyu görünümde tutarlılığı, ekranın yönü. Bu kılavuzlar bir derleyici denetimi değildir; uygulama kılavuza uymasa da derlenir ve çalışır. Kılavuz bir beklenti koyar, platform ise bu beklentilerin bir bölümünü ayarlar aracılığıyla uygular. Bu dersteki ölçüler kılavuzun kendisini değil, kılavuzun dayandığı üç ayarın buluşmasını ölçer.

// Meeting.swift — iki tanim bulusunca nasil cozuldugunu siniflandirir
struct Meeting {
    let label: String
    let first: Set<String>
    let second: Set<String>
    let result: Set<String>?

    init(_ label: String, first: Set<String>, second: Set<String>, result: Set<String>?) {
        self.label = label
        self.first = first
        self.second = second
        self.result = result
    }

    var resolution: String {
        if first.isEmpty || second.isEmpty
            || first.isSubset(of: second) || second.isSubset(of: first) {
            return "olcum-disi"
        }
        guard let result, !result.isEmpty else { return "ret" }
        if result == first.union(second) { return "birlesim" }
        if result == first.intersection(second) { return "kesisim" }
        if result == first || result == second { return "oncelik" }
        return "kural-disi"
    }

    static func list(_ values: Set<String>) -> String {
        values.isEmpty ? "bos" : values.sorted().joined(separator: ",")
    }

    func report() {
        let outcome = result.map(Meeting.list) ?? "yok"
        print("\(label): ilk \(Meeting.list(first)) | ikinci \(Meeting.list(second)) | sonuc \(outcome) -> \(resolution)")
    }
}

func summarize(_ meetings: [Meeting]) {
    for resolution in ["oncelik", "kesisim", "birlesim", "ret"] {
        let count = meetings.filter { $0.resolution == resolution }.count
        print("\(resolution): \(count)")
    }
}

Dinamik Yazı Boyutu

Kullanıcı sistem ayarlarından tercih ettiği yazı boyutunu seçer. Dinamik yazı boyutu (dynamic type) bu tercihin uygulamaya yansımasıdır: uygulama sabit bir punto yazmak yerine bir yazı stili ister ve platform stile kullanıcının boyutunu uygular. Arayüz erişilebilirliği (accessibility) açısından bu, görme güçlüğü olan bir kullanıcının uygulamayı kendi boyutunda okuyabilmesi demektir.

Aşağıdaki parça platform çerçevesine dayandığı için kaynak olarak durur ve çıktısı iddia edilmez.

import SwiftUI

struct SummaryHeader: View {
    var body: some View {
        Text("Toplanti ozeti")
            .font(.body)
    }
}

.font(.body) sabit bir boyut yazmaz, bir stil ister. Gerçek puntoyu kullanıcının ayarı belirler; model, platformun bu kuralını kurar.

PY13. Aşağıdaki sayılar model değerleridir: gerçek bir stilin gerçek puntosunu göstermez. Meeting kümelerle çalıştığı için boyutlar dize olarak taşınır.

Uygulamanın varsayılanı 16, kullanıcının seçtiği 22’dir. Çözüm kullanıcının seçtiğini verir.

// main.swift — kullanicinin yazi boyutu uygulama varsayilanina ustun gelir
let appDefault = "16"
let userChoice = "22"

let size = Meeting("yazi-boyutu",
                   first: [appDefault],
                   second: [userChoice],
                   result: [userChoice])
size.report()

yazi-boyutu: ilk 16 | ikinci 22 | sonuc 22 -> oncelik

Uygulamanın 16’sı düştü, kullanıcının 22’si kaldı. Bu, ayar kullanıcıya ait olduğu için uygulamanın değil kullanıcının sözünün geçtiği bir öncelik. Uygulama bu önceliği bozmak yerine arayüzünü büyüyen yazıya göre kurar: satırlar uzar, düzen alta kayar.

Ekran Yönü

Ekran yönü (orientation), arayüzün hangi yönlerde çevrilebildiğidir. Uygulama desteklediği yönleri bildirir; aygıt ise kendi sunduğu yönleri bildirir. Dönülebilecek yönler ikisinin ortak kısmıdır. Aşağıdaki özellik listesi parçası uygulama tarafını bildirir.

<key>UISupportedInterfaceOrientations</key>
<array>
    <string>UIInterfaceOrientationPortrait</string>
    <string>UIInterfaceOrientationLandscapeLeft</string>
</array>

Aşağıdaki yardımcı iki kümenin ortak yönlerini verir. Dosyanın çıktısı yoktur.

// Orientations.swift — uygulamanin ve aygitin ortak ekran yonleri
func sharedOrientations(app: Set<String>, device: Set<String>) -> Set<String> {
    app.intersection(device)
}

Uygulama dikey, ters dikey ve sol yatay yönü destekler; aygıt dikey, sağ yatay ve sol yatayı sunar. İki küme birbirinin alt kümesi değildir.

// main.swift — ekran yonleri kesisir
let appSide: Set = ["dikey", "ters-dikey", "yatay-sol"]
let deviceSide: Set = ["dikey", "yatay-sag", "yatay-sol"]

let turns = Meeting("yon-destegi",
                    first: appSide,
                    second: deviceSide,
                    result: sharedOrientations(app: appSide, device: deviceSide))
turns.report()

yon-destegi: ilk dikey,ters-dikey,yatay-sol | ikinci dikey,yatay-sag,yatay-sol | sonuc dikey,yatay-sol -> kesisim

ters-dikey yalnız uygulamada, yatay-sag yalnız aygıtta vardı; ikisi de düştü. PY14. Yön adları model adlarıdır ve bu kümeler gerçek bir aygıtın gerçek yönlerini temsil etmez. Önceki dersin arka plan kipleri ile bu ölçüm aynı çözümü paylaşır: iki taraf birbirinin değerini vermeden, yalnız ortak olanı bırakır.

Renk Paleti

Sistem arayüzü kendi adlandırılmış renklerini sunar ve uygulama kendi renklerini ekler. Açık ve koyu görünümde ayrı değer alan sistem renkleri uygulamanın elinde hazır bulunur; uygulama ayrıca kendi marka renklerini tanımlar. Kullanılabilen palet ikisinin toplamıdır. Aşağıdaki yardımcı iki paletin adlarını birleştirir.

// Palette.swift — sistem ve uygulama renk adlarini birlestirir
func mergedColorNames(system: [String: String], app: [String: String]) -> Set<String> {
    Set(system.keys).union(app.keys)
}

// main.swift — sistem ve uygulama renkleri birlesir
let systemColors = ["arka-plan": "sistem", "metin": "sistem", "vurgu": "sistem"]
let appColors = ["marka": "uygulama", "vurgu": "uygulama"]

let palette = Meeting("renk-paleti",
                      first: Set(systemColors.keys),
                      second: Set(appColors.keys),
                      result: mergedColorNames(system: systemColors, app: appColors))
palette.report()

renk-paleti: ilk arka-plan,metin,vurgu | ikinci marka,vurgu | sonuc arka-plan,marka,metin,vurgu -> birlesim

Dört ad, iki kaynaktan geldi. vurgu iki tarafta da var ve birleşimde bir kez görünür. Bu ölçü yalnız adların birleşimini sayar; aynı adın iki tarafta farklı değer taşıması durumunda hangisinin geçerli olacağı ayrı bir öncelik sorusudur ve burada ölçülmedi.

Platform Tutarlılığı Beklentisi

Arayüz tasarım kılavuzlarının temel beklentisi tutarlılıktır: bir uygulama platformun alışkın olduğu kalıpları izlerse kullanıcı onu öğrenmeden kullanır. Geri dönme hareketi her uygulamada aynı yerde ve aynı biçimde olur; paylaşma düğmesi aynı simgeyi taşır; liste satırı aynı biçimde kaydırılır. Uygulama bu kalıpları bozarsa kullanıcı o uygulamaya özgü bir kuralı öğrenmek zorunda kalır. Tutarlılık bir yasak değil, bir bedel hesabıdır: kalıbı bozan uygulama, kullanıcının öğrenme yükünü kendisi üstlenir.

Bu beklentinin ayarlarla bağı şudur: platform kalıpları, sistem bileşenlerinin içine yazılmıştır. Uygulama bir sistem bileşenini kullandığında kılavuzun karşıladığı kalıbı, dinamik yazı boyutunu ve görünümü (açık ya da koyu) kendiliğinden alır. Uygulama kendi bileşenini çizdiğinde bu davranışların her birini kendisi karşılamak zorundadır. Önceki bölümlerdeki öncelik ve birleşim ölçümlerinin ikisi de bu iş bölümünün sonucudur: ayarın sahibi kullanıcıdır, bileşen ona uyar.

Erişilebilirlik

Arayüz erişilebilirliği yalnız yazı boyutuyla sınırlı değildir. Ekran okuyucu kullanan bir kullanıcı için her denetimin bir adı ve rolü olmalıdır: bir simge düğmesinin yalnız resim olması, okuyucunun ona hiçbir şey söyleyememesi demektir. Renk körlüğü olan bir kullanıcı için bilgi yalnız renkle verilmemelidir; durum bir simge ya da metinle de belirtilmelidir. Hareketi azaltmayı seçen kullanıcı için geçiş animasyonları sadeleşmelidir. Koyu görünümü seçen kullanıcı için renkler hem açık hem koyu zeminde okunmalıdır; bu yüzden sistem renkleri sabit bir renk değil, görünüme göre değişen adlardır.

Bunların hiçbiri uygulama için bir zorunluluk değildir; derleyici denetlemez. Ama hepsi kullanıcıya ait bir ayardır ve ayar uygulamanın varsayılanına üstün gelir. Dinamik yazı boyutunda ölçülen öncelik bu genel kuralın yalnız bir örneğidir: kullanıcının ayarı ne olursa olsun, uygulama o ayarı karşılamak için hazırlıklı olmalıdır.

Gezinme ve Dokunma Hedefi

Gezinme (navigation), kullanıcının uygulamanın bölümleri arasında nasıl dolaştığıdır. Kılavuz birkaç kalıbı tanır: üstte geri dönülebilen bir hiyerarşi, altta eşdeğer bölümler arasında geçişi sağlayan bir sekme çubuğu, geçici bir görev için üstten açılan bir sayfa. Kalıp, içeriğin yapısına uymalıdır: birbirine eşdeğer bölümler sekme çubuğuna, adım adım ilerleyen içerik hiyerarşiye aittir. Yapıya uymayan kalıp kullanıcının yönünü kaybettirir.

Dokunma hedefi (touch target), kullanıcının parmağıyla vurduğu alandır. Kılavuz, bu alanın parmağın rahatça isabet edebileceği kadar geniş olmasını bekler: küçük bir simge, görünüşü küçük olsa bile, etrafındaki boşlukla birlikte yeterli bir alan sağlamalıdır. Bitişik iki hedef arasında da boşluk bırakılmalıdır, yoksa kullanıcı yanlış olana dokunur. Dokunma hedefi yazı boyutuyla birlikte büyür: kullanıcı yazıyı büyütmüşse hedeflerin de büyümesi gerekir, aksi hâlde büyüyen yazı sıkışmış bir düzende okunamaz hale gelir.

Bu konuların hepsi aynı şeyi söyler: kılavuz bir çözüm sınıfı değil, bir beklentidir. Dersin sonundaki sınırlayıcı ölçümde 20 gibi bir sonucun kural-disi işaretlenecek olmasının nedeni de budur; kılavuz “uygun” demedikçe ölçü bir sınıf atamaz.

Açık ve Koyu Görünüm

Platform iki görünüm sunar: açık ve koyu. Kullanıcı birini seçer ya da sistemin gün içinde değiştirmesine izin verir. Uygulama bu seçime uymalıdır, çünkü seçim kullanıcının ayarıdır. Sabit bir renk kodu yazan uygulama, koyu zeminde okunmaz hale gelebilir; sistem renk adlarını kullanan uygulama ise görünüme göre değişen bir değeri kendiliğinden alır. Renk paleti ölçümündeki arka-plan ve metin adları bu yüzden önemlidir: ad sabittir, ardındaki değer görünümle birlikte değişir.

Uygulamanın kendi renkleri de iki görünüm için ayrı ayrı tanımlanmalıdır. Marka rengi açık zeminde yeterince koyu, koyu zeminde yeterince açık olmalıdır, yoksa metin ile zemin arasındaki karşıtlık düşer ve okunabilirlik kaybolur. Karşıtlık yalnız güzellik değil, erişilebilirliktir: düşük karşıtlıklı bir metin, görme gücü zayıf kullanıcı için okunamaz.

Güvenli Alan ve Uyarlanır Yerleşim

Güvenli alan (safe area), ekranın içeriğin güvenle yerleştirilebileceği bölümüdür. Aygıtın yuvarlak köşeleri, kameranın ekrana girdiği bölge ve sistem çubukları içeriğin bir kısmını örtebilir; platform güvenli alanı bu bölgelerin dışında tanımlar. Metin ve denetimler güvenli alanın içine yerleşmelidir. Arka plan rengi ya da görsel ise güvenli alanın dışına, ekranın kenarına kadar uzanabilir, çünkü örtülmesi sorun yaratmaz.

Uyarlanır yerleşim (adaptive layout), düzenin ekran boyutuna ve yönüne göre kendini uyarlamasıdır. Dar bir ekranda tek sütun, geniş bir ekranda iki sütun gibi. Burada ekran yönü ölçümüyle bir bağ vardır: uygulamanın desteklediği ve aygıtın sunduğu yönlerin kesişimi, düzenin hangi yönlerde çalışması gerektiğini söyler. Kesişimde yalnız dikey kalmışsa yatay düzen yazmaya gerek yoktur; kesişim genişse her yön için düzen sınanmalıdır. Yani kesişim aynı zamanda bir iş listesidir.

Kılavuzdan Sapmak

Kılavuz bir beklenti olduğu için sapmak mümkündür, ama sapmanın bir gerekçesi olmalıdır. Bir oyun ya da bir çizim uygulaması, standart gezinme kalıplarını izlemeyebilir, çünkü içeriğin kendisi başka bir etkileşim biçimi ister. Bir okuma uygulaması ise standart kalıpları bozmamalıdır, çünkü bozmanın karşılığında kazanılan bir şey yoktur. Sapmanın maliyeti kullanıcının öğrenme yüküdür; bu yükü haklı çıkaran bir kazanç varsa sapmak makuldür.

Ama bazı beklentiler sapmaya açık değildir: kullanıcının yazı boyutu ayarına, erişilebilirlik ayarlarına ve görünüm seçimine uymak. Bunlar kullanıcıya ait ayarlardır ve uygulama tarafından geçersiz sayılamaz. Öncelik ölçümünün gösterdiği de budur: kullanıcının ayarı uygulamanın varsayılanından önce gelir; uygulama kılavuzdan sapabilir, ama kullanıcının ayarının aleyhine sapamaz.

Sınırlayıcı Ölçüm

Kılavuz bir beklentidir, bir çözüm sınıfı değildir. Bu yüzden kılavuza uymayan bir sonuç, dört çözümden biri olarak sayılmaz. Aşağıdaki ölçümde uygulama 16, kullanıcı 22 der; sonuç ise 20 çıkar. Bu, ne uygulamanın ne kullanıcının değeridir, ikisinin ortası bir değerdir.

// main.swift — kural disi sonuc dortten birine girmez
let clamped = Meeting("sinirlanmis-boyut",
                      first: ["16"],
                      second: ["22"],
                      result: ["20"])
let inside = Meeting("sinir-icinde",
                     first: ["16"],
                     second: ["22"],
                     result: ["22"])
clamped.report()
inside.report()

sinirlanmis-boyut: ilk 16 | ikinci 22 | sonuc 20 -> kural-disi
sinir-icinde: ilk 16 | ikinci 22 | sonuc 22 -> oncelik

20 dört çözümün hiçbirine girmedi ve kural-disi oldu. Bir kılavuzun “yazı boyutunu sınırla” demesi, bu çözümün dört sınıfa eklendiği anlamına gelmez; sonuç kümeler üzerindeki dört işlemin çıktısı olmayan bir değerse ölçü bunu sınıflamaz, olduğu gibi işaretler.

PY15. Bu ölçüm yalnız model değerleriyle 16, 22 ve 20 için. Gerçek bir sistemin gerçekten ara değer üretip üretmediği ölçülmedi.

Özet

• Arayüz tasarım kılavuzları platformun arayüz için koyduğu beklentilerdir, derleyici denetimi değildir.
• Dinamik yazı boyutunda kullanıcının ayarı uygulamanın varsayılanına üstün gelir: çıktı öncelik.
• Uygulamanın desteklediği ve aygıtın sunduğu ekran yönleri kesişir; yalnız ortak yönler kalır.
• Sistem ve uygulama renkleri birleşir; ortak ad bir kez görünür.
• Kural dışı bir sonuç dört çözümden biri sayılmaz ve ayrı işaretlenir.
• Bu dersin çözümü: öncelik.

Sonraki Adım

Önceki derslerde buluşan taraflar ayarlardı. Sıradaki derste buluşan taraflar sürüm aralıklarıdır: uygulamanın desteklediği sürümler ile bir arayüzün bulunduğu sürümler kesişir ve ayrık kaldığında sonuç ret olur.