דפוסים בממשק המשתמש

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

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

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

ניווט

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

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

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

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

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

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

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

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

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

קרוסלות

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

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

במסכים צרים, צריך להציג פריטים בשורה באמצעות Flexbox. שורת הפריטים תתרחב מעבר לקצה המסך. אפשר להשתמש ב-overflow-x: auto כדי לאפשר החלקה אופקית.

@media (max-width: 50em) {
  .cards {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: inline mandatory;
    scroll-behavior: smooth;
  }
  .cards .card {
    flex-shrink: 0;
    flex-basis: 15em;
    scroll-snap-align: start;
  }
}

הערה: הגרסה הלוגית של overflow-x היא overflow-inline שמתאימה יותר לערך של scroll-snap-type. הדוגמה הזו משתמשת בגרסה הפיזית כדי לקבל תמיכה טובה יותר בדפדפנים שונים.

המאפיינים של scroll-snap מבטיחים שאפשר להחליק את הפריטים בצורה חלקה. בזכות scroll-snap-type: inline mandatory הפריטים נצמדים למקומם.

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

@media (min-width: 50em) {
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
  }
}

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

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

שוב, המאפיינים של scroll-snap מבטיחים שהאינטראקציה תהיה חלקה. בנוסף, כדאי לשים לב לכך ש על התמונות בקרוסלה loading="lazy" הוחלו. במקרה כזה, התמונות לא נמצאות בחלק הנגלל, אלא הן מופיעות מהקצה

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

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

טבלאות נתונים

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

אפשר להחיל את תבנית האפשרויות הנוספות על טבלאות. בדוגמה הזו, הטבלה מוקפת ב-div עם מחלקה של table-container.

.table-container {
  max-inline-size: 100%;
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
  scroll-behavior: smooth;
}
.table-container th, 
.table-container td {
  scroll-snap-align: start;
  padding: var(--metric-box-spacing);
}

הנחיות

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

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

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

למידע נוסף על תבניות של רכיבי פריסה וממשק משתמש, אפשר לעיין בקטע תבניות ב-web.dev.

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