פקדי מדיה
קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
מסך בקרי המדיה חיוני כדי לעזור למשתמשים לשלוט במדיה שהם מאזינים לה. יוצרים אמצעי בקרה למדיה באמצעות פריסה של 5 לחצנים כדי לוודא שמתקיימים משטחי המגע המינימליים. במסכים גדולים יותר בגודל 225dp ומעלה,
אפשר להוסיף ערך על ידי הוספת לחצן קיצור דרך לפעולה חשובה כמו
תור ההפעלה.
פריסת הקטעים
מסך לחצני המדיה הוא מסך בגובה קבוע. הוא מורכב משלושה קטעים אנכיים עם פריסות רספונסיביות והתנהגויות שונות.
- הקטע העליון: מכיל פרטים על המדיה
- החלק האמצעי: ממשק השליטה במדיה
- הקטע התחתון: כפתורים משניים שאפשר להגדיר
שיקולים לגבי מסכים גדולים יותר
ההתאמות למסכים גדולים עבור מדיה מתמקדות אך ורק במסך של אמצעי הבקרה של המדיה. כל שאר הרכיבים מתועדים בפריטים של צ'יפים, לחצנים ותיבות דו-שיח, או בפירוט של רשימות ההתנהגות במסכים גדולים.
כדי להוסיף ערך, אפשר לכלול לחצן קיצור לפעולה חשובה, כמו רשימת השמעה. השימוש בתפריט האפשרויות הנוספות מאפשר לוודא שהפונקציונליות הנוספת עדיין עקבית ונגישה, לא משנה מה גודל המסך. אחרי נקודת עצירה של 225dp, בחלק התחתון נוסף משבצת ללחצן, כך שמספר הלחצנים המקסימלי הוא 2 במסכים קטנים ו-3 במסכים גדולים.
הפקד הראשי
השליטה העיקרית היא בדרך כלל כפתור הפעלה והשהיה. אחרי נקודת עצירה של 225dp, הרכיב מתרחב מ-64dp ל-80dp, וכך גדלים יעדי הלחיצה של כל הרכיבים בתוכו.
מסך קטן יותר (קטן מ-225 dp)
- מעגל התקדמות = 64 x 64 dp / 3 dp stroke
- כפתור = 54 x 54 dp / גודל הסמל 26
מסך גדול יותר (225 dp ומעלה)
- מעגל התקדמות = 80 x 80 dp / 4 dp stroke
- כפתור = 70 x 70 dp / גודל סמל 32
כדי לפעול לפי העקרונות של גודל יעד המגע, צריך להציג רק את פריסת 2 הלחצנים לפני נקודת עצירה של 225dp, ואת פריסות 3 הלחצנים אחרי נקודת העצירה.
בדוגמאות הבאות מוצגות הגדרות שונות של לחצנים:
<img 1.2%="" 14 dp="" 18 dp="" 24 dp="" 32 dp="" 44 dp="" 60 dp="" 6 dp="" aligned.""="" alt="" and="" area="" be="" beneath="" bottom="" button="" center="" dots="" entire="" equal="" have="" height.="" high="" icon="" icon,="" main="" margin="" of="" optional="" right="" screen's="" secondary="" should="" square,="" src="/static/wear/images/design/media-1-button-small.png" the="" to="" top="" wide.="" with="" />
פריסת לחצנים אחת עם אפשרויות נוספות, מסך קטן יותר (192 dp)
<img 14 dp="" 18 dp="" 24 dp="" 44 dp="" 48 dp="" 72.5 dp="" aligned.""="" alt="" and="" area="" be="" bottom="" button="" center="" entire="" high="" icon="" icon,="" main="" of="" optional="" right="" secondary="" should="" square,="" src="/static/wear/images/design/media-1-button-large.png" the="" to="" top="" wide.="" with="" />
פריסת לחצנים אחת עם אפשרויות נוספות, מסך גדול יותר (225 dp)
פריסת 2 לחצנים עם תפריט עודפים, מסך קטן יותר (192 dp)
פריסת 2 לחצנים עם אפשרויות נוספות, מסך גדול יותר (225 dp)
פריסה עם 2 לחצנים (מקסימום) עם גלישה, מסך קטן יותר (192 dp)
פריסת 3 לחצנים עם אפשרויות נוספות, מסך גדול יותר (225 dp)
אופן הפעולה של ההדגשה
בוצעו מספר עדכונים בכותרת כדי לשפר את הקריאות ואת חוויית השימוש הכללית:
- שוליים עליונים של 12% במסכים קטנים יותר ו-13.2% במסכים גדולים יותר.
- שוליים צדדיים של 17.6% לכותרת השיר
- שוליים של 12.5% לשם האומן במסכים קטנים יותר ו-14.5% במסכים גדולים יותר.
- שם האומן נחתך, ומשתמשים בגרדיאנטים של 8 נקודות לאינץ' כדי לגלול את שמות השירים. אם יש סמל, מפריד בין שם השיר לבין הסמל רווח נוסף של 8 dp. (הסמל לא גולל עם שם השיר).
עם סמל
שם השיר לא ניתן לגלילה (קצר) במסכים קטנים יותר (192 dp)
שם השיר לא מוצג בגלילה (קצר) במסכים גדולים יותר (225 dp)
שם השיר (ארוך) מוצג בגלילה (מיושר לימין) במסכים קטנים יותר (192 dp)
שם השיר (ארוך) בגלילה (מיושר לימין) במסכים גדולים יותר (225 dp)
שם השיר (ארוך) מוצג בגלילה (מיושר למרכז) במסכים קטנים יותר (192 dp)
גלילה של שם השיר (ארוך) (מיושר למרכז) במסכים גדולים יותר (225 dp)
ללא סמל
שם השיר לא ניתן לגלילה (קצר) במסכים קטנים יותר (192 dp)
שם השיר לא מוצג בגלילה (קצר) במסכים גדולים יותר (225 dp)
שם השיר מיושר לשמאל ולא ניתן לגלילה במסכים קטנים יותר (192 dp)
כותרת שיר ארוכה (225 dp) מיושרת לשמאל ולא ניתנת לגלילה במסכים גדולים יותר
שם השיר (ארוך) מוצג בגלילה (מיושר למרכז) במסכים קטנים יותר (192 dp)
גלילה של שם השיר (ארוך) (מיושר למרכז) במסכים גדולים יותר (225 dp)
רכיבי הקשה
הפקדים הראשיים והלחצנים התחתונים משתמשים בשטח הזמין כדי למקסם את אזור הלחיצה. הגודל המינימלי של משטח המגע הוא 48x48dp במכשירי Wear OS, והסמלים והלחצנים מיושרים למרכז משטח המגע.
אמצעי הבקרה הראשיים
מסך קטן (192dp):
- הלחצן הראשי = 64 x 64 dp
- כפתורים בצד = 64 x 64 dp
מסך גדול (225dp):
- אמצעי הבקרה הראשי = 80 x 80 dp
- כפתורי הצד = 72.5 x 80 dp
הפקדים התחתונים
מסכים קטנים יותר (192 dp) עם עד 2 לחצנים:
שני הכפתורים = 68 x 60 dp
מסכים גדולים יותר (225 dp) עם עד 3 לחצנים:
כל הכפתורים = 58 x 72.5 dp
דוגמאות התוכן והקוד שבדף הזה כפופות לרישיונות המפורטים בקטע רישיון לתוכן. 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,["# Media controls\n\nThe media controls screen is essential to help users control the media that\nthey're listening to. Create media controls using a 5-button layout to verify\nthat minimum tap targets are met. On larger screens that are 225 dp or larger,\nyou can add value by including a shortcut button for an important action such as\nplayback queue.\n\nLayout sections\n---------------\n\nThe media controls screen is a fixed height screen. It's made up of three\nvertical sections that have different responsive layouts and behavior.\n\n1. **Top section:** Contains media details\n2. **Middle section:** Media controls\n3. **Bottom section:** Configurable secondary buttons\n\nConsiderations for larger screen\n--------------------------------\n\nThe large screen adaptations for media are solely focused on the media controls\nscreen. All other elements are captured in chip, button, and dialog items or in\nthe lists breakdown of large screen behavior.\n\n### Buttons\n\nYou can add value by including a shortcut button for an important action, such\nas playback queue. Using the overflow menu verifies that the additional\nfunctionality is still consistent and accessible no matter what's the screen\nsize. The bottom section gains an additional slot for a button after the 225 dp\nbreakpoint making the maximum number of buttons 2 on smaller screens and 3 on\nlarger screens.\n\n### Main control\n\nThe main control is usually a play and pause button. After the 225 dp\nbreakpoint, the control scales from 64dp to 80dp, which increases tap targets\nfor all controls within it.\n\nSmaller screen (smaller than 225 dp)\n\n\u003cbr /\u003e\n\n- **Progress ring** = 64 x 64 dp / 3 dp stroke\n- **Button** = 54 x 54 dp / 26 icon size \nLarger screen (225 dp and larger)\n\n\u003cbr /\u003e\n\n- **Progress ring** = 80 x 80 dp / 4 dp stroke\n- **Button** = 70 x 70 dp / 32 icon size\n\n\u003cbr /\u003e\n\nButton configuration\n--------------------\n\nTo follow touch target size principles, show only the 2-button layout before the\n225 dp breakpoint and 3-button layouts past it.\n\nThe following examples show different button configurations: \n\n\u003cbr /\u003e\n\n1 Button Layout with overflow, smaller screen (192 dp)\n\n\u003cbr /\u003e\n\n1 Button Layout with overflow, larger screen (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n2 Button Layout with overflow, smaller screen (192 dp)\n\n\u003cbr /\u003e\n\n2 Button Layout with overflow, larger screen (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n2 Button (max) Layout with overflow, smaller screen (192 dp)\n\n\u003cbr /\u003e\n\n3 Button Layout with overflow, larger screen (225 dp)\n\n\u003cbr /\u003e\n\nMarquee behavior\n----------------\n\nThe header has a number of updates to improve readability and general\nexperience:\n\n- A top margin of 12% on smaller screens and 13.2% on larger screens.\n- Side margins for the song title of 17.6%\n- Artist title margin of 12.5% on smaller screens and 14.5% on larger screens.\n- Artist title truncates, while 8-dp gradients are used for scrolling song titles. If an icon is present, an additional 8 dp gap separates the song title from the icon. (The icon doesn't scroll with the song title.)\n\n### With an icon\n\n\u003cbr /\u003e\n\nNon-scrolling (short) song title on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nNon-scrolling (short) song title on larger screens (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nScrolling (long) song title (left-aligned) on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nScrolling (long) song title (left-aligned) on larger screens (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nScrolling (long) song title (center-aligned) on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nScrolling (long) song title (center-aligned) on larger screens (225 dp)\n\n\u003cbr /\u003e\n\n### Without an icon\n\n\u003cbr /\u003e\n\nNon-scrolling (short) song title on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nNon-scrolling (short) song title on larger screens (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nLeft aligned / non-scrolling (long) song title on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nLeft aligned / non-scrolling (long) song title on larger screens (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nScrolling (long) song title (center-aligned) on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nScrolling (long) song title (center-aligned) on larger screens (225 dp)\n\n\u003cbr /\u003e\n\nTap targets\n-----------\n\nMain controls and bottom buttons use the available space to maximize the tap\ntarget. The minimum tap target size is 48 x 48 dp on Wear OS devices, with\nicons and buttons aligned to the center of the tap target.\n\n### Main controls\n\n\u003cbr /\u003e\n\nSmall screen (192dp):\n\n- **Main control** = 64 x 64 dp\n- **Side controls** = 64 x 64 dp \n\nLarge screen (225dp):\n\n- **Main control** = 80 x 80 dp\n- **Side controls** = 72.5 x 80 dp\n\n### Bottom controls\n\n\u003cbr /\u003e\n\nSmaller screens (192 dp) with a maximum of 2 buttons:\n\n**Both buttons** = 68 x 60 dp\n\n\u003cbr /\u003e\n\nLarger screens (225 dp) with a maximum of 3 buttons:\n\n**All buttons** = 58 x 72.5 dp\n\n\u003cbr /\u003e"]]
