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

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

Adam Argyle

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

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

סקירה כללית

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

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

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

מאגר כפתור פעולה צף

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

תגי עיצוב של כפתורי פעולה צפים

מתחילים עם מחלקה .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

הרכיב <button> הוא הבחירה הנכונה. נתחיל עם זה כבסיס כי הוא מספק חוויית משתמש מצוינת עם עכבר, מסך מגע ומקלדת. ההיבט הכי חשוב בתגי העיצוב האלה הוא להסתיר את הסמל ממשתמשים בקורא מסך באמצעות 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 {
  --_size: 2rem;

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

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

.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;
}

כפתור פעולה צף קטן

המטרה של הקטע הזה היא ליצור וריאציה ללחצן ה-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>

סגנון של כפתור פעולה צף קטן

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

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

נגישות

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

אחרי שהמשתמש מתמקד במאגר של הלחצן הראשי, אנחנו כבר מוסיפים את התוכן של התגים role="group" ו-aria-label="floating action buttons", שמספקים למשתמשים בקורא המסך מידע על התוכן שהם מתמקדים בו. מבחינה אסטרטגית, מיקמתי את לחצן ה-FAB שמוגדר כברירת מחדל ראשון, כדי שהמשתמשים ימצאו את הפעולה העיקרית קודם. I then use flex-direction: column-reverse; to visually order the primary button on the bottom, close to the users fingers for easy access. זהו שיפור משמעותי, כי כפתור ברירת המחדל בולט מבחינה ויזואלית והוא גם הראשון עבור משתמשים במקלדת, כך שחוויית השימוש שלהם דומה מאוד.

לבסוף, אל תשכחו להסתיר את הסמלים ממשתמשים בקוראי מסך, ולוודא שאתם מספקים להם תווית ללחצן כדי שלא יתקשו להבין מה הוא עושה. הפעולה הזו כבר בוצעה ב-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