בניית רכיב של לחצן פעולה צף (FAB)

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

Adam Argyle

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

אם אתם מעדיפים סרטון, הנה גרסה של הפוסט הזה ב-YouTube:

סקירה כללית

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

רכיבים וסגנונות

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

מאגר FAB

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

תגי עיצוב של FAB

מתחילים עם הכיתה .fabs כדי לאפשר ל-CSS להתחבר אליה לצורך סגנון, ואז מוסיפים את role="group" ו-aria-label כדי שהיא לא תהיה רק מאגר כללי, אלא תהיה לה שם ומטרה.

<div class="fabs" role="group" aria-label="Floating action buttons">
  <!-- buttons will go here -->
</div>

סגנון לחצני ה-FAB

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

.fabs {
  --_viewport-margin: 2.5vmin;

  position: fixed;
  z-index: var(--layer-1);

  inset-block: auto var(--_viewport-margin);
  inset-inline: auto var(--_viewport-margin);
}

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

.fabs {
  …

  display: flex;
  flex-direction: column-reverse;
  place-items: center;
  gap: var(--_viewport-margin);
}

כדי למרכז את הרכיבים, משתמשים ב-place-items, ו-gap מוסיף רווח בין לחצני FAB שממוקמים בקונטיינר.

לחצני FAB

עכשיו נוסיף עיצוב לכמה לחצנים כדי שייראו כאילו הם צפים מעל כל השאר.

ברירת מחדל ל-FAB

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

תגי עיצוב של FAB

הרכיב <button> הוא הבחירה הנכונה. נתחיל ב-HTML5 כי הוא מספק חוויית משתמש מעולה עם עכבר, מגע ומקלדת. ההיבט הקריטי ביותר בתגי העיצוב הוא להסתיר את הסמל מפני משתמשים בקורא מסך עם aria-hidden="true" ולהוסיף את טקסט התווית הנדרש לתגי העיצוב של <button>. במקרים כאלה, כשמוסיפים תוויות, אני אוהב להוסיף גם title כדי שמשתמשי עכבר יוכלו לקבל מידע על מה שהסמל רוצה להעביר.

<button data-icon="plus" class="fab" title="Add new action" aria-label="Add new action">
  <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">...</svg>
</button>

סגנון FAB

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

.fab {
  --_size: 2rem;

  padding: calc(var(--_size) / 2);
  border-radius: var(--radius-round);
  aspect-ratio: 1;
  box-shadow: var(--shadow-4);
}

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

.fab {
  …

  /* light button and button hover */
  --_light-bg: var(--pink-6);
  --_light-bg-hover: var(--pink-7);

  /* dark button and button hover */
  --_dark-bg: var(--pink-4);
  --_dark-bg-hover: var(--pink-3);

  /* adaptive variables set to light by default */
  --_bg: var(--_light-bg);

  /* static icon colors set to the adaptive foreground variable */
  --_light-fg: white;
  --_dark-fg: black;
  --_fg: var(--_light-fg);

  /* use the adaptive properties on some styles */
  background: var(--_bg);
  color: var(--_fg);

  &:is(:active, :hover, :focus-visible) {
    --_bg: var(--_light-bg-hover);

    @media (prefers-color-scheme: dark) {
      --_bg: var(--_dark-bg-hover);
    }
  }

  /* if users prefers dark, set adaptive props to dark */
  @media (prefers-color-scheme: dark) {
    --_bg: var(--_dark-bg);
    --_fg: var(--_dark-fg);
  }
}

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

.fab {
  …

  & > svg {
    inline-size: var(--_size);
    block-size: var(--_size);
    stroke-width: 3px;
  }
}

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

.fab {
  -webkit-tap-highlight-color: transparent;
}

Mini FAB

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

תגי עיצוב של Mini FAB

ה-HTML זהה ל-FAB, אבל אנחנו מוסיפים את הכיתה ‎ ".mini" כדי לתת ל-CSS מקום להצמיד את הווריאנט.

<button data-icon="heart" class="fab mini" title="Like action" aria-label="Like action">
  <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">...</svg>
