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

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

يعني ذلك أنّ بعض عناصر الواجهة قد تبدو مختلفة تمامًا حسب السياق الذي يتم عرضها فيه. قد تحتاج إلى تطبيق 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;
  }
}

تضمن خصائص 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، هي مجرد البداية. بعد ذلك، ستكتشف مجموعة كاملة من ميزات الوسائط الأخرى.