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

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

Adam Argyle

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

العرض التوضيحي

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

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

نظرة عامة

هناك مثالان شائعان على تجربة المستخدم في "القصص"، وهما "قصص 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

دعنا نفصّل تنسيق grid هذا:

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

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

تجميع

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

باستخدام شبكة 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;
}
يختار الأطفال أن يكونوا مستهدفين بسرعة.

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

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

التوافق عبر المتصفحات

اختبرنا على 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'})

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

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

كان Safari المتصفّح الوحيد الذي لا يدعم behavior: 'smooth' هنا. إتمام الدفع توافُق المتصفّح للحصول على التحديثات.

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

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

ريمكسات من إنشاء المنتدى