</button>

סגנון FAB קטן

בזכות השימוש במאפיינים מותאמים אישית, השינוי היחיד הנדרש הוא התאמה של המשתנה --_size.

.fab.mini {
  --_size: 1.25rem;
}

נגישות

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

אחרי שהמשתמש התמקד במאגר ה-FAB, הוספנו כבר role="group" ו-aria-label="floating action buttons" שמיידעים את המשתמשים בקורא מסך לגבי התוכן שבו הם התמקדו. מבחינה אסטרטגית, הנחתי את ה-FAB שמוגדר כברירת מחדל קודם, כדי שהמשתמשים ימצאו את הפעולה הראשית קודם. לאחר מכן, משתמשים ב-flex-direction: column-reverse; כדי למקם את הלחצן הראשי בחלק התחתון, קרוב לאצבעות המשתמשים, כדי שיהיה קל לגשת אליו. זוהי תוצאה טובה, כי הלחצן שמוגדר כברירת מחדל בולט מבחינה ויזואלית והוא גם הלחצן הראשון שמופיע למשתמשים שמשתמשים במקלדת, כך שהחוויה שלהם דומה מאוד.

לסיום, אל תשכחו להסתיר את הסמלים מפני משתמשים בקורא המסך, ולהקפיד להוסיף להם תווית עבור הלחצן, כדי שלא תהיה מסתורין. הפעולה הזו בוצעה ב-HTML שכבר קיים ב-aria-hidden="true" ב-<svg> וב-aria-label="Some action" ב-<button>.

Animation

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

אסטרטגיה של תנועה מופחתת עם מאפיינים מותאמים אישית

שלושה מאפיינים מותאמים אישית נוצרים בקוד ה-CSS הבא: --_motion-reduced,‏ --_motion-ok ו---_transition. שני המשתנים הראשונים מכילים את המעברים המתאימים בהתאם להעדפות המשתמש, והמשתנה האחרון --_transition יוגדר לערך --_motion-reduced או לערך --_motion-ok בהתאמה.

.fab {
  /* box-shadow and background-color can safely be transitioned for reduced motion users */
  --_motion-reduced:
    box-shadow .2s var(--ease-3),
    background-color .3s var(--ease-3);

  /* add transform and outline-offset for users ok with motion */
  --_motion-ok:
    var(--_motion-reduced),
    transform .2s var(--ease-3),
    outline-offset 145ms var(--ease-2);

  /* default the transition styles to reduced motion */
  --_transition: var(--_motion-reduced);

  /* set the transition to our adaptive transition custom property*/
  transition: var(--_transition);

  /* if motion is ok, update the adaptive prop to the respective transition prop */
  @media (prefers-reduced-motion: no-preference) {
    --_transition: var(--_motion-ok);
  }
}

הודות למפורט למעלה, אפשר להעביר את השינויים ב-box-shadow, ב-background-color, ב-transform וב-outline-offset, כדי לתת למשתמש משוב נחמד על האינטראקציה שלו.

בשלב הבא, מוסיפים קצת יותר עניין למצב :active על ידי שינוי translateY קצת, כדי שהלחצן ייראה קצת יותר לחוץ:

.fab {
  …

  &:active {
    @media (prefers-reduced-motion: no-preference) {
      transform: translateY(2%);
    }
  }
}

לבסוף, מבצעים את השינויים בסמל ה-SVG בלחצנים:

.fab {
  …

  &[data-icon="plus"]:hover > svg {
    transform: rotateZ(.25turn);
  }

  & > svg {
    @media (prefers-reduced-motion: no-preference) {
      will-change: transform;
      transition: transform .5s var(--ease-squish-3);
    }
  }
}

סיכום

עכשיו, אחרי שסיפרתי לך איך עשיתי את זה, איך היית עושה את זה? 🙂

בואו לגוון את הגישות שלנו ונלמד את כל הדרכים לבניית אתרים באינטרנט.

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

רמיקסים של הקהילה

עדיין אין מה לראות כאן.

משאבים

• קוד מקור ב-GitHub