Aralık Ölçeği

Izgara yatay ölçüyü türetilir hâle getirdi: sütun sınırları artık seçilmiyor, hesaplanıyor. Ancak ızgaranın kendi girdileri hâlâ serbestti. Kenar boşluğu 24 piksel seçildi, oluk 24 piksel seçildi. Aynı serbestlik dikey eksende de sürüyor: kayıtlar arası boşluk, bölüm başlığının üstündeki boşluk, düğmenin iç boşluğu.

Yinelenme ve Tutarlılık dersinde çıkarılan envanter tam bu boşlukta şişmişti: dört özellikte 31 ayrı değer, bunların 13’ü aralık. Bu ders o 13 değeri bir üretim kuralına bağlar ve kuralın hangi ölçütlerle seçileceğini gösterir.

Ölçek Bir Üretim Kuralıdır

Aralık ölçeği (spacing scale), arayüzde kullanılabilecek boşluk değerlerinin sonlu ve kurallı bir kümesidir. Ölçeğin sağladığı şey listenin kendisi değil, listenin kapalı olmasıdır: ölçekte olmayan bir değer kullanılamaz.

Bu kapalılık iki iş görür. Birincisi karar sayısını düşürür; bir boşluk için soru “kaç piksel” değil “hangi adım” olur ve seçenek sayısı ondan az kalır. İkincisi, kararı denetlenebilir kılar: ölçek dışı bir değer bir tercih değil, bir ihlaldir.

Ölçeğin dört ölçütü vardır ve bu ölçütler birbirini çeker:

• Adım sayısı. Az adım az karar demektir, ama çok az adım gerekli ayrımı veremez.
• Ayırt edilebilirlik. İki komşu adım arasındaki fark, ayırt edilebilirlik eşiğinin üstünde olmalıdır; olmazsa ölçek gereksiz adım taşır.
• Gruplama oranı. Yakınlık ve Gruplama dersinde konan ölçüt, bir grup sınırının grup içi boşluğun en az iki katı olmasını istiyordu. Ölçek, oranı en az 2 olan adım çiftleri içermelidir.
• Ham değere yakınlık. Var olan tasarım ölçeğe oturtulduğunda kaymalar küçük kalmalıdır; büyük kaymalar ölçek geçişini pahalı hâle getirir.

Üç Ölçek Ailesini Hesaplamak

Aşağıdaki program üç ölçek ailesini üretir ve dört ölçütle değerlendirir. Ham değerler, Yinelenme ve Tutarlılık dersinde çıkarılan 13 aralık değeridir.

// 07-olcek.mjs — dogrusal, geometrik ve karma aralik olceklerinin karsilastirmasi

const TABAN = 4;
const UST = 96;
const AYIRT_ESIGI = 2; // bu farkin altindaki iki adim ayirt edilemez

function dogrusal(taban, adim, ust) {
  const o = [];
  for (let v = taban; v <= ust; v += adim) o.push(v);
  return o;
}

function geometrik(taban, oran, ust) {
  const o = [];
  let v = taban;
  while (v <= ust) {
    o.push(Math.round(v));
    v *= oran;
  }
  return [...new Set(o)];
}

// Katalog arayuzunun ham aralik degerleri (Yinelenme ve Tutarlilik dersinden).
const HAM = [4, 6, 8, 10, 12, 14, 16, 20, 24, 28, 32, 40, 48];

function enYakin(deger, olcek) {
  return olcek.reduce((a, b) => (Math.abs(b - deger) < Math.abs(a - deger) ? b : a));
}

