إنشاء مكون زر الإجراء العائم (FAB)

نظرة عامة أساسية حول كيفية إنشاء مكونات FAB متوافقة مع الألوان وسريعة الاستجابة ويمكن الوصول إليها.

آدم أرجيل

في هذه المشاركة، أود أن أشارك معك أفكاري حول كيفية إنشاء مكونات FAB متوافقة مع الألوان ومتجاوبة ويمكن الوصول إليها. جرِّب العرض التوضيحي واطّلع على المصدر.

في ما يلي إصدار YouTube من هذه المشاركة إذا كنت تفضّل الفيديوهات:

نظرة عامة

تعد FAB أكثر شيوعًا على الأجهزة المحمولة من سطح المكتب، ولكنها سائدة في كلا السيناريوهين. تحافظ على الإجراءات الأساسية في العرض، مما يجعلها سهلة الاستخدام وفي كل مكان. وقد اشتهر هذا الأسلوب في تجربة المستخدم من خلال Material UI ويمكن العثور على اقتراحاته بشأن الاستخدام والموضع هنا.

العناصر والأنماط

تتضمن رموز HTML لعناصر التحكم هذه عنصر حاوية ومجموعة من الأزرار أو أكثر. تضع الحاوية FABs داخل إطار العرض وتدير فجوة بين الأزرار. يمكن أن تكون الأزرار صغيرة أو افتراضية، مما يعطي بعض التنوع اللطيف بين الإجراءات الأساسية والثانوية.

حاوية FAB

يمكن أن يكون هذا العنصر <div> عاديًا، ولكن دعونا نفضّله على المستخدمين المبصرين ونضع علامة عليه باستخدام بعض السمات المفيدة لتوضيح الغرض من هذه الحاوية ومحتواها.

ترميز FABs

ابدأ بفئة .fabs لإنشاء صفحات الأنماط المتتالية (CSS) بهدف جذب اهتمام المستخدمين، ثم أضِف الترميزَين role="group" وaria-label ليصبحا عبارة عن حاوية عامة، ولكنهما مسمّىان وهادفان.

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

نمط FAB

ولكي تكون إجراءات 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> الخيار الصحيح. سنبدأ بها كقاعدة لأنها تأتي مع الماوس واللمس وتجربة المستخدم الرائعة. وأهم جوانب هذا الترميز هو إخفاء الرمز عن مستخدمي قارئ الشاشة باستخدام 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 المصغر

يكون 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 هو وضع ضمن تدفق لوحة المفاتيح للصفحة. يحتوي هذا العرض التوضيحي فقط على FABs، ولا يوجد شيء للتنافس معه من حيث ترتيب لوحة المفاتيح وتدفقها، مما يعني أنه ليست لديه فرصة لإظهار تدفق لوحة مفاتيح ذي معنى. في سيناريو توجد فيه عناصر تنافس على التركيز، أقترح التفكير بعمق في المكان في هذا التدفق الذي ينبغي أن يجد المستخدم نفسه فيه يدخل في تدفق زر 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);
    }
  }
}

ملاحظة: تعد دالة تغيير السرعة --ease-squish-3 جزءًا من ميزة Open Props، ومسؤولة عن تأثير الارتداد المرن في التدوير. يمكنك العثور على المزيد من العناصر المشابهة على الموقع الإلكتروني لمستندات Open Props.

الخلاصة

الآن بعد أن عرفت كيف فعلت ذلك، كيف يمكنك‽ 🙂

دعونا ننويع أساليبنا ونتعلم جميع طرق الإنشاء على الويب.

يمكنك إنشاء عرض توضيحي وروابط تغريدات لي وسنضيفها إلى قسم الريمكسات في المنتدى أدناه.

ريمكسات من المنتدى

لا يتوفّر أي محتوى بعد.

المراجِع

• رمز المصدر على جيت هب