نظرة عامة أساسية حول كيفية إنشاء مكونات تطبيقات مصغّرة تفاعلية وملائمة للألوان وسهلة الاستخدام
في هذه المشاركة، أريد مشاركة أفكاري حول كيفية إنشاء مكونات تطبيقات مصغّرة تفاعلية وسهلة الاستخدام وقابلة للتكيّف مع الألوان. جرِّب الإصدار التمهيدي واطّلِع على ملف المصدر.
إذا كنت تفضّل مشاهدة الفيديوهات، يمكنك الاطّلاع على نسخة من هذه المشاركة على 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);
}
بعد ذلك، لنضيف لونًا. سنستخدم استراتيجية سبق أن استخدمناها في اختبارات واجهة المستخدم الرسومية. أنشئ مجموعة مُسمّاة بوضوح من السمات المخصّصة التي تحتوي بشكل ثابت على paramter الألوان الفاتحة والداكنة، ثمّ سمة مخصّصة تكيفية سيتم ضبطها على متغيرات اللون الفاتح أو الداكن استنادًا إلى الإعدادات المفضّلة للمستخدم في النظام بشأن الألوان:
.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.
بعد أن يركز المستخدم على حاوية التطبيق المصغّر للإجراءات الفورية، أضفنا رمزَي role="group"
وaria-label="floating action buttons"
لإعلام مستخدمي شاشة قراءة المحتوى بمحتوى ما ركزوا عليه. لقد وضعتُ عمدًا زرّ التطبيق المصغّر التلقائي أولاً، لكي يعثر المستخدمون على الإجراء الأساسي أولاً. بعد ذلك،
أستخدم 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);
}
}
}
الخاتمة
الآن بعد أن عرفت كيف فعلت ذلك، كيف ستفعل ذلك؟ 🙂
لننوّع أساليبنا ونتعرّف على جميع الطرق لإنشاء تطبيقات على الويب.
أنشئ عرضًا توضيحيًا وأرسِل إلينا رابطًا على Twitter، وسنضيفه إلى قسم الريمكسات التي أنشأها المستخدمون أدناه.
الريمكسات التي أنشأها المستخدمون
ما مِن عناصر للاطّلاع عليها هنا حتى الآن.
الموارد
- الرمز المصدر على Github