أنماط واجهة المستخدم

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

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

في ما يلي بعض التحديات الشائعة التي قد تواجهها.

التنقّل

يكون عرض قائمة روابط التنقل أمرًا بسيطًا إلى حد ما على شاشة كبيرة. وتتوفّر مساحة كبيرة لاستيعاب هذه الروابط.

على الشاشة الصغيرة، تكون المساحة ثمينة. عندما تصمم لهذا الموقف، من المغري إخفاء التنقل خلف زر. تكمن المشكلة في هذا الحل في أنه يتعين على المستخدمين بعد ذلك اتخاذ خطوتين للوصول إلى أي مكان: فتح القائمة، ثم تحديد خيار. حتى يتم فتح القائمة، يظل المستخدم يتساءل "أين يمكنني الذهاب؟"

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

لن يتغير هذا النمط إذا كان التنقل يحتوي على الكثير من الروابط. سيبدو التنقل غير مزدحم إذا كانت الروابط ملتفة في سطرين أو ثلاثة على شاشة صغيرة.

أحد الحلول الممكنة هو إبقاء الروابط في سطر واحد مع اقتطاع القائمة عند حافة الشاشة. ويمكن للمستخدمين التمرير سريعًا أفقيًا للكشف عن الروابط التي لا يمكن رؤيتها على الفور. هذا هو نمط التجاوز.

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

كحل أخير، يمكنك اختيار إخفاء التنقل تلقائيًا وتوفير آلية تبديل تتيح للمستخدمين عرض المحتوى وإخفائه. وهذا ما يسمى بالكشف التدريجي.

تأكد من أن الزر الذي يبدِّل طريقة عرض التنقل يحمل تصنيفًا. لا تعتمد على الأيقونة لفهمها.

الأيقونة غير المصنفة هي التنقل "لحم غامض" - لن يعرف المستخدمون ما هو موجود حتى يأكلونه. قدم تسمية نصية للسماح للمستخدمين بمعرفة ما سيكشفه الزر.

منصّات العرض بعناصر متغيّرة

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

ومع ذلك، عندما تكون المساحة عالية، يمكن أن تمنع العروض الدوارة في الصفحة أن تصبح الصفحة طويلة جدًا وغير مزدحمة. يمكنك استخدام منهج مختلط: عرض المحتوى في لوحة عرض دوّارة للشاشات الصغيرة، مع عرض المحتوى نفسه على شكل شبكة للشاشات الأكبر حجمًا.

بالنسبة إلى الشاشات الضيقة، يمكنك عرض العناصر في صف باستخدام flexbox. يمتد صف العناصر إلى ما بعد حافة الشاشة. استخدِم overflow-x: auto للسماح بالتمرير السريع أفقيًا.

@media (max-width: 50em) {
  .cards {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: inline mandatory;
    scroll-behavior: smooth;
  }
  .cards .card {
    flex-shrink: 0;
    flex-basis: 15em;
    scroll-snap-align: start;
  }
}

ملاحظة: الإصدار المنطقي من overflow-x هو overflow-inline والذي يمكن أن يتطابق بشكل أفضل مع قيمة scroll-snap-type. يستخدم هذا المثال الإصدار الفعلي للحصول على دعم أفضل عبر المتصفحات.

تضمن السمات scroll-snap إمكانية تمرير العناصر سريعًا بطريقة سلسة. بفضل scroll-snap-type: inline mandatory، تم وضع العناصر في مكانها.

عندما تكون الشاشة كبيرة بما يكفي - أعرض من 50em في هذه الحالة - يمكنك التبديل إلى الشبكة وعرض العناصر في صفوف وأعمدة، بدون إخفاء أي شيء.

@media (min-width: 50em) {
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
  }
}

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

العروض الدوارة هي مثال آخر على نمط التجاوز العملي. إذا كان لديك العديد من العناصر التي يمكن للأشخاص تصفحها، فيمكنك الاستمرار في استخدام نمط التجاوز حتى على الشاشات الكبيرة، بما في ذلك أجهزة التلفزيون. يستخدم شريط تمرير الوسائط هذا لوحات عرض دوّارة متعددة لإدارة عدد كبير من الخيارات.

ومرة أخرى، تضمن سمات scroll-snap أن يكون التفاعل سلسًا. لاحظ أيضًا أنّ الصور المضمّنة في لوحة العرض الدوّارة تم تطبيق loading="lazy" عليها. في هذه الحالة، لا تكون الصور في الجزء السفلي غير المرئي من الصفحة، أو تقع في حدود الحافة، ولكن ينطبق المبدأ نفسه: إذا لم يمرر المستخدم مطلقًا حتى يصل هذا العنصر إلى العنصر، لن يتم تنزيل الصورة، ما يوفّر على معدّل نقل البيانات.

ملاحظة: يوضّح المثال السابق عرضًا توضيحيًا أكثر اكتمالاً. يمكنك الاطّلاع على المزيد من المعلومات حول ذلك في المقالة إنشاء مكوِّن تمرير الوسائط.

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

جداول البيانات

يُعد العنصر table مثاليًا لتنظيم البيانات الجدولية وصفوف وأعمدة المعلومات ذات الصلة. ولكن إذا كان الجدول كبيرًا جدًا، فقد يؤدي ذلك إلى تعطيل تخطيط الشاشة الصغيرة.

يمكنك تطبيق نمط التجاوز على الجداول. في هذا المثال، يتم التفاف الجدول في div مع فئة table-container.

.table-container {
  max-inline-size: 100%;
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
  scroll-behavior: smooth;
}
.table-container th, 
.table-container td {
  scroll-snap-align: start;
  padding: var(--metric-box-spacing);
}

الإرشادات

نمط التجاوز هو حل وسط جيد للشاشات الصغيرة ولكن تأكد من توضيح أنه يمكن الوصول إلى المحتوى خارج الشاشة. يمكنك وضع ظل أو تدرج على الحافة حيث يتم اقتطاع المحتوى.

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

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

لمزيد من أنماط عناصر واجهة المستخدم والتنسيق، يمكنك الاطّلاع على قسم الأنماط على web.dev.

عند تكييف عناصر الواجهة مع أحجام الشاشات المختلفة، تكون استعلامات الوسائط مفيدة للغاية لمعرفة أبعاد الجهاز. لكنّ ميزات الوسائط مثل min-width وmin-height ليست سوى البداية. بعد ذلك، ستكتشف مجموعة كاملة من ميزات الوسائط الأخرى.