הקו החדש שהציגה גוגל בכנס I/O 2014 לא נוגע רק לעיצוב או לעקרונות ושיפורים לחוויית המשתמש. מה שמרגש בו באמת הוא מסמך ההנחיות שמצורף אליו. המסמך נותן למעצבים, מאפיינים ומתכנתים את היכולת לתקשר זה עם זה, בשפה אחת אחידה, שכל מטרתה היא חוויית משתמש.
החשיפה המרגשת של גוגל בכנס I/O האחרון הביאה לעולם שפה עיצובית חדשה, שמתאימה למגוון רחב של ממשקים. לצד הנראות החדשה מגיעים גם מסמכי הנחיות מפורטים ופשוטים להבנה עבור אנשי המקצוע. השפה הפשוטה שבה כתוב המסמך מאפשר תקשורת יעילה יותר בין אנשי ה-UX והעיצוב לאנשי הפיתוח, ללא שימוש בז'רגון מקצועי מורכב. היעד הסופי הוא חוויית שימוש מוצלחת ואחידה עבור המשתמשים בכל הפלטפורמות, ביניהן גם שעונים חכמים, טלוויזיות ואפילו מכוניות.
גוגל מסבירים את עקרונות השימוש הנכון בתנועה, צבעים, טיפוגרפיה ודימוי תכונות החומר. מקור: גוגל
עד כה ממשקי אנדרואיד היו חסרים קו עיצובי רציף והחוויה הסופית הייתה מקוטעת. הניסיון הנוכחי של גוגל הוא צעד חסר תקדים. הוא מעמיד את חוויית המשתמש במרכז ונותן כלים מעשיים ליישום. זה ניסיון מבורך שבינתיים זוכה לתגובות חמות.
סקאומורפיזם של תכונות
הקו העיצובי עצמו הוא חדשני ופשוט – המשך ישיר למגמה שהנהיגה גוגל בשנים האחרונות, בה קריאייטיב ו-UX מקבלים מקום בקדמת הבמה. המגמה הזו באה לתקן שנים של התמקדות ב"יעיל" וב"שימושי". גוגל מספקים למפתחים הנחיות ברורות ודגשים לבחירת צבעים וטיפוגרפיה ומדגישים את חשיבות התנועה והאנימציות בממשק.
המושג אותו מכניסה גוגל ללקסיקון שלנו הוא Material Design. המשמעות ב"עיצוב חומרי" היא יצירת תרגום של העולם הפיזי לעולם הממשק. לפני שאתם קופצים מהכיסא כדי להזכיר לכולם שהסקאומורפיזם הוא שלג ד – 2011, נגיד שהכוונה אינה יצירת דמיון ויזואלי לעולם המוחשי, אלא תרגום תכונות פיזיות של מוצר מוחשי אל העולם הדיגיטלי.
מאטיאס דוארטה, ראש תחום חוויית המשתמש של אנדרואיד אמר בכנס:
"Our material is grounded in tactile reality, inspired by our study of paper and ink, yet open to imagination and magic".
במילים אחרות, מדריך העיצוב החדש של גוגל מסביר איך להמיר תכונות של חומרים שהמשתמשים מכירים, אל הדיגיטל. זאת, על מנת ליצור ממשקים שפונים להבנה האינטואיטיבית שלנו של 'איך דברים עובדים'.
למי הסמכות להגדיר מה זה עיצוב נכון?
במסמך ההוראות שפרסמו, גוגל מפרטים את מה שהם מכנים- Principles of Good Design. נברנו קצת אחורה, כדי לבדוק מאיפה הגיעה ההשראה ומצאנו מקור הישענות אחד בולט. מסמך עשרת העקרונות לעיצוב טוב של דיטר ראמס הפך כבר מזמן ל"עשרת הדיברות לעיצוב" וניתן בהחלט לראות בו דמיון למסמך של גוגל.
הדמיון בולט במיוחד במתן דגש על העקרונות בהם דוגל ראמס: פונקציונליות לצד אסתטיקה, בהירות ופשטות. העיצוב של מוצרי גוגל, כמו מוצרים רבים אחרים בשוק (כן, כולל אלו של אפל) מושפעים מאוד מעקרונות העיצוב של ראמס. בחירה של ראמס כהשראה לעיצוב החדש היא ללא ספק ניסיון למצב את גוגל כמי שמתווה דרך בעולם העיצוב הדיגיטלי.
עיצוב של דיטר ראמס. מקור: ויקיפדיה
מה קורה שם בתכל'ס?
אחרי כל הפילוסופיה, קפצנו ראש לתוך עקרונות העיצוב שבמסמך והדגשנו בשבילכם כמה קווים מנחים.
- עיצוב שטוח עם עומק
זה אולי נשמע לכם סותר, אבל זה לא. המסמך כולל שימוש בעקרונות העיצוב השטוח (שטחי צבע גדולים, ללא גרדיאנטים, טקסטים נקיים וגדולים). אבל בגוגל נתנו להם פרשנות משלהם. העיקרון של העיצוב החומרי בא לידי ביטוי על ידי הוספת הצללות שנותנות מראה בעל עומק. זה עוזר מאוד לייצר היררכיות בממשק ומשתמשים יכולים להבין בקלות מה 'מקדימה' ומה 'מאחור'.
- מעברים חלקים באמצעות אנימציות
כחלק מהעיצוב החומרי גם אנימציות קיבלו טיפול ועכשיו הן צריכות להגיב כמו חומרים אמתיים. בהדגמות שגוגל הציגו באתר נראה שיש שימוש במוטיבים מסוימים שחוזרים על עצמם. אחד מהם הוא ה"פלאחים" שמתרוממים במגע. השני הוא אפקט "האדווה" שהוא בעל פוטנציאל הרסני להמאיס את עצמו. ימים יגידו מה יעלה בגורלו.
מתוך ההדגמה על אנימציות במעברים. מקור: גוגל
- פונטים
גוגל נשארו עם "רובוטו" (אותו פונט שפותח לפני מספר שנים עבור מכשירי אנדרואיד) עם שינויים קטנים שהפכו אותו למעט יותר מעוגל ורחב. הסיבה לכך היא הרצון שלהם שהפונט יהיה קריא יותר. כך הוא יושפע פחות מהסכנה שישתבש במעבר בין הפלטפורמות השונות.
- טיפוגרפיה
גוגל בחרו לייחד אזור שלם במסמך שמתייחס רק לנושא זה. הם מדגישים בו את החשיבות של טיפוגרפיה בייצור משמעויות בממשק. אחת ההנחיות במסמך, היא ליצור אחידות בכל הנוגע לשימוש בגדלים של טקסט בכותרות, תתי כותרות, טקסט על כפתורים ועוד.
- צבעוניות
אין חידושים של ממש בתחום. כבר לפני מספר שנים עברו גוגל מהצבעים הפשוטים, הילדותיים, אל הצבעים הפסטיליים. המבחן האמתי של הצבעוניות יהיה בשילוב שלה בממשקים השונים.
צבעים פסטליים. מקור: גוגל
נגישות נגישות נגישות
היתרון המשמעותי של המסמך טמון בנגישות שלו. לכל אורכו הוא מנוסח בצורה ברורה ופשוטה. בנוסף, אנימציות GIF משלימות את פערי ההבנה איפה שעוד עולה צורך כזה. דוגמה ניתן לראות בחלק שמדבר על אנימציות במעברים.
הכתיבה הפשוטה של המסמך יחד עם החלוקה הממוקדת לקטגוריות, הופכים אותו לכלי שימושי לכל מי שעוסק בממשקים, כמו מעצבים, אנשי UX ומפתחים. המסמך של גוגל עושה עבודה מצוינת בדרך בה הוא מפשט את ההנחיות לרשימה נהירה של "עשה ואל תעשה".
כתבה מעניינת מאוד וכתובה יפה!
עם טיפים משמעותיים, כן ירבו !