דף זה תורגם על ידי Cloud Translation API.

מדריך לשימוש בסמלי החומר

מהם סמלי חומרים?

סמלי Material הם הסמלים החדשים ביותר שלנו, עם יותר מ-2,500 גליפים בקובץ גופן אחד עם מגוון רחב של וריאנטים של עיצוב. הסמלים זמינים בשלושה סגנונות ובארבעה צירים של גופן משתנה שניתן לשנות (מילוי, עובי, דרגה וגודל אופטי). ראה את הקבוצה המלאה של סמלי חומרים בסמלים של Materials ספרייה.

ציר `FILL`

בעזרת מילוי אפשר לשנות את סגנון ברירת המחדל של הסמל. סמל יחיד יכול להציג גם מצב לא מלא וגם מצב מלא.

כדי להעביר מעבר בין מצבים, משתמשים בציר המילוי לצורך אנימציה או אינטראקציה. הערכים הם 0 לברירת המחדל או 1 למילוי מלא. יחד עם ציר המשקל, גם המילוי משפיע על המראה של הסמל.

ציר `wght`

משקל מגדיר את עובי הקו של הסמל, עם טווח משקלים בין דק (100) למודגש (700). המשקל יכול להשפיע גם על הגודל הכולל של הסמל.

ציר `GRAD`

תצוגה חזותית של ציר הציונים

המשקל והדירוג משפיעים על עובי הסמל. שינויים בציון הם מפורטים יותר משינויים במשקל, והם משפיעים במידה קטנה על גודל הסמל.

אפשר להשתמש ב'ציון' גם בגופנים מסוימים של טקסט. אפשר להתאים את רמות הכיתות של הטקסט והסמלים כדי ליצור אפקט חזותי הרמוני. לדוגמה, אם לעיצוב הטקסט יש ערך ציון של -25, הסמלים יכולים להתאים לו ערך מתאים, למשל -25.

אפשר להשתמש בציון לצרכים שונים:

הדגשה נמוכה (למשל: -25 בדרגה): כדי להפחית את הברק של סמל בהיר על סמל כהה השתמש בציון נמוך.

הדגשה גבוהה (למשל, 200 בדרגה): כדי להדגיש סמל, מגדילים את הערך החיובי. בלי ציון.

ציר `opsz`

הגדלים האופטיים נעים בין 20dp ל-48dp.

כדי שהתמונה תיראה זהה בגדלים שונים, עובי הקו (עובי) משתנה כשגודל הסמל משתנה. גודל אופטי מאפשר לך אפשר לשנות את עובי הקו כשמגדילים או מקטינים את הסמל.

קבלת סמלים של חומרים

סמלי Material זמינים בכמה פורמטים והם מתאימים לסוגים שונים של פרויקטים ופלטפורמות, גם למפתחים באפליקציות שלהם וגם למעצבים במודלים או באב טיפוס שלהם.

רישוי

סמלי החומר זמינים במסגרת גרסת הרישיון של Apache 2.0 הקצר הזה. התשובות שלך יעזרו לנו להשתפר.

איך בודקים ומורידים סמלים ספציפיים

הקבוצה המלאה של סמלי Material זמינה מ-Material Symbols ספרייה בפורמט SVG או PNG. הן מתאימות לאינטרנט, ל-Android ול-iOS, או בכל סוגי האפליקציות וכלי עיצוב.

מאגר Git

Git מאגר מכיל את הקבוצה המלאה של סמלי Material Symbols בפורמט SVG.

$ git clone https://github.com/google/material-design-icons

שימוש בסמלי חומרים

שימוש באינטרנט

הגופן Material Symols הוא הדרך הקלה ביותר לשלב סמלי חומרים לתוך פרויקטים באינטרנט.

הסמלים נארזים בגופן אחד כדי שמפתחי אתרים יוכלו לשלב בקלות את הסמלים האלה באמצעות כמה שורות קוד בלבד.

גופן סטטי עם גופנים של Google

הדרך הקלה ביותר להגדיר גופן סמלים לשימוש בכל דף אינטרנט היא באמצעות Google גופנים. כלול את זה שורה אחת של HTML:

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />

קטע הקוד שלמעלה כולל את הגדרות ברירת המחדל של כל אחד מהקטעים ציר , עם משקל ב-400, אופטי size ל-48, ציון ב-0 מילוי (גם 0.)

שימוש ב-CSS של גופנים API אל להגדיר ערכים שונים של צירים. דוגמאות:

גופן משתנה עם Google Fonts

אם יוצרים אנימציה של סמלים באמצעות CSS, או אם רוצים שליטה מדויקת יותר בתכונות הסמל, אפשר להשתמש הגופן של המשתנה Google Symbols. באמצעות טווחים, בפורמט number..number, אנחנו יכולים לטעון את כל גופן של המשתנה. כדאי לעיין במאמר האם אוכל להשתמש בגופנים של המשתנים של האם אוכל להשתמש בגופנים? תמיכה כדי להבין אם המשתמשים יוכלו לטעון את הגופן המשתנה, מה הסבירות. הנה כמה דוגמאות:

או אפילו להוסיף להם אנימציה!

