מערכת לעיצוב אריחים
קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
להבין את הרכיבים הבסיסיים של האריח. משתמשים בתבניות, בפריסות וברכיבים של משבצות כדי לעצב ולבנות משבצות ייחודיות לאפליקציות.
אלמנטים בסיסיים
מרווח פנימי באחוזים
כדי ליצור התאמה לעומס (scaling), השוליים העליונים, התחתונים והצדדיים משתמשים באחוזים, במקום בערכים של שולי רווח קבועים.
עיצוב אזורים
לכל סוג של תבנית משבצת יש כללים משלה באזור התוכן הראשי. למידע נוסף, אפשר לעיין בהנחיות הפריסה.
צ'יפ קומפקטי למטה
חשוב להפעיל פעולות משניות בכרטיס המידע. מיקום עקבי של 6.3% מעל החלק התחתון.
צ'יפ קומפקטי למטה
בתוך הלחצן, יש להשתמש במילה קצרה אבל ספציפית לפעולה או ליעד מסוימים. התרגום של טקסט הקריאה לפעולה הזה חייב לעמוד במגבלות מספר התווים. כברירת מחדל או כברירת מחדל, אפשר להשתמש באפשרויות 'עוד' כטקסט הקריאה לפעולה.
מיקום
- שוליים: 2.1% מהחלק התחתון
- מרווח פנימי פנימי: 8dp מעל ומתחת
מפרט הלחצנים
- מרווח פנימי פנימי: 12dp בשני הצדדים
מרווח פנימי או שוליים פנימיים
מגבלת תווים מומלצת < 225dp
- מספר השורות המקסימלי: 1
- מגבלת תווים מקסימלית: 8
- מגבלת תווים מומלצת: 6
- חיתוך: לא
מגבלות מומלצות ב-Character > 225dp
- מספר השורות המקסימלי: 1
- מגבלת תווים מקסימלית: 9
- מגבלת תווים מומלצת: 7
- חיתוך: לא
צבע
החלת העיצוב של המותג
יש כמה צבעים של מותגים לבחירה. אפשר גם להתאים אישית את התבניות ולשנות אותן כך שיתאימו למראה ולחוויה שהאפליקציה מציעה.
משתמשים בכלים ובהנחיות של עיצוב חומר כדי ליצור צבעים עם רמות ניגודיות מתאימות של צבעים, תוך שימוש בצבע הראשי כצבע המקור. השתמשו בלוח הצבעים כדי להחליף את הצבע הראשי, הווריאנט הראשי, הצבע העיקרי, פני השטח וצבע המשטח בלוח ב-Figma כדי לעצב את המשבצת שלכם בצורה נכונה. אי אפשר להתאים אישית את כל שאר הצבעים כדי לשמור על עקביות בין המשבצות.
כלי בנייה אחרים של עיצובי Material:
יישום צבעים
יש להגדיר תמיד את צבע הרקע לשחור.
check_circle
מה מותר לעשות
אין להגדיר את הרקע כתמונה בגלישה מלאה או כצבע של בלוק.
טיפוגרפיה
Roboto הוא הגופן הראשי שבו משתמשים ב-Wear OS. גוף 2 מומלץ כברירת המחדל וגודל הגופן הקטן ביותר מומלץ, ותצוגה 2 היא סגנון הגופן הגדול ביותר שזמין למשבצות.
תווית ראשית
טקסט התווית הראשית הוא תמיד 16.64% מהקצה העליון, עם מרווח פנימי פנימי של 6.3%. בנוסף, הצבע והגופן נשארים עקביים בכל הטקסט.
מרווח פנימי פנימי
שוליים עליונים: 16.64%
שוליים צדדיים: 6.3%
צבע
וריאנט ברקע (אפור 300)
סוג השידור
Sounds3P (Roboto) / לחצן - 15S מודגש
מידע נוסף על גופן, משקל ושינוי הגודל זמין במאמר טיפוגרפיה.
רכיבים
יש כמה רכיבים זמינים לבניית כרטיסי המידע באפליקציה. הרכיבים האלה תואמים לעיצוב Material Design.
אפשרויות: לחצן או לחצן החלפת מצב
גדלים: Standard, XS, S, L
סוגים: מילוי, מילוי טונלי ותמונה
מציינים עד 7 אפשרויות.
לחצן הטקסט
אפשרויות: לחצן או לחצן החלפת מצב
גדלים: Standard, XS, S, L
סוגים: מילוי ומילוי טונלי
מציינים עד 7 אפשרויות.
צ'יפ רגיל
אפשרויות: סמל, תווית משנית ויישור טקסט
מציינים עד 2 אפשרויות.
צ'יפ כותרת (מילוי ראשי בלבד)
טקסט מיושר למרכז
יוצרים קריאה לפעולה אחת ובולטת.
צ'יפ קומפקטי
סוגים: מילוי וטונליים
אפשרויות: סמל או 'לא'
לשימוש בחריץ הלחצן התחתון.
מחוון התקדמות
סוגים: רוחב קווים ניתן להתאמה אישית
(גדלי ברירת מחדל: 8 dp ו-5 dp)
אפשרויות: חסר בחלק התחתון או מלא
לציין את ההתקדמות והמשימה הושלמה.
ערכת עיצוב Figma
מורידים את ערכת העיצוב של כרטיסי המידע ל-Wear OS כדי להתחיל להשתמש בפריסות עיצוב המשבצות עם רכיבים, אפשרויות והמלצות מובנים ליצירת פריסות שונות שיתאימו לצרכים שלכם, תוך ביצוע ההנחיות שמופיעות בתבניות ProtoLayout.
דוגמאות התוכן והקוד שבדף הזה כפופות לרישיונות המפורטים בקטע רישיון לתוכן. Java ו-OpenJDK הם סימנים מסחריים או סימנים מסחריים רשומים של חברת Oracle ו/או של השותפים העצמאיים שלה.
עדכון אחרון: 2025-07-27 (שעון UTC).
[[["התוכן קל להבנה","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 (שעון UTC)."],[],[],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."]]
