תגובה מהירה ואופטימיזציה
קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

אפליקציות רספונסיביות וממוטבות משתמשות בפריסות רספונסיביות שתואמות באופן אוטומטי לגדלים שונים של מסכים. כך הן מספקות ערך מוסף למשתמשים ומעניקות חוויית משתמש יעילה ומעניינת.
הוספת ערך באמצעות עיצוב רספונסיבי
פריסות רספונסיביות מגדירות באופן דינמי את הפורמט והמיקום של רכיבים כמו לחצנים, שדות טקסט וחלונות דו-שיח, כדי לספק חוויית משתמש אופטימלית. השתמשו בשיטות של עיצוב רספונסיבי כדי להציע למשתמשים באפליקציה ערך מוסף באופן אוטומטי במסכים גדולים יותר. בין אם מדובר בטקסט נוסף שגלוי במבט מהיר, בפעולות נוספות במסך או ביעדי הקשה גדולים ונגישים יותר, שיטות עיצוב דינמיות מספקות חוויה משופרת למשתמשים במסכים גדולים יותר.

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