1. מבוא
עדכון אחרון: 18/04/22
האפליקציות יכולות לקבל מגוון צבעים החל מעיצוב בסיסי, צבעים דינמיים שנוצרו על ידי משתמשים או צבעי המותג.
במעבדת הצבעים Material You למדנו איך להציג צבעים דינמיים בדוגמאות של עיצוב, אבל אפשר גם להשתמש בעיצוב חדשני של Material You כדי להתאים אישית את האפליקציה לצבעי המותג. אם תשתמשו במערכת הצבעים החדשה עם צבעי המותג, תוכלו ליצור ערכת צבעים נגישה עם יותר תכונות דינמיות.
מה תלמדו
- איך יוצרים עיצוב מותאם אישית באמצעות הכלי ליצירת עיצובים Material Builder.
- שימוש בעיצוב מותאם אישית כדי לעצב דוגמאות.
- אפשרויות לשילוב צבעים דינמיים ומותאמים אישית.
דרישות מוקדמות
בשיעור ה-Lab הזה נתבסס על כמה עקרונות בסיסיים בעיצוב.
- הכרת מושגי עיצוב בסיסיים: לוחות צבעים
- ידע על ערכות הצבעים והתפקידים הנוכחיים ב-Android
- הידע ב-Figma
- אופציונלי: המחשה חזותית של צבע דינמי ב-Codelab של האפליקציה
למה תזדקק?
2. שנתחיל?
הגדרה
כדי להתחיל, צריך לגשת לקובץ Designlab Figma. כל מה שצריך לשיעור ה-Lab נמצא בקובץ ה-Figma. אפשר להוריד ולייבא את הקובץ, או לשכפל אותו מקהילת Figma.
קודם כול, נכנסים אל Figma או יוצרים חשבון.
עותק מקהילת Figma
עוברים לקובץ התאמה אישית של Material או מחפשים המחשה חזותית של צבע דינמי באפליקציה באמצעות Material Design בקהילת Figma. לוחצים על שכפול בפינה השמאלית העליונה כדי להעתיק את הקובץ לקבצים.
פריסת קבצים
כשתעיינו בקובץ, תוכלו לראות שהקובץ ניתן להשגה, החל במבוא. כל קטע מחולק לשורה של פריטי Artboard שמחוברים יחד, עם כמה מושגים בסיסיים עבור הקטע, ולאחר מכן תרגילים. הקטעים והתרגילים בנויים זה על זה ויש להשלים אותם ברצף.
ה-Codelab הזה ינחה אתכם בצורה מפורטת יותר לגבי העקרונות והתרגילים האלה. כדאי לקרוא יחד עם ה-Codelab כדי לקבל מידע נוסף על התכונות החדשות של Material You!
החל מלוח הציור מבוא, יש לחצנים שמקשרים את משטחי היצירה זה לזה לפי הסדר. כדי לגשת לקישור, לוחצים על הלחצן.
התקנת הפלאגין של Figma
ה-Codelab הזה מסתמך בעיקר על פלאגין חדש של Figma כדי ליצור ערכות צבעים ואסימונים דינמיים. אפשר להתקין את הפלאגין של Figma ישירות מדף קהילת Figma או לחפש את הכלי Material Design Builder בקהילת Figma.
3. ערכת הצבעים של החומר
קודם סקירה כללית לגבי השימוש בצבע ב-Material והאופן שבו מערכת הצבעים החדשה פועלת.
צבע משמש להבעה של סגנון ולהעברת משמעות, אם המשמעות היא אישית למשתמש, למיתוג או למשמעות הסמנטית. מערכת הצבעים מטפלת בשונות של ערכות צבעים שמשתנות באופן דינמי, שנוצרות כאשר הקלט של המשתמש משתנה. הלוגיקה של קשרים טונליים ושינויים בגוונים ובכרומות מספקים בסיס ליישום גמיש של צבעים.
מרחב הצבעים מאפשר ליצור ערכות צבעים בהירות כהות וזמינות באמצעות צבעי מקור באמצעות יצירת 5 צבעי מפתח ולאחר מכן לוחות צבעים טונליים, שבהם נבחרו שלבים טונליים מסוימים.
השיטה הזו של שינוי הצבעים מספקת לא רק ערכת צבעים נגישה, אלא גם מספקת שיטות ליצירת ערכות ממותגים שיהיו נגישות ועקביות עם ערכות הצבעים שהמשתמשים יוצרים.
ערכות של צבעים נוצרות מ-5 צבעי מפתח בלוחות צבעים טונליים, כדי ליצור תבניות נגישות
עיצוב ממותג
M3 תומך באפליקציות שיטתיות של פרמטרים מותאמים אישית כדי להגדיר ולתחזק את הסגנונות שמעבירים את המותג למותג שלכם.
ערכה מותאמת אישית היא ערכת צבעים שאינה נגזרת מהטפט של המכשיר של המשתמש, אלא מיוצר האפליקציה. מערכת הצבעים M3 והסכימות המותאמות אישית הם הבסיס להפעלת צבע דינמי באפליקציות.
הסכמה מותאמת אישית תגשר על הפער בין M2 ו-M3 כדי לאפשר העברה קלה על ידי הגדרת האסימונים הנדרשים (משבצות צבעים) ותיצור חוויה ממותגת יותר.
הוספת צבעי מותג לכלי לבניית עיצובים של Material Builder
4. ערכת צבעים: צבעים משניים
הבסיס של ערכת צבעים הוא סדרה של חמשת צבעי מפתח שקשורים בנפרד ללוחות טונליים נפרדים עם 13 גוונים. גוונים ספציפיים מכל לוח טונלי מוקצים לתפקידי צבעים בממשק המשתמש. כדי להתחיל, פותחים את הפלאגין Material Design Builder ומגדירים את הצבע המשני הראשון שלנו: Primary.
אם מזינים רק את השדה 'ראשי', הוא ישמש כמקור ליצירת ערכת צבעים שלמה.
- בחלון העזר של הפלאגין, לוחצים על Custom (בהתאמה אישית). הפעולה הזו תשנה את העיצוב לעיצוב מותאם אישית. בשיעור ה-Lab הזה נשתמש בעיצוב חומר שכבר נוצר, אבל תוכלו גם ליצור עיצוב חדש אם תרצו. מידע נוסף זמין במאמר הצגה חזותית של צבע דינמי.
- בשלב הבא נגדיר צבע מפתח ראשי. הצבע הראשי יכול להיות הצבע הראשי של המותג או הצבע המשני שבו משתמשים הכי הרבה. שאר צבעי המפתח יאוכלסו על סמך הצבע הראשי. המשמעות היא שאין צורך להוסיף צבעים אם אין לך צורך בהם.
5. בניית שאר העיצוב
העיצוב הראשי משמש ליצירת העיצוב, אבל אפשר להשתמש בצבעים משניים שיתמכו בצבע הראשי של המותג.
- בחלון העזר של הפלאגין, מוסיפים צבע משני על ידי לחיצה על כראוי הצבע המשני. תפקידים משניים משמשים לרכיבים פחות בולטים בממשק המשתמש, ומרחיבים את ההזדמנות לביטוי הצבעים. הצבע המשני יתעדכן בסכימת הצבעים ובממשק המשתמש של האפליקציה.
- חוזרים על הפעולה הזו גם ל-Tertiary. תפקידים גבוהים במיוחד משמשים להדגשת גוונים מנוגדים. אפשר להשתמש בתפקידים כדי לאזן בין צבעים ראשיים ומשניים או למשוך תשומת לב משופרת לרכיב מסוים. יוצרים יכולים להשתמש בתפקיד 'צבע שלישי' לפי שיקול דעתם, ונועד לתמוך בביטוי צבעים רחב יותר במוצרים.
- תפקידים ניטרליים וניטרליים משמשים עכשיו לפלטפורמות ולרקעים, ולטקסט וסמלים עם הדגשה גבוהה.
כדי להתאים אישית את ערכת הצבעים שלך בצורה מלאה, אפשר להוסיף תמונה משנית, שלישית וניטרלית.
הצבעים של המותג ייכללו עכשיו בערכת הצבעים הבסיסית ששונתה כך שיתאימו למרחב הצבעים M3. הם נגישים בצורה מלאה ויכולים לייצא ולהטמיע אותם בקוד כעיצוב.
6. העיצוב מתעדכן
תפקידים אסימונים
כל צבע משני (ראשי, משני, ושלישי) מסופק בקבוצה של ארבעה צבעים מתאימים של גוונים שונים לצורך התאמה, הגדרת הדגשה וביטוי חזותי. הקבוצה מורכבת בצבע המשני, בצבע, במכל ובמאגר.
תפקידים ניטרליים משמשים לפלטפורמות ולרקעים, ולטקסט ולסמלים עם הדגשה גבוהה.
אסימוני עיצוב מייצגים את ההחלטות הקטנות וחוזרות על העיצוב שעליהן מבוסס הסגנון החזותי של מערכת העיצוב. האסימונים מחליפים ערכים סטטיים, כמו קודים הקסדצימליים לצבע, בשמות עם הסבר עצמי. עיצוב אסימונים מקשר באופן משמעותי בין בחירות סגנונות שאחרת לא היה להן קשר ברור.
הפלאגין של Figma יוצר אסימונים ומזינים צבעי מקור משלכם בצורת סגנונות Figma כדי להתחבר לדוגמאות קיימות, למדריכים לסגנון המותג ואפילו למערכות עיצוב.
אסימונים מעוצבים יוצרים שפה משותפת בין תפקידי הצבעים וההטמעה.
היררכיית צבעים
כשמוסיפים תפקידי צבע להדמיה, כדאי להביא בחשבון את סדר החשיבות או ההיררכיה של הרכיבים. הקונספט הזה יעזור להקצות צבעים של המותג לתפקידים המתאימים, אבל גם למפות אותם בממשק המשתמש. בדרך כלל, צבעים רוויים או מרוכזים יותר ימשכו קודם את תשומת הלב של המשתמש, לכן תפקיד הצבע הראשי ממופה רכיבים שממוקדים יותר בקריאה לפעולה. הכלי Material Design Builder משתמש במערכת הצבעים M3 כדי ליצור צבעים מתאימים, אך הוספת צבעים משניים או שלישוניים ברוויה גבוהה יותר תוביל ליצירה של צבעים שבוקפים יותר מהעיקרון העיקרי שלהם. כדי להקצות תפקידי צבע, צריך לקבוע את הסדר שבו רוצים שהמשתמשים יקיימו אינטראקציה עם התוכן בממשק המשתמש, ולא בכל הרכיבים צריך להגדיר את השדה 'ראשי'.
צבע רוויי מלא מושך את תשומת הלב הרבה ביותר.
7. החלפה לעיצוב
כדי להחיל את העיצוב המותאם אישית שיצרתם על העיצובים, צריך להגדיר את ההדמיה לאסימונים בעיצוב הקיים של החומר.
רכיבי החומר מגיעים עם תפקידים שמופו מראש והם יעבדו באופן אוטומטי עם הכלי Material Design.
אפשר להחליף לעיצוב מהחלון של Material Design Builder.
- עכשיו נגדיר את כל האסימונים (סגנונות Figma) בפריסה משמאל כדי להשתמש בעיצוב הזה, על ידי בחירת המסגרת של הפריסה ולחיצה על 'החלפה'. השינוי של קידומת הסגנון יופיע בצבעים שנבחרו.
- לא הכול עודכן? אם אתם משתמשים ברכיבים מותאמים אישית, כמו כרטיס הטיפ לטיפוח הצמחים, תצטרכו קודם ליישם את סגנון ה-Figma. בוחרים את מאגר הטיפים לטיפול, אחרי שבוחרים את מאגר התגים, לוחצים על סמל 4 הנקודות כדי להקצות סגנון ובוחרים את מאגר תגים שלישי. חוזרים על אותה פעולה עם התוכן של כרטיס הטיפ לטיפול, אבל צריך להקצות מאגר תגים שלישון. התוויות הקטנות ברשימה הן גם רכיבים מותאמים אישית, אבל נחזור אליהן מאוחר יותר!
- הרכיבים של Material Design משתמשים במיפויי ברירת מחדל, אבל אפשר להתנסות בהקצאות סגנונות שיתאימו לממשק המשתמש. הקדישו כמה רגעים כדי לשחק עם היררכיות צבעים שונות ועם ביטוי המותג.
(בקובץ הייצוא נכלל רק העיצוב. אם עובדים עם מהנדס, צריך לשתף הדמיות כדי להעביר את המיפויים של האסימונים, כי הן לא ייכללו בייצוא).
אם תפתחו את הפלאגין ללא עיצוב, יופיע מסך הגדרה ותוכלו להתחיל. "תחילת העבודה" תפיק את ערך ברירת המחדל של 'Material-theme' בתור קבוצה בסגנון Figma כדי להתחבר להדמיות או להשתמש בערכת העיצוב Material Design.
8. הרחבה מעבר לסכימת הליבה
עכשיו יש לכם ערכת צבעים ממותגת שממופה לרכיבים ולהדמיה של עיצוב, אבל יכול להיות שיש צבעים נוספים שצריך לכלול. כאן נכנסים לתמונה הרחבה של הרשימה, שמאפשרת להוסיף צבעים מותאמים אישית.
אלה יכולים להיות צבעים סמנטיים, צבעים ספציפיים למותג או אפילו צבעים ספציפיים למוצר. צריך להקצות להם תפקידים ולהזיז אותם דרך אלגוריתם הצבעים, או להישאר כפי שהם מזינים.
עם ערכת הצבעים המורחבת אפשר גם לשלב צבעים דינמיים (נוצרים על ידי משתמשים) עם צבעי המותג שלכם. לאפשר לסכימת הליבה להשפיע על המשתמשים בהתאמה אישית, בעוד שצבעי המותג מוגדרים ברשימה המורחבת. המשמעות היא שהרכיבים בממשק המשתמש יכולים להיות אישיים יותר עבור המשתמשים, ולצבעי המותג שלכם יכולים להיות רגעים מדויקים יותר ומשפיעים באפליקציה.
אפשר להרחיב את ערכת הליבה כך שתכלול צבעים מותאמים אישית. 
9. הרחבה ו התאמה אישית
הרחבת הסכמה עם צבעים מותאמים אישית מאפשרת להוסיף צבעים כמו צבעים סמנטיים או צבעים נוספים של המותג.
סכמה מותאמת אישית עם צבעים מותאמים אישית.
- בחלון העזר של הפלאגין, מתחת לצבעי המפתח, לוחצים על הוספת צבע.
- העיצוב הנוכחי יתעדכן ויופיע שורה חדשה בהתאמה אישית 0. מעדכנים את הצבע הזה על ידי לחיצה על צבע הצבעים ובוחרים צבע חדש.
- הצבעים המורחבים האלה נמצאים כסגנון בסגנונות לקריאה בלבד כ-Custom0. גם לוח הצבעים ולוח הצבעים הטונלי שלהם. כדי למפות חלק מתוויות הרשימה עם הצבע החדש, בוחרים את רקע התווית ומקצים אחד מהתפקידים של הצבעים שנוספו (מאגר בהתאמה אישית).
הגדרת צבע מותאם אישית בצבעים שנבחרו.
- הכלי ליצירת עיצובים מהותיים יוצר את הצבעים באופן אוטומטי כ# בהתאמה אישית. כדי לשנות שם של צבע מותאם אישית שנוסף, מרחיבים את קבוצת הסגנונות של העיצוב בחלונית הסגנון (האפשרות הזו תופיע אם לא תבחרו שום צבע). לאחר מכן מחפשים את האפשרות Custom0 בתת-קבוצת המקור. שינוי שם המקור כאן יגרום לשינוי שם הצבע בחלון העזר של הפלאגין.
סגנונות צבעים מותאמים אישית מופיעים בחלונית הסגנונות.
- ניתן לבצע מחיקת צבע שנוסף באופן דומה, על ידי לחיצה ימנית ומחיקת הסגנון. בפעם הבאה שבה הפלאגין ייפתח, הצבע שנוסף יוסר. יכול להיות ששינוי השם ומחיקה לא יבואו לידי ביטוי בתרשים הצבעים.
10. מזל טוב
מעולה – למדת איך ליצור עיצוב צבעים מותאם אישית באמצעות Material Design Builder, להשתמש בו לעיצוב דוגמאות ולהוסיף לערכת הצבעים. מערכת הצבעים החדשה Material 3 מספקת עיצוב נגיש, גמיש ואחיד, ואנחנו מצפים בקוצר רוח לראות איך תשתמשו בהם!
אם יש לכם שאלות, אתם מוזמנים לשאול אותנו בכל שלב באמצעות @Material Design ב-Twitter.
כדאי להמשיך להתעדכן בתכנים נוספים ובמדריכים בנושא עיצוב בכתובת youtube.com/MaterialDesign