1. סקירה כללית
ב-Google I/O בשנת 2019, הוספנו ל-Material Design הנחיות ליצירת עיצוב כהה שישלים את עיצוב ה-Material הקיים של המוצר. עיצובים בהירים מצוינים לקריאת טקסטים ארוכים ומציעים ניגודיות קלה יותר לקריאה, אבל עיצוב כהה עם בהירות מופחתת מספק בטיחות בסביבות חשוכות ויכול למזער את מאמץ העיניים.
ב-Material, עיצובים כהים מיועדים לשימוש כתוספת לעיצוב בהיר שמוגדר כברירת מחדל, תוך שמירה על הזהות הייחודית של האפליקציה (כולל סגנונות של צבע, צורה, סוג וגובה) באמצעות הצגה מדויקת וידידותית לשימוש בלילה.
בסדנת העיצוב הזו נסביר איך ליצור עיצוב כהה על סמך עיצוב Material קיים – באמצעות אחד ממחקרי Material שלנו.
אנחנו נשתמש ב-Reply, אפליקציית אימייל שנועדה להיות ברורה, קריאה, אינטואיטיבית וקלה לשימוש. אנחנו נלמד על הזהות של Reply ונקבל החלטות מושכלות כדי לשמור על רגעים ממותגים באפליקציה, תוך יצירת עיצוב שעדיין נוח בחושך.
בנוסף, נמשיך לפתח את העיצוב ונשתמש בצבעים מותאמים אישית של הממשק, שחורגים מהעיצוב הכהה הבסיסי, כדי להדגיש מחדש את האישיות הייחודית של Reply.
חומרים נדרשים:
2. איסוף הקבצים הנדרשים
לפני שמתחילים, צריך להוריד את קובץ ההתחלה של Figma. הקובץ הזה כולל את כל מה שצריך בשביל designlab.
3. הגדרת הסביבה
בשלב הבא, צריך להגדיר את סביבת העיצוב.
קודם צריך להיכנס ל-Figma או ליצור חשבון.
אחרי שמתחברים לחשבון, מייבאים את הקובץ שהורדתם בשלב הקודם. כדי לעשות זאת, פשוט מחפשים את סמל 'ייבוא קובץ' בפינה הימנית העליונה של מסך הקבצים ב-Figma ומאתרים את הקובץ בתיקייה 'הורדות'.
כדאי להקדיש רגע כדי לבדוק את הקובץ. הוא כולל עיצוב בהיר, לוח צבעים מוכן מראש שמבוסס על המותג של האפליקציה, ועותק של העיצוב הכהה הסופי שניצור.
- בכרטיסייה אחרת, פותחים את ההנחיות לעיצוב כהה ב-Material Design. נשתמש בהנחיות האלה לאורך כל התהליך ב-designlab.
4. הסבר על זהות המוצר
לפני שמתחילים לעבוד על ערכת הנושא הכהה של Reply, צריך להבין כמה מאפיינים של המותג Reply. כך נוכל לקבל החלטות מושכלות לגבי העיצוב שלנו, כדי שהזהות והמותג של Reply יבואו לידי ביטוי באופן עקבי גם בעיצוב בהיר וגם בעיצוב כהה.
המותג של Reply שם דגש על תקשורת. האפליקציה נותנת עדיפות לאיכות הפונקציונלית, ומעדיפה קלות שימוש על פני אלמנטים עיצוביים שאין להם מטרה פונקציונלית.
לצורך המעבדה לעיצוב הזו, האלמנטים הכי חשובים של ביטוי המותג ב-Reply הם צבע, סוג וצורה.
צבע
הצבע הראשי של ערכת הצבעים של Reply הוא כחול-אפור כהה, והצבע המשני הוא כתום-צהוב.
מכיוון שהצבע המשני משמש לעיתים רחוקות, ממשק המשתמש של Reply הוא לרוב מונוכרומטי, עם וריאציות של הצבע הראשי. ערכת הצבעים העדינה הזו מאפשרת לקרוא את התוכן בקלות בלי הסחות דעת, וגם לראות בקלות את האווטרים עם התמונות.
לכן, לצבע המשני של Reply יש השפעה גדולה בכל מקום שבו הוא משמש – הוא מדגיש פעולות קריטיות ומבליט רגעים שקשורים למותג לאורך השימוש באפליקציה.
סוג
אפליקציית Reply מתמקדת מאוד בתוכן מבוסס-טקסט וביעילות, ולכן סוג הגופן והטיפוגרפיה הם מרכזיים בביטוי הזהות שלה. האפליקציה מסתמכת על Work Sans לכל סולם הטיפוגרפיה שלה, ומשתמשת במגוון סגנונות שכוללים שישה משקלים של Work Sans: Light, Regular, Medium, SemiBold ו-Bold.
השימוש ב-Work Sans לבניית כל סולם הסוגים מאפשר ל-Reply להציג טיפוגרפיה עקבית וצפויה, אבל גם אורגנית וקריאה.
לדברי ויי הואנג (Wei Huang), המעצב של Work Sans, המשפחה מותאמת לשימוש במסך. התכונה הזו שימושית מאוד לקריאה יעילה של קטעי טקסט באימיילים או בתוכן אחר. הבסיס הרופף שלה בצורות של גרוטסקים מוקדמים מעניק לה אסתטיקה ידידותית ואנושית יותר, בעוד שהריווח הרחב יותר מאפשר קריאה חלקה יותר.
צורה
הגופן Reply מורכב מצורות מורכבות, שמשלבות בין רכיבים מעוגלים וחדים באופן שמחזק את היעילות והפונקציונליות של רשימת כתובות אימייל, ובו בזמן מעניק מראה רך יותר לפעולות מרכזיות ולרכיבים גדולים יותר.
- רכיבים קטנים
- רכיבים בינוניים
- רכיבים גדולים
רכיבים קטנים כמו כפתורים ו-FAB הם מעוגלים לחלוטין, בעוד שרכיבים בינוניים כמו כרטיסי אימייל וסרגל האפליקציות התחתון הם מרובעים לחלוטין. לרכיבים גדולים כמו מנגנון למעבר בין חשבונות והגיליון התחתון יש פינות מעוגלות קלות.
הצורות האלה משולבות כדי לחזק את ההבנה של המשתמשים לגבי המיקום שלהם באפליקציה, איך כל רכיב בנוי ואיך הוא קשור לשאר הממשק.
5. עבודה עם צבע
אם יודעים איך הצבע קשור לביטוי המותג של Reply בעיצוב הבהיר שמוגדר כברירת מחדל, אפשר לבצע שינויים מושכלים בלוח הצבעים שלו כדי ליצור עיצוב כהה שמיש ומבטא את המותג.
ב-Material, מערכות הצבעים מבוססות על פלטות של גוונים – הפלטות האלה משתמשות בצבעי המותג כדי ליצור קבוצה של וריאציות הרמוניות שמשולבות במערכת צבעים מקיפה שמוחלת על האפליקציה, וכך מבטיחות סגנון וקריאות.
בקובץ Figma אפשר לראות את פלטות הגוונים הראשיות והמשניות של Reply. החיצים הבהירים מעל כל לוח תצוגות מציינים את הערכים שמשמשים בעיצוב הבהיר של Reply, והחיצים הכהים מציינים את הווריאציות שבהן נשתמש בעיצוב הכהה.
כשיוצרים עיצוב כהה באמצעות Material, נבחרים וריאנטים בהירים יותר כדי שמערכת הצבעים תישאר מובחנת ותשמור על ניגודיות מתאימה בלי לגרום למאמץ בעיניים. צבעים רוויים יותר נוטים ליצור אפקט ויזואלי של 'רעידה' על רקעים כהים יותר, ולכן קשה יותר לקרוא אותם. גוונים בהירים יותר גם מאפשרים יותר גמישות בשינוי הצבע של משטחים מוגבהים, ונדון בכך בהמשך.
6. שינוי צבעים של משטחים
עכשיו, אחרי שהבנו את לוחות הצבעים של Reply ואת הצבעים שבהם נשתמש בעיצוב הכהה, הגיע הזמן להתחיל לשנות את ערכי הצבעים בדגם.
בנושאים כהים של Material, השכבה התחתונה ביותר של הממשק היא בדרך כלל אפור כהה עם הערך ההקסדצימלי #121212.
- בקובץ Figma, מחפשים את משטח היצירה שנקרא Reply Starter (התחלת תשובה) ובוחרים בשכבה שנקראת Background (רקע).
- בקטע מילוי בחלונית הבדיקה בצד שמאל של המסך, מגדירים את ערך הצבע ל-121212 ומקישים על Return.
- לוח האומנות אמור להיראות כך:
בתצוגה המונוכרומטית של תיבת הדואר הנכנס של Reply, כרטיסי האימייל הם בצבע בהיר יותר מהרקע, ולכן צריך להשתמש באותו עיצוב לכרטיסים בערכת הנושא הכהה כדי לשמור על ההיררכיה החזותית של תיבת הדואר הנכנס.
- באותו משטח יצירה, מרחיבים את הקבוצה שנקראת "Email cards" ובוחרים את כל השכבות שנקראות "Email card".
- כמו קודם, בוחרים את הערך Fill בחלונית הבדיקה. מגדירים את הערך 121212 ולוחצים על Return.
- עכשיו בוחרים רק את השכבות שנקראות Email card overlay (שכבת-על של כרטיס אימייל). השכבות האלה יאפשרו לנו ליצור שכבת-על שמבחינה בין כרטיסי האימייל לבין הרקע שלהם.
- נותנים לשכבות מילוי ומגדירים אותו ל-FFFFFF עם אטימות של 2%.
עכשיו, אחרי שהכרטיסים של האימייל הוכהו, אי אפשר לקרוא את הטקסט. בשלב הבא נסביר על צבעי טקסט.
7. שינוי צבעי הטקסט
כדי להבין את צבעי הטקסט בעיצובים כהים, חשוב להבין איך צבע מוחל על טקסט במערכת Material Design הרחבה יותר.
רכיבי Material מגדירים את המושג 'צבעים על'. השם הזה ניתן להם כי הם צבעים שמופיעים 'על' גבי רכיבים ומשטחים מרכזיים שמשתמשים בצבעים ראשיים, משניים, של משטח, של רקע או של שגיאה. הצבעים של 'מופעל' משמשים בעיקר לטקסט, כדי לוודא שהוא יישאר קריא על פני השטח האלה.
צבעי ברירת המחדל של Material הם לבן (#FFFFFF) ושחור (#000000). מכיוון שצבע שחור או כהה לא יתאים למשטחים הכהים שלנו, נשתמש בצבע לבן.
המערכת להגדרת היררכיית הטקסט עם צבע ה'מופעל' הזה היא פשוטה. טקסט עם הדגשה גבוהה מוגדר עם אטימות של 87%, טקסט עם הדגשה בינונית מוגדר עם אטימות של 60%, וטקסט מושבת מוגדר עם אטימות של 38%.
הטקסט בעדיפות גבוהה הוא לא לבן טהור, כי כמו שצוין בשלב 5, הצבע #FFFFFF – צבע בהיר – ייראה כאילו הוא 'רוטט' על רקע כהה. בנוסף, טקסט בצבע #FFFFFF על רקע כהה יכול לפגוע בקריאות, כי האור מהטקסט הזה נראה מטושטש על הרקע הכהה.
אחרי שהבנו את כל זה, נתקן את צבעי הטקסט בעיצוב הכהה שלנו.
- כל הטקסט בפריסת המתחילים מקובץ לגישה קלה. מחפשים את הקבוצה שנקראת Inbox text ומרחיבים אותה כדי לראות את כל השכבות שמרכיבות אותה.
- בוחרים את כל השכבות שמתחילות ב-Hi -". אלה כל חלקי הטקסט עם הדגשה גבוהה בפריסה שלנו.
- בחלונית הבדיקה, מגדירים את Fill (מילוי) ל-FFFFFF עם אטימות של 87%.
- חוזרים לקבוצה Inbox text ובוחרים את כל השכבות שמתחילות ב-Med -"
- בחלונית הבדיקה, מגדירים את הצבע ל-FFFFFF עם אטימות של 60%.
8. שינוי צבעים של רכיבים
בנושאים כהים שנבנו באמצעות Material, משטחים ורכיבים מוגבהים צבועים באמצעות שכבות-על. ככל שהמשטח גבוה יותר, כך השכבה העליונה חזקה ובהירה יותר. זו דרך להעביר מידע על גובה ועל היררכיה כשהרקע כהה מדי ואי אפשר להציג בו צללים כהים בצורה מהימנה.
סרגל האפליקציה התחתון
בסרגל האפליקציות התחתון של Reply, שמוצג מעל שאר ממשק המשתמש של תיבת הדואר הנכנס, נשתמש בשכבת-על עדינה.
- ברשימת השכבות, מוצאים את הקבוצה שנקראת Bottom app bar ומרחיבים אותה כדי לראות את השכבות שמרכיבות אותה.
- מוצאים את השכבה שנקראת Surface בתוך הקבוצה הזו, ומגדירים את הערך של Fill ל-121212.
- מאתרים את השכבה שמעליה שנקראת Surface overlay ומגדירים לה ערך Fill של FFFFFF עם אטימות של 12%.
כפתור פעולה צף (FAB)
בשלב הבא נחיל צבע חדש על ה-FAB. כדי לעשות את זה, חוזרים אל לוחות הצבעים הטונאליים שראינו קודם ומעתיקים את הערך 700 של הצבע המשני של Reply.
אופציונלי: ברכיבים קטנים אבל בעלי השפעה גבוהה באפליקציה שלכם, אתם יכולים לבחור צבע עם רוויה קצת יותר גבוהה, כל עוד הוא שומר על הניגודיות הנכונה עם הצבעים שמתחתיו. נבדוק את האפשרות הזו בשלב מאוחר יותר.
- מוצאים את הקבוצה שנקראת FAB ברשימת השכבות ומרחיבים אותה כדי לראות את החלקים שמרכיבים אותה.
- מוצאים את השכבה Surface ובוחרים אותה. מגדירים את המילוי שלו ל-FCC13B.
הכרטיסים שנבחרו
יכול להיות שתשימו לב שאותו צבע כתום-צהוב שמסמל השפעה מופיע גם בפינה של כרטיסי אימייל נבחרים בתיבת הדואר הנכנס של Reply. זהו עוד רגע עם מיתוג חזק, אבל הוא לא מתאים באופן ברור לרכיבים, למשטחים או לטקסט.
במקרים כאלה, הכי טוב להתחיל מהצבע המשני של הווריאציה (במקרה הזה #FFFBE6) ולנסות למצוא צבע שיהיה מספיק בולט אבל לא יסיח את הדעת מהמראה הפונקציונלי של Reply. במקרה של תשובה, אפשר להשתמש בגרסה המשנית הרגילה.
- בוחרים בשכבה שנקראת Earmark ומגדירים את הצבע שלה ל-FFF5A0.
9. הרחבת ההתאמה האישית: משטחים מותאמים אישית
כפי שראינו קודם, כפתור הפעולה הצף (FAB) ב-Reply הוא רכיב מודגש מאוד שמייצג גם רגע ממותג מאוד באפליקציה. לכן, יכול להיות שנחליט לשמור על הצבע שלו בערכת הנושא הכהה של Reply באמצעות הצבע המשני המקורי של Reply.
- מוצאים את הקבוצה שנקראת FAB ברשימת השכבות ומרחיבים אותה כדי לראות את החלקים שמרכיבים אותה.
- מוצאים את השכבה Surface ובוחרים אותה. מגדירים את המילוי בחזרה ל-F9AA33.
אולי נרצה גם להחזיר את הצבע הראשי של Reply כצבע מותאם אישית של פני השטח עבור סרגל האפליקציות התחתון וכרטיסי האימייל. כדי לעשות את זה, צריך פשוט לשנות את השכבה העליונה כך שתשתמש בצבע הכהה הראשי שמצוין בפלטת הצבעים הטונאלית שאליה התייחסנו.
- ברשימת השכבות, מוצאים את הקבוצה שנקראת Bottom app bar ומרחיבים אותה כדי לראות את השכבות שמרכיבות אותה.
- מחפשים את השכבה שנקראת Surface overlay ונותנים לה ערך חדש של Fill 344955 עם אטימות של 48%. כך תקבלו צבע מותג חזק יותר, ועדיין תשמרו על ניגודיות מספקת.
- ברשימת השכבות, מחפשים את השכבות שנקראות Email card overlay ובוחרים את כולן.
- מגדירים את הצבע שלהם ל-ADC0CB עם אטימות של 4%.
10. סיכום
ב-Material, ערכות נושא כהות הן הרחבה מחושבת ומכוונת של הזהות הייחודית של המוצר, כפי שהיא באה לידי ביטוי בערכת נושא בהירה. באמצעות שינויים פשוטים בצבע ובאופן שבו הגובה מועבר, יצרתם בהצלחה את העיצוב הכהה הראשון שלכם ב-Material. מזל טוב!
השלבים במעבדת העיצוב הזו הם מסגרת להבנה ולהגדרה של ערכת נושא כהה למוצר שלכם, ותמיד צריך לזכור את המאפיינים והיעדים של המותג והמוצר שלכם.
הנחיות נוספות לגבי עיצוב כהה זמינות במפרט העיצובים הכהים של Material Design.
אם יש לך שאלות, אפשר לפנות אלינו בכל שלב באמצעות @MaterialDesign בטוויטר.
כדאי להירשם לערוץ YouTube של Google Design כדי לקבל עדכונים על תוכן נוסף בנושא עיצוב ועל סרטוני הדרכה.