Duyarlı ve optimize edilmiş
Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
Duyarlı ve optimize edilmiş uygulamalar, farklı ekran boyutlarına otomatik olarak uyum sağlayan duyarlı düzenler kullanır. Bu şekilde hem kullanıcılara ek değer sunulur hem de verimli ve ilgi çekici bir kullanıcı deneyimi sunulur.
Duyarlı tasarımla değer katın
Duyarlı düzenler; düğmeler, metin alanları ve iletişim kutuları gibi öğeleri dinamik olarak biçimlendirip konumlandırarak optimum kullanıcı deneyimi sunar. Duyarlı tasarım uygulamalarından yararlanarak uygulamanızın kullanıcılarına daha büyük ekranlarda otomatik olarak ek değer sunun. İster bir bakışta daha çok görünen 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 gelişmiş bir deneyim sunar.
Wear OS için duyarlı uygulamalar ve kartlar oluşturma
Duyarlı kullanıcı arayüzleri, oluşturuldukları ekran boyutundan bağımsız olarak mevcut ekran alanının mümkün olan en iyi şekilde kullanılması için genişler ve değişir. Yuvarlak ekranda duyarlı düzenler tasarlarken, kaydırılan ve kaydırılmayan görünümlerin her birinin kullanıcı arayüzü öğesi ölçeklendirmesini sağlamanın yanı sıra dengeli bir düzen ve kompozisyonu korumak için benzersiz gereksinimleri vardır. Kaydırma görünümlerinde, kırpmayı önlemek ve öğelerin orantılı ölçeklendirmesini sağlamak için tüm üst, alt ve yan kenar boşluklarını tanımlamak üzere yüzdeleri kullanın. Kaydırmayan görünümlerde, tüm kenar boşlukları için yüzdeler ve dikey kısıtlamalar kullanın. Bu şekilde, ortadaki ana içerik mevcut alanı
dolduracak şekilde esneyebilir.
Duyarlı düzenler için Oluşturma ve Kart uygulama kılavuzuna bakın.
check_circle
Yapılması gerekenler
- Adaptasyon için tasarlanmış standart bileşenler kullanın.
- Ekran boyutlarına sorunsuz uyum sağlayan uyarlanabilir düzenlerden yararlanın.
cancel
Yapılmaması gerekenler
- Fazladan boşluğu doldurmak için kullanıcı arayüzü öğelerini (metin alanları, düğmeler, iletişim kutuları) genişletin.
- Çoğunlukla görsel bir amaca hizmet etmeyen yazı tiplerinin boyutlarını artırın.
Sonraki adım: uyarlanabilir ve farklılaştırılmış
Uyarlanabilir ve farklı uygulamalar, küçük ekranlı cihazlarda mümkün olmayan bir kullanıcı deneyimi oluşturur.
Başlayı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,["# Responsive and optimized\n\nApps that are **responsive and optimized** utilize responsive layouts that\nautomatically adapt to different screen sizes, offering some additional value to\nusers and providing a productive, engaging user experience.\n\nAdd value through responsive design\n-----------------------------------\n\nResponsive layouts dynamically format and position elements such as buttons,\ntext fields, and dialogs for an optimal user experience. Automatically offer\nusers of your app additional value on larger screens by utilizing responsive\ndesign practices. Whether it's more text visible at a glance, more actions on\nscreen, or larger, more accessible tap targets, responsive practices provide an\nenhanced experience for users of larger screens.\n\n\nBuild responsive apps and tiles for Wear OS\n-------------------------------------------\n\nResponsive UIs stretch and change to make the best possible use of all available\nscreen space, no matter what size screen they're rendered on. When designing\nresponsive layouts on a round screen, scrolling and non-scrolling views each\nhave unique requirements to maintain UI element scaling, as well as preserve a\nbalanced layout and composition. For [scrolling views](/design/ui/wear/guides/foundations/canonical-adaptive-layouts#scrolling), use percentages to\ndefine all top, bottom, and side margins to avoid clipping and provide\nproportional scaling of elements. For [non-scrolling views](/design/ui/wear/guides/foundations/canonical-adaptive-layouts#non-scrolling), use percentages\nand vertical constraints for all margins. That way, the main content in the\nmiddle can stretch to fill the available area.\n\nSee the [Compose](/training/wearables/compose/screen-size#responsive-layouts) and [Tiles](/training/wearables/tiles/screen-size#responsive-layouts) implementation guidance for responsive\nlayouts. \ncheck_circle\n\n### Do\n\n- Use standard components which are designed for adaptation.\n- Utilize adaptive layouts which adapt smoothly across screen sizes. \ncancel\n\n### Don't\n\n- Stretch UI elements (text fields, buttons, dialogs) to fill extra space.\n- Increase the sizes of fonts (unless they're serving a primarily graphic purpose).\n\nNext step: adaptive and differentiated\n--------------------------------------\n\nApps that are **adaptive and differentiated** create a user experience that\nisn't possible on devices with smaller screens.\n\n[Get started](/design/ui/wear/guides/foundations/larger-screens-differentiated)"]]
