רמה 2: תגובה מהירה ואופטימיזציה
קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
אפליקציות שמשתמשות בפריסות רספונסיביות ומתאימות את עצמן באופן אוטומטי לגדלים שונים של מסכים, מציעות ערך נוסף למשתמשים ומספקות חוויית משתמש פרודוקטיבית ומושכת יותר.
פריסות רספונסיביות מעצבות וממקמות באופן דינמי רכיבים כמו לחצנים, שדות טקסט ודיאלוגים, כדי לספק חוויית משתמש אופטימלית. כדי להציע למשתמשים באפליקציה שלכם ערך מוסף במסכים גדולים יותר, כדאי להשתמש בשיטות עיצוב רספונסיביות. בין אם מדובר בטקסט גלוי יותר במבט חטוף, בפעולות נוספות במסך או ביעדי הקשה גדולים יותר ונגישים יותר, שיטות עבודה מומלצות לעיצוב דינמי משפרות את החוויה של משתמשים במסכים גדולים יותר.
הוספת ערך באמצעות עיצוב רספונסיבי
check_circle
מה מומלץ לעשות
- משתמשים בספריית הרכיבים M3 Compose, שכוללת התנהגות רספונסיבית וניתנת להתאמה.
- משתמשים בפריסות רספונסיביות, שמותאמות באופן אוטומטי וחלק למילוי השטח הזמין בכל גודלי המסכים.
cancel
מה אסור לעשות
- מתיחת רכיבי ממשק משתמש – כולל שדות טקסט, לחצנים, תיבות דו-שיח – כדי למלא את הרווח הנוסף.
- להגדיל את הגודל של הגופנים, אלא אם הם משמשים בעיקר למטרות גרפיות.
דוגמאות
בתמונות הבאות מוצגות דוגמאות לאפליקציות רספונסיביות שעברו אופטימיזציה.
דוגמאות התוכן והקוד שבדף הזה כפופות לרישיונות המפורטים בקטע רישיון לתוכן. 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,["# Tier 2: Responsive and optimized\n\nApps that employ responsive layouts and automatically adapt to different screen\nsizes offer additional value to users and provide more productive, engaging user\nexperiences.\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\nAdd value through responsive design\n-----------------------------------\n\ncheck_circle\n\n### Do\n\n- Use the M3 Compose component library which has built-in responsive and adaptive behavior.\n- Utilize responsive layouts, which automatically and smoothly adjust to fill the available space across screen sizes. \ncancel\n\n### Don't\n\n- Stretch UI elements---including text fields, buttons, dialogs---to fill extra space.\n- Increase the sizes of fonts, unless they're serving a primarily graphic purpose.\n\nExamples\n--------\n\nThe following images show examples of apps that are responsive and optimized.\n\n\n### Edge-hugging buttons\n\n\u003cbr /\u003e\n\n\n### List of cards\n\n\u003cbr /\u003e\n\n\n### List of switchers and buttons\n\n\u003cbr /\u003e\n\n\n### Tile with image cards\n\n\u003cbr /\u003e\n\n\n### List of cards with images\n\n\u003cbr /\u003e\n\n\n### Tile with graph\n\n\u003cbr /\u003e"]]
