תנועה

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

הנחיות במבט חטוף (TL;DR):

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

עקרונות התנועה

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

כַּסֶפֶת

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

גיף עיניים

אִינפוֹרמָטִיבִי

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

גיף אינפורמטיבי

גָמִישׁ

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

גיף מסך גמיש

דפוסי תנועה

כדי לתמוך בחוויית משתמש עקבית בכל האפליקציות, Android Automotive מספק המלצות לדפוסי תנועה ספציפיים לשימוש במצבים הבאים:

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

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


מעבר בין תצוגות באותה רמה

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

דוגמה למעבר עמיתים
עיוות מהיר מעביר את המשתמש מאפליקציית ניווט לאפליקציית מדיה וחזרה ב-Android Automotive

דוּגמָה

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

מעבר לתצוגת פרטים

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

המעבר בין הורה לילד
ממסך אב, אלמנט הילד מתרומם ומתרחב במקומו

דוּגמָה

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

הרחבת פעולה קיימת

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

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

סמל הסבר
מֶשֶׁך
הנחיות לעיצוב חומרי (Material Design) לגבי משך הזמן שצריך לקחת למעברים
שכבת פעולה משנית
כאן, הפעולה המשנית עולה מהפעולה העיקרית על גבי שכבה, בעוד שהפעולה העיקרית נשארת גלויה חלקית מאחורי הבד.

דוּגמָה

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

מזעור והרחבה של פעולה

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

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

סמל הסבר
מֶשֶׁך
הנחיות לעיצוב חומרי (Material Design) לגבי משך הזמן שצריך לקחת למעברים
הרחבת מסך ממוזער
הפעולה הממוזערת מתרחבת למסך מלא כשהיא דוהה מעל הפעולה הנוכחית

דוּגמָה

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

שיבוש פעולה

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

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

דוּגמָה

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