عناصر التحكّم في الوسائط
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
تُعد شاشة عناصر التحكّم في الوسائط ضرورية لمساعدة المستخدمين في التحكّم في الوسائط التي يستمعون إليها. أنشئ عناصر تحكّم في الوسائط باستخدام تصميم يتضمّن 5 أزرار للتحقّق من استيفاء الحد الأدنى من نواحي اللمس المستهدفة. على الشاشات الأكبر حجمًا التي تبلغ 225 وحدة بكسل مستقلة عن الكثافة أو أكثر،
يمكنك إضافة قيمة من خلال تضمين زر اختصار لإجراء مهم، مثل
قائمة التشغيل.
أقسام التنسيق
شاشة عناصر التحكّم في الوسائط هي شاشة ذات ارتفاع ثابت. يتألف من ثلاثة أقسام عمودية ذات تخطيطات وسلوكيات مختلفة متجاوبة.
- القسم العلوي: يحتوي على تفاصيل الوسائط
- القسم الأوسط: أدوات التحكّم في الوسائط
- القسم السفلي: أزرار ثانوية قابلة للضبط
اعتبارات للشاشات الأكبر حجمًا
تتوفّر التعديلات على الوسائط للشاشات الكبيرة فقط على شاشة عناصر التحكّم في الوسائط. يتم تسجيل جميع العناصر الأخرى في عناصر الشرائح والأزرار ومربّعات الحوار أو في تقسيم القوائم حسب سلوك الشاشة الكبيرة.
يمكنك إضافة قيمة من خلال تضمين زر اختصار لإجراء مهم، مثل قائمة التشغيل. يضمن استخدام قائمة الخيارات الإضافية أنّ الوظائف الإضافية تظل متسقة ويمكن الوصول إليها بغض النظر عن حجم الشاشة. يكتسب القسم السفلي خانة إضافية لزر بعد نقطة التوقف عند 225 وحدة بكسل مستقلة عن الكثافة، ما يجعل الحد الأقصى لعدد الأزرار 2 على الشاشات الأصغر و3 على الشاشات الأكبر.
عنصر التحكّم الرئيسي
عادةً ما يكون عنصر التحكّم الرئيسي هو زر التشغيل والإيقاف المؤقت. بعد نقطة التوقّف عند 225 وحدة بكسل مستقلة عن الكثافة، يتم تغيير حجم عنصر التحكّم من 64 إلى 80 وحدة بكسل مستقلة عن الكثافة، ما يؤدي إلى زيادة مساحة الاستهداف التي يمكن النقر عليها في جميع عناصر التحكّم داخلها.
شاشة أصغر (أصغر من 225 وحدة بكسل مستقلة الكثافة)
- حلقة التقدّم = 64 × 64 وحدة بكسل مستقلة عن الكثافة / 3 وحدات بكسل مستقلة عن الكثافة لعرض الخط
- الزر = 54 × 54 وحدة بكسل مستقلة عن الكثافة / حجم الرمز 26
شاشة أكبر (225 وحدة بكسل مستقلة عن الكثافة أو أكثر)
- حلقة التقدّم = 80 × 80 بكسل غير مرتبط بالكثافة / 4 بكسل غير مرتبط بالكثافة
- الزر = 70 × 70 وحدة بكسل مستقلة عن الكثافة / حجم الرمز 32
للتوافق مع مبادئ حجم عنصر اللمس المستهدف، اعرض تخطيط الزرَّين فقط قبل نقطة التوقف عند 225 وحدة بكسل مستقلة عن الكثافة، وتخطيطات الأزرار الثلاثة بعد ذلك.
تعرض الأمثلة التالية إعدادات مختلفة للأزرار:
<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 وحدة بكسل مستقلة عن الكثافة)
<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="" />
1 تخطيط زر مع قائمة كاملة، شاشة أكبر (225 وحدة بكسل مستقلة الكثافة)
تصميم يتضمّن زرَّين مع قائمة خيارات إضافية، شاشة أصغر (192 وحدة بكسل مستقلة عن الكثافة)
تنسيق زرَّين مع قائمة كاملة، شاشة أكبر (225 وحدة بكسل مستقلة الكثافة)
تنسيق زرَّين (كحد أقصى) مع تجاوز السعة، شاشة أصغر (192 وحدة بكسل مستقلة عن الكثافة)
تصميم 3 أزرار مع قائمة كاملة، شاشة أكبر (225 وحدة بكسل مستقلة الكثافة)
سلوك التضليل
يتضمّن العنوان عددًا من التعديلات لتحسين سهولة القراءة والتجربة العامة:
- هامش علوي بنسبة% 12 على الشاشات الأصغر و% 13.2 على الشاشات الأكبر
- الهامشَين الجانبيَّين لعنوان الأغنية بنسبة 17.6%
- هامش عنوان الفنان بنسبة% 12.5 على الشاشات الأصغر و% 14.5 على الشاشات الأكبر
- يتم اقتطاع عنوان الفنان، بينما يتم استخدام تدرّجات 8-dp لتمرير عناوين الأغاني. إذا كان الرمز ظاهرًا، تفصل مسافة إضافية تبلغ 8 وحدات بكسل مستقلة الكثافة بين عنوان الأغنية والرمز. (لا يتم تمرير الرمز مع عنوان الأغنية).
تتضمّن رمزًا
عنوان الأغنية غير القابل للتمرير (قصير) على الشاشات الأصغر حجمًا (192 وحدة بكسل مستقلة عن الكثافة)
عنوان أغنية غير قابل للتمرير (قصير) على الشاشات الكبيرة (225 dp)
عنوان الأغنية الطويل (محاذى لليمين) على الشاشات الأصغر حجمًا (192 وحدة بكسل مستقلة عن الكثافة)
عنوان الأغنية الطويل (يتم تمريره) (محاذاته إلى اليمين) على الشاشات الأكبر حجمًا (225 وحدة بكسل مستقلة الكثافة)
عنوان أغنية طويل (يتم محاذاته في الوسط) على الشاشات الأصغر حجمًا (192 وحدة بكسل مستقلة عن الكثافة)
عنوان أغنية طويل (محاذى للوسط) على شاشات أكبر (225 وحدة بكسل مستقلة عن الكثافة)
بدون رمز
عنوان الأغنية غير القابل للتمرير (قصير) على الشاشات الأصغر حجمًا (192 وحدة بكسل مستقلة عن الكثافة)
عنوان أغنية غير قابل للتمرير (قصير) على الشاشات الكبيرة (225 dp)
عنوان أغنية طويل بمحاذاة إلى اليمين / غير قابل للتمرير على الشاشات الأصغر حجمًا (192 dp)
عنوان أغنية طويل غير قابل للتمرير ومحاذى لليمين على الشاشات الأكبر حجمًا (225 dp)
عنوان أغنية طويل (يتم محاذاته في الوسط) على الشاشات الأصغر حجمًا (192 وحدة بكسل مستقلة عن الكثافة)
عنوان أغنية طويل (محاذى للوسط) على شاشات أكبر (225 وحدة بكسل مستقلة عن الكثافة)
مساحات اللمس
تستخدِم عناصر التحكّم الرئيسية والأزرار السفلية المساحة المتاحة لزيادة مساحة النقر إلى أقصى حدّ. الحدّ الأدنى لحجم العنصر القابل للنقر هو 48 × 48 بكسل مستقل الكثافة على أجهزة Wear OS، مع محاذاة الرموز والأزرار إلى منتصف العنصر القابل للنقر.
عناصر التحكّم الرئيسية
شاشة صغيرة (192 وحدة بكسل مستقلة الكثافة):
- عنصر التحكّم الرئيسي = 64 × 64 وحدة بكسل مستقلة الكثافة
- عناصر التحكّم الجانبية = 64 × 64 وحدة بكسل مستقلة عن الكثافة
شاشة كبيرة (225 وحدة بكسل مستقلة عن الكثافة):
- عنصر التحكّم الرئيسي = 80 × 80 بكسل مستقل الكثافة
- عناصر التحكّم الجانبية = 72.5 × 80 بكسل غير مرتبط بالكثافة
عناصر التحكّم في أسفل الشاشة
الشاشات الأصغر (192 وحدة بكسل مستقلة عن الكثافة) التي تحتوي على زرَّين كحدّ أقصى:
كلا الزرَّين = 60 × 68 وحدة بكسل مستقلة الكثافة
الشاشات الأكبر حجمًا (225 وحدة بكسل مستقلة عن الكثافة) التي تحتوي على 3 أزرار كحدّ أقصى:
جميع الأزرار = 58 × 72.5 وحدة بكسل مستقلة عن الكثافة
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-07-27 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","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 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],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"]]
