ناوبری بدون درز با انتقال مشاهده امکان پذیر شده است

Yuriko Hirota

Saurabh Rajpal

انتقال‌ها مزایای بی‌شماری برای کاربران دارند، از جمله کمک به حفظ آنها در متن و کاهش احساس تأخیر. توسعه‌دهندگان می‌خواهند بتوانند انتقال‌های یکپارچه بین صفحات ایجاد کنند و به افزایش تعامل کاربر با سایت خود کمک کنند.

با این حال، فعال کردن انتقال حالت واقعاً سخت بود زیرا توسعه‌دهندگان را ملزم به مدیریت حالت‌های دو عنصر مختلف می‌کرد. حتی چیزی مانند یک محو شدن متقاطع ساده، هر دو حالت را همزمان در بر می‌گیرد. این امر چالش‌های قابلیت استفاده، مانند مدیریت تعامل اضافی روی عنصر خروجی را ایجاد می‌کند. برای کاربران دستگاه‌های کمکی، دوره‌ای وجود دارد که حالت قبل و بعد همزمان در DOM هستند. علاوه بر این، ممکن است چیزها به شکلی که از نظر بصری خوب است، در اطراف درخت حرکت کنند، اما می‌توانند به راحتی باعث از بین رفتن موقعیت خواندن و تمرکز شوند.

رابط برنامه‌نویسی کاربردی View Transitions که در کروم ۱۱۱ راه‌اندازی شد، امکان ایجاد گذارهای روان و ساده بین صفحات را فراهم می‌کند. این رابط به شما امکان می‌دهد DOM خود را بدون هیچ گونه همپوشانی بین حالت‌ها تغییر دهید و با استفاده از نماهای snapshot شده، یک انیمیشن گذار بین حالت‌ها داشته باشید.

شاید از خود بپرسید که پیاده‌سازی آن چقدر آسان است؟ چه نوع موارد استفاده‌ای دارد؟ سایر توسعه‌دهندگان چگونه از انتقال‌های نما استفاده می‌کنند؟

این مقاله شما را با پیاده‌سازی انتقال نما در ۴ وب‌سایت مختلف آشنا می‌کند: RedBus (مسافرت)، CyberAgent (ناشر اخبار/وبلاگ)، Nykaa (تجارت الکترونیک) و PolicyBazaar (بیمه) و اینکه چگونه وب‌سایت‌های آنها با استفاده از رابط برنامه‌نویسی کاربردی View Transitions به طرق مختلف بهره‌مند شده‌اند.

ردباس

redBus، بخشی از گروه MakeMyTrip، یک وب‌سایت رزرو و فروش بلیط اتوبوس است که دفتر مرکزی آن در بنگلور هند واقع شده و در مناطق جغرافیایی مختلف جهان حضور دارد. این وب‌سایت یکی از اولین وب‌سایت‌هایی بود که با استفاده از View Transitions API، تجربه‌ای را پیاده‌سازی کرد.

چرا ردباس انتقال نماها را پیاده‌سازی کرد؟

تیم redBus به ارائه یک تجربه وب یکپارچه و شبیه به اپلیکیشن، که تا حد امکان به اپلیکیشن‌های بومی آنها نزدیک باشد، اعتقاد راسخ دارد. در واقع، آنها در طول سال‌ها چندین راه‌حل سفارشی‌سازی‌شده را پیاده‌سازی کرده بودند. به عنوان مثال، آنها حتی قبل از توسعه رابط برنامه‌نویسی View Transitions، انیمیشن‌های سفارشی‌سازی‌شده مبتنی بر جاوا اسکریپت و CSS را برای انتقال صفحات ارائه کردند. با این حال، این بدان معنا بود که آنها مجبور بودند با مدیریت عملکرد در بخش‌های پایین‌تر شبکه و دستگاه‌ها سر و کار داشته باشند که گاهی اوقات منجر به تجربه متفاوت با یک استراتژی بارگذاری تطبیقی ​​می‌شد.

redBus از انتقال‌های نمایش برای سفرهای چندگانه کاربران استفاده کرد. به عنوان مثال، در بخش خودیاری در برنامه تلفن همراه خود که صفحات وب را در تب‌های سفارشی کروم باز می‌کرد، و در قیف رزرو بلیط اتوبوس خود که کاربران از صفحه فهرست موجودی به صفحه پرداخت می‌روند. در مورد دوم، انتقال‌های نمایش، پیمایش صفحه به صفحه را روان‌تر کرد و منجر به افزایش نرخ تبدیل آنها شد. این نتیجه یک تجربه کاربری بهتر و عملکرد درک شده بهتر در حین اجرای عملیات سنگین - مانند دریافت به‌روزترین موجودی موجود - بود.

