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

نظرة عامة أساسية حول كيفية إنشاء مكونات تطبيقات مصغّرة تفاعلية وملائمة للألوان وسهلة الاستخدام

Adam Argyle

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

إذا كنت تفضّل الفيديو، يمكنك الاطّلاع على نسخة من هذه المشاركة على YouTube:

نظرة عامة

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

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

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

حاوية زر الإجراء الرئيسي

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

ترميز أزرار الإجراءات الرئيسية

ابدأ باستخدام فئة .fabs لكي يتم ربط CSS بها من أجل تحديد أسلوبها، ثم أضِف role="group" وaria-label لكي لا تكون حاوية عامة، بل يكون لها اسم وهدف.

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

نمط أزرار الإجراءات الرئيسية

ولكي تكون أزرار الإجراءات الرئيسية المتنقلة ملائمة، يتم تثبيتها ضمن إطار العرض في جميع الأوقات. هذه حالة استخدام رائعة للموضع fixed. ضمن موضع viewport، اختَرت استخدام رمزَي 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. يؤدي عكس الترتيب المرئي إلى توحيد تجربة المستخدمين الذين لديهم بصيرة ومستخدمي لوحة المفاتيح، لأنّ تصميم الإجراء الأساسي أكبر من buttons المصغرة يشير إلى المستخدمين الذين لديهم بصيرة أنّه إجراء أساسي، ويُركّز مستخدمو لوحة المفاتيح عليه باعتباره العنصر الأول في المصدر.

.fabs {
  …

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

يتمّ تحديد موضع العنصر في المنتصف باستخدام الرمز place-items، ويضيف الرمز gap مسافة بين أيّ buttons buttons 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 الصغير

رمز HTML هو نفسه رمز زر الإجراءات السريعة، ولكننا نضيف فئة "‎.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 الافتراضي أولاً، بحيث يجد المستخدمون الإجراء الأساسي أولاً. بعد ذلك، أستخدم flex-direction: column-reverse; لترتيب الزر الأساسي visually في أسفل الشاشة بالقرب من أصابع المستخدمين للوصول إليه بسهولة. وهذا أمر جيد، لأنّ الزر التلقائي بارز بشكل مرئي وهو أيضًا الزر الأول لمستخدمي keyboard ، ما يمنحك تجربة مشابهة جدًا.

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