עיצוב רספונסיבי ודינמי
קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
כדי להתאים את המודעות לגדלים ההולכים וגדלים של המסכים, שילבנו התנהגות רספונסיבית בתבניות הפריסה של ProtoLayout Material ובפריסות העיצוב של Figma, כדי שהתצוגה תתאים את עצמה באופן אוטומטי. בעיקרון, יחידות הקיבולת (Slots) נועדו למלא את הרוחב הזמין. השוליים שלנו מוגדרים כאחוזים, עם שוליים פנימיים נוספים שנוספו לחריצים בחלק התחתון ובחלק העליון של המסך, כדי להתחשב בתנודות בעקומה של המסך כשהוא מתרחב.
כדי לנצל את גודל המסך הגדול יותר ואת המרחב הנוסף, כדאי להשתמש במרחב הנוסף במסך כדי לספק ערך מוסף למשתמשים, למשל על ידי מתן גישה למידע או לאפשרויות נוספים. כדי ליצור את הפריסות האלה, צריך לבצע התאמה אישית נוספת מעבר להתנהגות התגובה האוטומטית המובנית. כדי לעשות זאת, אפשר להוסיף תוכן שימושי יותר לפריסה אחרי נקודת הצירוף. חשוב לציין שנקודה מומלצת לניתוק מוגדרת בגודל מסך של 225dp.
מונחים חיוניים
עיצוב רספונסיבי: גישה לעיצוב שבה פריסות מעצבות וממקמות באופן דינמי רכיבים כמו לחצנים, שדות טקסט וחלונות דו-שיח, כדי לספק חוויית משתמש אופטימלית. השתמשו בשיטות של עיצוב רספונסיבי כדי להציע למשתמשים ערך מוסף באופן אוטומטי במסכים גדולים יותר. בין אם מדובר בטקסט נוסף שגלוי במבט מהיר, בפעולות נוספות במסך או ביעדי הקשה גדולים ונגישים יותר, שיטות תגובה דינמית מספקות חוויה משופרת למשתמשים במסכים גדולים.
עיצוב אדפטיבי: גישה לעיצוב שבה הממשק משתנה על סמך תנאים ידועים של משתמשים, מכשירים או סביבה. עיצוב מותאם ב-Material כולל התאמות של פריסה ורכיבים.
יצירה של עיצובים רספונסיביים ואופטימליים
כדי לוודא שהפריסות של העיצוב יתאימו למסכים גדולים יותר, עדכנו את ההתנהגות של הפריסות והרכיבים שלנו כך שתהיה להם התנהגות רספונסיבית מובנית, כולל שוליים וריפודים שמבוססים על אחוזים.
אם אתם משתמשים בתבניות ProtoLayout שלנו, תוכלו לרשת את העדכונים האלה באופן אוטומטי דרך ProtoLayout API והערות המוצר לגרסה הבטא. תצטרכו לספק פריסות רק במקרים שבהם הוספתם תוכן או רכיבים נוספים אחרי נקודת עצירה של גודל מסך. במדריך שלנו בנושא משבצות מפורטות הנחיות והמלצות מלאות לשימוש בגודל מסך גדול יותר. לגביות יש גובה מסך קבוע, לכן שינינו את המרווחים כדי למקסם את שטח המסך המוגבל בלי ליצור חיתוך לא רצוי.
דוגמאות התוכן והקוד שבדף הזה כפופות לרישיונות המפורטים בקטע רישיון לתוכן. Java ו-OpenJDK הם סימנים מסחריים או סימנים מסחריים רשומים של חברת Oracle ו/או של השותפים העצמאיים שלה.
עדכון אחרון: 2025-07-27 (שעון UTC).
[[["התוכן קל להבנה","easyToUnderstand","thumb-up"],["התוכן עזר לי לפתור בעיה","solvedMyProblem","thumb-up"],["סיבה אחרת","otherUp","thumb-up"]],[["חסרים לי מידע או פרטים","missingTheInformationINeed","thumb-down"],["התוכן מורכב מדי או עם יותר מדי שלבים","tooComplicatedTooManySteps","thumb-down"],["התוכן לא עדכני","outOfDate","thumb-down"],["בעיה בתרגום","translationIssue","thumb-down"],["בעיה בדוגמאות/בקוד","samplesCodeIssue","thumb-down"],["סיבה אחרת","otherDown","thumb-down"]],["עדכון אחרון: 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."]]
