צורות

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

הנחיות בקצרה (TL;DR):

  • שימוש בפינות מעוגלות יותר (רדיוס פינה גבוהה יותר) לפעולות ולרכיבים ראשיים
  • לרכיבים עם הדגשה נמוכה מומלץ להשתמש בפינות מרובעות ופחות מעוגלות (רדיוס פינה תחתונה)

ערכי רדיוס פינה

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

ערכי רדיוס פינה
R0 R1 R2 R3 R4
0dp 4dp 8dp 16dp הסוללה מלאה

שימוש בעיגול לצורך הדגשה

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

דוגמאות לכל ארבע הדרגות של רדיוס פינה
דוגמאות לארבע רמות של רדיוס פינה, מהנמוך ביותר (0dp = ריבוע) לגבוהה (מעגלי)

0dp — Baseline

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

דוגמה לפינה מרובעת
אין צורך לשים דגש נוסף על שערי האלבומים ברשת שמשמאל או ביחס לרכיבים האחרים המוצגים, ולכן יש בהן פינות של 0dp (פירוט מוצג בצד ימין)

8dp – דגש נמוך

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

דוגמה להדגשה נמוכה ב-8dp
בכרטיס ההתראות שמוצג כאן נעשה שימוש ברדיוס הפינה של 8dp שמוגדר כברירת מחדל (מוצג בצד שמאל), והוא פחות מודגש מלחצני הפעולה בכרטיס (כפי שמוצג בצד שמאל), והם חשובים יותר

16dp – הדגשה בינונית

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

דוגמה לפינה בינונית 16dp
כאן נעשה שימוש ברדיוס פינתי של 16dp כדי להדגיש בינוני על גיליון תחתון, שחשוב יותר באופן זמני מהתוכן הנוכחי שמוצג במסך

מעגלי - דגש גבוה

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

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