מגירות לניווט הן רכיבים חיוניים בכל אפליקציה לטלוויזיה, כי הן מאפשרות למשתמשים כדי לגשת לתכונות וליעדים שונים. חלונית הזזה לניווט היא בארכיטקטורת המידע של האפליקציה, ומספקת תמונה ברורה ואינטואיטיבית לנווט באפליקציה.
בניגוד לחלונית ההזזה לניווט בנייד, חלונית ההזזה לניווט פועלת המשתמש יכול לראות גם מצב מורחב וגם מצב מכווץ של הטלוויזיה.
משאבים
| סוג | קישור | סטטוס |
|---|---|---|
| עיצוב | עיצוב של מקור (Figma) | יש גישה |
| הטמעה |
Jetpack Compose (NavigationDrawer)
Jetpack Compose (ModalNavigationDrawer) |
יש גישה |
המיטב
- היעדים מסודרים לפי חשיבות המשתמשים, ולעיתים קרובות היעדים הראשונים והיעדים הקשורים מקובצים יחד.
- נדרשת רכבת ניווט גם בניווט רגיל וגם בניווט מודאלי חלונית הזזה כשמכווצת.
וריאנטים
יש שני סגנונות של חלונית הזזה לניווט:
- חלונית הזזה רגילה לניווט – הרחבה אל ליצור מקום נוסף לניווט, ולדחוף את תוכן הדף הצידה.
- חלונית הזזה לניווט — מופיעה בתור ליצור שכבת-על מעל התוכן של האפליקציה עם קטע מידע שעוזר משפרות את הקריאות כשחלונית ההזזה מורחבת.
חלונית הזזה רגילה לניווט
אנטומיה
- החלק העליון: כולל את הלוגו של האפליקציה. משמש כלחצן להחליף פרופילים או כדי להפעיל פעולת חיפוש. במצב מכווץ, רק הסמל נשאר גלוי במאגר העליון.
- פריט ניווט: כל פריט בתכונות של רכבת הניווט שילוב של סמל וטקסט, שרק הסמל שלו גלוי במצב מכווץ.
- רכבת ניווט: רכבת הניווט היא עמודה מציג 3 עד 7 יעדים של אפליקציות, ומשמש כתפריט הראשי. כל יעד מכיל תווית טקסט וסמל אופציונלי, עם אפשרות של תפריט קיבוץ כדי לספק הקשר טוב יותר.
- החלק התחתון: יכול לכלול לחצני פעולה אחד או שלושה לחצני פעולה, שמתאימות במיוחד לדפים כמו 'הגדרות', 'עזרה' או 'פרופיל'.
התנהגות
- הרחבה של חלונית ההזזה לניווט: כשמרחיבים את חלונית הניווט הרגילה חלונית הזזה שדוחפת את תוכן הדף ומפנה מקום לגרסת הניווט.
- עדכוני ניווט: כשעוברים מפריט ניווט אחד לפריט אחר, מתעדכן באופן אוטומטי ליעד החדש.
חלונית הזזה לניווט
אנטומיה
- החלק העליון: כולל את הלוגו של האפליקציה. משמש כלחצן למעבר פרופילים או כדי להפעיל פעולת חיפוש. במצב מכווץ, רק הסמל יישאר גלוי במאגר העליון.
- פריט ניווט: כל פריט בתכונות של רכבת הניווט שילוב של סמל וטקסט, שבו רק הסמל גלוי למצב המכווץ.
- רכבת הניווט: עמודה מציג שלושה עד שבעה יעדי אפליקציות, ומשמש כתפריט הראשי. כל אחד היעד כולל תווית טקסט וסמל אופציונלי, עם לקיבוץ אפשרויות בתפריט כדי לשפר את ההקשר.
- שרטוט: קל יותר לקרוא את הטקסט של פריט הניווט.
- החלק התחתון: יכול לכלול לחצני פעולה אחד או שלושה לחצני פעולה, שמתאימות במיוחד לדפים כמו 'הגדרות', 'עזרה' או 'פרופיל'.
התנהגות
- הרחבת מגירה: מופיע כשכבת-על מופיע בחלק העליון של התוכן של האפליקציה, עם תצוגה שמשפרת את הקריאות. כאשר חלונית ההזזה מתרחבת.
- עדכוני ניווט: מתרחשים כשהמשתמש בוחר פריט ניווט.
מיסוך
לחלונית ההזזה לניווט של החלון, יש פריט מידע מאחורי חלונית הזזה מבטיחה שהתוכן בחלונית ההזזה יהיה קריא. אפשר להשתמש במשטח הדרגתי או מוצק מאחורי חלונית ההזזה לניווט כדי ליצור כמה וריאציות של ממשק המשתמש.
מיסוך הדרגתי
מיסוך חלק
המפרט
שימוש
אינדיקטור פעיל
האינדיקטור הפעיל הוא סימן ויזואלי שמדגיש את היעד שמוצג בחלונית ההזזה לניווט. האינדיקטור בדרך כלל מיוצג על ידי צורת רקע שנבדלת מבחינה חזותית משאר הפריטים בחלונית ההזזה. האינדיקטור הפעיל עוזר למשתמשים להבין איפה הם נמצאים באפליקציה ובאיזה יעד הם גולשים. חשוב לוודא שהאינדיקטור הפעיל נראה בבירור ושקל יותר להבדיל בין הפריטים האחרים בחלונית ההזזה לניווט.
חוצצים (אופציונלי)
ניתן להשתמש בקווים מפרידים כדי להפריד בין קבוצות של יעדים בחלונית ההזזה לניווט, כדי לארגן טוב יותר. עם זאת, חשוב להשתמש בהן באופן מוגבל, כי יותר מדי מחיצות יכולות ליצור רעש ויזואלי ולהוסיף עומס קוגניטיבי מיותר למשתמשים.
תגים
תגים הם סימנים ויזואליים שאפשר להוסיף לפריטי ניווט כדי לספק מידע נוסף. לדוגמה, ניתן להשתמש בתג כדי לציין את מספר הסרטים החדשים שזמינים באפליקציית סטרימינג. כדאי להשתמש ובצורה מצומצמת ורק במקרה הצורך, כי הם יכולים לגרום לממשק המשתמש להיראות עמוס ולא עמוס. כשמשתמשים בתגים, צריך לוודא הם ברורים וקלים יותר להבנה, להפריע ליכולת של המשתמש לנווט באפליקציה.
התג הורחב
התג כווץ
תוויות
התוויות בחלונית ההזזה לניווט צריכות להיות ברורות ותמציתיות כדי קל יותר לקרוא אותם.
זהירות
מה אסור לעשות
מה אסור לעשות
מה אסור לעשות
חלונית ההזזה לניווט היא אלמנטים בסיסיים שמייצגים את האפליקציה היררכיות, ויש להשתמש בהן כדי להציג רק חמש עד שש רשימות ראשיות יעדי ניווט.
מה מותר לעשות
