1. מבוא
תאריך העדכון האחרון: 11 במאי 2022
מערכת הצבעים Material 3 יוצרת ערכות צבעים נגישות באמצעות אלגוריתם הצבעים הדינמי, אבל מה זה אומר נגישות לצבע? איך מערכת הצבעים החדשה של Material Design יוצרת ערכת צבעים נגישה, ואילו כלים עוזרים בכך?
מה תלמדו
- איך הצבע קשור להנחיות הנגישות והניגודיות.
- איך כלי עריכה יכולים לעזור ליצור ערכת צבעים נגישה, לבצע עריכות ולבדוק את הניגודיות.
דרישות מוקדמות
בשיעור ה-Lab הזה נתבסס על כמה מושגי עיצוב בסיסיים.
- ידע בערכות צבעים ובתפקידים עדכניים ב-Android.
- ידע ב-Figma.
הדרישות
- חשבון Figma
- קובץ Figma Designlab
- פלאגין Figma Material Theme Builder
2. שנתחיל?
הגדרה
כדי להתחיל, צריך לגשת לקובץ Designlab Figma. כל מה שצריך לשיעור ה-Lab נמצא בקובץ Figma. אפשר להוריד את הקובץ ולייבא אותו, או לשכפל אותו מקהילת Figma.
קודם צריך להיכנס ל-Figma או ליצור חשבון.
שכפול מקהילת Figma
עוברים לקובץ Designing with accessible colors או מחפשים את Designing with accessible colors ב- Figma Community. בפינה השמאלית העליונה, לוחצים על שכפול כדי להעתיק את הקובץ לקבצים שלכם.
פריסת הקובץ
כשמעיינים בקובץ, אפשר לראות שהוא מכיל את כל מה שצריך, ומתחיל במבוא. כל קטע מחולק לשורה של לוחות ציור שמקושרים זה לזה, עם כמה מושגי ליבה לקטע, ואחריהם תרגילים. התרגילים והקטעים בנויים אחד על השני, ולכן מומלץ להשלים אותם לפי הסדר.
ב-codelab הזה מוסבר על המושגים האלה ועל התרגילים בפירוט רב יותר. כדאי לקרוא את ה-Codelab כדי לקבל מידע נוסף על התכונות החדשות של Material You.
החל מלוח הארטבורד Intro, יש כפתורים שמקשרים בין לוחות הארטבורד לפי הסדר. כדי לגשת לקישור, לוחצים על הלחצן.
התקנת הפלאגין של Figma
ה-Codelab הזה מסתמך במידה רבה על פלאגין חדש של Figma ליצירת סכימות צבעים וטוקנים דינמיים. אפשר להתקין את הפלאגין של Figma ישירות מדף הקהילה של Figma, או לחפש את Material Theme Builder בקהילת Figma.
3. צבע ונגישות
נגישות היא הדרך היחידה לעצב מוצרים שמתאימים לכולם, וכך לוודא שהמוצרים שאתם יוצרים כוללים את הקהל הרחב ביותר שאפשר.
השאלה 'האם אני יכול לראות את הצבע על המסך?' היא רק השיקול הראשון שצריך לקחת בחשבון כשמעצבים עם צבע. אנשים רואים צבעים בדרכים שונות, בהתאם לחדות הראייה שלהם.
עיוורון צבעים יכול להצריך בדיקה של שילובי צבעים כדי לוודא שרכיבי ממשק המשתמש לא מתמזגים זה עם זה.
אף על פי שאטימות ומשקל לא מייצגים את הגוון המילולי של הצבע, יש להם השפעה חזקה על האופן שבו הצבע נתפס.
שימוש באטימות נמוכה יוצר צבע בהיר יותר, שיכול לגרום לטקסט להיות בלתי קריא. לדוגמה, לאדם עם קוצר ראייה יהיה קשה לקרוא טקסט שמוגדר עם אטימות של 30% במרחק סביר.
חשוב להשתמש באטימות בזהירות, ואף פעם לא בניגוד להנחיות המוצעות.
לעובי הגופן יכולה להיות השפעה דומה, במיוחד אם מדובר בגופנים דקים על רקעים כהים. בפריטים מודפסים, שימוש בגופן דק מאוד מאפשר לדיו 'לזלוג' לתוכו, ויוצר טקסט צפוף. העיניים שלנו יוצרות את האפקט הזה גם במסכים, בניסיון למלא את החלל.
גופן דק על רקע כהה יוצר אפקט קלאוסטרופובי.
קריאות לעומת בהירות. במהלך שיעור ה-Lab הזה נתייחס לקריאות של הטקסט. המדד 'קריאות' בודק עד כמה קל לראות את הטקסט, והמדד 'מובנות' בודק עד כמה קל להבין אותו.
4. ניגודיות של צבעים
קיימות הנחיות נגישות כדי לספק למעצבים ולמפתחים רשימת משימות עקבית שמבוססת על מומחים, כדי לוודא שאנחנו פועלים לפי השיטות המומלצות ליצירת מוצרים כוללים. תקן WCAG הוא התקן הרגיל שאליו מתייחסים בשיעור ה-Lab הזה.
ניגודיות הצבע היא ההבדל בין הבהירות של אלמנטים בחזית ובאלמנטים ברקע, והיא מוצגת בפורמט של יחס. הקריטריון הזה של היחס מקבל ציונים. מדידת הניגודיות בין הטקסט בלחצן לבין הרקע שלו יכולה לעזור לקבוע אם הטקסט יהיה קריא.
דוגמה לניגודיות צבעים לא מספקת.
ההנחיות לגבי ניגודיות הצבעים מחולקות לטקסט ולרכיבים שאינם טקסט, ולכל אחת מהן יש קבוצה משלה של דרגות.
טקסט
AA | AAA | |
טקסט גדול | 3:1 | 4.5:1 |
טקסט רגיל (גוף) | 4.5:1 | 7:1 |
תוכן שאינו טקסט
AA | |
רכיבים לא טקסטואליים (רכיבים גרפיים) | 3:1 |
ננסה לבדוק את הניגודיות ונראה איך אפשר לתקן אותה באופן ידני.
- ב-Figma, מחפשים את הצבעים ברכיבי ממשק המשתמש. הטקסט הגדול (#C0BEC5) מופיע על רקע בצבע (#F5F5FF). אם מזינים את הצבעים האלה כצבע חזית וצבע רקע בכלי לבדיקת ניגודיות באינטרנט, רואים שהם לא עומדים באף אחד מהדירוגים.
- הטקסט בהיר מדי ביחס לצבע הרקע. עדיין בודק הניגודיות באינטרנט, משנים את צבע החזית באמצעות בוחר הצבעים לצבע כהה יותר עד שהניגודיות עוברת את הסף של AAA.
- חוזרים ל-Figma ומחילים את הצבע החדש שעבר את הבדיקה על הטקסט הגדול.
- פועלים באותו אופן לגבי טקסט הגוף וכפתורים, ומוודאים שבודקים את צבע הטקסט וצבע הרקע של כל אחד מהם.
- ,משתמשים בתוצאה שמופיעה בקטע Graphical Objects and User Interface Components כדי להחיל את אותו תהליך על הסמלים**.**
- מעבירים את הצבע החדש ל-Figma לכל רכיב. עכשיו כל הרכיבים צריכים לעבור את דירוגי הניגודיות.
דוגמה עם ניגודיות צבעים שעומדת בדרישות.
התהליך הזה כנראה נראה ארוך, והתוצאות עשויות ליצור לוח צבעים פחות הרמוני. כאן הכלים יכולים לעזור.
5. מבוסס על בהירות
מערכת הצבעים הדינמית החדשה של Material Design מבוססת על בהירות ולא על גוון. כלומר, אם נסיר את הגוון ואת הכרומה, נוכל לראות את הניגודיות באמצעות גוונים.
כשמחלצים צבע, מתקבלים 5 צבעי מפתח שונים שמהם נוצרות פלטות טונליות. פלטת גוונים מורכבת מ-13 גוונים, כולל לבן ושחור. ערך הגוון 100 שווה לרעיון של אור בעוצמה המקסימלית, והתוצאה היא לבן. כל ערך של גוון בין 0 ל-100 מבטא את כמות האור שקיימת בצבע.
מערכת לוחות הצבעים היא מרכזית להנגשת כל ערכת צבעים כברירת מחדל.
שילוב צבעים על סמך טונאליות, ולא על סמך ערך הקסדצימלי או גוון, הוא אחת מהמערכות העיקריות שמאפשרות גישה לכל פלט צבעוני. מוצרים שמשתמשים בצבע דינמי יעמדו בדרישות, כי השילובים האלגוריתמיים שמשתמש יכול לראות מתוכננים כך שיעמדו בתקני הנגישות.
רכיבים עם בהירות דומה לא מספקים ניגודיות מתאימה לקריאות, בעוד שרכיבים עם ערכי בהירות שונים קלים יותר להבחנה.
הצבע הדינמי של Material You מותאם לפעולה בהקשרים לא צפויים. כדי לנהל יחסי ניגודיות בהקשרים שונים של צפייה, רמות הבהירות הן המאפיין העיקרי שמאפשר לשלב צבעים בהצלחה גם בלי שצוות המוצר יבדוק כל שילוב צבעים ספציפי.
6. יצירת עיצוב נגיש
כלי יצירת העיצוב יוצר טוקנים של Material Design כסגנונות Figma, ומאפשר לכם לראות את הצבע הדינמי וליצור עיצוב בהתאמה אישית. הפעולה הזו מתבצעת בהתאם למערכת הצבעים של Material 3, כדי לוודא שנוצרים צבעים נגישים בערכת הצבעים.
- בחלון הקופץ של הפלאגין, לוחצים על התאמה אישית. הפעולה הזו מעבירה את העיצוב לעיצוב מותאם אישית. עיצוב Material כבר נוצר, אבל אתם יכולים גם ליצור עיצוב חדש אם אתם רוצים. מידע נוסף זמין במאמר בנושא הצגה חזותית של צבעים דינמיים.
- לאחר מכן, מגדירים צבע למקש הראשי. הצבע הראשי יכול להיות הצבע העיקרי של המותג או הצבע המשני העיקרי שבו אתם משתמשים הכי הרבה. לוחצים על הצבע עם התווית ראשי כדי לפתוח את בוחר הצבעים ולבחור צבע. הצבע הראשי משמש כצבע המקור, בדומה לצבע המקור בהגדרה הדינמית.
הוספת צבעים ל-MTB.
- שאר צבעי המקשים מתעדכנים בהתאם לצבע הראשי. כלומר, אין צורך להוסיף צבעים נוספים אם לא צריך אותם. אפשר גם להוסיף צבע משני וצבע שלישוני.
- בסכימת הצבעים מוצגים צבעי המפתח שפוענחו מצבעי הקלט, פלטות הגוונים שנוצרו וערכות הצבעים שנוצרו עם תפקידי הצבעים. אפשר לבחור גם ערכת צבעים בהירה וגם ערכת צבעים כהה.
- בשיעור ה-Lab הזה יש דוגמה לממשק משתמש שמוצגת בו ערכת הצבעים שהוחלה. כשמרכיב ממשק המשתמש של האפליקציה מסומן, לוחצים על החלפה בפלאגין.
ערכת צבעים עם מוקאפ מחובר.
במקרה של התרגילים האלה, הכלי Material Theme Builder כבר יצר את האסימונים הנדרשים בקובץ Figma.
7. בדיקת הניגודיות באמצעות הכלי ליצירת עיצובים של Material
מדהים, אבל ברור לנו שתרצו לעדכן חלק מהסגנונות האלה בצבעים שונים באופן ידני. כדי לעזור לכם לקבל את ההחלטות האלה, הכלי Material Theme Builder כולל בדיקת ניגודיות מובנית לצבעים של ערכת הנושא.
- מכיוון שהטוקנים נוצרים כסגנונות, אפשר גם להגדיר את הערך של הצבע שנוצר. בסגנונות של Figma, מרחיבים את התפריט הנפתח של הצבע הראשי של העיצוב הנוכחי ובוחרים בסמל 'עריכת סגנון' בצד שמאל.
- מעדכנים את הצבע הראשי במאפיינים. הדבר משתקף בפלט הצבעוני ובממשק המשתמש של האפליקציה. הצבע הזה לא נוצר על ידי אלגוריתם הצבעים, ולכן אנחנו לא יכולים להבטיח את הנגישות שלו.
- בתפריט התוסף, לוחצים על Check Contrast (בדיקת הניגודיות) ואז פותחים מחדש את חלון העריכה של הסגנון הראשי. הכלי בודק את הניגודיות ומציג את דירוג הניגודיות.
ניגודיות בתיבת הדו-שיח של סגנון Figma.
8. מזל טוב
מעולה! הנגישות צריכה להיות חלק חשוב בתהליך שלכם, ועם Material Design ו-Material Theme Builder, זה אפילו יותר קל.
אם יש לך שאלות, אפשר לפנות אלינו בכל שלב באמצעות @MaterialDesign בטוויטר.
בקרוב יפורסמו עוד תכנים ומדריכים בנושא עיצוב בכתובת youtube.com/MaterialDesign