function degerlendir(ad, olcek) {
  const oranlar = [];
  let ayirtEdilemeyen = 0;
  for (let i = 1; i < olcek.length; i++) {
    oranlar.push(olcek[i] / olcek[i - 1]);
    if (olcek[i] - olcek[i - 1] <= AYIRT_ESIGI) ayirtEdilemeyen++;
  }
  const kaymalar = HAM.map((h) => Math.abs(enYakin(h, olcek) - h));
  const ortKayma = kaymalar.reduce((t, k) => t + k, 0) / kaymalar.length;
  // Ic ice gruplama icin ardisik adim cifti: oran en az 2 olmali (bkz. Yakinlik ve Gruplama).
  const gruplanabilir = oranlar.filter((o) => o >= 2).length;

  console.log(`${ad}`);
  console.log(`  adimlar: ${olcek.join(", ")}`);
  console.log(`  adim sayisi: ${olcek.length}`);
  console.log(
    `  komsu oran araligi: ${Math.min(...oranlar).toFixed(2)} - ${Math.max(...oranlar).toFixed(2)}`
  );
  console.log(`  ayirt edilemeyen komsu cift (fark <= ${AYIRT_ESIGI}px): ${ayirtEdilemeyen}`);
  console.log(`  orani 2 ve uzeri olan komsu cift: ${gruplanabilir}`);
  console.log(`  ham degerlerin ortalama kaymasi: ${ortKayma.toFixed(2)}px   en buyuk: ${Math.max(...kaymalar)}px`);
  console.log("");
}

degerlendir("dogrusal  4px adimli", dogrusal(TABAN, 4, UST));
degerlendir("dogrusal  8px adimli", dogrusal(TABAN, 8, UST));
degerlendir("geometrik oran 2.0", geometrik(TABAN, 2, UST));
degerlendir("geometrik oran 1.5", geometrik(TABAN, 1.5, UST));

const KARMA = [4, 8, 12, 16, 24, 32, 48, 64, 96];
degerlendir("karma", KARMA);

// Gruplama duzeyleri komsu adim olmak zorunda degil; olcegin icinden secilir.
const GRUPLAMA = [4, 8, 24, 48];
console.log("gruplama duzeyleri karma olcegin icinden seciliyor mu");
for (const d of GRUPLAMA) {
  console.log(`  ${String(d).padStart(3)}px  olcekte ${KARMA.includes(d) ? "var" : "YOK"}  (adim ${KARMA.indexOf(d) + 1})`);
}
console.log("  ardisik gruplama duzeyi oranlari:");
for (let i = 1; i < GRUPLAMA.length; i++) {
  const o = GRUPLAMA[i] / GRUPLAMA[i - 1];
  console.log(`    ${GRUPLAMA[i - 1]} -> ${GRUPLAMA[i]}  oran ${o.toFixed(2)}  ${o >= 2 ? "ayirir" : "BELIRSIZ"}`);
}

dogrusal  4px adimli
  adimlar: 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96
  adim sayisi: 24
  komsu oran araligi: 1.04 - 2.00
  ayirt edilemeyen komsu cift (fark <= 2px): 0
  orani 2 ve uzeri olan komsu cift: 1
  ham degerlerin ortalama kaymasi: 0.46px   en buyuk: 2px

dogrusal  8px adimli
  adimlar: 4, 12, 20, 28, 36, 44, 52, 60, 68, 76, 84, 92
  adim sayisi: 12
  komsu oran araligi: 1.10 - 3.00
  ayirt edilemeyen komsu cift (fark <= 2px): 0
  orani 2 ve uzeri olan komsu cift: 1
  ham degerlerin ortalama kaymasi: 2.31px   en buyuk: 4px

geometrik oran 2.0
  adimlar: 4, 8, 16, 32, 64
  adim sayisi: 5
  komsu oran araligi: 2.00 - 2.00
  ayirt edilemeyen komsu cift (fark <= 2px): 0
  orani 2 ve uzeri olan komsu cift: 4
  ham degerlerin ortalama kaymasi: 3.85px   en buyuk: 16px

geometrik oran 1.5
  adimlar: 4, 6, 9, 14, 20, 30, 46, 68
  adim sayisi: 8
  komsu oran araligi: 1.43 - 1.56
  ayirt edilemeyen komsu cift (fark <= 2px): 1
  orani 2 ve uzeri olan komsu cift: 0
  ham degerlerin ortalama kaymasi: 1.69px   en buyuk: 6px

