Metinlerin kısaltılmasını ve içerik kırpmasını önleyin
Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
Akıllı saatler, avuç içi cihazlardan daha küçük ekran boyutlarına sahiptir. Bu nedenle, öğeleri kullanıcıların erişebileceği ve mevcut ekran alanını verimli şekilde kullanacak şekilde düzenleyip görüntülemeniz son derece önemlidir. Öğelerinizin ekrana sığmasına yardımcı olmak için Materyal yönergeleri'nde belirtilen doğru miktarda dolgu ve kenar boşluğu kullanın.
Tasarımınız ekrana sığsa bile, kullanıcı aşağıdakilerden birini yaptığında arayüz öğeleri kesilebilir veya kırpılabilir:
- Görüntüleme dilini değiştirir.
- Metin boyutunu değiştirir.
- Kalın metin sistem ayarını etkinleştirir.
Tasarımlarınızı farklı kullanıcı ortamlarına sorunsuz bir şekilde uyum sağladıklarından emin olmak için bu noktaları göz önünde bulundurarak test etmeniz önemlidir.
Etkileşimli öğelerin tamamen görünür olmasını sağlayın
Arayüzünüzde etkileşimli öğeler varsa kullanıcıların bu öğeleri (özellikle de bu öğeler sayfanın kenarlarına yerleştirilmişse) görünümün içine tamamen kaydırabildiğinden emin olun. Uygulamanız Horology kitaplığını kullanıyorsa responsive() düzen fabrikasını kullanın. Aksi takdirde, ilk ve son liste öğelerinin sürekli kırpılmasını önlemek için ScalingLazyColumn nesnesinin üst ve alt kısmına boşluklar kullanın ve kenar boşlukları ekleyin.
Yoğun düzenler için kart yerine çip kullanın
Daha yoğun bir düzene ihtiyacınız varsa kartlar yerine CompactChip simgesini kullanın. Kartların daha geniş yüzey alanı, metnin kesilmesini ve içerik kırpmayı önlemeyi çok daha zorlaştırır.
Kırpma ve kırpmada ekran boyutu efektlerini değerlendirin
Wear OS cihazın ekran boyutuna bağlı olarak, ek metin ve düğmelerin görünmesi için daha küçük veya daha büyük bir alanınız olur:
Tasarımda sabit kâr marjları yerine yüzdelik marjlar dikkate alınmalıdır
Wear OS cihazın ekran boyutuna uyum sağlayan içerikler oluşturmak için kenar boşluklarını yüzde olarak uygulayın. Burada kenar boşluklarının boyutu ekran boyutuna göre belirlenir. Öğelerin ekranın üst veya alt kısmında durduğu durumlarda, ekranın kavisli kenarından içerik kırpmayı en aza indirmek için ek iç dolgu uygulayın. Buna karşılık, içerik grubu bir ekrana sığacak kadar küçük olduğunda üstteki ve alttaki alan artar.
check_circle
Yapılması gerekenler
Bileşenlerin boyut olarak ekranın boyutuna göre ölçeklenebilmesi için kenar boşluklarının yüzdeye uyması gerekir. Bu şekilde, ekranınızdaki içerik her zaman mevcut alanı doldurur ve ekranın kenarları tarafından kırpılmaz.
cancel
Yapılmaması gerekenler
Daha küçük ekranlarda nasıl kısaltılabileceğini ve tasarımınızın işlevselliğini nasıl etkileyebileceğini göz önünde bulundurmadan metin için mümkün olan maksimum alanı kullanmayın.
Küçük ekranların gerektirdiği karakter sınırlarını kullanın.
Çoğu durumda, büyük ekranlarda kısaltmadan önce daha fazla metin ve içerik gösterilebilir.
Daha fazla yatay alan mevcut olsa da, cihazlar arasında tutarlı bir deneyim sunmak için tasarımı her zaman en küçük ekran boyutuna göre yapın.
Örneğin, bir düğmede kırpma işleminden önce büyük bir ekranda daha fazla karakter için yer bulunabilir. Ancak düğme, kullanıcı deneyimi için hayati önem taşıyan önemli bir harekete geçirici mesajsa kırpılmadan küçük bir cihazın ekranında tamamen görünecek kadar kısa bir metin kullanın.
Alternatif olarak, karoda bir sunucudan getirilen metin gibi değişken içerikler gösteriliyorsa bu metnin daha küçük ekranlarda kısaltılma ihtimalini göz önünde bulundurun.
check_circle
Yapılması gerekenler
Harekete geçirici mesaj düğmeleri gibi tasarımınızın işlevselliğini etkileyen metinler, en küçük ekran düşünülerek tasarlanmıştır. Büyük ekranlardaki ek alan, ayrılma noktasından sonra ek metin satırları gösterebilir. Metin satırı sayısı, bileşene ve bağlama göre değişir.
cancel
Yapılmaması gerekenler
Daha küçük ekranlarda nasıl kısaltılabileceğini ve tasarımınızın işlevselliğini nasıl etkileyebileceğini hesaba katmadan, büyük ekranlarda kullanılabilecek en fazla alanı kaplayan metinler yazmayın.
Bu sayfadaki içerik ve kod örnekleri, İçerik Lisansı sayfasında açıklanan lisanslara tabidir. Java ve OpenJDK, Oracle ve/veya satış ortaklarının tescilli ticari markasıdır.
Son güncelleme tarihi: 2025-07-27 UTC.
[[["Anlaması kolay","easyToUnderstand","thumb-up"],["Sorunumu çözdü","solvedMyProblem","thumb-up"],["Diğer","otherUp","thumb-up"]],[["İhtiyacım olan bilgiler yok","missingTheInformationINeed","thumb-down"],["Çok karmaşık / çok fazla adım var","tooComplicatedTooManySteps","thumb-down"],["Güncel değil","outOfDate","thumb-down"],["Çeviri sorunu","translationIssue","thumb-down"],["Örnek veya kod sorunu","samplesCodeIssue","thumb-down"],["Diğer","otherDown","thumb-down"]],["Son güncelleme tarihi: 2025-07-27 UTC."],[],[],null,["# Prevent text truncation and content clipping\n\nSmartwatches have smaller screen sizes than handheld devices, so it's critical\nto arrange and display elements in a manner that users can access and that\nefficiently uses the available screen space. To help your items fit the screen,\nuse the correct amount of padding and margins as specified by the\n[Material guidelines](https://m3.material.io/foundations/layout/understanding-layout/spacing).\n\nEven when your design fits the screen, elements of your interface may be\ntruncated or clipped when the user does one of the following:\n\n- Changes the display language.\n- Changes the text size.\n- Enables the **Bold text** system setting.\n\nIt's crucial to test your designs with these considerations in mind to ensure\nthey adapt seamlessly to different user environments.\n\nKeep interactive elements fully visible\n---------------------------------------\n\nIf your interface includes interactive elements, check that users can scroll\nthese elements fully into view, especially if these elements are placed at the\nedges of a page. If your app uses the [Horologist](https://github.com/google/horologist) library, use the\n[`responsive()` layout factory](https://github.com/google/horologist/blob/main/docs/compose-layout.md). Otherwise, use spacers and add margins to\nthe top and bottom of a [`ScalingLazyColumn`](/reference/kotlin/androidx/wear/compose/foundation/lazy/package-summary#ScalingLazyColumn%28androidx.compose.ui.Modifier,androidx.wear.compose.foundation.lazy.ScalingLazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.wear.compose.foundation.lazy.ScalingParams,androidx.wear.compose.foundation.lazy.ScalingLazyListAnchorType,androidx.wear.compose.foundation.lazy.AutoCenteringParams,kotlin.Function1%29) object to prevent the first and\nlast list items from always being clipped.\n\nUse chips instead of cards for dense layouts\n--------------------------------------------\n\nIf you need a denser layout, use [`CompactChip`](/reference/kotlin/androidx/wear/compose/material/package-summary#CompactChip(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function1,kotlin.Function1,androidx.wear.compose.material.ChipColors,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material.ChipBorder)) instead of cards. The larger\nsurface area of cards makes it much more difficult to prevent text truncation\nand content clipping.\n\nConsider screen size effects on truncation and clipping\n-------------------------------------------------------\n\nDepending on the Wear OS device's screen size, you have a smaller or larger\nspace for additional text and buttons to be visible:\n\n### Design for percentage margins, not fixed margins\n\nTo create content that adapts responsively to the Wear OS device's screen size,\napply percentage margins, where the size of each margin is relative to the\nscreen size. In cases where items sit on the top or bottom of the screen, apply\nadditional inner padding to minimize content clipping from the screen's curved\nedge. In contrast, the space at the top and bottom increases when a group of\ncontent is small enough to fit on one screen.\n\ncheck_circle\n\n### Do\n\nComponents must adhere to the percentage margins so that their size scales with the screen's size. This way, the content of your screen always fills the space available and isn't cropped by the screen's edges.\n\ncancel\n\n### Don't\n\nDon't use the maximum space available for text without considering how it may truncate on smaller screens and affect the functionality of your design.\n\n### Use the character limits required by smaller screens\n\nIn most cases, larger screens can show more text and content before truncation.\nEven though more horizontal space might be available, however, always design for\nthe smallest screen size to create a consistent experience across devices.\n\nFor example, a button may have space for more characters on a larger screen\nbefore truncation, but if it's an important call to action that is vital to the\nuser experience, then use text that's short enough to appear entirely, without\ntruncating, on a small device's screen.\n\nAlternatively, if the tile shows variable content, such as text fetched from a\nserver, plan for the possibility that this text is truncated on smaller screens.\n\ncheck_circle\n\n### Do\n\nText which affects the functionality of your design, like call-to-action buttons, is designed with the smallest screen in mind. The additional space on larger screens can show additional lines of text after the breakpoint. The number of lines of text depends on the component and context.\n\ncancel\n\n### Don't\n\nDon't write text that consumes the maximum space available on a larger screen without considering how it may appear truncated on smaller screens and affect the functionality of your design."]]
