Tasarım Sistemi Yerelleştirmesi: Bileşenleri Her Dil İçin Uyarlamak

Tasarım Sistemi Yerelleştirmesi: Bileşenleri Her Dil İçin Uyarlamak

Tasarım sistemleri, tutarlı ve ölçeklenebilir UI geliştirmenin temelidir. Ancak uluslararasılaştırmayı göz önünde bulundurmamış bir tasarım sistemi, ürününüz küresel bir boyuta taşındığında tahmin edilebilir ve sancılı biçimlerde bozulur.

Metinler genişler. Düzenler ters çevrilmesi gerekir. Yazı sistemleri yön değiştirir. Karakter kümeleri farklı font yapılandırmaları gerektirir. Tarih seçiciler Batı takvimlerini varsayar. Renk paletleri kültürel anlam taşır. Gerçek anlamda küresel bir tasarım sistemi, tüm bu sorunların yanıtlarını bileşenlerine en başından kodlamalıdır.

Bu rehber, tasarım sisteminize yerelleştirmeyi nasıl entegre edeceğinizi ele alıyor; ister sıfırdan başlıyor olun ister mevcut bir sistemi yeniden düzenliyor olun.

Temel Sorun: Tasarım Sistemleri Genellikle Tek Bir Dil İçin Oluşturulur

Çoğu tasarım sistemi, genellikle İngilizce olmak üzere tek bir dil gözetilerek oluşturulur ve yerelleştirme gereksinimleri ortaya çıktığında zorluk yaşanır. Belirtiler tanıdıktır:

• Metinler Almancada buton sınırlarını taşar
• Arapça metinler sağa hizalanması gerekirken sola hizalanır
• Tarih seçiciler, haftanın ilk gününün Pazartesi olduğu kültürlerdeki kullanıcılar için Pazar'ı ilk gün olarak gösterir
• Yönsel anlam taşıyan ikonlar (geri okları, ilerleme göstergeleri) RTL için yansıtılmaz
• Para birimi sembolleri yanlış konumda görünür
• Satır yükseklikleri Tayca veya Devanagari gibi ascender ve descender'ı olan diller için çok dar kalır

Bunlar istisnai durumlar değil; İngilizce merkezli bir tasarım sistemi yeni bir dille karşılaştığında her seferinde ortaya çıkan tahmin edilebilir başarısızlıklardır.

Metin Genişlemesi: Dil Esnekliği İçin Tasarlamak

İngilizce, daha kompakt yazı dillerinden biridir. UI metni çevrildiğinde neredeyse her zaman genişler:

Metin Genişlemesi İçin Tasarım Sistemi Kalıpları

Metin için sabit genişlikli kapsayıcılardan kaçının: width: 120px yerine uygun taşma yönetimiyle min-width: 120px veya max-content genişliklerini kullanın.

En uzun olası çeviriyle test edin: Bileşenleri Almanca veya Fince dizelerle test etme alışkanlığı edinin. Butonunuzda "Subscribe to Newsletter" yazıyorsa, Alman çevirmeninizin biraz daha uzun ama yönetilebilir olan "Newsletter abonnieren" şeklinde çevirmesi gerekebilir ya da çok daha uzun tam yazılı bir sürüme ihtiyaç duyulabilir.

Esnek düzenler kullanın: CSS flexbox ve grid, doğru yapılandırıldığında metin genişlemesini zarif biçimde yönetir. Metin öğeleri arasında piksel tabanlı aralayıcılardan kaçının.

Tasarım token'larınızda karakter sınırı kılavuzu sağlayın: Her bileşen türü için önerilen maksimum dize uzunluklarını belgeleyin. Çevirmenlere bu bilgiyi önceden verin. Bu meta verinin çeviri kalitesini nasıl iyileştirdiğini görmek için çeviri bağlamı yazımıza bakın.

