إتاحة التنقّل السلس من خلال انتقالات العرض

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

عرض عمليات الانتقال في صفحات 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 Transitions API أنّها استعانت بمكتبة quicklink لتنفيذ قواعد العرض المسبق بسهولة على صفحة التفاصيل. في ما يلي نموذج الرمز البرمجي:

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

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

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

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

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

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