דף זה תורגם על ידי Cloud Translation API.

פריסות

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

המיטב

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

עקרונות

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

עיצוב למסכים גדולים

מאז הפופולריות של HDTV, טלוויזיות מלבניות עם יחס גובה-רוחב של 16:9 הפכו לנורמה. בעבר יוצרו טלוויזיות בצורת ריבוע, הידועות כיחס גובה-רוחב של 4:3 או 1.33 על 1.

עיצוב בפלטפורמת Android

במהלך העיצוב, כדאי להשתמש ב-dp כדי להציג אלמנטים בצורה אחידה במסכים עם דחיסות שונה, כמו בכל מכשיר אחר המבוסס על Android. עצב תמיד ברזולוציית MDPI בגודל 960px * 540px.

ב-MDPI 1px = 1dp.

הנכסים צריכים להיות באיכות 1080p. כך מערכת Android תוכל להוריד את רכיבי הפריסה ל-720p במקרה הצורך.

הקפדה על חשיפה ובטיחות חריגות

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

מילוי המסך המלא

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

אופטימיזציה באמצעות צירים

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

פריסה

גודל המסך של הטלוויזיה שונה ממכשיר למכשיר. כיוון שבטלוויזיה מודרנית יש יחס גובה-רוחב של 16:9, מומלץ לעצב את האפליקציה עם גודל מסך של 960px x 540px. כך אפשר להבטיח שכל הרכיבים שונתה באופן פרופורציונלי למסכי HD או 4K.

פריסת רשת

שוליים רחבים

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

960 * ~5% = 48dp
540 * ~5% = 27dp round off to 24dp

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

שוליים רחבים

עמודות ומרזבים

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

מומלץ להשתמש ב-12 עמודות ברוחב 52dp עם רווח של 20dp ביניהן. צריך להיות שטח בגודל של 58dp משני הצדדים ו-4dp של פורמט אנכי ריווח בין שורות.

עמודות מרזבים

דפוסי פריסה

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

פריסת מקבץ אופקית

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

פריסת מקבץ אופקית

פריסת ערימה אנכית

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

פריסת ערימה אנכית

פריסת רשת

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

פריסת רשת

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

מבני פריסה

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

פריסת חלונית יחידה

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

פריסת שתי חלוניות

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

עומס יתר קוגניטיבי

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

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

מה מותר לעשות

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

מה אסור לעשות

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

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

מה מותר לעשות

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

מה אסור לעשות

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

תבניות פריסה

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

דפדוף

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

שכבת-על שמאלית

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

שכבת-על ימנית

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

שכבת-על מרכזית

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

שכבת-על תחתונה

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

פעולות

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