سیستم طراحی کاشی
با مجموعه‌ها، منظم بمانید
ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.
عناصر اساسی کاشی را درک کنید. از قالب‌ها، طرح‌بندی‌ها و اجزای کاشی برای طراحی و ساخت کاشی‌های منحصربه‌فرد برای برنامه‌های خود استفاده کنید.
عناصر اساسی
درصد بالشتک
حاشیه‌های بالا، پایین و کناری همگی از درصد، به جای مقادیر حاشیه ثابت، برای دستیابی به مقیاس‌بندی متناسب استفاده می‌کنند.
مناطق طراحی
هر نوع قالب کاشی قوانین خاص خود را در حوزه محتوای اصلی دارد. برای اطلاعات بیشتر به راهنمای چیدمان مراجعه کنید.
تراشه فشرده پایین
برای فعال کردن اقدامات ثانویه روی کاشی مهم است. به طور مداوم 6.3٪ بالاتر از پایین قرار می گیرد.
تراشه فشرده پایین
در داخل دکمه، از کلمه ای استفاده کنید که کوتاه اما مختص یک عمل یا مقصد خاص است. ترجمه این متن دعوت به اقدام باید محدودیت‌های تعداد کاراکتر را داشته باشد. به عنوان یک مقدار پیش‌فرض یا بازگشتی، می‌توانید از «بیشتر» به‌عنوان متن دعوت به اقدام استفاده کنید.
قرار دادن
- حاشیه: 2.1 درصد از پایین
- بالشتک داخلی: 8 dp بالا و پایین
مشخصات دکمه
- لایه داخلی: 12 dp در دو طرف
بالشتک داخلی جانبی / حاشیه
محدودیت نویسه توصیه شده < 225 dp
- حداکثر خطوط: 1
- حداکثر محدودیت کاراکتر: 8
- محدودیت کاراکتر پیشنهادی: 6
- برش: خیر
محدودیت کاراکتر توصیه شده > 225 dp
- حداکثر خطوط: 1
- حداکثر محدودیت کاراکتر: 9
- محدودیت کاراکتر پیشنهادی: 7
- برش: خیر
رنگ
تم برند خود را اعمال کنید
چندین رنگ برند برای انتخاب وجود دارد. آنها همچنین می توانند سفارشی شوند و متناسب با ظاهر و احساس برنامه شما باشند.
از ابزارها و راهنمایی های موضوع Material برای تولید رنگ هایی استفاده کنید که دارای سطوح کنتراست رنگی کافی هستند، از رنگ اصلی خود به عنوان رنگ مبدأ استفاده کنید. پالت خود را در Figma به درستی طرح زمینه کاشی خود را. همه رنگ های دیگر برای ایجاد یکپارچگی در کاشی ها قابل تنظیم نیستند.
سایر ابزارهای ساخت تم مواد:
کاربرد رنگ
همیشه رنگ پس زمینه را روی سیاه قرار دهید.
پس‌زمینه را به‌عنوان یک تصویر کامل یا رنگ بلوک تنظیم نکنید.
تایپوگرافی
Roboto فونت اصلی مورد استفاده در Wear OS است. Body 2 به‌عنوان پیش‌فرض و کوچک‌ترین اندازه فونت توصیه می‌شود، در حالی که Display 2 بزرگ‌ترین سبکی است که برای کاشی‌ها در دسترس است.
برچسب اولیه
متن برچسب اصلی همیشه 16.64٪ از لبه بالایی است و دارای یک لایه داخلی 6.3٪ است. رنگ و فونت نیز در کل ثابت می ماند.
بالشتک داخلی
حاشیه های برتر: 16.64%
حاشیه جانبی: 6.3٪
رنگ
نوع در پس‌زمینه (خاکستری 300)
تایپ کنید
Tiles3P (Roboto) / دکمه - 15S پررنگ
برای اطلاعات بیشتر در مورد فونت، وزن و اندازه، به تایپوگرافی مراجعه کنید.
اجزاء
چندین مؤلفه برای ساخت کاشی های برنامه شما وجود دارد. این اجزا با متریال دیزاین همسو هستند.
گزینه ها: دکمه یا دکمه تعویض
اندازه: استاندارد، XS، S، L
انواع: پر شده، تونال پر، و تصویر
حداکثر 7 گزینه را فهرست کنید.
دکمه متن
گزینه ها: دکمه یا دکمه تعویض
اندازه: استاندارد، XS، S، L
انواع: پر شده و تونال پر شده
حداکثر 7 گزینه را فهرست کنید.
تراشه استاندارد
گزینه ها: نماد، برچسب ثانویه، و تراز متن
حداکثر 2 گزینه را فهرست کنید.
تراشه عنوان (فقط پرکننده اولیه)
متن تراز شده در مرکز
یک CTA واحد و برجسته ایجاد کنید.
تراشه فشرده
انواع: پر شده و تونال پر شده
گزینه ها: نماد یا بدون نماد
در شکاف دکمه پایین استفاده کنید.
نشانگر پیشرفت
انواع: عرض سکته مغزی قابل تنظیم
(اندازه های پیش فرض: 8 dp و 5 dp)
گزینه ها: شکاف در پایین یا کامل
پیشرفت و تکمیل کار را نشان دهید.
کیت طراحی فیگما
کیت طراحی Tiles on Wear OS را دانلود کنید تا با پیروی از دستورالعمل‌های قالب‌های ProtoLayout، از طرح‌بندی‌های طراحی کاشی با اجزا، گزینه‌ها و توصیه‌های داخلی استفاده کنید تا طرح‌بندی‌های مختلفی را مطابق با نیازهایتان ایجاد کنید.
محتوا و نمونه کدها در این صفحه مشمول پروانههای توصیفشده در پروانه محتوا هستند. جاوا و OpenJDK علامتهای تجاری یا علامتهای تجاری ثبتشده Oracle و/یا وابستههای آن هستند.
تاریخ آخرین بهروزرسانی 2025-07-29 بهوقت ساعت هماهنگ جهانی.
[[["درک آسان","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-29 بهوقت ساعت هماهنگ جهانی."],[],[],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."]]
