- Birçok şirketin uygulamasında metin, ikon gibi UI öğeleri düzgün şekilde ortalanmış değil
- CSS’de
flexvegridkullanıldığında ortalama kolayca yapılabilmesine rağmen
display: flex
justify-content: center /* yatay ortalama */
align-items: center /* dikey ortalama */
veya
display: grid
justify-items: center /* yatay ortalama */
align-items: center /* dikey ortalama */
Ortalamayı zorlaştıran etkenler
- Font metrikleri önemli bir rol oynuyor. Popüler fontların çoğunda bounding box tam oturmuyor ve boşluklar bulunduğu için ortalamak zorlaşıyor
line-heightayarının etkisi nedeniyle farklı container’larda bulunan iki öğeyi hizalamak neredeyse imkânsız oluyor- Bir ikonu metnin yanına hizalamak da çok zor bir iş. CSS’in
vertical-alignözelliğiyle ikonlar anlamlı biçimde hizalanamıyor - İkonların font dosyasına gömülerek kullanıldığı icon font’larda boyut ve padding ayarı yapılamadığı için hizalama daha da zorlaşıyor
- Tasarımcılar da ikonun biçimini hesaba katmadan mekanik biçimde ortalama yapma hatasına düşebiliyor
- Yatay hizalama da yeterince özen gösterilmezse yanlış olabilir
Çözüm yolları
Tasarımcılar
- Fontun bounding box’ı metne tam oturacak şekilde ayarlanırsa ortalama çok daha kolay hale gelir
- Figma bu özelliği destekliyor (varsayılan değil)
- Vertical Trim : Cap Height to baseline
Font tasarımcıları
- Font metrikleri, ascender ile descender arasındaki alan cap-height’ın 2 katı olacak şekilde ayarlanırsa geliştiriciler daha kolay ortalama yapabilir
- Gerçek ascender/descender değerlerini sınıra kadar uzatmak gerekmez; yalnızca sayısal değerlerin uyması yeterlidir
Web geliştiricileri
- Hangi fontun kullanılacağını önceden bilmek gerekir (font fallback olduğunda çalışmaz)
- Font metrikleriyle hesaplanan
padding-bottomdeğeri eklenerek dikey ortalama düzeltilebilir - İkonlar da
vertical-align: baselineverilerek ve font metrikleri ile ikon boyutuna göre hesaplanan değer kadar aşağı kaydırılarak hizalanabilir
Icon font’lar
- Icon font kullanmayı lütfen bırakın ve normal görsel formatları kullanın
- Genişliği ve yüksekliği olan iki dikdörtgeni hizalamaktan daha kolay bir şey yoktur
Görsel düzeltme
- Geliştiriciler yalnızca matematiksel olarak kusursuz dikdörtgenleri hizalayabilir. Manuel düzeltme gerektiren durumlarda, ikonlar dikdörtgenin içine görsel olarak dengeli yerleştirilmelidir
GN⁺ görüşü
- Bu, küçük detaylara gösterilen ilginin UI kalitesini büyük ölçüde artırabileceğini gösteriyor. Çok önemsiz gibi görünen yalnızca bir ortalama detayı bile genel hissi değiştirebilir
- Sadece "tasarımcı tasarımla, geliştirici de sadece uygulamayla ilgilenir" anlayışıyla değil, birbirlerinin alanını anlayıp işbirliği yaparak iyi sonuç alınabileceğine işaret ediyor
- En baştan tarayıcılar arasında render farkı oluşmaması ve tasarımcının niyetinin daha kolay uygulanabilmesi için, tasarım aşamasından itibaren font metriklerini ayarlayıp taslağı buna göre hazırlamak iyi olabilir
- Apple, MS, Google gibi büyük şirketlerin ürünlerinde bile bu sorun görülebiliyor; ama çoğu insan bunu fark etmeden geçecek kadar ilgisiz görünüyor. Bu da ne kadar titiz detay odaklı üretim yapmanın önemli olduğunu gösteriyor
- Özellikle son dönemde UI test otomasyon araçlarının kullanılmasıyla, insan gözüyle tek tek kontrol etme süreci atlandığından bu tür sorunlar daha sık hale gelebilir; bu yüzden dikkat etmek gerekiyor
3 yorum
Mekanik olarak ortalamak gerçekten iyi mi, onu da düşünmek gerekiyor. Farenin sağ ve solunun tam simetrik olması yerine ergonomik olarak biraz farklı tasarlanmasının daha rahat olması gibi, bunun da genel kullanılabilirliğe bakılarak karar verilmesi gereken bir unsur olduğunu düşünüyorum.
Sanırım kilit nokta, niyetten farklı bir sonucun ortaya çıkabilmesi. Örneğin fare tıklamasının ekranda ok ucunda değil de kuyruk kısmında gerçekleşmesi gibi bir durum.
Hacker News görüşü
Özet:
justifyvealignözelliklerini etkileşimli olarak deneyebileceğiniz bir demo sitesi tanıtılıyor