ממשק המשתמש לעיצוב החומרים של גוגל מתחדש עם צבעים חדשים, איקונוגרפיה והתמקדות במגע

click fraud protection

נראה כי התחייבויות חדשות ב-Chromium Gerrit מתייחסות ל-"Material Design 2", שעשוי להיות גרסה חדשה ומשופרת של שפת ה-Material Design של גוגל.

Material Design, שפת העיצוב המאוחדת שהושקה לצד אנדרואיד Lollipop, כוללת פלטות צבע שטוחות ופסטליות, עומק, תאורה רכה ופיזיקה מציאותית. זה נועד לחקות את המישוש של אובייקטים מהעולם האמיתי מבלי להזדקק ל-skeuomorphism; גוגל מתארת ​​את זה כסינתזה של "עקרונות קלאסיים" עם "החדשנות והאפשרות" של הטכנולוגיה.

מאז הופעת הבכורה של Material Design ב-2014, היא התפשטה על פני המערכת האקולוגית של אנדרואיד כמו אש בשדה קוצים - שלא לדבר על אפליקציות גוגל כגון YouTube, Chrome, Gmail, Hangouts ו-Google Calendar. כפתורי פעולה צפים, צבעים נעימים וטכניקות הגבהה זמינים כחלק מה- ספריית רכיבי חומר ב-GitHub (ההמשך לספריית התמיכה בעיצוב של אנדרואיד ול-Material Design Lite ממוקד האינטרנט של גוגל), שמביאה את טוב לאנדרואיד בצורה של תצוגות מותאמות אישית, ולאינטרנט בצורה של חבילות שניתן לייבא ולהשתמש בהן כמו HTML רגיל תגים.

כעת, ערב יום השנה הרביעי של Material Design, נראה שגוגל מכינה את הדור הבא שלה.

בהשראת נייר ודיו אֶסתֵטִי: עיצוב חומרים 2. מידע מעט יקר זמין לציבור על Material Design 2, שאת קיומו חשפנו השבוע בהתחייבויות חדשות ב-Chromium Gerrit. אנחנו לא טוענים שזה א תָקִין היורש למסגרת עיצוב החומרים החדשה ביותר, אך ההתחייבויות מצביעות על שינויים ניכרים, אם כי עדינים, בפלטות הצבעים, באיקונוגרפיה ובהתנהגות מסך המגע.


עיצוב חומר 2 מופיע ב-Chromium Gerrit

בתחילת פברואר, התחייבויות חדשות על Chromium Gerrit הטמיעו את ממשק המשתמש "Material Design 2" בממשק של Chrome tabstrip - הכרטיסיות הניתנות לגרירה המכילות כותרות של דפי אינטרנט, סמלים, וכפתור "סגור כרטיסייה" מעל ל-Chrome שורת הכתובת.

ההתחייבויות אינן דרסטיות, אך מבצעות שינויים במראה הכרטיסיות של כרום. הם מגדילים את גובה רצועת הטאב; לבצע שינויים לא מוגדרים בפריסת התוכן של הכרטיסיות, במיוחד לכותרות ולמחווני התראות; ולהקטין את רוחב מגע הכרטיסייה תוך הגדלת הרוחב הסטנדרטי של הכרטיסייה. הם במפורש אל תעשה שנה את צבעי מחוון התראת הכרטיסיות, צבעי מפריד הכרטיסיות, הלחצן "כרטיסייה חדשה" או כל טיפוגרפיה של כרטיסיות.

אוסף של כרטיסיות Chrome.

באופן חושפני, ההתחייבויות מתייחסות לסמל של לחצן סגירת כרטיסיית "עיצוב חומר 2" ו"קבועי צבע בסיסיים הנדרשים עבור עיצוב חומרי של גוגל 2".

חפירה עמוקה יותר בקוד ה-commit מציגה פלטות צבעים חדשות של "Material Design 2" עבור ערכות נושא של אפור, אדום ואדום-כהה של Chromium, וצבעים חדשים לסרגל הכלים הסטנדרטי של Chrome ולסרגל הכלים האנונימי. השתמשנו בטבלת חיפוש הקסדצימלית כדי ליצור את דוגמיות ה-RGB:

