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

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

20 עקרונות בסיסיים של עיצוב החומרים

העיצוב החומרי הוא קבוצה של עקרונות והנחיות המנחים את העיצוב של ממשקי משתמש מודרניים ואלגנטיים (IU). שהושק על ידי גוגל בשנת 2014, שפה חזותית זו שמה שמטרתה ליצור ממשקים קוהרנטיים והרמוניים בכל המכשירים, ללא קשר למערכת ההפעלה או לממשק המשמש.

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

מה העיצוב החומרי ?

זה מה ?

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

העיצוב החומרי כולל אפוא הנחיות לכל דבר:

• הרוחב
• מְהִירוּת
• הצל

• הטיפוגרפיה
• סורגים
• מֶרחָב
• הצבע
• הסולם
• הַדמָיָה

באופן זה, למשתמשים יש רושם להיות בקשר עם אלמנטים פיזיים של העולם האמיתי.

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

מדוע לבחור בעיצוב החומרי ?

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

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

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

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

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

עקרון 1: הכירו את משאבי המפתח

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

הוא מתעדכן ברציפות ומכיל את כל הפרטים המלאים והנחוצים, לעיצוב עיצובי חומרים.

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

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

עקרון 2: דע איזה “חומר” הוא בעיצוב החומרי

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

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

עקרון 3: השתמש בצללים כדי להגדיר היררכיות חזותיות

הכלים העיקריים לעיצוב החומרים הם:

• קצוות
• משטחים
• תְאוּרָה
• צללים מציאותיים

לדוגמה, הצללים עוזרים לך לתעדף את האלמנטים השונים, על מנת לקבל עיצוב מלא.

עקרון 4: השתמש בצבעים בהירים

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

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

עקרון 5: אל תזניח צבע ראשוני וצבע מבטא

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

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

• השדות
• קופסאות
• הרקע
• גופנים וכו ‘.

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

עקרון 6: השתמש היטב בחללים לבנים

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

אז אל תהססו:

• השתמש בטיפוגרפיה גדולה לכותרות עיקריות
• הוסף הרבה חללים לבנים
• שמור מספיק שטח ריק בעיצוב הגלובלי שלך.

עקרון 7: עקוב אחר מגמת התמונות החדשה לקצה

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

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

עקרון 8: הכל חייב להיות מגיב

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

במקרה זה, העיצוב חייב להיות מגיב. למרבה המזל, בזכות מסגרות מתקדמות, מחצית מהעבודה שלך כבר נעשתה. כתוצאה מכך, יצירת עיצוב תגובתי לא תהיה משימה קשה עבורך.

עקרון 9: מידות

באינטרנט ציר ה- Z משמש לסופרפוזיציה ולא לצורך הסיכוי. מצד שני, עולם התלת מימד מבוסס על ציר Y.

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

עקרון 10: זכור, ההצלחה היא בפירוט

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

עקרון 11: לתנועה חייבת להיות משמעות

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

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

1. היה אינפורמטיבי: זה חייב להיות ידוע למשתמשים היכן ומתי הפעולה הייתה זמינה.
2. עזרו לרכז ולהדריך את המשתמשים לחלקים החשובים ביותר בדף.
3. היה אקספרסיבי והוסף מעט אישיות ודינמיות לממשק.

עקרון 12: התנועה חייבת להיות אותנטית

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

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

עקרון 13: תאוצה והאטה בתנועות

עליכם להציע מעבר ברור ומעשי למשתמשים. תהליך התנועה חייב להיות סביר ומציאותי, מכיוון שהתכנון החומרי מכוון לרבייה של תופעות בעולם האמיתי.

מעצבים חייבים למצוא את הזמן הטוב ביותר, עבור כל תנועת אובייקטים.

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

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

עקרון 14: נצל את אנימציות האייקונים

לפעמים ניתן ליצור סמלים עם כפתורי הקשר עם אפקט גילוי מעגלי.

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

עקרון 15: צור תזמונים שונים לתנועות שונות

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

מצד שני, הציגו את כל האלמנטים של הדף בו זמנית מבלבלים משתמשים, מכיוון שהם לא יודעים לאן להסתכל.

עיצוב חומרים, ממשק משתמש על פי גוגל !

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

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

מה העיצוב החומרי ?

השם “עיצוב חומרים” תואם לסט של כללי עיצוב מוצע על ידי גוגל. זה מתורגם לפעמים על ידי “עיצוב חומרים” או “עיצוב קונטקסטואלי”. זה היה קודם כל עיצוב המיועד ליישומים ניידים (תחילה ניידים). לאחר מכן הוא הפך לאחד המגמות העיקריות בעיצוב הממשק. הגישה של גוגל נזכרת ב- עיצוב שטוח (או עיצוב שטוח): מינימליזם, צורות גיאומטריות וצבעוניות, ללא מיותר (שלא כמו סקאומורפיזם). אבל במקרה זה, זהו עיצוב שטוח … עם עובי והקלה. אכן, הנה המאפיינים העיקריים:

