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

Yuriko Hirota

Saurabh Rajpal

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

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

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

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

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

redBus

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

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

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

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

كازونار هارا، رئيس قسم التكنولوجيا في 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 اللذَين يسيطران على معظم قاعدة بياناتهم البرمجية. في ما يلي مقتطف من الفيديو الخاص برمزها البرمجي المكتوب بلغة 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 حول انتقالات العرض
• عرض الانتقالات لشرح "الإعلانات المتجاوبة على شبكة البحث"
• مقترحات التشغيل التفاعلي لإتاحة انتقالات العرض على جميع المتصفّحات