מדריך לסמלי תוכן

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

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

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

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

ספריית הסמלים

הסמלים מתקבלים

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

רישוי

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

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

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

מתבצעת הורדה של הכול

קח את ארכיון ה-zip היציב האחרון (כ-310MB) של כל הסמלים או את הגרסה המתוקנת והעדכנית ביותר מהמאסטר.

מאגר Git

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

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

גופן הסמל לאינטרנט

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

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

  • יותר מ-900 סמלים מקובץ קטן אחד.
  • מוצג משרתי Google Web Font או באירוח עצמי.
  • נתמך על ידי כל דפדפני האינטרנט המודרניים.
  • צבעוני, בגודל ובמיקום מלא עם CSS.
  • מבוסס על וקטור: נראה נהדר בכל קנה מידה, צגי Retina ומסכי DPI נמוך.

המשקל של גופן הסמל הוא 42KB בלבד בפורמט woff2 הקטן ביותר שלו ו-56KB בפורמט woff רגיל. לשם השוואה, קובצי SVG שנדחסו באמצעות gzip בדרך כלל יהיו בגודל של כ-62KB, אבל ניתן לצמצם משמעותית את הגודל באמצעות הידור של הסמלים הנדרשים בלבד בקובץ SVG יחיד עם סמלי sprite.

שיטת הגדרה 1. שימוש דרך Google Fonts

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

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

בדומה לגופנים אחרים של Google Web, יוצג ה-CSS הנכון כדי להפעיל את הגופן Material Icons. מחלקת CSS נוספת תוצהר בשם .material-icons. לכל רכיב שמשתמש במחלקה הזו יהיה ה-CSS הנכון כדי לעבד את הסמלים האלה מהגופן באינטרנט.

שיטת הגדרה 2. אירוח עצמי

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

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

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

