רשתות

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

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

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

אֲנָטוֹמִיָה

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

1. פריט רשת
2. טקסט ראשוני ומשני
3. רקע רשת

מפרט טכני

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

רשת תוכן (3 או 4 עמודות)

רשת אפליקציות (4 עמודות)

רשת אפליקציות עם פריטים נפוצים בשורה העליונה

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

שינוי קנה מידה של פריסות

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

מסכים ברוחב סטנדרטי

מסכים רחבים

עבור מסכים רחבים, מומלץ פריסה של 3 עמודות. אם משתמשים בפריסה של 4 עמודות, יש לשמור על גודל אריח מינימלי של 219dp.

מסכים רחבים במיוחד וסופר רחבים

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

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

סגנונות

טיפוגרפיה

סגנון הסוג גופן מִשׁקָל גודל (dp)
גוף 1 רובוטו קָבוּעַ 32
גוף 2 רובוטו קָבוּעַ 28
גוף 3 רובוטו קָבוּעַ 24

צֶבַע

אֵלֵמֶנט צבע (מצב יום) צבע (מצב לילה)
סוג ראשי / סמלים לָבָן לבן @ 88%
סוג משני / סמלים לבן @ 72% לבן @ 60%
קו הפרדה לבן @ 22% לבן @ 12%
רקע רשת שָׁחוֹר שָׁחוֹר
סקר תוכן לא רלוונטי שחור @ 22%
קיצור הגרדיאנט שחור @ 0-100% ב-10% משטח הטקסט שחור @ 0-100% ב-10% משטח הטקסט

גודל

אֵלֵמֶנט גודל (dp)
סמל האפליקציה 76
תא מינימלי באפליקציה 135
תא תוכן מינימלי 158

גוֹבַה

אֵלֵמֶנט צֶבַע ציר Y לְטַשׁטֵשׁ
אריח רשת שחור @ 22% 2 2

דוגמאות

רשת אפליקציות - יום
רשת אפליקציות - לילה
רשת תוכן - יום
רשת תוכן - לילה
המשתמש גורר למעלה או למטה כדי לגלול תוכן