1. מבוא
עדכון אחרון: 18 באפריל 2022
אפליקציות יכולות לקבל מגוון צבעים מתוך ערכות בסיסיות, צבעים דינמיים שנוצרו על ידי המשתמשים או צבעי מותג.
במאמר הקודם בנושא מעבדת הצבעים של Material You הסברנו איך להציג צבעים דינמיים בתוך מוקאפים של עיצובים, אבל אפשר גם להשתמש בערכות נושא של Material כדי להתאים אישית את האפליקציה עם צבעי המותג. שימוש במערכת הצבעים החדשה עם צבעי המותג שלכם ייצור ערכת צבעים נגישה שיכולה לכלול תכונות דינמיות יותר.
מה תלמדו
- איך יוצרים עיצוב מותאם אישית באמצעות הכלי ליצירת עיצובים של 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
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