• א מֵטָפוֹרָה נייר ודיו מציוד דיגיטלי.
• עיצוב נועז ו טבלה.
• יצירת תנועות כדי לשפר את הקונסילנס ואת ה- UX. פעולות המשתמש גורמות למיקרו-אינטראקציות משמעותיות.

ספריית הפולימר

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

עיין בהצהרה זו בצורה של “מניפסט”, שנמצא במבוא אתר ההתייחסות החומרי.IO:

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

תכנון אינטרנט על פי גוגל

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

• אינטואיטיבי עבור כל המשתמשים (כולל לא מנוסים)
• מתאים לכל התומכים (מחשב, טאבלט, סמארטפון וכו ‘)
• אינטראקטיבי תודה לאנימציות דינמיות.
• הוֹמוֹגֵנִי בין כל הממשקים

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

עיצוב מחדש של גוגל

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

לראות את הסרטון הזה נותן לנו מושג טוב לחשיבות של נשיאת “חזון” לביצוע פרויקט זה: עיצוב מחדש של גוגל.

מדוע העיצוב החומרי ?

גלוי בגרסה 5.0 של אנדרואיד, העיצוב החומרי הוצג לראשונה ב- 25 ביוני 2014 על ידי Matias Duther, מנהל חווית המשתמש של אנדרואיד ב- Google. זה היה כחלק מכנס הקלט/פלט של גוגל. עם אמנת העיצוב החדשה הזו, גוגל יצרה משלה שפה חזותית, ניתן לזהות כל השירות או המוצר, מיישומים ניידים לאובייקטים מחוברים.

Matias Duarte הציג את המטאפורה לנייר (אנדרואיד / חומר) בשנת 2014 בשנת 2014).

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

בעד או נגד העיצוב החומרי ?

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

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

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

איך זה עובד ? יישום עם אנדרואיד

עלינו לזכור שמדובר ב”אלמנטים חומריים “. לפיכך, אי אפשר לחצות אלמנט. רק הרכיב שנפגע המשתמש יגיב. בעיצוב החומרי,הסביבה היא תלת מימד. לכל אובייקט, או “חומר”, יש 3 קואורדינטות: x, y, z. ציר ה- Z נוגע לגובה האובייקט. אנו יכולים להחליט על גובה האובייקט, על מידותיו והצללים הפגומים, אך העובי נשאר זה של דף נייר. האחרון לא יכול להתכופף. מצד שני, הוא נע על כל הצירים.

אנדרואיד מספקת שלושה נושאים (נושא חומר כהה או בהיר, נושא חומר בהיר עם ActionBar Dark) שיושם ישירות ביישום על ידי שינוי, אם תרצה, חלק מהתכונות. ה בידור החל על אובייקטים/אלמנטים של הממשק הם שניים: האנימציה Tween (למעברים, למשל על ידי סיבוב על התמונה) ואנימציית המסגרת (תצוגה של מספר תמונות). העומס מאפשר לך לטעון אותם ואת ההתחלה של הפעלתם/השקתם.

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

הסברים תיאורטיים – המטאפורה של נייר אינטליגנטי שמתעורר לחיים ומתקיימת עם המשתמש – עשויה להיראות מעורפלת. אך שימו לב לממשקים מאפשרים באופן קונקרטי להבין את המושג גוגל.

ראו את המקורות על המועמדים (סיפורים.uplabs.com)

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

סמלי עיצוב חומרים

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

קרא מחדש את המאמרים שלנו לנושא זה:

עיין במדריך GitHub לשימוש בסמלים אלה בסביבות שונות.

סמלי חומר אחרים (להורדה כאן)

אתה יכול להוריד כאן סמלי עיצוב חומרים רבים

מקור נוסף לסמלי עיצוב חומרים להורדה כאן

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

כמה מקורות והשראות

• ההתייחסות לעיצוב החומרים: חומר.io
  • תְנוּעָה
  • סִגְנוֹן
  • מַעֲרָך
  • רְכִיב
  • דפוסים
  • צמיחה ותקשורת
  • שְׁמִישׁוּת
  • פלטפורמות
  • באתר העיצוב של גוגל תוכלו למצוא מחקרי מקרה ומדריכים מעשיים (משאבים רבים ואפשרות להירשם לניוזלטר עשיר מאוד)

  סיכום

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

  • עיצוב חומרי גוגל, פורמליזציה עיצובית
  • מהו עיצוב שירות ?
  • מהי חשיבה עיצובית ?
  • מה הקשר ?
  • מהו עיצוב שטוח ?
  • מה זה הסקאומורפיזם ?
  • הגדרת עיצוב רגשי, מקום הרגשות בעיצוב

  ראה את השירותים שלנו:

  • ההדרכה שלנו לעיצוב עיצוב מערכות
  • אימוני עיצוב חשיבה ביומיים שלנו.