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

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

Adam Argyle

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

إصدار تجريبي

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

في ما يلي إصدار YouTube من هذه المشاركة إذا كنت تفضّل الفيديوهات:

نظرة عامة

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

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

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

بشكل عام، وجدتُ هذا المكوِّن سهلاً جدًا، بفضل بعض الميزات الأساسية للنظام الأساسي للويب. لنتناولها!

شبكة CSS

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

تنسيق الأصدقاء

برنامج تضمين مكوّن .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 هذا بالتفصيل:

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

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

تجميع

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

باستخدام شبكة 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

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

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

اخترتُ Scroll Snap Points لعدة أسباب:

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

التوافق بين المتصفحات

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

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

scroll-snap-stop

كانت العروض الدوارة من بين أهم حالات استخدام تجربة المستخدم التي دفعت إلى إنشاء مواصفات نقاط Snap الخاصة بالتمرير في 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' هنا. للحصول على التحديثات، يُرجى مراجعة توافُق المتصفّح.

التدريب العملي

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

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