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

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

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

ציר FILL

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

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

ציר wght

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

ציר GRAD

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

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

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

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

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

ציר opsz

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

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

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

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

רישוי

סמלי החומר זמינים בגרסה 2.0 של רישיון Apache.

עיון והורדה של סמלים נפרדים

הסט המלא של סמלי החומר זמין בספריית סמלי החומר בפורמט SVG או PNG. אפשר להשתמש בהם באתרים, ב-Android וב-iOS או עם כל כלי עיצוב.

מאגר Git

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

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

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

שימוש באתר

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

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

גופן סטטי עם Google Fonts

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

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

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

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

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

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

אפשר גם להוסיף אנימציות.

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

מארחים את גופן הסמל במיקום בשליטה שלכם כדי להחליט מתי לעדכן את הנכס. לדוגמה, אם כתובת ה-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');
}

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

כדי לעבד את הגופן כראוי, צריך להצהיר על כללי ה-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

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

התכונה הזו נתמכת ברוב הדפדפנים המודרניים, במחשבים שולחניים וגם במכשירים ניידים. מומלץ לעיין בקטע Can I use of ligatures support כדי לבדוק אם המשתמשים שלכם יכולים לעבד את הליגטורות, וסביר להניח שהם יוכלו.

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

כדי למצוא את שמות הסמלים וגם את נקודות הקוד, בספריית Material Symbols בוחרים בסמל ופותחים את חלונית הגופן של הסמלים. לכל גופן של סמל יש אינדקס של נקודות קוד במאגר git של Google Fonts, שבו מוצגת הקבוצה המלאה של השמות וקודי התווים.

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

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

שימוש ב-Android

בספריית הסמלים הנוספים, כל הסמלים מופיעים בפורמט וקטורי. למידע נוסף, עיינו במסמכי התיעוד של Android Vector Asset Studio.

שימוש ב-iOS

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

שימוש ב-Flutter

מתוכננת תמיכה שוטפת לסמלים מהותיים. עדכונים נוספים יגיעו בהמשך.