أصبح التنقل السلس ممكنًا باستخدام انتقالات العرض

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

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

تم إطلاق واجهة برمجة التطبيقات View Transitions API في الإصدار 111 من Chrome، وهي تتيح إنشاء انتقالات سلسة وبسيطة بين الصفحات. ويسمح لك هذا الإجراء بتغيير نموذج DOM بدون أي تداخل بين الحالات، وعرض رسوم متحركة انتقالية بين الحالات باستخدام طرق العرض التي تم التقاط لقطات لها.

قد تتساءل، ما مدى سهولة التنفيذ؟ ما هي أنواع حالات الاستخدام؟ كيف يستخدم المطورون الآخرون انتقالات العرض؟

تقدّم لك هذه المقالة شرحًا مفصّلاً لتنفيذ عمليات انتقال العرض في 4 مواقع إلكترونية مختلفة: RedBus (للسفر)، وCyberAgent (ناشر الأخبار/المدوّنات)، وNykaa (للتجارة الإلكترونية)، وPolicyBazaar (للتأمين)، وكيفية استفادة مواقعها الإلكترونية بطرق مختلفة من خلال استخدام View Transitions API.

redBus

redBus هي شركة تابعة لمجموعة MakeMyTrip، وهي موقع إلكتروني لحجز الحافلات والتذاكر ومقرها الرئيسي في بنغالور بالهند، وتتواجد في مواقع جغرافية مختلفة على مستوى العالم. وكان من أوائل المواقع الإلكترونية التي نفّذت تجربة باستخدام View Transitions API.

لماذا نفّذت Redbus عمليات انتقال العرض؟

يؤمن الفريق في redBus إيمانًا راسخًا بتوفير تجربة ويب موحَّدة شبيهة بالتطبيقات، أقرب ما يمكن إلى تطبيقاتها الأصلية. في الواقع، لقد نفّذوا عدة حلول مخصّصة على مر السنين. على سبيل المثال، طرحت الشركة صورًا متحركة مخصّصة تستند إلى JavaScript وCSS لنقل الصفحات حتى قبل تطوير واجهة برمجة التطبيقات View Transitions API. ومع ذلك، كان عليهم التعامل مع إدارة الأداء في الشرائح الأقل من الشبكة والأجهزة، ما يؤدي أحيانًا إلى تجربة مختلفة عند استخدام استراتيجية التحميل التكيُّفي.

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

التفاصيل الفنية لعملية التنفيذ

تستخدِم redBus React وEJS كمجموعة تكنولوجيات واجهة المستخدم، مع مجموعة من التطبيقات المُنشِئة لصفحات ويب مُستقلة وتطبيقات مُنشِئة لصفحات ويب متعدّدة في جميع التجارب المختلفة. يوضّح المقتطف التالي من الرمز البرمجي كيفية استخدام عمليات انتقال العرض:

/* Forward Transition */
export const goToURL = ( url: string , reactHistory: any ): void => {
  if(document.startViewTransition) {
    let viewTransition = document.startViewTransition();
    viewTransition.ready.finally(() => {
      reactHistory ? reactHistory.push(url) : (window.location.href = url);
    })
  } else {
    reactHistory ? reactHistory.push(url) : (window.location.href = url);
  }
};

/* Back Transition */
export const goBack = ( reactHistory: any ): void => {
  if(document.startViewTransition) {
    document.documentElement.classList.add('back-transition');
    let viewTransition = document.startViewTransition();
    viewTransition.ready.finally(() => {
      reactHistory ? reactHistory.goBack() : history.back();
    })
    viewTransition.finished.finally(() => {
      document.documentElement.classList.remove('back-transition');
    })
  } else {
    reactHistory ? reactHistory.goBack() : history.back();
  }
};

في تنسيقات CSS التالية، تكون slide-to-right وslide-to-left وslide-from-right وslide-from-left إطارات رئيسية للصور المتحركة بتنسيق CSS.

