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

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 كحزمة التكنولوجيا للواجهة الأمامية، مع مجموعة من SPA وMPA في رحلات مختلفة. يوضح مقتطف الرمز التالي كيفية استخدام انتقالات العرض:

/* 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 Transfers 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.

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

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

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

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

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
• إمكانية التشغيل التفاعلي لإتاحة عمليات النقل بين طرق العرض على جميع المتصفّحات