Duyarlı ve uyarlanabilir tasarım
Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
Artan ekran boyutuna uyum sağlamak için ProtoLayout Material düzen şablonlarına ve Figma tasarım düzenlerine duyarlı davranışı dahil ettik. Bu sayede, alanların otomatik olarak uyum sağlaması sağlandı. Slotlar temel olarak kullanılabilir genişliği dolduracak şekilde tasarlanmıştır. Kenarlıklarımız yüzde olarak ayarlanır. Ekranın alt ve üst kısmındaki yuvalara ek iç kenarlıklar eklenir. Bu sayede, ekran büyüdükçe ekranın eğriliğindeki dalgalanmalar hesaba katılır.
Daha büyük ekran boyutunu ve ek alanı en üst düzeye çıkarmak için kullanıcıların ek bilgilere veya seçeneklere erişmesine olanak tanıyarak daha fazla değer sunmak amacıyla ek ekran alanını kullanabilirsiniz. Bu düzenlere ulaşmak için yerleşik duyarlı davranışın ötesinde ek özelleştirmeler gerekir. Bu, durak noktası sonrasında düzene daha faydalı içerikler ekleyerek yapılabilir. Önerilen kesme noktasının 225 dp ekran boyutunda ayarlandığını unutmayın.
Temel terimler
Duyarlı tasarım: En iyi kullanıcı deneyimi için düzenlerin düğmeler, metin alanları ve iletişim kutuları gibi öğeleri dinamik olarak biçimlendirip konumlandırdığı bir tasarım yaklaşımı. Duyarlı tasarım uygulamalarını kullanarak kullanıcılara daha büyük ekranlarda otomatik olarak ek değer sunun. Bir bakışta daha fazla metin, ekranda daha fazla işlem veya daha büyük, daha erişilebilir dokunma hedefleri olsun, duyarlı uygulamalar büyük ekran kullanıcılarına daha iyi bir deneyim sunar.
Uyarlanabilir tasarım: Arayüzün bilinen kullanıcı, cihaz veya çevre koşullarına göre değiştiği bir tasarım yaklaşımı. Materyal'deki uyarlanabilir tasarım, düzen ve bileşen uyarlamalarını içerir.
Duyarlı ve optimize edilmiş tasarımlar oluşturma
Tasarım düzenlerinizin daha büyük ekran boyutlarına uyum sağlaması için düzenlerimizin ve bileşenlerimizin davranışını, yüzdeye dayalı kenar boşlukları ve dolgu dahil olmak üzere yerleşik duyarlı davranışa sahip olacak şekilde güncelledik.
ProtoLayout şablonlarımızı kullanıyorsanız bu güncellemeleri ProtoLayout API ve beta sürüm notları aracılığıyla otomatik olarak devralabilirsiniz. Yalnızca ekran boyutu kesme noktasından sonra ek içerik veya bileşen eklediğiniz düzenleri sağlamanız gerekir. Daha büyük ekran boyutundan nasıl yararlanacağınızla ilgili tam rehberlik ve öneriler için Kartlar kılavuzumuzu inceleyin. Kartların ekran yüksekliği sabit olduğundan, istenmeyen kırpma oluşturmadan sınırlı ekran alanını en üst düzeye çıkarmak için dolguyu ayarladık.
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,["# Responsive and adaptive design\n\nTo accommodate the increasing screen size, we've incorporated responsive behavior into the [ProtoLayout Material layout templates](https://developer.android.com/reference/kotlin/androidx/wear/protolayout/material3/package-summary#(androidx.wear.protolayout.material3.MaterialScope).primaryLayout(kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function1,androidx.wear.protolayout.ModifiersBuilders.Clickable,androidx.wear.protolayout.material3.PrimaryLayoutMargins)) and Figma design layouts, allowing the slots to automatically adapt. In essence, slots are designed to fill the available width. Our margins are set as percentages, with additional inner margins added to slots at the bottom and top of the screen, accounting for fluctuations in the curve of the screen as it enlarges.\n\nTo maximize the larger screen size and additional space, consider utilizing the extra screen space to provide more value by allowing users to access additional information or options. Achieving these layouts requires additional customization beyond the built-in responsive behavior. This can be accomplished by adding more helpful content to the layout after the breakpoint. It's important to note that the recommended breakpoint is set at the 225dp screen size.\n\nEssential terms\n---------------\n\n**Responsive design:** A design approach in which layouts dynamically format and position elements such as buttons, text fields, and dialogs for an optimal user experience. Automatically offer users additional value on larger screens by utilizing responsive design practices. Whether it's more text visible at a glance, more actions on screen, or larger, more accessible tap targets, responsive practices provide an enhanced experience for users of large screens.\n\n**Adaptive design:** A design approach in which the interface changes based on known user, device, or environmental conditions. Adaptive design in Material includes layout and component adaptations.\n\nBuilding responsive and optimized designs\n-----------------------------------------\n\nTo ensure your design layouts adapt to larger screen sizes, we have updated the behavior of our layouts and components to have built-in responsive behavior, including percentage-based margins and padding.\nIf you are using our ProtoLayout templates, you can inherit these updates automatically through the [ProtoLayout API](/design/ui/wear/guides/surfaces/tiles/reference/kotlin/androidx/wear/protolayout/material3/package-summary) and the [beta release notes](https://developer.android.com/jetpack/androidx/releases/wear-protolayout#1.3.0-beta02), and only need to supply layouts where you have added additional content or components after a screen size breakpoint. For full guidance and recommendations on how to take advantage of a larger screen size, view our [Tiles guidance](/design/ui/wear/guides/surfaces/tiles/wear/guides/surfaces/tiles). Tiles have a fixed screen height, so we've adjusted the padding to maximize the limited screen real estate without creating unwanted clipping."]]