karma
  adimlar: 4, 8, 12, 16, 24, 32, 48, 64, 96
  adim sayisi: 9
  komsu oran araligi: 1.33 - 2.00
  ayirt edilemeyen komsu cift (fark <= 2px): 0
  orani 2 ve uzeri olan komsu cift: 1
  ham degerlerin ortalama kaymasi: 1.69px   en buyuk: 8px

gruplama duzeyleri karma olcegin icinden seciliyor mu
    4px  olcekte var  (adim 1)
    8px  olcekte var  (adim 2)
   24px  olcekte var  (adim 5)
   48px  olcekte var  (adim 7)
  ardisik gruplama duzeyi oranlari:
    4 -> 8  oran 2.00  ayirir
    8 -> 24  oran 3.00  ayirir
    24 -> 48  oran 2.00  ayirir

Her Ölçek Bir Ölçütü Kaybeder

Dört adayın hiçbiri dört ölçütü birden karşılamıyor ve kayıpların yeri farklı.

Doğrusal 4 piksel adımlı ölçek ham değerlere en yakın olanı: ortalama kayma 0.46 piksel. Ama 24 adımı var. Envanterde 13 ayrı aralık değeri vardı; bu ölçek 24 değere izin veriyor, yani bir kısıt getirmiyor. Ölçeğin işi seçenek sunmak değil seçenek kısmaktır; seçenek sayısı ham durumdan fazlaysa ölçek adını hak etmez.

Doğrusal 8 piksel adımlı ölçek adım sayısını 12’ye indiriyor ama tabandan 4’ten başladığı için 8, 16, 24 gibi yaygın değerleri hiç içermiyor: adımları 4, 12, 20, 28 biçiminde ilerliyor. Ortalama kayma 2.31 piksele çıkıyor. Kaybı, taban seçimiyle adım büyüklüğünün uyumsuz olmasıdır.

Geometrik ölçek, oran 2.0 yalnız beş adım üretiyor ve komşu oranların hepsi tam 2 — gruplama açısından ideal. Bedeli üst bölgedeki boşluktur: 16’dan sonra doğrudan 32’ye, sonra 64’e atlıyor. Ham değerlerin ortalama kayması 3.85, en büyük kayma 16 piksel. 24 piksellik bir aralık ölçekte karşılıksız kalıyor.

Geometrik ölçek, oran 1.5 ince ayar veriyor ama iki kusuru var. Yuvarlama sonucu 9, 14, 30, 46 gibi ezberlenmeyen sayılar üretiyor ve daha önemlisi: oranı 2 ve üzeri olan komşu çift sayısı sıfır. Bu ölçekle bir grup sınırı komşu adımla ifade edilemez; gruplama için her zaman iki adım atlamak gerekir.

Karma ölçek dört ölçütü de orta düzeyde karşılıyor: 9 adım, ayırt edilemeyen komşu çift yok, ortalama kayma 1.69 piksel. Kaybı en büyük kaymanın 8 piksel olmasıdır — bu, 40 piksellik ham değerin 32’ye oturmasından gelir ve gözle görülür bir değişikliktir.

Seçim ölçütü şudur: ölçek, en çok kullanılan bölgede en ince, en az kullanılan bölgede en kaba olmalıdır. Arayüzlerde boşlukların çoğu 4 ile 32 piksel arasındadır; 64 ile 96 arasında ince ayar gerekmez. Karma ölçek tam bunu yapar: alt bölgede 4 piksel adımlarla ilerler, üst bölgede iki katına çıkar.

Ölçek İki İşi Birden Yapar

Çıktının son bloğu ölçeğin ikinci işini doğruluyor. Yakınlık ve Gruplama dersinde katalog ekranının dört gruplama düzeyi 4, 8, 24 ve 48 piksel olarak alınmıştı. Bu dört değerin dördü de karma ölçeğin içinde: 1., 2., 5. ve 7. adımlar. Aralarındaki oranlar 2, 3 ve 2 — üçü de gruplama eşiğini geçiyor.

