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