אופטימיזציה של גופן הסמלים

משנה את הגופן כך שיכלול רק את הסמלים הרלוונטיים לאפליקציה באמצעות פרמטר השאילתה &icon_names, תוך מיון בסדר אלפביתי רשימה של שמות סמלים מופרדים בפסיקים (ליגטורות).

לא מומלץ – כשמשתמשים בהגדרות ברירת המחדל, נטענים כל 3,800 הסמלים. עומס שימושי של גופן: 295KB
```
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined
```
מומלץ – ציון שמות הסמלים כדי לטעון רק את הסמלים הנחוצים. מטען ייעודי (payload) של גופנים: 1.7 KB
```
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&icon_names=home,palette,settings&display=block
```
יוצרים מופע של צירי הגופן המשתנה כך שיכללו רק את אלה שבהם האפליקציה תשתמש. ברוב האפליקציות נדרשות רק כמה וריאציות של הצירים.

לא מומלץ – אם לא תגדירו את הגדרות הצירים, יוטען הגופן הסטטי שמוגדר כברירת מחדל (עובי 400, גודל אופטי 24, עיגול 50, דרגה 0, מילוי 0). בדרך כלל אין צורך לכלול את כל צירי הגופנים המשתנים, וכך מגדילה את מטען ייעודי (payload). מטען ייעודי (payload) של גופנים: 7.9MB
```
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD,ROND@20..48,100..700,0..1,-50..200,0..100
```
מומלץ — נעשה שימוש בשילוב ספציפי של צירים. לדוגמה, השדה 'FILL' ציר מספק מעברי CSS בין מדינות ו-ROND המספר 100 נבחר לעיצוב. עומס שימושי של גופן: 2.6KB
```
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL,ROND@0..1,100&icon_names=home,palette,settings&display=block
```

אירוח עצמאי של הגופן

מארחים את הסמל גופן במיקום שאתם קובעים, כדי להחליט מתי לעדכן את הנכס. עבור לדוגמה, אם כתובת ה-URL היא https://example.com/material-symbols.woff, צריך להוסיף את כלל ה-CSS הבא:

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  src: url(https://example.com/material-symbols.woff) format('woff');
}

כדי להציג את הגופן בצורה תקינה, צריך להצהיר על כללי ה-CSS להצגת הסמל. בדרך כלל הכללים האלה מוצגים כחלק מגיליון הסגנונות של Google Fonts API, אבל צריך לכלול אותם באופן ידני בפרויקטים כשמארחים אותם בעצמכם:

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

שימוש בסמלים ב-HTML

בדוגמאות שלמעלה נעשה שימוש בתכונה טיפוגרפית שנקראת ליגטורה, שמאפשרת להציג גליף של סמל באמצעות השם הטקסטואלי שלו. דפדפן האינטרנט מחליף באופן אוטומטי את האותיות המקושרות בטקסט בוקטור של הסמל, ומספק קוד קריא יותר מאשר הפניה לתו המספרי המקביל. לדוגמה, בקוד ה-HTML צריך להשתמש ב-arrow_forward כדי לייצג סמל, במקום ב-. כדי להשתמש בסמלים אחרים, משתמשים בנרתיק הנחש של שם הסמל (כלומר, החלפת רווחים בקו תחתון).

התכונה הזו נתמכת ברוב הדפדפנים המתקדמים גם במחשבים וגם במכשירים ניידים מכשירים. ראו האם אני יכול להשתמש בליגטורות של תמיכה כדי לבדוק אם המשתמשים יוכלו לעבד ליגטורות, סביר להניח שהם כן.

אם אתם צריכים לתמוך בדפדפנים שלא תומכים בליגטורות, סמלים שמשתמשים בהפניות מספריות לתווים (שנקראים גם נקודות קוד), כמו בדוגמה למטה:

אפשר למצוא את שמות הסמלים ואת נקודות הקוד בסמלים של Materials (סמלי חומרים) ספרייה על ידי בחירה בסמל כלשהו ופתיחת חלונית הגופן של הסמלים. לכל גופן של סמל יש אינדקס נקודות הקוד ב-git של Google Fonts מאגר שמציג את הקבוצה המלאה של השמות וקודי התווים.

עיצוב סמלים בעיצוב חדשני תלת-ממדי

סמלים אלה עוצבו בהתאם לעיצוב חומר לימוד הנחיות, והן נראות הכי טוב כשמשתמשים בגדלים ובצבעים המומלצים. הסגנונות שבהמשך יעזרו לכם להחיל בקלות את הגדלים, הצבעים ומצבי הפעילות המומלצים שלנו.

שימוש ב-Android

בספריית הסמלים של Material, כל הסמלים נמצאים בפורמט Vector Drawable. למידע נוסף, אפשר לעיין במסמכי העזרה של Android Vector Asset Studio.

שימוש ב-iOS

הסמלים זמינים גם בפורמט Apple Symbols. מידע נוסף זמין בסקירה הכללית ובהנחיות לשימוש של הסמלים הרשמיים של Apple.

שימוש ב-Flutter

מתוכננת תמיכה ב-Flutter בסמלי חומרים. עדכונים נוספים יגיעו בקרוב.