האדום של Material Design 2 הוא מעט כהה יותר מאשר עיצוב החומרים הנוכחי אדום 800 (#C62828) ו אדום 600 (#E53935), בעוד שלגווני האפור החדשים (#3C4043, #5F6368, #BDC1C6, #F1F3F4) יש גוון בהיר יותר וכחלחל. עיצוב החומר כולל אפורים מסורתיים, כאשר R=G=B, ואילו כאן, B>G>R בכל גוון (אבל רק ב-1-4 מתוך 255).

עיצוב חומרי 2 גרסאות תואמות Chrome יכלול גם סרגל כלים בהיר בהרבה מהמבנה הנוכחי - הוא כמעט לבן בהשוואה לערכת הצבעים האפרפרה הנוכחית.

להלן דגם מהיר של איך ייראה סרגל הכלים עם החלת הצבעים החדשים:

לבסוף, ההתחייבות מוסיפה חדש IsTouchOptimizedMaterial() דגל ל MaterialDesignController, שעשוי להתייחס לאלמנטים של Material Design 2 המותאמים למגע. כתבנו בתחילת ינואר על המאמץ של גוגל לשפר את תמיכה במסך המגע של דפדפן האינטרנט Chrome במכשירי Chrome OS, ונראה שזה המשך שלה.

לדוגמה, ה-commit מראה שבמכשירים עם מסך מגע, SetStackedLayout של Chrome יהיה 'תמיד' מופעל.' כברירת מחדל, כאשר אתה פותח הרבה כרטיסיות, הרוחב של הכרטיסיות האחרות מתכווץ כדי להתאים את כרטיסיות חדשות. הפריסה המוערמת של Chrome שומרת על רוחב הכרטיסיות המקוריות ומוסיפה כרטיסיות חדשות מאחוריהן.


חשיבות הצבע בעיצוב חומר

אז מה המשמעות של הצבעים החדשים בהקשר הרחב יותר של עיצוב חומרי?

עיצוב חומרי עוסק יותר מסתם בשכבות, רכיבים ואלמנטים, וכיצד הם מתנהגים אחד ביחס לשני. מרכזי במוטיב העיצוב של גוגל הם נושאים בעלי ניגודיות גבוהה, צבעים בהירים ודגשים בולטים - הם אלו שגורמים לאפליקציות התואמות ל-Material Design לבלוט מהקהל.

גוגל מספקת דוגמה לוחות צבעים נועד "לעבוד טוב ביחד" בין פלטפורמות, ומעודד מפתחים המנצלים את המקור צבע אפליקציה ראשי - הידוע גם כצבע "דומיננטי" - מאוסף של 500 צבעים שונים דוגמיות. (חשבו על "כחול", "ירוק" או "סגול" וצבעים בסיסיים אחרים.) במידת הצורך, הם מוצאים צבע משני מאוסף מורחב של 700 צבעים (צבעים משלימים עבור רכיבי ממשק המשתמש החשובים ביותר, ואנלוגיים עבור רכיבי ממשק משתמש פחות חשובים, וצבע שלישוני מתת-קבוצה של 300).

צבע ממלא תפקיד חשוב בהיררכיית עיצוב החומרים. צבעים בהירים מעידים על חשיבות -- הם שמורים ללחצנים בולטים ולאלמנטים אינטראקטיביים אחרים. צבעים עדינים יותר, לעומת זאת, מוסיפים עניין ויזואלי על ידי הדגשת שדות טקסט, פסי התקדמות, קישורים וחלקים אחרים של ממשק המשתמש.

ממה שאנחנו יודעים על פלטת הצבעים של Material Design 2, לפחות כמה מהדוגמיות ב-"primary 500" של גוגל, כמו Red 600 ו-800, כהות יותר מקודמותיהן Material Design. אבל אחרים, כמו אפור, מקבלים את היחס ההפוך -- הן לדוגמיות האפור והלבן המוצגות בדגם הכרטיסייה של Chrome יש גווני אפור קרים יותר וערכים כחולים גבוהים יותר.


כרגע, זה כל מה שאנחנו באמת יודעים על Material Design 2. אבל ההתחייבויות עשויות להיות סימן לכך שמשהו קורה מאחורי הקלעים, ואם זה נכון, אולי נלמד יותר במוקדם מאשר במאוחר. גוגל צפויה להסיר את אנדרואיד P, הגרסה הגדולה הבאה של אנדרואיד, כבר במרץ, ו-Google I/O 2018 יוצא לדרך ב-8 במאי. שתיהן הן הזדמנויות מצוינות להסיר את המעטפת מ-Material Design 2.

עדכון 2/4/2018: זמן קצר לאחר פרסום המאמר הזה, ההתחייבות הפכה לפרטית, מה שאומר שהיא נועדה להישמר בסוד. אנו נמשיך לבדוק את Chromium Gerrit עבור שינויים, ונעדכן מאמר זה אם נמצא כאלה.