::view-transition-old(root) {
  animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
  300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(root) {
  animation: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
  700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
.back-transition::view-transition-old(root) {
  animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
  300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
}
.back-transition::view-transition-new(root) {
  animation: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
  700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
}

التأثير في النشاط التجاري

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

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

"أنوب مينون"، رئيس قسم التكنولوجيا في redBus

CyberAgent

‫CyberAgent هي شركة تكنولوجيا معلومات مقرّها اليابان تقدّم العديد من الخدمات على الإنترنت، بما في ذلك نشر المدونات والأخبار.

لماذا نفّذت CyberAgent عمليات انتقال العرض؟

في السابق، فكّرت شركة CyberAgent في استخدام الرسوم المتحركة في CSS أو استخدام إطار عمل لتنفيذ الانتقالات المتحركة لتحسين تجربة المستخدم، ولكنّها كانت قلقة بشأن الأداء السيئ في عرض DOM وقابلية صيانة الرمز. عندما أضاف Chrome واجهة برمجة التطبيقات View transitions API، سُرّ الفريق باستخدامها لإنشاء انتقالات صفحات جذابة تتخطّى هذه التحديات.

نفَّذ فريق CyberAgent عمليات انتقال العرض بين قائمة المدونات وصفحة المدونة. لاحظ هنا كيف أضافوا انتقال العنصر إلى صورة العنصر الرئيسي. يمكنك زيارة الموقع الإلكتروني والاطّلاع على الميزة الآن.

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

@media screen and (min-width: 769px) {
  .main-visual {
    view-transition-name: none !important;
  }
}

التفاصيل الفنية لعملية التنفيذ

يستخدم CyberAgent Next.js لإنشاء SPA. يوضّح مثال الرمز البرمجي التالي كيفية استخدام واجهة برمجة التطبيقات View Transition API.

export const usePageTransition = () => {
  const router = useRouter();
  const defferedRef = useRef<Deferred | null>(null);

  useEffect(() => {
    const handleRouteChangeComplete = () => {
      defferedRef.current?.resolve();
    };

    const handleRouteChangeStart = (url: string) => {
      if (!("startViewTransition" in document)) return;
      if (router.asPath === url) return;

      const deffered = new Deferred();
      defferedRef.current = deffered;
      (document as Document).startViewTransition(async () => {
        await deffered.promise;
      });
    };

    router.events.on("routeChangeStart", handleRouteChangeStart);
    router.events.on("routeChangeComplete", handleRouteChangeComplete);

    return () => {
      router.events.off("routeChangeStart", handleRouteChangeStart);
      router.events.off("routeChangeComplete", handleRouteChangeComplete);
    };
  }, [router.asPath]);
};

اطّلِع على مزيد من عيّنات رمز Next.js.

عرض الانتقالات في "الإعلانات المتجاوبة على شبكة البحث" باستخدام تكنولوجيا التقديم المُسبَق

جرّبت شركة CyberAgent أيضًا واجهة برمجة التطبيقات الجديدة View Transitions API لتطبيقات الصفحات المتعددة (MPA) (التي تحمل حاليًا العلامة chrome://flags/#view-transition-on-navigation) في خدمة تُسمى Ameba News، وهي موقع إلكتروني لبوابة أخبار.

تم استخدام انتقالات العرض في مكانين: الأول هو عند تغيير فئات الأخبار التي تظهر في الفيديو التالي.

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

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

إليك طريقة إجراء ذلك: تم تعيين view-transition-name مختلف للأجزاء المختلفة من الصفحة. على سبيل المثال، تم ضبط سمة view-transition-name واحدة للجزء العلوي من المقالة، وأخرى للجزء السفلي، بدون إضافة أي رسوم متحركة إلى الجزء العلوي.

::view-transition-old(root) {
  animation:
    var(--animation-disappear-duration) var(--animation-disappear-easing) both fade-out;
  }

::view-transition-new(root) {
  animation:
    var(--animation-appear-in-duration) var(--animation-appear-in-easing) both fade-in;
}

من الأمور الأخرى المثيرة للاهتمام في استخدام CyberAgent لواجهة برمجة التطبيقات View Transitions API أنّه استخدَم رابطًا سريعًا لتنفيذ قواعد التقديم المُسبَق بسهولة في صفحة التفاصيل. في ما يلي نموذج الرمز البرمجي:

import { prerender } from ‘https://.../quicklink.mjs’;

window.addEventListener('load', () => {
  const match = location.pathname.match(/\\/(.+)\\/hl\\/([0-9a-z-_]+)/);
  if (!match) return;
    const [_, dirname, entryId] = match;
    prerender(`/${dirname}/${entryId}/`);
  });

يمكنك الاطّلاع على مزيد من المعلومات حول تنفيذ الروابط السريعة من هذه المقالة.

شهادة تزكية

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

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

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

كازوناري هارا، رئيس قسم التكنولوجيا في شركة Ameba

Nykaa

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

لماذا نفّذت Nykaa عمليات انتقال العرض؟

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

التفاصيل الفنية لعملية التنفيذ

استخدَمت Nykaa React وEmotion لإنشاء SPA. يمكنك الاطّلاع على مزيد من نماذج الرموز حول كيفية استخدام View Transitions مع React هنا.

if (document.startViewTransition) {
      document.startViewTransition(() => {
        history.push(productUrl);
      });
    } else {
      history.push(productUrl);
   }

const fadeIn = keyframes`
  from { opacity: 0; }
`;

const fadeOut = keyframes`
  to { opacity: 0; }
`;

const slideFromRight = keyframes`
  from { transform: translateX(300px); }
`;

const slideToLeft = keyframes`
  to { transform: translateX(-300px); }
`;

const slideToRight = keyframes`
  to { transform: translateX(300px); }
`;

const slideFromLeft = keyframes`
  from { transform: translateX(-300px); }
`

ملف CSS للصورة المتحركة للدرج الجانبي:

::view-transition-old(root) {
  animation: 300ms cubic-bezier(0.4, 0, 1, 1) both ${fadeOut},
  1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideToLeft};
}

::view-transition-new(root) {
  animation: 400ms cubic-bezier(0, 0, 0.2, 1) 300ms both ${fadeIn},
  1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideFromRight};
}

.back-transition {
  display: inherit;
}

.back-transition::view-transition-old(root) {
  animation-name: fade-out, ${slideToRight};
}

.back-transition::view-transition-new(root) {
  animation-name: fade-in, ${slideFromLeft};
}

شهادة تزكية

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

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

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

كريشنا آر في، نائب رئيس قسم التصميم

PolicyBazaar

شركة PolicyBazaar هي أكبر شركة تكنولوجيا مالية متعددة الجنسيات وأكبر مجمّع للتأمين في الهند، ويقع مقرّها في غورغان.

لماذا نفّذت PolicyBazaar عمليات انتقال العرض؟

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

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

استخدَمت شركة PolicyBazaar عمليات انتقال العرض على مستوى عناصر مختلفة في مسارات ما قبل تقديم الأسعار لتسهيل تقديم المشترين المحتملين للتفاصيل المطلوبة لشراء بوليصات التأمين.

التفاصيل الفنية لعملية التنفيذ

يستخدمون نهجًا مختلطًا لإطار العمل مع Angular وReact اللذَين يسيطران على معظم قاعدة بياناتهم البرمجية. في ما يلي مقتطف VT من التعليمة البرمجية المكتوب بلغة Angular وشاركه أمان سوني (المطوّر الرئيسي للواجهة الأمامية في PolicyBazaar):

toggleWidgetAnimation() {
    let doc:any = document;

    if (!doc.startViewTransition) {
      this.toggleWidget();
      return;
    }

    doc.startViewTransition(() => this.toggleWidget());
  }

  toggleWidget() {
    let badgeEle = document.querySelector('.animate_init_state_one');
    let textEle = document.querySelector('.animate_init_state_two');

    badgeEle.classList.toggle('hide');
    textEle.classList.toggle('hide');
  }

شهادة تزكية

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

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

Saurabh Tiwari (CTO، PolicyBazaar)

الخطوات التالية

هل أنت مهتم بتجربة انتقالات العرض؟ في ما يلي بعض المراجع التي يمكنك الاطّلاع عليها لمعرفة المزيد من المعلومات:

• مستنداتdeveloper.chrome.com حول انتقالات طرق العرض
• عرض الانتقالات في الشرح حول موافقة جهات متعددة (MPA)
• مقترحات التشغيل التفاعلي لإتاحة انتقالات العرض على جميع المتصفّحات