جزئیات فنی پیاده‌سازی

redBus از React و EJS به عنوان پشته فناوری frontend خود، با ترکیبی از SPAها و MPAها در مسیرهای مختلف استفاده می‌کند. گزیده کد زیر نحوه استفاده از انتقال‌های view را نشان می‌دهد:

/* 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) تصمیم گرفت انتقال نما (view transitions) را همراه با تلاش‌های بهبود INP در سراسر سایت خود پیاده‌سازی کند که منجر به ۷٪ فروش بیشتر شد. آمیت کومار ، مدیر ارشد مهندسی در ردباس، گفت که انتقال نما برای کسانی که واقعاً تجربه کاربری بهتری می‌خواهند و هزینه نگهداری کمتری می‌خواهند، واقعاً عالی است.

ما جلسات جامعی برای دریافت بازخورد کاربران برگزار کرده‌ایم و در آن از بینش‌های ارزشمند گروه‌های متنوعی از کاربران استفاده کرده‌ایم. درک عمیق ما از پایگاه کاربری‌مان (اتوبوس و قطار) و نیازهای آنها، همراه با تخصصمان، ما را به این باور رسانده است که این ویژگی از همان ابتدا، بدون نیاز به تست A/B، ارزش قابل توجهی را ارائه خواهد داد. انتقال نماها گامی به سوی پر کردن شکاف بین اپلیکیشن و وب با یک تجربه ناوبری روان است.

آنوپ منون، مدیر ارشد فناوری redBus

سایبر ایجنت

سایبر ایجنت (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 بیشتری را مشاهده کنید.

مشاهده‌ی گذارها برای MPA با فناوری پیش‌رندرینگ

CyberAgent همچنین API جدید View Transitions برای برنامه‌های چند صفحه‌ای (MPA) (که در حال حاضر تحت پرچم chrome://flags/#view-transition-on-navigation ) را روی سرویسی به نام Ameba News که یک سایت پورتال خبری است، آزمایش کرد.

انتقال‌های نمایش در دو جا استفاده شدند: مورد اول هنگام تغییر دسته‌بندی اخبار، که در ویدیوی زیر نشان داده شده است.

مورد دوم بین صفحه اخبار مهم است، جایی که گزیده‌ای از محتوا نشان داده می‌شود، و وقتی کاربر روی «مشاهده جزئیات بیشتر» کلیک می‌کند، بقیه مقاله کم‌رنگ می‌شود.

نکته جالب این است که آنها فقط به بخشی که پس از کلیک روی دکمه تغییر می‌کند، انیمیشن اضافه کرده‌اند. این تغییر کوچک در طراحی انیمیشن باعث می‌شود صفحه MPA از دیدگاه کاربر بیشتر شبیه یک SPA به نظر برسد و فقط محتوای جدید در آن متحرک شود:

نحوه‌ی انجام این کار به این صورت است: آن‌ها برای قسمت‌های مختلف صفحه 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 از رابط برنامه‌نویسی کاربردی انتقال نما این است که آنها از 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) یکی از APIهای مورد علاقه من است. قابلیت افزودن انیمیشن به عنوان یک ویژگی استاندارد مرورگر، پیاده‌سازی و نگهداری انتقال نما را در مقایسه با سایر راه‌حل‌های وابسته به کتابخانه‌ها آسان‌تر می‌کند. ما مشتاقانه منتظر پیاده‌سازی انتقال نما در سرویس‌های بیشتری برای معرفی برند خود هستیم.

کازوناری هارا، مدیر ارشد فناوری آمبا

نیکا

Nykaa بزرگترین پلتفرم تجارت الکترونیک مد و زیبایی هند است. آنها قصد دارند تجربه وب موبایل خود را تا حد امکان به تجربه برنامه بومی خود نزدیک کنند. آنها قبلاً هنگام تلاش برای پیاده‌سازی انیمیشن‌های انتقال، با نوشتن جاوا اسکریپت سفارشی پیچیده مشکل داشتند. این امر همچنین بر عملکرد وب‌سایت آنها تأثیر کمی گذاشت.

چرا 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 از جلوه‌های نورانی برای انتظار برای بارگذاری محتوا از backend استفاده کرد، اما متوجه شد که نشان دادن جلوه نورانی، مدت زمانی را که کاربران باید برای بارگذاری محتوا منتظر بمانند، مشخص نمی‌کند. با انتقال نما، خودِ انتقال به کاربران این حس را می‌داد که «اتفاقی در شرف وقوع است» که باعث می‌شد انتظار کمتر دردناک باشد.

نیکا از تجربه کاربری (UX) جدید و بهبود یافته صفحه وب خود با قابلیت انتقال نما (view transitions) بسیار هیجان‌زده بود و آماده است تا انتقال نما را در صفحات دیگر نیز پیاده‌سازی کند. معاون طراحی آنها در این مورد گفت:

ما به طور ملایم متعهد هستیم که انتقال نماها را در تمام ویژگی‌های آینده که منطقی به نظر می‌رسند، پیاده‌سازی کنیم. برخی از حوزه‌ها از قبل شناسایی شده‌اند و تیم به طور فعال در حال سرمایه‌گذاری روی آنها است.

کریشنا آر وی، معاون طراحی

سیاستبازار

پالیسی بازار، بزرگترین شرکت تجمیع‌کننده بیمه و فناوری مالی چندملیتی در هند است که دفتر مرکزی آن در گورگان واقع شده است.

چرا PolicyBazaar انتقال نماها را پیاده‌سازی کرد؟

تیم PolicyBazaar، به عنوان یک شرکت مبتنی بر وب، همواره در تلاش بوده است تا بهترین تجربه کاربری ممکن را در طول سفرهای حیاتی کاربران خود ارائه دهد. پیاده‌سازی انتقال‌های سفارشی با استفاده از جاوا اسکریپت و CSS حتی قبل از راه‌اندازی View Transitions API نیز امری رایج بود، زیرا آنها تجربه کاربری را بهبود می‌بخشیدند، یک جریان ناوبری یکپارچه ایجاد می‌کردند و جذابیت بصری کلی وب‌سایت‌های خود را بهبود می‌بخشیدند.

با این حال، این پیاده‌سازی‌های سفارشی با هزینه تأخیرهای گاه به گاه مبتنی بر عملکرد، پیچیدگی‌های نگهداری کد و سازگاری نامطلوب با چارچوب‌های مورد استفاده همراه بود. رابط برنامه‌نویسی View Transitions با ارائه یک رابط کاربری آسان با مزایای عملکردی که به صورت بومی در دسترس هستند، به آنها کمک کرد تا بر اکثر این چالش‌ها غلبه کنند.

پالیسی‌بازار (PolicyBazaar) در مراحل پیش‌سفارش خود از انتقال نماها در عناصر مختلف استفاده کرد تا خریداران بالقوه را برای ارائه جزئیات مورد نیاز خود برای خرید بیمه‌نامه‌ها هیجان‌زده کند.

جزئیات فنی پیاده‌سازی

آنها از یک رویکرد چارچوب ترکیبی استفاده می‌کنند که در آن Angular و React بخش عمده‌ای از کدبیس آنها را تشکیل می‌دهند. در اینجا گزیده‌ای از کد VT که با Angular نوشته شده و توسط Aman Soni (توسعه‌دهنده ارشد Frontend در 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 با یکپارچگی قابل توجه، ابزاری مؤثر در دستیابی به این هدف بوده است. جذابیت گسترده آن در بین جامعه توسعه‌دهندگان و پایگاه کاربران ما، شور و شوق زیادی را در تیم ما ایجاد کرده است. همانطور که در حال بررسی ادغام آن در POD های متنوع هستیم، پیش‌بینی می‌کنیم که تأثیر مثبت گسترده‌ای بر سطح رضایت و تعالی عملیاتی داشته باشد.

سوراب تیواری (مدیر ارشد فناوری، پالیسی بازار)

مراحل بعدی

آیا به امتحان کردن گذارهای نما علاقه‌مند هستید؟ در اینجا منابعی وجود دارد که می‌توانید برای کسب اطلاعات بیشتر دنبال کنید:

• مستندات developer.chrome.com برای انتقال نماها
• مشاهده انتقال‌ها برای توضیح‌دهنده MPA
• پیشنهادهای Interop برای در دسترس قرار دادن انتقال نماها در مرورگرها