ساخت مولفه دکمه عمل شناور (FAB).

یک نمای کلی از نحوه ساخت اجزای FAB سازگار با رنگ، پاسخگو و قابل دسترس.

Adam Argyle

در این پست می‌خواهم نظرات خود را در مورد نحوه ساخت اجزای FAB سازگار با رنگ، واکنش‌گرا و در دسترس به اشتراک بگذارم. نسخه ی نمایشی را امتحان کنید و منبع را مشاهده کنید !

اگر ویدیو را ترجیح می دهید، در اینجا یک نسخه YouTube از این پست وجود دارد:

بررسی اجمالی

FAB ها در موبایل بیشتر از دسکتاپ رایج هستند، اما در هر دو حالت رایج هستند. آنها اقدامات اولیه را در نظر می گیرند و آنها را راحت و همه جا حاضر می کنند. این سبک تجربه کاربری توسط Material UI معروف شده است و پیشنهادات آنها برای استفاده و قرار دادن را می توانید در اینجا بیابید .

عناصر و سبک ها

HTML برای این کنترل ها شامل یک عنصر ظرف و مجموعه ای از یک یا چند دکمه است. کانتینر FAB ها را در نما قرار می دهد و فاصله بین دکمه ها را مدیریت می کند. دکمه‌ها می‌توانند کوچک یا پیش‌فرض باشند که تنوع خوبی بین عملکردهای اولیه و ثانویه ایجاد می‌کند.

ظرف FAB

این عنصر می‌تواند یک <div> معمولی باشد، اما بیایید به کاربران نابینا لطفی کنیم و آن را با برخی ویژگی‌های مفید برای توضیح هدف و محتوای این ظرف برچسب گذاری کنیم.

نشانه گذاری FABs

با یک کلاس .fabs برای CSS شروع کنید تا برای استایل به آن متصل شود، سپس role="group" و aria-label اضافه کنید تا فقط یک ظرف عمومی نباشد، نامگذاری شده و هدفمند باشد.

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

سبک FABs

برای اینکه 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 انجام می‌شود و فاصله بین دکمه‌های FAB قرار داده شده در ظرف، gap می‌افزاید.

دکمه های FAB

زمان آن است که به برخی از دکمه ها حالت دهید تا به نظر برسند که در بالای همه چیز شناور هستند.

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

ابتدا اجازه دهید دکمه را به یک دکمه گرد با سایه قوی تبدیل کنیم، زیرا اینها اولین ویژگی های تعیین کننده دکمه هستند:

.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

هدف این بخش ایجاد یک نوع برای دکمه FAB است. با کوچک‌تر کردن برخی از FAB‌ها از عملکرد پیش‌فرض، می‌توانیم عملکردی را که کاربر اغلب انجام می‌دهد تبلیغ کنیم.

نشانه گذاری مینی 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> انجام شده است.

انیمیشن

انواع مختلفی از انیمیشن ها را می توان برای بهبود تجربه کاربر اضافه کرد. مانند سایر چالش‌های رابط کاربری گرافیکی، ما چند ویژگی سفارشی را تنظیم خواهیم کرد تا هدف از تجربه حرکت کاهش‌یافته و تجربه حرکت کامل را حفظ کند. به‌طور پیش‌فرض، استایل‌ها فرض می‌کنند که کاربر حرکت کاهش‌یافته را می‌خواهد، سپس با استفاده از پرس‌وجو رسانه 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 را می توان تغییر داد و به کاربر بازخورد خوبی از رابط کاربری ارائه می دهد که تعامل آنها دریافت شده است.

در مرحله بعد، با کمی تنظیم translateY کمی جذابیت بیشتری به حالت :active اضافه کنید، این به دکمه یک افکت فشرده می‌دهد:

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

توجه: تابع easing --ease-squish-3 بخشی از Open Props است و مسئول اثر فنری الاستیک در چرخش است. در وب‌سایت اسناد Open Props موارد بیشتری را مانند آن پیدا کنید.

نتیجه

حالا که می دانید من چگونه این کار را انجام دادم، چگونه این کار را انجام می دهید‽🙂

بیایید رویکردهایمان را متنوع کنیم و همه راه‌های ساخت در وب را بیاموزیم.

یک نسخه نمایشی ایجاد کنید، پیوندها را برای من توییت کنید ، و من آن را به بخش ریمیکس های انجمن در زیر اضافه می کنم!

ریمیکس های انجمن

هنوز چیزی برای دیدن اینجا وجود ندارد.

منابع

• کد منبع در Github