تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
تعتمد ميزة "تعبيرية" في Material 3 على لغة الأشكال بطريقة أكثر شمولاً
ودلالةً من خلال استخدام أشكال حاويات مرنة لتطبيق التقريب
والتوضيح لنصف قطر الزوايا من أجل دعم قوائم تغيير الأشكال وحالات الأزرار.
يقدّم نظام التصميم أيضًا أزرارًا على الحواف كنمط تصميم مميّز ومناسب للأجهزة الدائرية على Wear OS.
الحفاظ على تغيير حجم عناصر واجهة المستخدم
عند تصميم تنسيقات على شاشة دائرية، يكون لكل من طرق العرض التي يمكن التمرير فيها وتلك التي لا يمكن التمرير فيها متطلبات فريدة للحفاظ على تغيير حجم عناصر واجهة المستخدم والحفاظ على تنسيق وتركيبة متوازنين.
طرق العرض التي تتطلّب التمرير
بالنسبة إلى طرق العرض القابلة للتمرير، استخدِم النسب المئوية لتحديد جميع الهوامش العلوية والسفلية والجانبية لتجنُّب الاقتصاص وتوفير تحجيم نسبي للعناصر.
يجب تحديد جميع الهوامش العلوية والسفلية والجانبية كنسب مئوية لتجنُّب الاقتصاص وتوفير تحجيم نسبي للعناصر.
المشاهدات غير القابلة للتمرير
بالنسبة إلى طرق العرض غير القابلة للتمرير، استخدِم النِسب المئوية والقيود العمودية لجميع الهوامش. بهذه الطريقة، يمكن أن يتمدّد المحتوى الرئيسي في المنتصف ليملأ المساحة المتاحة.
يجب تحديد جميع الهوامش كنسب مئوية، كما يجب تحديد القيود العمودية بطريقة تتيح للمحتوى الرئيسي في المنتصف التمدّد لملء المساحة المتاحة.
مستويات إرشادات الجودة
يتم تنظيم إرشادات الجودة في ثلاثة مستويات. يمكنك توفير أفضل تجربة ممكنة للمستخدمين من خلال استيفاء الإرشادات في جميع المستويات الثلاثة.
جاهز لجميع أحجام الشاشات
احرِص على أن يقدّم تطبيقك تجربة عالية الجودة على جميع أحجام الشاشات.
إنشاء تنسيقات تستخدم مساحة التطبيق المتاحة بالكامل
متجاوب ومحسّن
يمكنك عرض المزيد من المحتوى للمستخدمين على الأجهزة التي تسمح بذلك، واستخدام تخطيطات متجاوبة تتكيّف تلقائيًا مع أحجام الشاشات المختلفة.
التكيّف والتنوّع
استفِد إلى أقصى حد من المساحة الإضافية من خلال استخدام نقاط التوقف لتقديم تجارب جديدة وفعّالة على الشاشات الكبيرة لا يمكن توفيرها على الأجهزة ذات الشاشات الأصغر.
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-07-26 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","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-26 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],null,["# Design quality tiers\n\nMaterial 3 Expressive leans into shape language in a much more expansive and\nmeaningful way by utilizing flexible container shapes to apply rounding and\nsharpening of corner radii to support shape morphing lists and button states.\nThe design system also introduces edge-hugging buttons as an ownable and iconic\ndesign pattern for round devices on Wear OS.\n\nMaintain UI element scaling\n---------------------------\n\nWhen designing layouts on a round screen, scrolling and non-scrolling\nviews each have unique requirements to maintain UI element scaling and preserve\na balanced layout and composition.\n\n\n**Scrolling views**\n\nFor scrolling views, use percentages to define all top, bottom, and side\nmargins to avoid clipping and provide proportional scaling of elements.\n\nAll top, bottom, and side margins should be defined in percentages to avoid\nclipping and provide proportional scaling of elements. \n**Non-scrolling views**\n\nFor non-scrolling views, use percentages and vertical constraints for all\nmargins. That way, the main content in the middle can stretch to fill the\navailable area.\n\nAll margins should be defined in percentages and vertical constraints should be\ndefined such that the main content in the middle can stretch to fill the\navailable area.\n\n\u003cbr /\u003e\n\nTiers of quality guidelines\n---------------------------\n\nOur quality guidelines are organized into three tiers. Enable the best possible\nexperience for your users by meeting guidelines in all three tiers.\n\n\n**Ready for all screen sizes**\n\nEnsure your app is delivering a quality experience across all screen sizes.\nCreate layouts that fully use the available app space. \n\n**Responsive and optimized**\n\nDeliver more content to users on devices which allow for it, and utilize\nresponsive layouts that automatically adapt to different screen sizes. \n\n**Adaptive and differentiated**\n\nMake the most of additional real estate by utilizing breakpoints to offer\npowerful new experiences on larger screens which are not possible on devices\nwith smaller screens.\n\n\u003cbr /\u003e\n\n| **Caution:** A larger display size should *never* display less information than ones that are smaller than it, this is especially relevant for custom behaviors added in at the breakpoint. A common example of this is when components or text sizes are increased past the breakpoint and end up showing less are the larger screens. Screens should always show \"more value\" and never \"less value\" with increasing size."]]
