פריסות

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

תמונת שער עבור פריסות

המיטב

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

עקרונות

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

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

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

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

עיצוב ל-Android

עיצוב בפלטפורמת 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). מידע על כרטיסים הוא תצוגות מקדימות ופריסות מומלצות של רכיבים.

מבני פריסה

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

דוגמה לפריסה של חלונית יחידה

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

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

דוגמה לפריסה של שתי חלוניות

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

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

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

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

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

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

היררכיה וניווט מהירים

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

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

תבניות פריסה

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

דפדוף

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

דפדוף

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

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

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

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

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

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

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

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

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

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

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

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

פעולות

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

פעולות

פרטי התוכן

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

פרטי התוכן

קומפילציה

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

קומפילציה

תצוגת רשת

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

תצוגת רשת

התראה

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

התראה

עמודות של כרטיסים

פריסת כרטיסים אחת

רוחב הכרטיס — 844dp

פריסת כרטיסים אחת

פריסת 2 כרטיסים

רוחב הכרטיס – 412dp

פריסת 2 כרטיסים

פריסת 3 כרטיסים

רוחב הכרטיס — 268dp

פריסת 3 כרטיסים

פריסת 4 כרטיסים

רוחב הכרטיס — 196dp

פריסת 4 כרטיסים

פריסת 5 כרטיסים

רוחב הכרטיס – 124dp

פריסת 5 כרטיסים