1. מבוא
עדכון אחרון: 18 באפריל 2022
אפליקציות יכולות לקבל מגוון צבעים מתוך ערכות בסיסיות, צבעים דינמיים שנוצרו על ידי המשתמש או צבעי מותג.
במאמר הקודם בנושא מעבדת הצבעים של Material You הסברנו איך להציג צבעים דינמיים בתוך הדמיות של עיצובים, אבל אפשר גם להשתמש בהתאמת העיצוב של Google Material Design כדי להתאים אישית את האפליקציה עם צבעי המותג. שימוש במערכת הצבעים החדשה עם צבעי המותג שלכם ייצור ערכת צבעים נגישה שיכולה לכלול תכונות דינמיות יותר.
מה תלמדו
- איך יוצרים עיצוב מותאם אישית באמצעות הכלי ליצירת עיצובים של Material.
- החלת עיצוב מותאם אישית על מוקאפים של עיצובים.
- אפשרויות לשילוב צבעים דינמיים וצבעים בהתאמה אישית.
דרישות מוקדמות
בשיעור ה-Lab הזה נתבסס על כמה מושגי עיצוב בסיסיים.
- היכרות עם מושגי עיצוב בסיסיים: לוחות צבעים
- ידע בערכות הצבעים והתפקידים הנוכחיים ב-Android
- ידע ב-Figma
- אופציונלי: הדמיה של צבעים דינמיים ב-codelab של האפליקציה
הדרישות
- חשבון Figma
- קובץ Figma Designlab
- הפלאגין של Figma Material Theme Builder
2. שנתחיל?
הגדרה
כדי להתחיל, צריך לגשת לקובץ Designlab Figma. כל מה שצריך לשיעור ה-Lab נמצא בקובץ Figma. אפשר להוריד את הקובץ ולייבא אותו, או לשכפל אותו מקהילת Figma.
קודם צריך להיכנס ל-Figma או ליצור חשבון.
שכפול מקהילת Figma
עוברים לקובץ Customizing Material או מחפשים את האפשרות Visualizing dynamic color in your app with Material Design ב-Figma Community. בפינה השמאלית העליונה, לוחצים על שכפול כדי להעתיק את הקובץ לקבצים שלכם.
פריסת הקובץ
כשמעיינים בקובץ, אפשר לראות שהוא מכיל את כל המידע הדרוש, ומתחיל במבוא. כל קטע מחולק לשורה של לוחות ציור שמקושרים זה לזה, עם כמה מושגי ליבה לקטע, ואחריהם תרגילים. התרגילים והקטעים בנויים אחד על השני, ולכן מומלץ להשלים אותם לפי הסדר.
ב-Codelab הזה נסביר את המושגים האלה ונעבור על התרגילים בפירוט רב יותר. כדאי לקרוא את ה-codelab כדי לקבל מידע נוסף על התכונות החדשות של Material You.
החל מלוח הארטבורד Intro, יש כפתורים שמקשרים בין לוחות הארטבורד לפי הסדר. כדי לגשת לקישור, לוחצים על הלחצן.
התקנת הפלאגין של Figma
ב-Codelab הזה נעשה שימוש נרחב בתוסף חדש ל-Figma כדי ליצור ערכות צבעים וטוקנים דינמיים. אפשר להתקין את הפלאגין של Figma ישירות מדף הקהילה של Figma, או לחפש את Material Theme Builder בקהילת Figma.
3. ערכת הצבעים של Material
קודם כל, נסביר איך משתמשים בצבעים ב-Material ואיך פועלת מערכת הצבעים החדשה.
הצבע משמש לביטוי סגנון ולהעברת משמעות, בין אם המשמעות היא אישית למשתמש, קשורה למיתוג או סמנטית. מערכת הצבעים מטפלת בשינויים בערכות הצבעים שמתרחשים באופן דינמי כשהמשתמשים משנים את הקלט. הלוגיקה של יחסי גוונים ושינויים בגוון וברוויה מספקת בסיס ליישום גמיש של צבעים.
מרחב הצבעים מספק דרך ליצור ערכות צבעים נגישות בהירות וכהות שחולצו מצבע מקור על ידי יצירת 5 צבעים מרכזיים ולאחר מכן פלטות טונאליות, שבהן נבחרים שלבים טונאליים מסוימים.
טכניקת שינוי הצבעים הזו לא רק מספקת ערכת צבעים נגישה, אלא גם מספקת שיטות ליצירת ערכות צבעים ממותגות שהן נגישות ועקביות עם ערכות צבעים שנוצרו על ידי משתמשים.
ערכות הצבעים נוצרות מ-5 צבעים מרכזיים ללוחות צבעים טונאליים כדי ליצור ערכות נגישות
עיצוב ממותג
M3 תומך ביישומים שיטתיים של פרמטרים מותאמים אישית, כדי לעזור לכם להגדיר ולשמור על הסגנונות שמעבירים את המסר של המותג שלכם.
סכימה בהתאמה אישית היא סכימת צבעים שלא נגזרת מטפט המכשיר של המשתמש, אלא מיוצר האפליקציה. מערכת הצבעים M3 וערכות הצבעים המותאמות אישית הן הבסיס להפעלת צבעים דינמיים באפליקציות.
הסכימה המותאמת אישית תגשר על הפער בין M2 ל-M3 כדי להקל על המעבר, על ידי הגדרת האסימונים הדרושים (משבצות צבע) ויצירת חוויה ממותגת יותר.
הוספת צבעי מותג לכלי Material Theme Builder
4. ערכת צבעים: צבעים משניים
הבסיס של ערכת צבעים הוא קבוצה של חמישה צבעים מרכזיים, שכל אחד מהם קשור בנפרד לפלטות גוונים שונות עם 13 גוונים. גוונים ספציפיים מכל לוח צבעים טונאלי מוקצים לתפקידי צבע בממשק משתמש. נתחיל בפתיחת הפלאגין Material Theme Builder והגדרת צבע משני ראשון: Primary.
אם תזינו רק את הצבע הראשי, הוא ישמש כמקור ליצירת ערכת צבעים שלמה.
- בתיבת הדו-שיח של הפלאגין, לוחצים על 'התאמה אישית'. הפעולה הזו תגרום להחלפת העיצוב בעיצוב מותאם אישית. במעבדה הזו נשתמש בעיצוב Material שכבר נוצר, אבל אפשר גם ליצור עיצוב חדש אם רוצים. מידע נוסף זמין במאמר בנושא הדמיה של צבעים דינמיים.
- בשלב הבא נגדיר צבע ראשי למקש. הצבע הראשי יכול להיות הצבע העיקרי של המותג או צבע משני עיקרי שמשמש הכי הרבה. שאר צבעי המקשים יתעדכנו בהתאם לצבע הראשי. כלומר, אין צורך להוסיף צבעים נוספים אם אין לכם צורך בהם.
5. בניית שאר העיצוב
הצבע הראשי משמש ליצירת העיצוב, אבל יכול להיות שיהיו לכם צבעים משניים שיתמכו בצבע הראשי של המותג.
- בחלון הקופץ של הפלאגין, לוחצים על משבצת הצבע המשני כדי להוסיף צבע משני. תפקידים משניים משמשים לרכיבים פחות בולטים בממשק המשתמש, תוך הרחבת האפשרויות לביטוי צבעוני. הצבע המשני יתעדכן בסכימת הצבעים ובממשק המשתמש של האפליקציה.
- חוזרים על הפעולה גם עבור המיקום השלישי. תפקידים שלישוניים משמשים להדגשות מנוגדות שאפשר להשתמש בהן כדי לאזן בין הצבעים הראשיים והמשניים, או כדי להפנות יותר תשומת לב לאלמנט מסוים. התפקיד של הצבע השלישוני הוא לאפשר למפתחים להשתמש בו לפי שיקול דעתם, והוא נועד לתמוך בביטוי רחב יותר של צבעים במוצרים.
- הצבעים הניטרליים משמשים עכשיו לרקעים ולמשטחים, וגם לטקסט ולסמלים שצריך להדגיש.
כדי להתאים אישית את ערכת הצבעים, צריך לספק צבע משני, צבע שלישוני וצבע ניטרלי.
צבעי המותג שלכם ייכללו עכשיו בסכמת הצבעים המרכזית, שתוסטם כך שתתאים למרחב הצבעים M3, תהיה נגישה לחלוטין ותאפשר ייצוא והטמעה בתוך הקוד כעיצוב.
6. החלת העיצוב
תפקידים ואסימונים
כל צבע משני (ראשי, משני ושלישוני) מסופק בקבוצה של ארבעה צבעים תואמים בגוונים שונים, כדי ליצור שילובים, להדגיש אלמנטים ולהעביר מסר ויזואלי. הקבוצה מורכבת מהצבע המשני, מהצבע הראשי, מהצבע של הרקע ומהצבע של הטקסט על הרקע.
תפקידים ניטרליים משמשים לרקעים, וגם לטקסט ולסמלים שרוצים להדגיש.
אסימוני עיצוב מייצגים את ההחלטות הקטנות והחוזרות על עצמן לגבי עיצוב שמרכיבות את הסגנון החזותי של מערכת עיצוב. טוקנים מחליפים ערכים סטטיים, כמו קודי הקס לצבע, בשמות שמסבירים את עצמם. טוקנים של עיצוב מקשרים באופן משמעותי בין בחירות סגנון, שאחרת לא היה ביניהן קשר ברור.
הפלאגין Figma יוצר טוקנים ומזין את צבעי המקור שלכם בצורה של סגנונות Figma כדי להתחבר למאקטים קיימים, למדריכי סגנון מותג ואפילו למערכות עיצוב.
טוקנים של עיצוב יוצרים שפה משותפת בין תפקידי הצבע לבין ההטמעה.
היררכיית צבעים
כשמחילים תפקידי צבע על המוקאפים, חשוב לקחת בחשבון את סדר החשיבות או ההיררכיה של האלמנטים. הקונספט הזה יעזור להקצות צבעי מותג לתפקידים המתאימים, אבל גם למפות אותם בממשק המשתמש. בדרך כלל, צבעים מרוכזים או רוויים יותר ימשכו את תשומת הלב של המשתמשים קודם. לכן, תפקיד הצבע הראשי ממופה לרכיבים שמתמקדים יותר בקריאה לפעולה. למרות שכלי העיצוב של Material משתמש במערכת הצבעים M3 כדי ליצור צבעים מתאימים, אם תספקו צבעים משניים או שלישוניים עם רוויה גבוהה יותר, ייווצרו צבעים שיבלטו יותר מהצבע הראשי. כדאי לחשוב על הסדר שבו אתם רוצים שהמשתמשים יפעלו בממשק המשתמש ובתוכן, כדי להקצות תפקידי צבעים. לא כל הרכיבים צריכים להשתמש בצבע הראשי.
צבע אחיד ורווי מושך הכי הרבה תשומת לב.
7. החלפה לעיצוב
כדי להחיל את העיצוב המותאם אישית שיצרתם על העיצובים שלכם, צריך להגדיר את המוקאפ לטוקנים בעיצוב הקיים של Material.
רכיבי Material מגיעים עם תפקידים שממופים מראש, והם פועלים אוטומטית עם הכלי ליצירת ערכות נושא של Material.
מעבר לעיצוב מתוך חלון ההודעה של כלי העיצוב Material.
- כדי להשתמש בעיצוב הזה, בוחרים את המסגרת של הפריסה ולוחצים על החלפה. כך כל הטוקנים (סגנונות Figma) בפריסה משמאל יוגדרו בהתאם לעיצוב הזה. העדכון של קידומת הסגנון יופיע בצבעים של הבחירה.
- לא כל המידע עודכן? רכיבים מותאמים אישית, כמו כרטיס עם טיפ לטיפול בצמח, יצטרכו להחיל קודם את הסגנון של Figma. בוחרים את מאגר הטיפים לטיפול. כשהמאגר מסומן, לוחצים על סמל 4 הנקודות כדי להקצות סגנון, ובוחרים באפשרות מאגר משני. פועלים באותו אופן עם התוכן של כרטיס הטיפ לטיפול, אבל הפעם מקצים מאגר משני. התוויות הקטנות ברשימה הן גם רכיבים בהתאמה אישית, אבל נחזור אליהן בהמשך.
- רכיבי Material Design משתמשים במיפויים שמוגדרים כברירת מחדל, אבל אתם יכולים להתנסות בהקצאות סגנון כדי להתאים אותם בצורה הטובה ביותר לממשק המשתמש. כדאי להתנסות בהיררכיות שונות של צבעים ובביטויים שונים של המותג.
(רק העיצוב כלול בקובץ הייצוא של הקוד. אם עובדים עם מהנדס, כדאי לשתף מוקאפים כדי להעביר את מיפוי האסימונים, כי המיפוי לא ייכלל בייצוא)
אם תפתחו את הפלאגין בלי לבחור ערכת נושא, יוצג מסך הגדרה שבו תוכלו להתחיל. האפשרות 'מתחילים' תיצור את בסיס ברירת המחדל 'material-theme' כקבוצת סגנונות ב-Figma, כדי להתחבר למאקטים או להשתמש בה עם ערכת Material Design.
8. הרחבה מעבר לסכימה הבסיסית
עכשיו יש לכם ערכת צבעים ממותגת שממופה לרכיבים ולעיצוב, אבל יכול להיות שיש לכם צבעים נוספים שצריך לכלול. כאן נכנסת לתמונה ערכת צבעים מורחבת, שמאפשרת להוסיף צבעים בהתאמה אישית.
אלה יכולים להיות צבעים סמנטיים, צבעים ספציפיים למותג או אפילו צבעים ספציפיים למוצר, שצריך להקצות להם תפקידים ולהעביר אותם דרך אלגוריתם הצבעים או להשאיר אותם כמו שהם.
ערכת הצבעים המורחבת מאפשרת גם לשלב צבעים דינמיים (שנוצרו על ידי המשתמש) עם צבעי המותג. לאפשר למשתמשים להשפיע על ערכת הצבעים הבסיסית, ולהגדיר את צבעי המותג בערכת הצבעים המורחבת. כלומר, רכיבי ממשק המשתמש יכולים להיות מותאמים יותר למשתמשים שלכם, והצבעים של המותג יכולים להופיע ברגעים משמעותיים ומדויקים יותר באפליקציה.
אפשר להרחיב את ערכת הצבעים הבסיסית כדי לכלול צבעים בהתאמה אישית. 
9. הרחבה והתאמה אישית
הוספת צבעים מותאמים אישית לערכת הצבעים מאפשרת להוסיף צבעים כמו צבעים סמנטיים או צבעים נוספים של המותג.
סכמה מותאמת אישית עם צבעים מותאמים אישית.
- בחלון הקופץ של הפלאגין, מתחת לצבעי המקשים, לוחצים על Add a Color (הוספת צבע).
- העיצוב הנוכחי יעודכן בשורה חדשה של Custom0. כדי לעדכן את הצבע, לוחצים על משטח הצבע ובוחרים צבע חדש.
- הצבעים המורחבים האלה מופיעים כסגנון בתוך סגנונות לקריאה בלבד בשם Custom0. הם כוללים את פלטת הגוונים ואת הסכמה. כדי למפות חלק מהתוויות ברשימה עם הצבע החדש, בוחרים את הרקע של התווית ומקצים את אחד התפקידים של הצבע שנוסף (on-custom0 container).
הגדרת צבע בהתאמה אישית בצבעים שנבחרו.
- הכלי Material Theme Builder יוצר אוטומטית את הצבעים בתור Custom#. כדי לשנות את השם של צבע מותאם אישית שהוספתם, מרחיבים את קבוצת הסגנונות של העיצוב בחלונית הסגנונות (היא תופיע כשלא נבחר שום דבר). לאחר מכן מחפשים את Custom0 בקבוצת המשנה של המקור. שינוי השם של המקור כאן ישנה את השם של הצבע בחלון הקופץ של הפלאגין.
סגנונות צבע מותאמים אישית מופיעים בחלונית הסגנונות.
- כדי למחוק את הצבע שהוספתם, לוחצים לחיצה ימנית על הסגנון ומוחקים אותו. בפעם הבאה שתפתחו את הפלאגין, הצבע שנוסף יוסר. יכול להיות ששינוי השם ומחיקה לא יופיעו בתרשים הצבעים.
10. מזל טוב
עבודה מצוינת! למדתם איך ליצור ערכת צבעים בהתאמה אישית באמצעות הכלי Material Theme Builder, להחיל אותה על מוקאפים של עיצובים ולהוסיף אותה לערכת הצבעים. מערכת הצבעים החדשה Material 3 מאפשרת להוסיף לעיצובים צבעים נגישים, גמישים ועקביים, ואנחנו כבר מחכים לראות איך תשתמשו בהם.
אם יש לך שאלות, אפשר לפנות אלינו בכל שלב באמצעות @MaterialDesign בטוויטר.
בקרוב יפורסמו עוד תכנים ומדריכים בנושא עיצוב בכתובת youtube.com/MaterialDesign