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

Yuriko Hirota

Saurabh Rajpal

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

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

View Transitions API که در کروم 111 راه اندازی شد، ایجاد انتقال صاف و ساده بین صفحات را امکان پذیر می کند. این به شما امکان می دهد بدون هیچ گونه همپوشانی بین حالت ها تغییر DOM خود را انجام دهید و با استفاده از نماهای عکس فوری، انیمیشن انتقالی بین حالت ها داشته باشید.

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

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

redBus

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

چرا Redbus انتقال view را پیاده سازی کرد؟

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

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

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

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

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

Anoop Menon، CTO redBus

CyberAgent

CyberAgent یک شرکت فناوری اطلاعات مستقر در ژاپن است که بسیاری از خدمات آنلاین از جمله انتشار وبلاگ و اخبار را ارائه می دهد.

چرا CyberAgent انتقال view را پیاده سازی کرد؟

CyberAgent در گذشته استفاده از انیمیشن‌های CSS یا استفاده از چارچوبی برای پیاده‌سازی انتقال‌های متحرک برای بهبود تجربه کاربر را در نظر گرفته بود، اما آنها نگران عملکرد ضعیف در ارائه DOM و قابلیت نگهداری کد بودند. وقتی کروم برای 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 را مشاهده کنید.

Transitions برای 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}/`);
  });

می توانید در مورد اجرای پیوند سریع آنها از این مقاله بیشتر بخوانید.

گواهینامه

Kazunari Hara، مدیر فنی سرویس Ameba در CyberAgent، گفت که انتقال دیدگاه ها به دو دلیل می تواند تأثیر قابل توجهی بر تجارت داشته باشد.

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

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

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

نیکا

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

چرا Nykaa انتقال view را پیاده سازی کرد؟

با ورود انتقال‌های view، تیم Nykaa فرصتی را دید که در آن این انتقال‌ها به صورت بومی در دسترس بودند، به این معنی که UX انتقال صفحه می‌تواند به طور قابل توجهی بدون هیچ هزینه‌ای برای عملکرد بهبود یابد. 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};
}

گواهینامه

Sunit Jindal ، رئیس برنامه‌های Nykaa، گفت که بزرگترین مزیت انتقال دیدگاه «درک سرعت» است. Nykaa از جلوه‌های shimmer برای منتظر ماندن برای بارگیری محتویات از backend استفاده کرد، اما دریافت که نشان دادن جلوه shimmer به کاربران اجازه نمی‌دهد تا چه مدت برای بارگیری محتوا باید منتظر بمانند. با انتقال view، خود انتقال این حس را برای کاربران فراهم کرد که "چیزی در شرف وقوع است"، که باعث شد انتظار کمتر دردسرساز شود.

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

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

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

پالیسیBazaar

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

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

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

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

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

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

آنها از یک رویکرد چارچوب ترکیبی استفاده می کنند که Angular و React بر بیشتر کدهای آنها تسلط دارند. در اینجا گزیده ای از VT از کد آنها است که در Angular نوشته شده و توسط Aman Soni (توسعه دهنده اصلی PolicyBazaar's Frontend) به اشتراک گذاشته شده است:

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');
  }

گواهینامه

Rishabh Mehrotra، رئیس طراحی آنها (Life BU)، گفت که انتقال دید با بهبود قابلیت استفاده، تعامل و رضایت کلی، نقش مهمی در افزایش تجربه وب سایت برای کاربران خود ایفا می کند. این به ارائه ناوبری صاف، تعامل هدایت شده، کاهش بار شناختی، زیبایی شناسی مدرن و موارد دیگر کمک کرد.

ارتقای تجربه وب به عنوان یک هدف اصلی برای PB است، و VT ثابت کرده است که ابزاری ابزاری برای دستیابی به این هدف با یکپارچگی قابل توجه است. جذابیت گسترده آن در بین جامعه توسعه دهندگان و پایگاه کاربران ما، تیم ما را با حس اشتیاق آغشته کرده است. همانطور که ما به ادغام آن در POD های مختلف فکر می کنیم، پیش بینی می کنیم که تأثیر مثبت گسترده ای بر سطح رضایت و تعالی عملیاتی داشته باشد.

Saurabh Tiwari (CTO، PolicyBazaar)

مراحل بعدی

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

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