.material-icons {
  font-family: 'Material Icons';
  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;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

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

קל לשלב סמלים בדף האינטרנט שלך. דוגמה קטנה:

פנים

<span class="material-icons">face</span>

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

התכונה הזו נתמכת ברוב הדפדפנים המודרניים, במחשבים שולחניים וגם במכשירים ניידים.

דפדפן גרסה שתומכת בליגטורות
Google Chrome 11
Mozilla Firefox 3.5
Apple Safari 5
Microsoft IE 10
Microsoft Edge 18
אופרה 15
Apple MobileSafari iOS גרסה 4.2
דפדפן Android 3.0

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

רגיל
<span class="material-icons">&#xE87C;</span>

כדי למצוא את שמות הסמלים וגם את נקודות הקוד, בספריית סמלי החומר, בוחרים סמל כלשהו ופותחים את חלונית הגופן של הסמלים. לכל גופן של סמל יש אינדקס של נקודות קוד במאגר ה-Git שלנו, שבו מוצגת הרשימה המלאה של השמות וקודי התווים (כאן).

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

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

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

התאמת גודל

על אף שניתן לשנות את הסמלים שבגופן לכל גודל, בהתאם להנחיות לסמלים לעיצוב חומרים, אנחנו ממליצים להציג אותם בגודל 18, 24, 36 או 48 פיקסלים. ברירת המחדל היא 24 פיקסלים.

כללי CSS להנחיות המידות הסטנדרטיות של עיצוב חומר:

.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

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

18px
<span class="material-icons md-18">face</span>
24px
<span class="material-icons md-24">face</span>
36 פיקסלים
<span class="material-icons md-36">face</span>
48 פיקסלים
<span class="material-icons md-48">face</span>

צביעה

שימוש בגופן הסמל מאפשר עיצוב קל של סמל בכל צבע. בהתאם להנחיות של סמלים לעיצוב חדשני תלת-ממדי, לסמלים פעילים מומלץ להשתמש בשחור באטימות של 54% או בלבן בשקיפות של 100% על רקעים בהירים או כהים, בהתאמה. אם סמל מושבת או לא פעיל, משתמשים בשחור עם 26% או בלבן ב-30% עבור רקעים בהירים וכהים, בהתאמה.

הנה מספר דוגמאות, באמצעות סגנונות CSS מהחומרים שמתוארים למעלה:

.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

דוגמה לשרטוט סמל על רקע בהיר עם צבע בחזית כהה:

רגיל
<span class="material-icons md-dark">face</span>
מושבתת
<span class="material-icons md-dark md-inactive">face</span>

דוגמה לשרטוט סמל על רקע כהה עם צבע בחזית בהיר:

רגיל
<span class="material-icons md-light">face</span>
מושבתת
<span class="material-icons md-light md-inactive">face</span>

כדי להגדיר צבע סמל מותאם אישית, צריך להגדיר כלל CSS שמציין את הצבע הרצוי של הגופן:

.material-icons.orange600 { color: #FB8C00; }

ולאחר מכן משתמשים במחלקה תוך כדי לחיצה על הסמל:

רגיל
<span class="material-icons orange600">face</span>

תמונות סמלים לאינטרנט

סמלים מהותיים זמינים גם כתמונות רגילות, בפורמט PNG או SVG.

SVG

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

material-design-icons/src/

לדוגמה, סמלים של מפות מופיעים ב-src/maps:

material-design-icons/src/maps/

אם מספר סמלים נמצאים בשימוש באתר אינטרנט, מומלץ ליצור spritesheets מתוך התמונות. מידע נוסף זמין בתיעוד בספריית sprites של מאגר git.

PNG

PNG הוא הדרך המסורתית ביותר להציג סמלים באינטרנט. ההורדות שלנו מספריית סמלי החומר מספקות דחיסות יחידה וכפולה עבור כל סמל. הם מכונים 1x ו-2x בהתאמה בהורדה. הסמלים זמינים במאגר git גם בקטע:

material-design-icons/png/

אם מספר סמלים נמצאים בשימוש באתר אינטרנט, מומלץ ליצור spritesheets מתוך התמונות. מידע נוסף זמין בהמלצות בספריית sprites במאגר git.

סמלים ל-Android

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

הסמלים זמינים גם במאגר ה-Git של סמלי העיצוב החדש, באותו שילוב של צבעים וגדלים שנקראים כאן:

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

כשמשתמשים בקובץ וקטורי לשרטוט, ייתכן שלא יהיה צורך לכלול את קובץ ה-PNG לצפיפות xxxhdpi, כי לא סביר שמכשיר שתומך בדחיסות המסך הזו לא תומך בפריטים וקטוריים.

סמלים ל-iOS

סמלי החומר פועלים היטב גם באפליקציות ל-iOS. בספריית סמלי החומר ובמאגר git, הסמלים האלה ארוזים במערכי תמונות של Xcode, שיפעלו בקלות עם קטלוגי נכסים של Xcode (מודעות xcassets). ניתן להוסיף את מערכי התמונות האלה לכל קטלוג של נכסי Xcode על ידי גרירתם לתוך Xcode אל קטלוג הנכסים, או על ידי העתקת התיקייה לתיקיית ה-xcasset.

ערכת תמונות iOS

ערכת התמונות מכילה תמונות בצפיפות יחידה, כפולה ומשולשת (1x, 2x, 3x) כך שהן יפעלו עם כל ערכי הדחיסות הידועים של מסך iOS. קיימים גם סמלים שחורים וגם לבנים, אבל מומלץ להשתמש ב-imageWithRenderingMode עם UIImageRenderingModeAlwaysTemplate כדי להשתמש בתמונה כמסכת אלפא שניתן לשנות את גווןה לכל צבע אפשרי.

דוגמה ליעד ג':

UIButton *button = [[UIButton alloc] init];
UIImage *closeImage =
    [[UIImage imageNamed:@"ic_close"]
       imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
button.tintColor = [UIColor colorWithWhite:0 alpha:0.54f];
[button setImage:closeImage forState:UIControlStateNormal];

דוגמה ל-Swift:

let button = UIButton()
let closeImage = UIImage(named:"ic_close")?.imageWithRenderingMode(
    UIImageRenderingMode.AlwaysTemplate)
button.tintColor = UIColor(white:0, alpha:0.54)
button.setImage(closeImage, forState:UIControlState.Normal)

סמלים מימין לשמאל

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

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

סמלים מימין לשמאל ב-Android

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

כדי לספק נכסים מיוחדים לשפות מימין לשמאל, אפשר להשתמש במגדיר ldrtl בספריות משאבים, כמו res/drawable-ldrtl/. משאבים שנמצאים בספריות כאלה ישמשו רק לשפות הנכתבות מימין לשמאל. במכשירים עם Android API 19 ואילך, ה-framework מספק גם את המאפיין 'שיקוף מסך אוטומטי' עבור 'פריטי שרטוט'. כשהמאפיין הזה מוגדר כ-True, פריט השרטוט מסונכרן באופן אוטומטי בשפות הנכתבות מימין לשמאל.

שימוש בשיקוף מסך אוטומטי:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0"
        android:tint="?attr/colorControlNormal"
        android:autoMirrored="true">
  <path
        android:fillColor="@android:color/white"
        android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,
                          8 1.41,-1.41L7.83,13H20v-2z"/>
</vector>

אם אין אפשרות להשתמש בשיקוף אוטומטי או לספק משאבים חלופיים לשרטוט, אפשר להשתמש במאפיין ImageViewScaleX כדי לשקף ציוד שרטוט (למשל, על ידי הוספת פריסה ספציפית ל-RTL בספרייה res/layout-ldrtl).

שיקוף מסך בקובץ הפריסה:

<ImageView
    android:id="@+id/my_icon"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:scaleX="-1" />

לסיום, ניתן לשקף באופן פרוגרמטי פריטים גרפיים.

בדיקה ידנית של כיוון הפריסה באמצעות getLayoutDirection:

if (ViewCompat.getLayoutDirection(view) == ViewCompat.LAYOUT_DIRECTION_RTL) {
  // custom code
}

שיקוף תוכן של ImageView באופן פרוגרמטי:

imageView.setScaleX(-1);

סמלים מימין לשמאל ב-iOS

ב-iOS מוגדר ה-UISemanticContentAttribute שמצורף לכל תצוגה מפורטת. זה יכול להיות unspecified, forceLeftToRight, forceRightToLeft, playback או spatial. iOS משתמש בערך הזה ובהגדרה (משמאל לימין (LTR)/RTL של המכשיר שמציג את הממשק כדי לקבוע את validLayoutDirection של התצוגה. יעילLayoutDirection זה קובע אם לסנכרן תמונה כאשר היא מוצגת.

כברירת מחדל, התוכן הסמנטי של התמונות מוגדר ל-unspecified. פעולה זו גורמת לשיקוף שלהם במצב RTL. אם אתם לא רוצים שסמל מסוים יופיע אף פעם, צריך להגדיר אותו באופן מפורש כ-forceLeftToRight. Apple ציינה מספר חריגות שלא צריך לשקף, כמו הפעלת מדיה (הרצה קדימה, הרצה אחורה וכו'), תווים מוזיקליים, תמונות שמצביעות על מעבר הזמן וכו'.

דוגמה ליעד ג':

// Prevent an icon from being mirrored in RTL mode
UIImage *icon = [UIImage imageNamed:@"my_icon.png"];
UIImageView *iconView = [[UIImageView alloc] initWithImage:icon];
iconView.semanticContentAttribute =
  UISemanticContentAttributeForceLeftToRight;

דוגמה ל-Swift:

// Prevent an icon from being mirrored in RTL mode
let iconImage = UIImage.init(named: "my_icon.png")
let iconView = UIImageView.init(image: iconImage)
iconView.semanticContentAttribute = .forceLeftToRight;

למסמכי תיעוד מעמיקים יותר לגבי הטמעת RTL ב-iOS וב-macOS, כדאי לעיין במסמכי התיעוד של Apple בנושא RTL.

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

סמלים מימין לשמאל באינטרנט

אנחנו ממליצים להיעזר במאמר הבא כדי לקרוא הנחיות RTL באינטרנט: https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-part-1 https://hacks.mozilla.org/2015/10/building-rtl-aware-web-apps-websites-part-2.

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

הדוגמה הבאה מראה איך להטמיע כלל CSS פשוט מימין לשמאל. אפשר גם להציג אותו ב-codepen.

page.html

<html dir="rtl">
  <img class="material-icons" src="my_icon.png" alt="my icon"/>
</html>

page.css

html[dir="rtl"] .icon {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

צרו סמלי RTL משלכם באמצעות ImageMagick

אם אי אפשר לשקף את הסמלים בקוד, אפשר להשתמש ב-ImageMagick כדי לשקף את התמונה בצורה אופקית.

convert -flop my_icon.png my_icon_rtl.png

אילו סמלים יש לשקף מימין לשמאל?

הנה רשימה של סמלים שניתן לסנכרן באופן פרוגרמטי ל-RTL:
חץ אחד () אחורה חץ אחורה ב-iOS חץ קדימה
חץ קדימה ב-iOS חץ שמאלה חץ ימינה
הקצאת החזרת מטלה מסוג מקש Backspace
רמת הטעינה של הסוללה: לא ידועה בוצעה שיחה אחת () מיזוג שיחות אחד ()
שיחה אחת () לא נענתה שיחה יוצאת אחת () שלא נענתה התקבלה שיחה אחת ()
קבוצת שיחות אחת () סוגר זוויתי שמאלי () סוגר זוויתי ימני
מצב קורא של ב-Chrome מכשיר אחד () לא ידוע DVR
הערה אחת () מאירוע רשימת הפעלה מומלצת אחת () סרטון נבחר אחד ()
– הדף הראשון נחיתת טיסה של ההמראה של טיסה
הקטנה של כניסת פיסקה בפורמט הגדלת כניסה בפורמט רשימת תבליטים של
חלוץ אחד () פונקציות קלט:
כרטיסיית מקלדת אחת () תווית אחת () תווית אחת () חשובה
מתאר של תווית הדף האחרון הפעלה של
רשימה אחת () עזרה בזמן אמת לגבי שיתוף מסך של בנייד
תרשים מרובה קווים אחד () ניווט לפני מעבר לפריט הבא
בשבוע הבא הערה אחת () פתיחה בחדש
הוספת פלייליסט מוזיקה של בתור ביצוע מחדש אחד ()
תשובה אחת () תשובה לכולם שיתוף מסך אחד ()
שליחה של טקסט קצר אחד () תרשים תוכנית של
מיון חצי כוכב של נושא אחד ()
במגמה שטוחה תוכן במגמת ירידה
במגמת עלייה ביטול של רשימה אחת () של צפיות
תצוגה של שמיכת טלאים גלישת טקסט