إنشاء مكوِّن القصص

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

Adam Argyle

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

عرض توضيحي

إذا كنت تفضّل عرضًا توضيحيًا عمليًا لإنشاء مكوّن "القصص" بنفسك، يمكنك الاطّلاع على الدرس التطبيقي حول الترميز الخاص بمكوّن "القصص".

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

نظرة عامة

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

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

اختيار الأدوات المناسبة للمهمة

بشكل عام، وجدت أنّ هذا المكوّن سهل الإنشاء، وذلك بفضل بعض ميزات منصة الويب المهمة. لنتعرّف عليها.

شبكة CSS

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

تنسيق Friends

إنّ برنامج تضمين مكوّنات .stories الأساسي هو طريقة عرض للتمرير الأفقي تعطي الأولوية للأجهزة الجوّالة:

.stories {
  inline-size: 100vw;
  block-size: 100vh;

  display: grid;
  grid: 1fr / auto-flow 100%;
  gap: 1ch;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  touch-action: pan-x;
}

/* desktop constraint */
@media (hover: hover) and (min-width: 480px) {
  max-inline-size: 480px;
  max-block-size: 848px;
}
استخدام وضع الجهاز في "أدوات مطوّري البرامج في Chrome" لإبراز الأعمدة التي تم إنشاؤها بواسطة Grid

لنحلّل تنسيق grid:

  • نملأ إطار العرض على الأجهزة الجوّالة بشكل صريح باستخدام 100vh و100vw ونقيّد الحجم على أجهزة الكمبيوتر المكتبي
  • يفصل / بين نماذج الصفوف والأعمدة
  • تتم ترجمة "auto-flow" إلى grid-auto-flow: column
  • نموذج التدفق التلقائي هو 100%، وهو في هذه الحالة أيًا كان عرض نافذة الانتقال

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

تجميع

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

باستخدام شبكة CSS، يمكننا تحديد شبكة من خلية واحدة (أي مربّع)، حيث تشترك الصفوف والأعمدة في اسم مستعار ([story])، ثم يتم تعيين كل عنصر فرعي إلى مساحة الخلية الواحدة التي تحمل الاسم المستعار:

.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.story {
  grid-area: story;
  background-size: cover;
  …
}

يمنح هذا HTML التحكّم في ترتيب التكديس ويحافظ أيضًا على جميع العناصر في التدفق. لاحظ كيف لم نكن بحاجة إلى فعل أي شيء مع تحديد موضع absolute أو z-index ولم نكن بحاجة إلى تصحيح المربع باستخدام height: 100% أو width: 100%. حددت الشبكة الرئيسية بالفعل حجم إطار عرض صورة القصة، لذلك لم تكن هناك حاجة إلى إخبار أي من مكونات القصة هذه لملئها!

نقاط محاذاة مواضع التمرير في CSS

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

التمرير الأفقي بدون أنماط scroll-snap-points ومعها وبدونها، يمكن للمستخدمين التمرير بحرية كالمعتاد. باستخدامها، يستقر المتصفح برفق على كل عنصر.
أحد الوالدَين
.stories {
  display: grid;
  grid: 1fr / auto-flow 100%;
  gap: 1ch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  touch-action: pan-x;
}
 يحدّد العنصر الرئيسي الذي يتضمّن تجاوز حد التمرير سلوك المحاذاة.
طفل
.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
 يوافق الأطفال على أن يكونوا هدفًا للقطات.

اخترتُ نقاط محاذاة مواضع التمرير لعدة أسباب:

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

التوافق مع جميع المتصفحات

لقد اختبرنا هذه الميزة على متصفّحات Opera وFirefox وSafari وChrome، بالإضافة إلى نظامَي التشغيل Android وiOS. في ما يلي نبذة موجزة عن ميزات الويب التي وجدنا فيها اختلافات في الإمكانات والدعم.

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

scroll-snap-stop

كانت لوحات العرض الدوّارة إحدى حالات استخدام تجربة المستخدم الرئيسية التي دفعت إلى إنشاء مواصفات نقاط محاذاة مواضع التمرير في CSS. على عكس القصص، لا تحتاج لوحة العرض الدوّارة دائمًا إلى التوقف عند كل صورة بعد تفاعل المستخدم معها. قد يكون من الجيد أو من المشجع التنقل بسرعة عبر لوحة العرض الدوّارة. من ناحية أخرى، من الأفضل تصفّح القصص واحدة تلو الأخرى، وهذا بالضبط ما يوفّره تطبيق "scroll-snap-stop".

.user {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

في وقت كتابة هذا المنشور، لا يتوفّر scroll-snap-stop إلا على المتصفّحات المستنِدة إلى Chromium. يُرجى الاطّلاع على توافُق المتصفّح لمعرفة آخر المعلومات. ومع ذلك، لا يمنع هذا الإجراء من المتابعة. هذا يعني فقط أنه في المتصفحات غير المدعومة يمكن للمستخدمين تخطي صديق عن طريق الخطأ. لذا، على المستخدمين توخي الحذر أكثر، أو علينا كتابة رمز JavaScript لضمان عدم وضع علامة "تمت المشاهدة" على صديق تم تخطّيه.

يمكنك الاطّلاع على مزيد من المعلومات في المواصفات إذا كنت مهتمًا.

overscroll-behavior

هل سبق لك أن كنت تتصفح نافذة منبثقة وفجأة بدأت في تصفح المحتوى خلف النافذة المنبثقة؟ overscroll-behavior يتيح للمطوّر احتجاز هذا الانتقال وعدم السماح له بالمغادرة. وهي مناسبة لجميع أنواع المناسبات. يستخدمه مكوّن القصص لمنع الإيماءات الإضافية للتمرير السريع والتمرير من مغادرة المكوّن.

.stories {
  overflow-x: auto;
  overscroll-behavior: contain;
}

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

scrollIntoView({behavior: 'smooth'})

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

element.scrollIntoView({
  behavior: 'smooth'
})

كان Safari المتصفّح الوحيد الذي لا يتيح استخدام behavior: 'smooth' هنا. يُرجى الاطّلاع على توافُق المتصفّح لمعرفة آخر المعلومات.

طريقة استخدام المنتج

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

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