רשימה סוחפת
קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
רשימה סוחפת היא שילוב של שורה של תוכן תצוגה מקדימה של
נבחר. הוא מציג תוכן באזור תצוגה גדול יותר.
משאבים
המיטב
- תצוגה מקדימה של תוכן דינמי. כשמשתמש מנווט בשורה של
תוכן, אזור התצוגה המקדימה יתעדכן באופן אוטומטי כדי להציג
הפריט הנוכחי שבו מתמקדים.
- רכיב הרשימה הסוחפת כולל אזור תצוגה גדול יותר
להציג תוכן, ולהקל על המשתמשים לראות ולהעריך
הפרטים החזותיים של הפריט שבו מתמקדים.
- רשימות עשירות מספקות מידע רלוונטי ולפי הקשר
לגבי הפריט שבו מתמקדים, עוזרים למשתמשים לקבל החלטות מושכלות
ויוצאים מחוויית הגלישה.
- רכיב הרשימה העשירה משתמש בחשיפה הדרגתית כדי לחשוף
פרטים נוספים על התוכן ככל שהמשתמשים מנווטים בו, צמצום קוגניטיביות
טעינה ושמירה על מעורבות המשתמשים.
- רכיב הרשימה העשירה מבטיח אינטראקציות עקביות בכל האפליקציה,
לספק למשתמשים חוויה מוכרת וצפויה.
אנטומיה
- רקע של תמונה
- חסימת תוכן
- הכרטיס בפוקוס
- רשת תוכן
- מיסוך קולנועי
- Poster
- צבע הרקע
מפרטים
התנהגות
כשמנווטים בין כרטיסים ברשימה העשירה, הפרטים של
הכרטיס שנבחר נחשפות בהדרגה ברקע.
כשהרשימה העשירה ממוקדת, הגובה שלה גדל כדי לחשוף את הרשימה
מידע נוסף, כמו כותרת הרקע
של Google, כמו שאפשר לראות בסרטון הבא.
שימוש
כדאי להשתמש בקרוסלות סוחפות כשרוצים למשוך תשומת לב למודעות שמוצגות או
תוכן מקודם, כמו סרטים חדשים, תוכניות פופולריות או תכנים בלעדיים
כותרות. אזור התצוגה הגדול והתצוגה המקדימה הדינמית מספקות
זו דרך להציג פריטים בעלי עדיפות גבוהה.
תצוגת תמונה
- מיקוד הכרטיס: כשהמשתמש מנווט בקרוסלה,
כרטיס ממוקד מודגש מבחינה חזותית, שינוי גודל הכרטיס ב-1.1, באמצעות שוליים,
וסימנים חזותיים אחרים כגובה כדי לציין את הבחירה שלו. מוודאים שהתוכן
בתוך התמונה הממוזערת של הכרטיס שבו מתמקדים מוצגים בבירור
גלויים וקל יותר לקרוא אותם.
- תמונת רקע: כשהכרטיס במוקד, רקע תואם
מוצגת באזור התצוגה הגדול יותר. מומלץ להשתמש ברקע הזה
היא באיכות גבוהה ומושכת מבחינה ויזואלית, כי היא מספקת
רקע מעורר עניין של התוכן.
יצירה מוזיקלית
check_circle
מה מותר לעשות
שינוי קנה המידה ויישור הנושא לפינה השמאלית העליונה כדי ליצור חוויה קולנועית.
cancel
מה אסור לעשות
נמנעים משימוש בחיתוך מסך מלא שעלול לחתוך את נושא התמונה מתחת לתוכן.
כדי לוודא שהתמונות ישמשו כרקעים ברכיב של הרשימה העשירה
נראות טוב, חשוב לשנות את הגודל שלהן בהתאם כדי שהן לא יהיו מטושטשות
או מעוותות.
יחס גובה-רוחב
כשאפשר, כדאי להשתמש ביחס של 16:9 לתמונות רקע
פריסה מעניינת ועקבית.
דוגמאות התוכן והקוד שבדף הזה כפופות לרישיונות המפורטים בקטע רישיון לתוכן. Java ו-OpenJDK הם סימנים מסחריים או סימנים מסחריים רשומים של חברת Oracle ו/או של השותפים העצמאיים שלה.
עדכון אחרון: 2025-07-27 (שעון UTC).
[null,null,["עדכון אחרון: 2025-07-27 (שעון UTC)."],[],[],null,["# Immersive list is a combination of a row of content \\& preview of the\nselected item. It features content in a larger viewport.\n\nResources\n---------\n\n| Type | Link | Status |\n|----------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|\n| Design | [Design source (Figma)](https://goo.gle/tv-desing-kit) | Available |\n| Implementation | [Sample](https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:tv/samples/src/main/java/androidx/tv/samples/ImmersiveListSamples.kt;drc=5920fece16ad6723107098f24a492a25937cd51a) | N/A |\n\nHighlights\n----------\n\n- Dynamic content preview. When a user navigates through the row of content, the preview area automatically update to display the current focused item.\n- The Immersive list component features a larger viewport for displaying content, making it easier for users to view and appreciate the visual details of the focused item.\n- Immersive lists provide relevant and contextual information about the focused item, helping users make informed decisions without leaving the browsing experience.\n- The Immersive list component uses progressive disclosure to reveal more details about the content as users navigate, reducing cognitive load and maintaining user engagement.\n- The Immersive list component ensures consistent interactions across the app, providing users with a familiar and predictable experience.\n\nAnatomy\n-------\n\n1. Image background\n2. Content block\n3. Card on focus\n4. Content grid\n\n1. Cinematic scrim\n2. Poster\n3. Background color\n\nSpecs\n-----\n\nBehavior\n--------\n\nWhen navigating between cards in the Immersive list, the details of the\nselected card are progressively revealed in the background. \n\nWhen the immersive list is in focus, its height increases to reveal\nadditional information, such as the background title and\ndescription, as shown in the following video.\n\nUsage\n-----\n\nUse immersive carousels when you want to draw attention to featured or\npromoted content, such as new releases, popular shows, or exclusive\ntitles. The larger viewport and dynamic preview provide a compelling\nway to showcase these high-priority items.\n\n### Image display\n\n1. **Card focus**: As the user navigates through the carousel, the focused card is visually emphasized, scaling the card by 1.1, using a border, and other visual cues as elevation to indicate its selection. Ensure content titles inside the thumbnail of the focused card are clearly visible and easier to read.\n2. **Background image**: When a card is in focus, a corresponding background image is displayed in the larger viewport. We recommend this background image is high-quality and visually appealing, as it provides an immersive and engaging backdrop for the content.\n\n### Composition\n\ncheck_circle\n\n### Do\n\nScale and align the subject to the top right corner creating a cinematic experience. \ncancel\n\n### Don't\n\nAvoid using full screen crop that will make crop the subject under the content.\n\nTo ensure the images used as backgrounds in the Immersive list component\nlook good, make sure to scale them appropriately so they are not blurry\nor distorted.\n\n### Aspect ratio\n\nUse a 16:9 ratio for background images whenever possible to ensure\na visually appealing and consistent layout."]]
