Arayüz Tasarımında Boşluk Ölçeği Belirleme: 8 pt Sistemi ve Token Mantığı

Boşluk ölçeği neden gerekir

Bir arayüzde yüzlerce boşluk kararı vardır: düğmenin iç boşluğu, iki kart arası, başlık ile paragraf arası, form alanları arası. Her karar serbest bırakılırsa aynı ilişki farklı ekranda farklı boşlukla çıkar. Sonuç, bakıldığında nedenini söyleyemediğiniz bir düzensizliktir.

Boşluk ölçeği bu kararları sınırlı bir değer kümesine indirir. Tasarımcı her seferinde rastgele bir değer yazmak yerine ölçekten bir adım seçer. Bu hem hızı hem tutarlılığı artırır, çünkü karar sayısı azalır.

Ölçek iletişimi de kolaylaştırır. Tasarımcı ile geliştirici “biraz daha geniş” gibi belirsiz ifadeler yerine “bir adım büyük” diyebilir. Geliştirici de değeri tasarım dosyasından tahmin etmek yerine adıyla bulur.

Ölçek, ızgara sistemiyle karıştırılmamalıdır. Izgara sütunların yerleşimini, yani sayfanın büyük yapısını belirler; boşluk ölçeği ise öğelerin içindeki ve aralarındaki aralıkları belirler. İkisi birlikte çalışır ama farklı sorulara cevap verir.

Temel birimi seçmek: 8 pt sistemi

Ölçeğin ilk kararı temel birimdir. Tüm değerler bu birimin katları olarak türetilir. En yaygın yaklaşımlardan biri 8 pt sistemidir: boşluklar sekizin katları olur. Sekiz, hem küçük bir aralık için yeterince ince hem de ölçeği hızla büyütebilecek kadar elverişli bir değerdir; bu yüzden birçok tasarım ekibi ona yönelir.

Sistemin küçük bileşenlerde yetersiz kaldığı durumlar olur: simge ile metin arası ya da sıkışık bir etiket gibi. Burada dörtlük yarım adım eklenir; 4 pt, ince ayar içindir ve ölçeğin genel ritmini bozmaz. Yarım adımı ölçeğin her yerinde değil, yalnız küçük ölçekli bileşenlerde kullanmak iyi bir kuraldır.

8 pt sisteminin kutsal bir kural olmadığını bilin. Başka bir temel birim de seçilebilir; önemli olan seçimin bilinçli, tek ve yazılı olmasıdır. Seçtiğiniz birimin, kullandığınız tasarım aracının ve hedef platformların ölçüm birimiyle uyumlu olup olmadığını da kontrol edin. Sistemin yaygın bir pratik olduğunu not edin; resmî bir standart olarak sunulmamalıdır.

Ölçeği kurmak ve adlandırmak

Temel birimi seçtikten sonra ölçeğin kaç basamaklı olacağına karar verin. Basamaklar çok az olursa ince ayar yapılamaz, çok fazla olursa ölçek anlamını yitirir ve her basamak birbirine benzer. Tipik olarak küçükten büyüğe birkaç basamak yeterlidir: çok küçük aralıklardan geniş bölüm aralıklarına kadar.

Basamakları değerle değil, ölçekteki yeriyle adlandırın. Beden benzeri adlar bu iş için uygundur: çok küçük, küçük, orta, büyük, çok büyük gibi. Böylece tasarımcı ve geliştirici piksel yerine adı konuşur. Değer sonradan değişirse ad aynı kalır, çünkü ad bir rol anlatır.

Adlar tasarım aracında ve kodda aynı olmalıdır. Aracın değişken özelliğiyle boşluk değerlerini tanımlayın; kodda da aynı adlarla özel CSS özellikleri ya da bir tokens dosyası kullanın. Ad uyumu, tasarımdan koda geçişte kayıp yaşanmasını önler.

Ölçeği bir kez kurduktan sonra onu bir tasarım sisteminin parçası olarak belgeleyin. Ölçeğin nasıl genişletileceği ve ölçek dışı değere ne zaman izin verileceği de yazılmalı.

Bileşenlerde kullanım kuralı

Ölçeğin kendisi yetmez; nerede hangi adımın kullanılacağı da belli olmalı. Aksi halde herkes ölçekten farklı adım seçer ve tutarlılık yine bozulur.

Üç alanda kural koyabilirsiniz:

• İç boşluk: düğme, kart, giriş alanı gibi bileşenlerin kendi içindeki boşluk. Bu, bileşenin boyutuna göre küçük ve orta adımlardan seçilir.
• Bileşenler arası boşluk: aynı gruptaki öğeler birbirine yakındır, farklı gruptaki öğeler uzaktır. Yakınlık ilişkiyi anlatır; bu ilke algıyı doğrudan etkiler.
• Bölüm boşluğu: sayfanın büyük parçaları arasındaki geniş aralıklar, ölçeğin büyük adımlarından alınır.

Bir kural şudur: bir grubun içi, gruplar arasından dar olmalıdır. Başlık ve altındaki paragraf, farklı iki bölümden daha yakın durur. Bu ilişkiyi ölçek adımlarıyla ifade ederseniz tasarım bilinçli ve okunur görünür.

Örnek bir senaryo: bir ödeme formunda alan etiketi ile alan arası küçük adım, iki alan arası orta adım, form ile düğme arası büyük adım olabilir. Kural belirlendiğinde yeni bir forma geçen tasarımcı aynı ritmi kendiliğinden yakalar.

Sık hatalar

Birinci hata, ölçeğe uymayan değerleri “gözle ayarlamak”tır. Küçük sapmalar birikir ve zamanla ölçek fiilen ortadan kalkar. Ölçek dışı bir değere ihtiyaç varsa bunun nedenini not edin ve gerekiyorsa ölçeği güncelleyin.

İkinci hata, çok fazla adım tanımlamaktır. Birbirinden ayırt edilemeyen basamaklar karar vermeyi kolaylaştırmaz.

Üçüncü hata, ölçeği değerle adlandırmaktır. Değer değişince adlar yalan olur; rol adı kullanmak daha dayanıklıdır.

Dördüncü hata, tasarım ve kod ölçeğini ayrı tutmaktır. Aynı ad ve aynı değer iki tarafta da geçerli olmalı.

Beşinci hata, bileşen içi ve bileşenler arası boşluğu karıştırmaktır. İkisi farklı ilişkileri anlatır.

Altıncı hata, duyarlı tasarımı unutmaktır. Küçük ekranlarda büyük adımlar fazla yer kaplar. Hangi adımların küçük ekranda bir basamak küçültüleceğini kural olarak belirleyin.

Üçüncü hata, ölçeği yalnız tasarım dosyasında bırakmaktır. Geliştirme tarafında aynı adlarla karşılığı yoksa tasarımdaki tutarlılık koda geçmez. Ölçek, her iki tarafta da aynı adlarla tanımlı olmalı ve değişiklikler birlikte yürütülmelidir.

Bu beceriyi Mindset programlarında nerede çalışırsınız

Arayüz tasarlayan ya da bir tasarım sistemini yöneten bir tasarımcı için boşluk ölçeği, tutarlılığın en pratik aracıdır. UX / UI Uzmanlığı Sertifika Programı, Figma İleri Düzey Kullanımı ve Tasarım Sistemi modülüyle ölçek, bileşen ve token mantığını tasarım aracı içinde uygulamak için uygundur. UX/UI Bootcamp ise UI Tasarım Temelleri modülüyle boşluk ve hiyerarşi gibi görsel tasarım ilkelerini temelden ele alır.