תחילת העבודה עם פריסות מותאמות
קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
הסביבה העסקית של Wear OS מורכבת ממכשירים עם מגוון רחב של גדלי מסכים. שימוש בעקרונות של ממשק משתמש מותאם אישית הוא חיוני כדי לספק חוויה באיכות הגבוהה ביותר לכל המשתמשים.
מהו ממשק משתמש מותאם?
ממשקי משתמש מותאמים משתנים ומשתלשים כדי לנצל בצורה הטובה ביותר את כל שטח המסך הזמין, ללא קשר לגודל המסך שבו הם מוצגים.
ממשקי משתמש מותאמים משתנים באופן תגובתי, באמצעות רכיבים ושיטות שמוטמעים ישירות לתוך הלוגיקה של הפריסה. הפריסות האלה כוללות גם נקודות עצירה לפי גודל המסך – שימוש בעיצוב שונה בגודלי מסך שונים – כדי ליצור חוויה עשירה עוד יותר למשתמשים.
גדלים של מסכים למפתחות
מידע על גדלים מרכזיים שחשוב לזכור כשאתם מעצבים חוויות חדשות
גדלי מסך
סוגי הפריסות
כשאתם מעצבים פריסות מותאמות למסך עגול, לכל תצוגה עם גלילה ותצוגה ללא גלילה יש דרישות ייחודיות לגבי שינוי הגודל של רכיבי ממשק המשתמש ושמירה על פריסת הרמונית ותמהיל הרמוני.
תצוגות גלילה
צריך להגדיר את כל המרווחים העליונים, התחתונים והצדדיים באחוזים כדי למנוע חיתוך ולאפשר שינוי פרופורציונלי של הרכיבים.
צפיות ללא גלילה
צריך להגדיר את כל השוליים באחוזים ואת האילוצים האנכיים כך שהתוכן הראשי באמצע יוכל להתמתח ולמלא את האזור הזמין.
הוספת ערך באמצעות פריסות ותכנון דינמיים
כשאתם מעצבים פריסות מותאמות למסך עגול, לכל תצוגה עם גלילה ותצוגה ללא גלילה יש דרישות ייחודיות לגבי שינוי הגודל של רכיבי ממשק המשתמש ושמירה על פריסת הרכב מאוזנת.
התמונות הבאות הן הצעות כלליות. הדוגמאות הן להמחשה בלבד. בדף של כל רכיב או ממשק תוכלו למצוא הנחיות מפורטות ותואמות להקשר.
תוכן נוסף במבט מהיר
פריסות רספונסיביות מאפשרות להציג יותר צ'יפים, יותר כרטיסים, יותר שורות טקסט ועוד לחצנים במסך אחד.
יותר רכיבי תוכן גלויים
כדאי להשתמש בפריסות חדשות, שחלות בנקודות עצירה מוגדרות בגודל המסך, כדי לאפשר הצגת תוכן חדש כשהדבר אפשרי, וכך לספק למשתמשים ערך מוסף במכשירים עם מסכים גדולים יותר.
מידע קל יותר לקריאה
כדאי לנצל את שטח המסך הנוסף כדי להציג קונטיינרים גדולים יותר, טקסט גדול יותר, טבעות עבות יותר וויזואליזציה מפורטת יותר של נתונים, כדי למשתמשים יהיה קל יותר לקבל מידע במהירות.
נוחות שימוש משופרת
כדאי להשתמש במרחב הנוסף במסך כדי ליצור יעדים גדולים יותר להקשה, היררכיה חזותית טובה יותר ומרחק נוסף בין פריטי התוכן, כדי שהאינטראקציה עם הממשקים תהיה קלה ונוחה יותר.
מיקומי מודעות שהוגדרה להם אופטימיזציה
השתמשו ברכיבים ובתבניות המעודכנים שלנו כדי לשפר את המראה והתחושה של ממשקי המשתמש שלנו בכל גדלי המסכים.
איכות האפליקציה
הנחיות האיכות שלנו מחולקות לשלוש רמות. כדי לספק למשתמשים את חוויית השימוש הטובה ביותר, כדאי לעמוד בהנחיות בכל שלוש הרמות.
הנחיות איכות
מוכנים לכל גדלי המסכים
חשוב לוודא שהאפליקציה מספקת חוויה איכותית בכל גדלי המסכים. יוצרים פריסות שמנצלות את כל שטח האפליקציה.
שנתחיל?
רספונסיביות ואופטימיזציה
להציג למשתמשים יותר תוכן במכשירים שמאפשרים זאת, ולהשתמש בפריסות רספונסיביות שתואמות באופן אוטומטי לגדלים שונים של מסכים.
שנתחיל?
התאמה אישית והבחנה
כדי לנצל את כל המרחב הנוסף, כדאי להשתמש בנקודות עצירה כדי להציע חוויות חדשות ומעניינות במסכים גדולים יותר, שלא ניתן ליהנות מהן במכשירים עם מסכים קטנים יותר.
שנתחיל?
שימוש בפריסות קנוניות מוגדרות
שימוש בפריסות קנוניקליות מוכרות כדי לעזור לממשקי המשתמש להתאים את עצמם בצורה חלקה למגוון גדלים של מכשירים.
הפריסות הקנוניות שלנו פותחו בצורה מתוכננת כדי לספק חוויה באיכות גבוהה בכל גדלי המסכים.
פריסות קנוניות
דוגמאות התוכן והקוד שבדף הזה כפופות לרישיונות המפורטים בקטע רישיון לתוכן. Java ו-OpenJDK הם סימנים מסחריים או סימנים מסחריים רשומים של חברת Oracle ו/או של השותפים העצמאיים שלה.
עדכון אחרון: 2025-07-27 (שעון UTC).
[null,null,["עדכון אחרון: 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"]]
