تصميم تصاميم الملابس
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
تتيح لك ميزة "تخصيص التصميم المتعدد الأبعاد" في Wear Material إمكانية إجراء تخصيص منهجي لتصميم
مواد Wear OS لإظهار علامتك التجارية. عندما تبدأ في تغيير جوانب واجهة المستخدم الخاصة بك مثل اللون
وأسلوب الخط، فإن أدوات تخصيص المواد في Wear تطبق رؤية التصميم الخاصة بك
طوال تجربة المستخدم. وتسمح الأدوات بالتبديل بسهولة بين سير عمل التصميم والرموز من خلال توفير قيم محددة لجميع السمات القابلة للتخصيص. يؤدي تخصيص قيم السمات إلى إنشاء
مظهر Wear Material لمنتجك.
استخدام تصميم Wear Material
يتكوّن تصميم Wear Material من ثلاثة إجراءات رئيسية: تخصيص المظهر،
وتطبيقه على نماذج التصميم الخاصة بك، واستخدامه في الترميز.
يتضمّن "التصميم المتعدد الأبعاد" مظهرًا مدمَجًا يمكن استخدامه كما هو.
يمكنك تخصيص المظهر المُدمَج لجعل "Material Design" متوافقًا مع منتجك.
التطبيق العملي على وضع المواضيع
يؤثّر التصنيف على واجهة المستخدم بأكملها، بما في ذلك المكوّنات الفردية، مثل الشرائح.
يعرض المثال التالي كيفية تخصيص القيم التلقائية لمكوِّن شريحة.
يتم تخصيص قيم للشرائح المضمّنة ولون وشكل وعائلة أنواع معيّنة. يمكنك ضبط القيم التلقائية لتناسب نمط تطبيقك.
| قبل
شريحة Wear Material الأساسية مع أنماط تلقائية.
|
بعد
شريحة Wear Material مخصّصة.
|
اللون
يدعم نظام الألوان تعيين ألوان مخصصة للمكونات والنصوص والرموز
والأسطح. اضبط ألوان المظاهر للفئات الـ 13 التالية:
Primary
الصيغة الأساسية
Secondary
الصيغة الثانوية
خلفية
السطح
خطأ
في المرحلة الأساسية
في مرحلة التعليم الثانوي
تشغيل المحتوى في الخلفية
على السطح
على متغيّر السطح
عند ظهور خطأ
أسلوب الخط
يدعم نظام أسلوب الخط 11 فئة تشكل معًا مقياس الكتابة.
يحدد مقياس النوع هذا أنماط وأحجام الأنواع المختلفة التي تظهر
على الشاشة، بدءًا من النسخة الأساسية إلى نص الزر.
يتم التحكم في سمات أسلوب الخط من خلال القيم التي يمكن تخصيصها
لعائلة الأنواع والخط والحالة والحجم والتتبع.
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ 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,["# Wear Material Theming is the ability to systematically customize Wear Material\nDesign to reflect your brand. When you begin changing aspects of your UI such\nas color and typography, Wear Material Theming tools apply your design vision\nthroughout your user experience. The tools allow easy switching between\ndesign and code workflows by providing specific values for all customizable\nattributes. Customizing the attribute values creates a Wear Material Theme for\nyour product.\n\nUse Wear Material Theming\n-------------------------\n\nWear Material Theming consists of three main actions: customizing your theme,\napplying it across your design mocks, and using it in code.\n\nWear Material Design comes with a built-in theme that can be used as is.\nCustomize the built-in theme to make Material work for your product.\n\n### Theming in practice\n\nTheming affects your entire UI, including individual components such as chips.\nThe following example shows how to customize a chip component's default values.\n\nA contained chip is assigned values for a specific color, shape, and type\nfamily. Adjust the default values to suit your app's style.\n\n|---------------------------------------------------------------|--------------------------------------------|\n| **Before** A baseline Wear Material chip with default styles. | **After** A customized Wear Material chip. |\n\nColor\n-----\n\nThe color system supports setting custom colors for components, text, icons, and\nsurfaces. Set your theme colors for the 13 following categories:\n\n1. Primary\n\n2. Primary Variant\n\n3. Secondary\n\n4. Secondary Variant\n\n5. Background\n\n6. Surface\n\n7. Error\n\n8. On Primary\n\n9. On Secondary\n\n10. On Background\n\n11. On Surface\n\n12. On Surface Variant\n\n13. On Error\n\nTypography\n----------\n\nThe typography system supports 11 categories that together form the type scale.\nThis type scale determines the various type styles and sizes that appear\non-screen, ranging from body copy to button text.\n\nTypography attributes are controlled by values that can be customized for the\ntype family, font, case, size, and tracking."]]
