لغة التصميم التعبيري في Material 3
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
تم تصميم Material 3 Expressive (M3) لتلبية طلب المستخدمين على تجارب
حديثة وملائمة ومميّزة. تتيح ميزة "التعبير" للمصمّمين أيضًا عكس مشاعر معيّنة في تنسيق الواجهة وعرضها.
الألوان والطباعة
يتم توسيع نطاق نظام الألوان لاعتماد لوحات الألوان الأكثر عمقًا في M3 و
مجموعة أكبر من الرموز، كما يتم استخدام محاور الخطوط المتغيّرة في مقياس الطباعة البسيط
لزيادة التعبير، ما يجعل التفاعلات أكثر تعبيرًا وسعادة.
تحديد نسق الألوان
تسمح الرموز الجديدة بتطبيق المزيد من الألوان على مواضيع مختلفة
وفي سياق نظام التصميم ككل.
الخطوط المتغيّرة
تتجاوز الاعتبارات المعدَّلة للخطوط المتغيّرة ومحورها القابل للتخصيص
حالات استخدام الطرف الأول لتشمل أيضًا حالات استخدام الطرف الثالث، مثل Roboto Flex الذي يحتوي على
مجموعة مشابهة من المحاور المتغيّرة.
محور الخط المتغيّر أثناء الحركة
استخدام محور الخط المتغيّر للإشارة إلى ملاحظات بشأن الحركة التعبيرية وجعل التفاعلات أكثر تعبيرية وممتعة للاستخدام
أمثلة على حالات الاستخدام:
- سمك الخط الديناميكي
- عرض الخط الديناميكي
- سماكة الخط وعرضه الديناميكيان
أدوار النوع
بالإضافة إلى مقياس أنواع محدَّث ومحسَّن، نقدّم أيضًا أدوارًا جديدة لأنواع
الخطوط تُظهر أنماطًا بارزة على Wear.
تتيح أدوار الأنواع الجديدة هذه العديد من حالات الاستخدام، بما في ذلك "نص منحني" لعرض
العناوين والمحتوى الاستباقي مع المساحة المباشرة ودور نوع مخصّص
للأرقام، ما يسمح بتحديد أحجام نص أكبر وأكثر تنسيقًا للسلاسل التي لا تحتاج
إلى الترجمة.
الشكل والحركة
نحن نعتمد أيضًا على لغة الأشكال بأسلوب أوسع وأكثر فائدة
من خلال استخدام أشكال حاويات مرنة لتطبيق التقريب والحدة على
نصف قطر الزاوية لتتوافق مع قوائم أشكال التحوّل وحالات الأزرار. نحن بصدد
تقديم أزرار تلتصق بالجانبين كتصميم جديد ومألوف للاستخدام على
الأجهزة المستديرة التي تعمل بنظام التشغيل Wear.
الحاويات التي تلتصق بالجانب
نقدّم لك حاويات الأشكال التي تتضمّن أشكالًا دائرية وتوفّر أكبر مساحة ممكنة في
شكل الجهاز الدائري.
الشكل الذي تم تطبيقه
استخدام نصف قطر الزاوية والأشكال الفريدة كسِيّارات لاعتماد تصميم تعبيري
، بما في ذلك الرسوم المتحرّكة الرائعة لتحميل المحتوى والتنسيقات المشوّقة والزرّات التي تتغيّر أشكالها
ومجموعات الأزرار التكيُّفية
نصف قطر الزاوية
استخدام أشكال زوايا Material 3 لتوفير التنوع والتمييز
والعلاقة بين أشكال الحاويات
الحاويات المجمّعة
تستخدِم حاويات المكوّنات أساليب تخطيط مرنة للتكيّف ديناميكيًا مع
المساحة المتوفّرة. ويمكنهم توزيع هذه المساحة بالتساوي لتحقيق التناظر، أو
ترتيب العناصر بشكل استراتيجي لإنشاء تسلسل هرمي مرئي، والتأكيد على
المحتوى المهم، وتوجيه تفاعل المستخدم من خلال إشارات مرئية معبرة ومؤثرة.
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ 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,["# Material 3 Expressive design language\n\nMaterial 3 Expressive (M3) was built to meet user demand for experiences that\nare modern, relevant, and distinct. Expressive also allows designers to mirror\nspecific emotions and feelings in the layout and presentation of the interface.\n\nColor and typography\n--------------------\n\nThe [color system](/design/ui/wear/guides/styles/color/system) is expanding to adopt M3's deeper tonal palettes and a\nwider token set and the simpler typography scale is utilizing variable font axes\nfor more expression, making interactions more expressive and delightful.\n\n### Color theming\n\n\nThe [new tokens](/design/ui/wear/guides/styles/color/roles-tokens) allow for more color to be applied across different themes\nand in context of the design system as a whole. \n\n\u003cbr /\u003e\n\n### Variable fonts\n\n\nThe updated considerations for variable fonts and their customizable axis,\nextend beyond 1P to also serve 3P use cases such as Roboto Flex, which has a\nsimilar set of variable axis. \n\n\u003cbr /\u003e\n\n### Variable font axis in motion\n\n\nUtilizing variable font axis to signal expressive motion feedback and making\ninteractions more expressive and delightful to use.\n\nExample use-cases:\n\n- Dynamic font weight\n- Dynamic font width\n- Dynamic font weight and width \n\n\u003cbr /\u003e\n\n### Type roles\n\n\nAlong with an updated and optimized type scale, we are also introducing new type\nroles that specifically serve notable patterns on Wear.\n\nThese new type roles support several use cases---including Arc Text for surface\ntitles, proactive content with live space, and a type role specifically for\nNumerals---that allow for bigger and more styled text sizes for strings that don't\nneed to be localized. \n\n\u003cbr /\u003e\n\nShape and motion\n----------------\n\nWe are also leaning into shape language in a much more expansive and meaningful\nway by utilizing flexible container shapes to apply rounding and sharpening of\ncorner radius to support shape morphing lists and button states. We're\nintroducing edge-hugging buttons as a new ownable and iconic design pattern for\nround devices on Wear.\n\n### Edge-hugging containers\n\n\nIntroducing shape containers that embrace round and maximize the space within\nthe circular form factor. \n\n\u003cbr /\u003e\n\n### Shape applied\n\n\nUsing corner radius and unique shapes as containers to embrace expressive design\n---extending to delightful loading animations, interesting layouts, shape-morphing\nbuttons and adaptive button groups. \n\n\u003cbr /\u003e\n\n### Corner radius\n\n\nUtilizing Material 3 corner shapes to enable variety, distinction, and\nrelationship between container shapes. \n\n\u003cbr /\u003e\n\n### Grouped containers\n\n\nComponent containers use flexible layout techniques to dynamically adapt to\navailable space. They can distribute this space evenly for symmetry, or\nstrategically arrange elements to establish visual hierarchy, emphasize\nimportant content, and guide user interaction through expressive and motion-lead\nvisual cues. \n\n\u003cbr /\u003e"]]