Buradaki asıl ders, gruplama düzeylerinin komşu adım olmak zorunda olmadığıdır. Bir ölçek iki farklı iş görür: ince ayar için birbirine yakın adımlar, gruplama için birbirinden uzak adımlar. Tek bir sabit oranla üretilen ölçek bu iki işten yalnız birini yapabilir. 2.0 oranı gruplamayı verir, ince ayarı vermez; 1.5 oranı ince ayarı verir, gruplamayı vermez. Karma ölçek ikisini de verir, çünkü gruplama düzeyleri adımların arasından seçilir.

Bu, ölçeği kullanırken bir kural daha gerektirir: ölçeğe erişim serbest bırakılmaz. Bir tasarımcı grup sınırı için 12 pikseli seçebilir; ölçekte vardır ama grup içi boşluk 8 pikselse oran 1.5 kalır. Ölçek, yanlış değeri değil yanlış çifti engellemez. Denetim bu yüzden ölçek üyeliğine değil, kullanılan çiftlerin oranına bakar.

Adımı Ölçüsüyle Değil Rolüyle Anmak

Ölçek adımlarına verilecek adlar da bir karardır. Adım ölçüsüyle anılırsa — “yirmi dört piksellik boşluk” — ölçek değiştiğinde bütün adlar yanlış hâle gelir. Adım sırasıyla anılırsa — “beşinci adım” — araya bir adım eklendiğinde bütün numaralar kayar.

Kullanılabilir yol, adı ölçüye değil role bağlamaktır: grup içi boşluk, blok arası boşluk, bölüm arası boşluk. Rol adı, ölçeğin hangi adımına karşılık geldiğini tek yerde tanımlar; ölçek değiştiğinde yalnız o tanım değişir, arayüzün geri kalanı değişmez. Bu yaklaşımın sistem düzeyindeki karşılığı Tasarım Sistemleri kursunun konusudur; burada gerekli olan tek kural, aralık kararlarının rol adlarıyla anılmasıdır.

Özet

• Aralık ölçeği, kullanılabilecek boşluk değerlerinin kapalı bir kümesidir; değerini listeden değil, listenin dışına çıkılamamasından alır.
• Bir ölçek dört ölçütle değerlendirilir: adım sayısı, komşu adımların ayırt edilebilirliği, gruplama için gereken 2 ve üzeri oranların varlığı, ham değerlere oturtma kayması.
• Doğrusal 4 piksel adımlı ölçek 24 değere izin verdiği için kısıt getirmez; ölçeğin işi seçenek sunmak değil kısmaktır.
• Tek bir sabit oranla üretilen ölçek ince ayar ile gruplamadan yalnız birini verir: 2.0 oranı gruplamayı, 1.5 oranı ince ayarı verir.
• Karma ölçek alt bölgede ince, üst bölgede kaba ilerleyerek her iki işi de karşılar; gruplama düzeyleri komşu adımlardan değil, ölçeğin içinden seçilir.
• Ölçek üyeliği tek başına yetmez; denetim kullanılan boşluk çiftlerinin oranına bakar ve adımlar ölçüleriyle değil rolleriyle anılır.

Sonraki Adım

Ölçek boşlukların hangi değerleri alabileceğini söyledi, hangi adımın nerede kullanılacağını söylemedi. Katalog sonuç listesinde her kayıt için 8 piksel mi 24 piksel mi kullanılacağı, bir ekranda kaç kaydın göründüğünü doğrudan belirler. Sonraki ders bu ödünleşimi hesaplar: satır yüksekliğinden ekran başına düşen kayıt sayısını çıkarır, 200 sonucun taranması için gereken ekran sayısını bulur ve yoğunluk kararının hangi görevlerde hangi yönde verildiğini gösterir.