Uyarlanabilir düzenleri kullanmaya başlama
Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
Wear OS ekosistemi, çok çeşitli ekran boyutlarına sahip cihazlardan oluşur. Tüm kullanıcılara en yüksek kaliteli deneyimi sunmak için uyarlanabilir kullanıcı arayüzü ilkelerinden yararlanmak çok önemlidir.
Uyarlanabilir kullanıcı arayüzü nedir?
Uyarlanabilir kullanıcı arayüzleri, oluşturuldukları ekranın boyutundan bağımsız olarak mevcut tüm ekran alanını en iyi şekilde kullanmak için uzar ve değişir.
Uyumlu kullanıcı arayüzleri, doğrudan düzen mantığına yerleştirilmiş bileşenleri ve yöntemleri kullanarak duyarlı bir şekilde değişir. Bu düzenler, kullanıcılara daha da zengin bir deneyim sunmak için ekran boyutu eşiklerinden de yararlanır. Bu sayede farklı ekran boyutlarında farklı tasarımlar uygulanır.
Temel ekran boyutları
Yeni deneyimler tasarlarken göz önünde bulundurmanız gereken temel referans boyutları hakkında bilgi edinin
Ekran boyutları
Düzen türleri
Yuvarlak ekranda uyarlanabilir düzenler için tasarım yaparken kaydırmalı ve kaydırmayan görünümlerin her birinin, kullanıcı arayüzü öğelerini ölçeklendirme ve dengeli bir düzen ve kompozisyon sürdürme konusunda benzersiz gereksinimleri vardır.
Kaydırma görüntülemeleri
Üst, alt ve yan kenar boşluklarının tümü, öğelerin kırpılmasını önlemek ve orantılı ölçeklendirme sağlamak için yüzde olarak tanımlanmalıdır.
Kaydırma yapılmayan görüntülemeler
Tüm kenar boşlukları yüzde olarak tanımlanmalı ve dikey kısıtlamalar, ortada bulunan ana içeriğin mevcut alanı dolduracak şekilde esneyecek şekilde tanımlanmalıdır.
Uyarlanabilir düzenler ve tasarım uygulamaları aracılığıyla değer katın
Yuvarlak ekranda uyarlanabilir düzenler için tasarım yaparken kaydırmalı ve kaydırmayan görünümlerin her birinin kullanıcı arayüzü öğelerini ölçeklendirme ve dengeli bir düzen ve kompozisyon sürdürme konusunda benzersiz gereksinimleri vardır.
Aşağıdaki resimler genel önerilerdir. Örnekler yalnızca açıklama amaçlıdır. Ayrıntılı, bağlama dayalı ve duyarlı rehberlik için her bileşeni veya yüzey sayfasını görüntüleyin.
Bir bakışta daha fazla içerik
Duyarlı düzenler, tek bir ekrana daha fazla çip, kart, metin satırı ve düğme sığdırmanıza olanak tanır.
Daha fazla içerik öğesi görünür
Mümkün olduğunda yeni içeriklerin kullanıma sunulmasına olanak tanıyarak kullanıcılara daha büyük ekran boyutlarına sahip cihazlarda ek değer sunmak için tanımlanmış ekran boyutu kesme noktalarında uygulanan yeni düzenleri kullanın.
Daha iyi göz atma deneyimi
Kullanıcıların daha kolay göz atabilmesi için daha büyük kapsayıcılar, daha büyük metinler, daha kalın halkalar ve daha ayrıntılı veri görselleştirmeleri sunmak amacıyla ekstra ekran alanı kullanın.
Daha iyi kullanılabilirlik
Daha büyük dokunma hedefleri, daha iyi görsel hiyerarşi ve arayüzlerle etkileşimin daha kolay ve rahat olması için içerik öğeleri arasında ek alan sağlamak amacıyla ekstra ekran alanı kullanın.
Optimize edilmiş kompozisyonlar
Tüm ekran boyutlarında kullanıcı arayüzlerimize daha iyi bir görünüm ve tarz kazandırmak için güncellenmiş bileşen ve şablonlarımızdan yararlanın.
Uygulama kalitesi
Kalite yönergelerimiz üç düzeyde düzenlenmiştir. Üç katmandaki yönergeleri karşılayarak kullanıcılarınıza mümkün olan en iyi deneyimi sunun.
Kalite yönergeleri
Tüm ekran boyutlarına uygun
Uygulamanızın tüm ekran boyutlarında kaliteli bir deneyim sunmasını sağlayın. Mevcut uygulama alanını tam olarak kullanan düzenler oluşturun.
Başlayın
Duyarlı ve optimize edilmiş
İzin verilen cihazlarda kullanıcılara daha fazla içerik sunun ve farklı ekran boyutlarına otomatik olarak uyum sağlayan duyarlı düzenler kullanın.
Başlayın
Uyarlanabilir ve farklılaştırılmış
Büyük ekranlarda daha küçük ekranlı cihazlarda mümkün olmayan güçlü yeni deneyimler sunmak için kesme noktalarını kullanarak ek alandan en iyi şekilde yararlanın.
Başlayın
Standart kanon düzenlerinden yararlanma
Kullanıcı arayüzlerinizin çeşitli cihaz boyutlarına sorunsuz bir şekilde uyum sağlamasına yardımcı olmak için yerleşik standart düzenleri kullanın.
Standart düzenlerimiz, tüm ekran boyutlarında yüksek kaliteli bir deneyim sunmak için özenle geliştirilmiştir.
Standart düzenler
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,["# Get started with adaptive layouts\n\nThe Wear OS ecosystem is made up of devices that have a wide variety of screen\nsizes. Utilizing adaptive UI principles is critical to delivering the highest\nquality experience for all users.\n\nWhat is adaptive UI?\n--------------------\n\nAdaptive UIs stretch and change to make the best possible use of all available\nscreen space, no matter what size screen they're rendered on.\n\nAdaptive UIs change responsively, using components and methods built directly\ninto the layout logic. These layouts also utilize screen size\nbreakpoints---applying a different design on different screen sizes---to create an\neven richer experience for users.\n\nKey screen sizes\n----------------\n\n\nLearn about key reference sizes to keep in mind as you design new experiences\n\n[Screen sizes](/design/ui/wear/guides/foundations/screen-sizes) \n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nTypes of layouts\n----------------\n\nWhen designing for adaptive layouts on the round screen, scrolling and\nnon-scrolling views each have unique requirements for scaling UI elements and\nmaintaining a balanced layout and composition.\n\n\n**Scrolling views**\n\nAll top, bottom, and side margins\nshould be defined in percentages to avoid clipping and provide\nproportional scaling of elements. \n\n**Non-scrolling views**\n\nAll margins should be defined\nin percentages and vertical constraints should be defined such that the\nmain content in the middle can stretch to fill the available area.\n\n\u003cbr /\u003e\n\nAdd value through adaptive layouts and design practices\n-------------------------------------------------------\n\nWhen designing for adaptive layouts on the round screen, scrolling and\nnon-scrolling views each have unique requirements for scaling UI elements and\nmaintaining a balanced layout and composition.\n\nThe following images are broad suggestions; examples are for illustrative\npurposes only. View each component or surface page for detailed, contextual,\nresponsive guidance.\n\n\n**More content at a glance**\n\nResponsive layouts allow for more chips, more cards, more lines of text, and\nmore buttons to fit on a single screen \n\n**More content elements visible**\n\nUtilize new layouts, applied at defined screen size breakpoints, to allow for\nthe introduction of new content when possible, giving the user additional value\non devices with larger screen sizes.\n\n\u003cbr /\u003e\n\n\n**Improved glanceability**\n\nUse extra screen space to provide larger containers, larger text, thicker rings,\nand more granular data visualization to provide better glanceability for users. \n\n**Improved usability**\n\nUse extra screen space to provide bigger tap targets, greater visual hierarchy,\nand additional space between content items to make interfaces easier and more\ncomfortable to interact with.\n\n\u003cbr /\u003e\n\n\n**Optimized compositions**\n\nUtilize our updated components and templates to offer a better look and feel for\nour UIs across all screen sizes. \n\n\u003cbr /\u003e\n\nApp quality\n-----------\n\n\nOur quality guidelines are organized into three levels. Enable the best possible\nexperience for your users by meeting guidelines in all three tiers.\n\n[Quality guidelines](/docs/quality-guidelines/wear-app-quality) \n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n*** ** * ** ***\n\n\n**Ready for all screen sizes**\n\nMake sure your app is delivering a quality experience across all screen\nsizes. Create layouts that fully use the available app space.\n\n[Get started](/design/ui/wear/guides/foundations/larger-screens-ready) \n**Responsive and optimized**\n\nDeliver more content to users on devices which allow for it, and utilize\nresponsive layouts that automatically adapt to different screen sizes.\n\n[Get started](/design/ui/wear/guides/foundations/larger-screens-optimized) \n**Adaptive and differentiated**\n\nMake the most of additional real estate by utilizing breakpoints to offer\npowerful new experiences on larger screens which are not possible on devices\nwith smaller screens.\n\n[Get started](/design/ui/wear/guides/foundations/larger-screens-differentiated)\n\n\u003cbr /\u003e\n\n*** ** * ** ***\n\nUtilize established canonical layouts\n-------------------------------------\n\n\nUse established canonical layouts to help your UIs adapt smoothly across a range\nof device sizes.\n\nOur canonical layouts have been developed thoughtfully to offer a high quality\nexperience across all screen sizes.\n\n[Canonical layouts](/design/ui/wear/guides/foundations/canonical-adaptive-layouts) \n\n\u003cbr /\u003e"]]
