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

Yuriko Hirota

Saurabh Rajpal

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

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

تتيح واجهة View Transitions API التي تم إطلاقها في Chrome 111 إمكانية إنشاء انتقالات سلسة وبسيطة بين الصفحات. يتيح لك هذا الخيار إجراء تغيير في 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، إنّ عمليات الانتقال بين المشاهدات رائعة حقًا للأشخاص الذين يريدون فعلاً تجربة أفضل للمستخدمين والرغبة في تقليل النفقات العامة للصيانة.

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

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

CyberAgent

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

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

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

نفذت 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.

عرض عمليات النقل لـ MPA باستخدام تقنية العرض المسبق

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

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

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

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

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

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

سوراب تيواري (رئيس قسم التكنولوجيا في PolicyBazaar)

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

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

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