Son çare olarak kısaltma: Metnin kısaltılması gerektiğinde, tam metni içeren bir tooltip sağlayın (bu da çevrilebilir olmalıdır) ve kısaltma mantığının dile duyarlı olduğundan emin olun (CJK'da karakterin ortasında kısaltma yapmayın).

RTL Desteği: Sadece Metin Yönünden Fazlasını Yansıtmak

Sağdan sola (RTL) dil desteği, bir tasarım sisteminin desteklemesi gereken en kapsamlı dönüşümlerden biridir. Yalnızca metin yönüyle ilgili değildir; yansıtılmış bir dünyada uzamsal akıl yürütmeyle ilgilidir.

RTL'de Neler Döner

Düzen: Tüm sayfa düzeni yansıtılır. Sol sütun sağ sütun olur. Soldan açılan gezinti çekmeceleri sağdan açılır.

Metin hizalaması: Varsayılan metin hizalaması sağa hizalı olur. LTR'de sola hizalı metin RTL'de sağa hizalı olur.

Yönsel ikonlar: Yönsel anlam taşıyan ikonlar yansıtılmalıdır:

• LTR'de geri oku (←) RTL'de ileri oku yönü (→ görsel konum) olur
• Onay işareti (soldan sağa ilerleme) yansıtılır
• Liste ikonları (madde işaretleri, numaralı listeler) taraf değiştirir

Yansıtılmayan ikonlar: Soyut ikonlar, logolar ve yönsel anlam taşımayan ikonlar yansıtılmamalıdır:

• Uyarı üçgeni: her iki yönde de aynı
• Kalp, yıldız, dairesel ikonlar: her iki yönde de aynı
• Logolar: asla yansıtılmaz

Form alanları: Girdi metni hizalaması, yer tutucu konumu ve girdilerdeki ikon konumları döner.

Padding ve margin'ler: padding-left, padding-right olur ve tersine.

CSS Mantıksal Özellikleri Kullanmak

Modern çözüm, yazı yönüne otomatik uyum sağlayan CSS mantıksal özelliklerdir:

/* Eski yaklaşım: sabit kodlanmış yönler */
.card {
  padding-left: 16px;
  padding-right: 24px;
  margin-left: auto;
  border-left: 2px solid blue;
  text-align: left;
}

/* Modern yaklaşım: mantıksal özellikler */
.card {
  padding-inline-start: 16px;
  padding-inline-end: 24px;
  margin-inline-start: auto;
  border-inline-start: 2px solid blue;
  text-align: start;
}

Mantıksal özellikler ve <html> öğesinde dir="rtl" ile düzeniniz otomatik olarak yansıtılır.

Eksiksiz bir rehber için CSS ve React'te RTL desteği yazısına bakın.

Tasarım Token'larında RTL

Yönsel token'ları mantıksal özellik adlarını kullanarak tanımlayın:

{
  "spacing": {
    "inline-start": { "value": "16px" },
    "inline-end": { "value": "24px" }
  }
}

Tasarım aracınızın yönsel değil mantıksal özellikler dışa aktardığından emin olun (Figma'nın son güncellemeleri bunu iyileştirdi, ancak dışa aktarma hattınızı doğrulayın).

Tipografi: Çok Betikli Font Sistemleri

Bir tasarım sistemi, ürününüzün desteklediği tüm betikler için çalışan fontları belirtmelidir.

Çok Betikli Destek İçin Font Yığınları

Latin metni için çalışan bir font, Kiril, Arapça, CJK, Devanagari veya Tayca betikleri için glif içermeyebilir. Font yığınınızı uygun şekilde kademeli olacak biçimde oluşturun:

/* Kapsamlı çok betikli font yığını */
font-family: 
  'Your Brand Font',          /* Latin, birincil marka */
  'Noto Sans',                 /* Evrensel betik kapsamı */
  -apple-system,              /* Apple sistem fontları (macOS/iOS'ta iyi CJK) */
  BlinkMacSystemFont,         /* macOS'ta Chrome */
  'Hiragino Kaku Gothic ProN', /* Japonca */
  'Hiragino Sans',            /* Japonca */
  'Meiryo',                   /* Japonca (Windows) */
  sans-serif;

Özellikle Arapça için Arapça'ya özgü geri dönüşlere ihtiyacınız olacak:

font-family: 
  'Your Brand Font',
  'Noto Sans Arabic',
  'Arabic Typesetting',
  sans-serif;

Farklı Betikler İçin Satır Yüksekliği Ayarlamaları

Farklı betikler farklı satır yükseklikleri gerektirir:

• Latin: 1,4–1,6
• Arapça/İbranice: 1,6–1,8 (diakritik işaretler yukarı ve aşağı uzanır)
• Tayca: 1,8–2,0 (karmaşık ünsüz kümeleri ve diakritik işaretler)
• CJK: 1,5–1,8

Tek bir satır yüksekliğini sabit kodlamak, uzun ascender'lı betiklerde kırpılmaya neden olur. Tasarım sisteminizde betiğe duyarlı satır yükseklikleri kullanın:

:root { --line-height-body: 1.5; }
:lang(ar), :lang(he) { --line-height-body: 1.7; }
:lang(th) { --line-height-body: 1.9; }
:lang(zh), :lang(ja), :lang(ko) { --line-height-body: 1.6; }

Tarih, Saat ve Sayı Bileşenleri

Takvim ve tarih seçici bileşenler, herhangi bir tasarım sistemindeki en yoğun yerelleştirme gerektiren bileşenler arasındadır.

Takvim Bileşeni Gereksinimleri

• Haftanın ilk günü: Pazar (ABD), Pazartesi (Avrupa ve Asya'nın büyük bölümü), Cumartesi (bazı Orta Doğu ülkeleri)
• Takvim sistemi: Gregoryen (varsayılan), İbranice, İslami (Hicri), Farsça (Celali), Budist (Tayland), Japon imparatorluk takvimi
• Tarih biçimi: AA/GG/YYYY, GG/AA/YYYY, YYYY/AA/GG ve birçok yerel özgü varyasyon
• Hafta sonu günleri: Cumartesi/Pazar (ABD/Avrupa), Cuma/Cumartesi (Orta Doğu), diğer bölgelerde değişir
• Tatil vurgulama: Destekleniyorsa yerel özgü olmalıdır

Biçimlendirme için Intl.DateTimeFormat API'sini kullanın ve takvim sistemi karmaşıklığını yöneten yerleşik başsız takvim kütüphanelerini (örneğin @internationalized/date) göz önünde bulundurun.

Sayı Girdi Bileşenleri

Sayı girdi bileşenleri, yerel özgü ondalık ayırıcıları yönetmelidir. "1.234,56" yazan bir Alman kullanıcı, noktanın binler ayırıcısı, virgülün ise ondalık işareti olmasını bekler. Girdiniz noktayı kaldırıp API'nize "123456" iletirse, veri bütünlüğü sorununuz var demektir.

Para Birimi Gösterimi

Para birimi bileşenleri şunları kabul etmelidir:

• Tutar (en küçük birimde tam sayı olarak veya Decimal)
• Para birimi kodu (ISO 4217: USD, EUR, GBP, JPY, vb.)
• Yerel ayar

Biçimlendirme için Intl.NumberFormat kullanın. Para birimi sembollerini asla sabit kodlamayın.

Yerelleştirme İçin Bileşen Belgelendirmesi

Kaliteli tasarım sistemi belgelendirmesi, her bileşen için yerelleştirme kılavuzu içerir:

Dize kısıtlamaları: Her çevrilebilir dize için maksimum karakter sayısını belgeleyin. "Buton etiketleri: görüntüleme fontunda maksimum 25 karakter, kompakt görüntüleme için 40 karakter."

Çeviri notları: Tasarım sisteminizde UI dizeleri için (örneğin varsayılan yer tutucu metni, yerleşik doğrulama mesajları) çevirmenler için bağlam notları ekleyin.

RTL varyantları: Her bileşeni belgelendirmenizde hem LTR hem de RTL olarak gösterin. Storybook, bunu kolaylaştıran yerel ayar değiştirmeyi destekler.

Betik örnekleri: Bileşenleri yalnızca İngilizce değil, desteklenen tüm betiklerde işlenmiş şekilde gösterin.

Yerelleştirmeye Hazır Tasarım Sistemi Kontrol Listesi

Düzen:

• Her yerde mantıksal CSS özellikleri kullanılmış (yönsel değil)
• Kök ve bileşenlerde dir niteliği desteği
• Grid ve flexbox kullanılmış (düzen için mutlak konumlandırma değil)

Tipografi:

• Çok betikli font yığını tanımlanmış
• Betiğe duyarlı satır yükseklikleri
• Göreceli birimlerde (rem, em) font boyutu
• Sabit genişlikli metin kapsayıcısı yok

Bileşenler:

• Butonlar: sabit genişlik değil, min-width
• Girdiler: mantıksal padding, RTL'e duyarlı ikon yerleşimi
• Modal/Çekmeceler: RTL açılma yönü desteği
• Tarih seçiciler: yerel duyarlı haftanın ilk günü, biçim, takvim sistemi
• Sayı girdileri: yerel duyarlı ondalık yönetimi
• İkonlar: yönsel ikonlar için yansıtılmış varyantlar belgelenmiş

Belgelendirme:

• Dize karakter sınırları belgelenmiş
• Yerleşik dizeler için çeviri bağlamı sağlanmış
• Bileşen belgelendirmesinde RTL örnekleri
• Çok betikli işleme gösterilmiş

Test:

• Storybook yerel ayar değiştirici yapılandırılmış
• Birden fazla yerel ayarda otomatik görsel regresyon
• CI'da RTL duman testleri

Test yaklaşımları için i18n test araçları, stratejileri ve otomasyonu yazısına bakın.

Uygulamanızı better-i18n ile küreselleştirin

better-i18n; yapay zeka destekli çeviriler, git-native iş akışları ve küresel CDN teslimatını tek bir geliştirici odaklı platformda bir araya getirir. Elektronik tablolarla uğraşmayı bırakın ve her dilde yayın yapmaya başlayın.

Ücretsiz başlayın → · Özellikleri keşfedin · Belgeleri okuyun