نظام تصميم البلاط
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
فهم العناصر الأساسية للمربّع استخدِم نماذج المربّعات والتنسيقات والمكوّنات لتصميم وبناء مربّعات فريدة لتطبيقاتك.
العناصر الأساسية
النسبة المئوية للمساحة المتروكة
تستخدم الهوامش العلوية والسفلية والجانبية النسب المئوية، بدلاً من مبالغ الهوامش الثابتة، لتحقيق التحجيم التناسبي.
مجالات التصميم
لكل نوع من نماذج المربّعات قواعده الخاصة ضمن منطقة المحتوى الأساسية. راجع إرشادات التنسيق للحصول على مزيد من المعلومات.
الشريحة المكثّفة السفلية
مهم لتفعيل الإجراءات الثانوية على المربّع. يتم وضعها بشكل ثابت أعلى الجزء السفلي بنسبة 6.3%.
شريحة مضغوطة سفلية
داخل الزر، استخدم كلمة قصيرة ولكنها خاصة بإجراء أو وجهة معيّنة. يجب أن تتوافق ترجمة نص الحث على اتخاذ إجراء هذا مع عدد الأحرف المسموح به. كقيمة تلقائية أو احتياطية، يمكنك استخدام "المزيد". كنص الحث على اتخاذ إجراء.
موضع الإعلان
- الهامش: 2.1% من الأسفل
- المساحة المتروكة الداخلية: 8 dp أعلى وأسفل
مواصفات الزر
- المساحة المتروكة الداخلية: 12 بكسل مستقل الكثافة على كلا الجانبين
المساحة المتروكة/الهوامش الداخلية الجانبية
عدد الأحرف المسموح به الذي يُنصَح به: < 225 dp
- الحد الأقصى لعدد الأسطر: 1
- عدد الأحرف المسموح به: 8
- عدد الأحرف المسموح به: 6
- الاقتطاع: لا
حدود المصادر الموصى بها > 225 dp
- الحد الأقصى لعدد الأسطر: 1
- الحدّ الأقصى لعدد الأحرف المسموح به: 9
- عدد الأحرف المسموح به: 7
- الاقتطاع: لا
اللون
تطبيق مظهر العلامة التجارية
تتوفر العديد من ألوان العلامة التجارية التي يمكنك الاختيار من بينها. ويمكن أيضًا تخصيصها وتغييرها لتناسب شكل تطبيقك ومضمونه.
استخدم أدوات وإرشادات موضوع Material لإنشاء ألوان بها مستويات تباين ألوان كافية، باستخدام اللون الأساسي كلون مصدر استخدم لوحة الألوان التي تم إنشاؤها لاستبدال الألوان الأساسية والمتغير الأساسي واللون الأساسي والسطحي والسطحي في لوحتك في Figma لوضع مربعك بشكل صحيح. جميع الألوان الأخرى غير قابلة للتخصيص لتحقيق اتّساق بين المربّعات.
أدوات أخرى لإنشاء مظاهر متعددة:
تطبيق الألوان
اضبط لون الخلفية دائمًا على اللون الأسود.
check_circle
الإجراءات التي يُنصح بها
لا تضبط الخلفية كصورة تتجاوز الهوامش بالكامل أو لون للكتلة.
cancel
الإجراءات غير المُوصى بها
أسلوب الخط
Roboto هو الخط الأساسي المستخدم في Wear OS. يوصى باستخدام النص الأساسي 2 كإعداد افتراضي وأصغر حجم خط، بينما العرض 2 هو أكبر نمط متاح للمربعات في كل نوع.
التصنيف الأساسي
يبعد نص التصنيف الأساسي دائمًا 16.64% من الحافة العلوية ومساحة متروكة داخلية بنسبة 6.3%. يظل اللون والخط متسقين أيضًا طوال الوقت.
المساحة المتروكة الداخلية
الهوامش العلوية: %16.64
الهامش الجانبي: 6.3%
اللون
متغير في الخلفية (رمادي 300)
النوع
Tiles3P (Roboto) / Button - 15S غامق
لمزيد من المعلومات حول الخط والوزن والمقاس، يُرجى الاطّلاع على أسلوب الخط.
المكوّنات
تتوفّر عدّة مكوّنات لإنشاء مربّعات تطبيقك. وتتوافق هذه المكوّنات مع التصميم المتعدد الأبعاد.
الخيارات: زر أو زر تبديل
المقاسات: عادي، XS، S، L
الأنواع: معبأ، ومملوءة بدرجات اللون، وصورة
اذكر ما يصل إلى 7 خيارات.
زر لون النص
الخيارات: زر أو زر تبديل
المقاسات: عادي، XS، S، L
الأنواع: معبأ وممتلئ بدرجات لونية
اذكر ما يصل إلى 7 خيارات.
شريحة عادية
الخيارات: الرمز والتصنيف الثانوي ومحاذاة النص
اذكر خيارين كحد أقصى:
شريحة العنوان (الملء الأساسي فقط)
تمت محاذية النص إلى الوسط
أنشئ عبارة واحدة بارزة تحثّ على اتخاذ إجراء.
شريحة مضغوطة
الأنواع: معبأ ومملوءة بدرجات اللون
الخيارات: رمز أو بدون رمز
استخدِمه في خانة الزر السفلية.
مؤشر التقدم
الأنواع: عرض الخط القابل للتخصيص
(الأحجام التلقائية: 8 dp و5 dp)
الخيارات: فجوة في الأسفل أو كاملة
حدد التقدم وإنجاز المهمة.
مجموعة أدوات تصميم Figma
نزِّل مجموعة أدوات تصميم "البلاط" على Wear OS لبدء استخدام تصاميم المربعات مع المكوّنات المدمَجة والخيارات والاقتراحات لإنشاء تصاميم مختلفة تناسب احتياجاتك، مع اتّباع الإرشادات الواردة في نماذج ProtoLayout.
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ 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,["# Tiles design system\n\nUnderstand tile fundamental elements. Use tile templates, layouts, and components to design and build unique tiles for your apps.\n\n**Fundamental elements**\n------------------------\n\n**Percentage padding**\n\nTop, bottom, and side margins all use percentages, rather than fixed margin amounts, to achieve proportional scaling. \n\n**Design areas**\n\nEach type of tile template has its own rules within the primary content area. Refer to the [layout guidance](/design/ui/wear/guides/surfaces/tiles-layouts) for more information. \n\n**Bottom compact chip**\n\nImportant for enabling secondary actions on the tile. Consistently placed 6.3% above the bottom.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nBottom compact chip\n-------------------\n\nWithin the button, use a word that's short but specific to a particular action or destination. The translation of this call-to-action text must accommodate the character count limits. As a default or fallback value, you can use \"More\" as the call-to-action text. \n\n**Placement**\n\n- Margin: 2.1% from the bottom\n- Internal padding: 8 dp above and below \n\n**Button spec**\n\n- Internal padding: 12 dp on both sides \n\n**Side internal padding/margins**\n\n- 16.64%\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Recommended character limit \\\u003c 225 dp**\n\n- Max lines: 1\n- Max character limit: 8\n- Recommended character limit: 6\n- Truncation: No \n**Recommended c** **haracter limits \\\u003e 225 dp**\n\n- Max lines: 1\n- Max character limit: 9\n- Recommended character limit: 7\n- Truncation: No\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nColor\n-----\n\n### **Apply your brand's theme**\n\nThere are several brand colors to choose from. They can also be customized and changed to fit your app's look and feel. \n\nUse the [Material theme tools and guidance](https://m3.material.io/styles/color/system/overview) to generate colors that have adequate color contrast levels, using your primary color as a source color Use the generated palette to replace the primary, primary-variant, on-primary, surface, and on-surface colors in your palette in Figma to theme your tile correctly. All other colors are not customizable to create consistency across tiles.\n\n**Other Material theme building tools:**\n\n- [Material Theme Builder Web](https://material-foundation.github.io/material-theme-builder/)\n- [Material Theme Builder Figma plugin](https://www.figma.com/community/plugin/1034969338659738588/material-theme-builder)\n\n### **Color application**\n\nAlways set the background color to black. \ncheck_circle\n\n### Do\n\nDon't set the background as a full bleed image or block color. \ncancel\n\n### Don't\n\nTypography\n----------\n\nRoboto is the primary font used in Wear OS. Body 2 is recommended as the default and the smallest font size, while Display 2 is the largest type style that's available for tiles.\n\n### **Primary label**\n\nPrimary label text is always 16.64% from the top edge and have an internal padding of 6.3%. Color and font also remain consistent throughout. \n\n**Internal padding**\n\nTop margins: 16.64% \nSide margin: 6.3% \n\n**Color**\n\nOn-Background-Variant (Gray 300) \n\n**Type**\n\nTiles3P (Roboto) / Button - 15S Bold\n\nFor more information about font, weight, and sizing, see [Typography](/design/ui/wear/guides/styles/typography).\n\n**Components**\n--------------\n\nThere are several components available to build your app's tiles. These components are aligned with Material Design.\n\n### Icon button\n\nOptions: Button or Toggle Button \nSizes: Standard, XS, S, L \nTypes: Filled, tonal-filled, and image\n\nList up to 7 options.\n\n### Text button\n\nOptions: Button or Toggle Button \nSizes: Standard, XS, S, L \nTypes: Filled and tonal-filled\n\nList up to 7 options.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### Standard chip\n\nOptions: Icon, secondary label, and text alignment\n\nList up to 2 options.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### Title chip (primary-fill only)\n\nCenter-aligned text \n\n\nCreate a single, prominent CTA.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### Compact chip\n\nTypes: Filled and tonal-filled \nOptions: Icon or no icon \n\nUse in the bottom button slot.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### Progress indicator\n\nTypes: Customizable stroke width \n(Default sizes: 8 dp and 5 dp) \nOptions: Gap at the bottom or full\n\nIndicate progress and task completion.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nFigma design kit\n----------------\n\n[Download the Tiles on Wear OS design kit](/design/ui/wear/guides/foundations/download#tiles-design-kit) to start using the tile design layouts with built-in components, options, and recommendations to create different layouts that suit your needs, while following the guidelines in the ProtoLayout templates."]]
