فراتر از تلفن هوشمند: JioHotstar چگونه تجربه کاربری خود را برای دستگاه‌های تاشو و رایانه‌های لوحی بهینه‌سازی کرد

فراتر از تلفن: JioHotstar چگونه تجربه کاربری تطبیقی ساخت

JioHotstar یک پلاتفرم جاری‌سازی پیشرو در هند است که به پایگاه کاربری بیش‌از ۴۰۰ میلیون نفر خدمات ارائه می‌دهد. این پلتفرم با کتابخانه محتوای گسترده‌ای که شامل بیش‌از ۳۳۰٬۰۰۰ ساعت ویدیو به‌درخواست (VOD) و ارائه هم‌زمان رویدادهای ورزشی مهم است، در مقیاس بسیار بزرگی فعالیت می‌کند.

‫JioHotstar برای کمک به تضمین تجربه ممتاز برای مخاطبان گسترده خود، تجربه تماشا را با بهینه‌سازی برنامه‌اش برای دستگاه‌های تاشو و رایانه‌های لوحی ارتقا داد. آن‌ها این کار را با پیروی از راهنمایی‌های برنامه تطبیقی Google و استفاده از منابعی مانند نمونه‌ها، codelabs، cookbooks، و اسناد انجام دادند تا به ایجاد تجربه‌ای یکپارچه و جذاب در همه اندازه‌های نمایشگر کمک کنند.

چالش صفحه‌نمایش بزرگ JioHotstar

JioHotstar تجربه کاربری عالی‌ای در تلفن‌های استاندارد ارائه می‌داد و تیم می‌خواست از عوامل شکل جدید بهره ببرد. برای شروع، تیم برنامه خود را براساس رهنمودهای کیفیت برنامه برای صفحه‌نمایش بزرگ ارزیابی کرد تا بهینه‌سازی‌های لازم برای گسترش تجربه کاربری به دستگاه‌های تاشو و رایانه‌های لوحی را درک کند. برای دستیابی به وضعیت برنامه صفحه‌نمایش بزرگ سطح ۱، تیم دو به‌روزرسانی استراتژیک را برای تطبیق برنامه در انواع مختلف ابعاد و متمایز کردن آن در دستگاه‌های تاشو اجرا کرد. JioHotstar با پرداختن به چالش‌های منحصربه‌فردی که دستگاه‌های تاشو و رایانه‌های لوحی ایجاد می‌کنند، قصد دارد تجربه‌ای باکیفیت و فراگیر در همه اندازه‌های نمایشگر و نسبت‌های ابعادی ارائه دهد.

کاری که باید انجام می‌دادند

میانای کاربر JioHotstar که در درجه اول برای نمایشگرهای استاندارد تلفن طراحی شده است، در تطبیق نسبت ابعادی نگاره اصلی، منوها، و صفحه‌های نمایش با اندازه‌ها و وضوح‌های مختلف صفحه‌نمایش در سایر عوامل فرم با چالش‌هایی مواجه شد. این امر اغلب منجر به برش تصویر، حاشیه‌بندی، وضوح پایین، و فضای استفاده‌نشده، به‌ویژه در حالت افقی، می‌شد. برای کمک به بهره‌برداری کامل از قابلیت‌های رایانه‌های لوحی و دستگاه‌های تاشو و ارائه تجربه کاربری بهینه‌سازی‌شده در این نوع دستگاه‌ها، JioHotstar بر بهبود رابط کاربری تمرکز کرد تا از انعطاف‌پذیری بهینه چیدمان، رندر کردن تصویر، و پیمایش در طیف وسیع‌تری از دستگاه‌ها اطمینان حاصل کند.

آنچه انجام دادند

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

JioHotstar بااستفاده از کتابخانه Material 3 Adaptive از این الگو پیروی کرد تا بداند برنامه چقدر فضای دردسترس دارد. ابتدا تابع currentWindowAdaptiveInfo() را فراخوانی کنید، سپس از چیدمان‌های جدید مطابق با سه کلاس اندازه پنجره استفاده کنید:

val sizeClass = currentWindowAdaptiveInfo().windowSizeClass

if(sizeClass.isWidthAtLeastBreakpoint(WIDTH_DP_EXPANDED_LOWER_BOUND)) {
    showExpandedLayout()
} else if(sizeClass.isHeightAtLeastBreakpoint(WIDTH_DP_MEDIUM_LOWER_BOUND)) {
    showMediumLayout()
} else {
    showCompactLayout()
}

نقطه‌های شکست به‌ترتیب از بزرگ‌ترین به کوچک‌ترین هستند، زیرا API به‌طور داخلی بررسی می‌کند که آیا عرض بزرگ‌تر یا مساوی است، بنابراین هر عرضی که حداقل بزرگ‌تر یا مساوی EXPANDED باشد، همیشه بزرگ‌تر از MEDIUM خواهد بود.

‫JioHotstar می‌تواند تجربه ممتاز منحصربه‌فردی را برای دستگاه‌های تاشو ارائه دهد: حالت رومیزی. این ویژگی به‌راحتی پخش‌کننده ویدیو را به نیمه بالایی صفحه‌نمایش و کنترل‌های ویدیو را به نیمه پایینی منتقل می‌کند تا وقتی دستگاه تاشو تاحدی تا شده است، تجربه دست‌آزاد فراهم شود.

برای انجام این کار، بااستفاده از کتابخانه Material 3 Adaptive، می‌توان از همان currentWindowAdaptiveInfo() برای پرسمان حالت رومیزی استفاده کرد. وقتی دستگاه در حالت رومیزی نگه داشته می‌شود، می‌توان چیدمان را با ستونی تغییر داد تا با نیمه بالا و پایین وضعیت مطابقت داشته باشد و پخش‌کننده در نیمه بالا و کنترل‌کننده‌ها در نیمه پایین قرار بگیرند:

val isTabletTop = currentWindowAdaptiveInfo().windowPosture.isTabletop
if(isTabletopMode) {
   Column {
       Player(Modifier.weight(1f))
       Controls(Modifier.weight(1f))
   }
} else {
   usualPlayerLayout()
}

JioHotstar اکنون از رهنمودهای کیفیت برنامه برای صفحه‌نمایش بزرگ برای ردیف ۱ پیروی می‌کند. این تیم از راهنمای برنامه تطبیقی استفاده کرد و با بهره‌گیری از نمونه‌ها، codelabs، cookbooks، و اسناد این توصیه‌ها را ادغام کرد.

برای بهبود بیشتر تجربه کاربری، JioHotstar اندازه هدف‌های لمسی را در صفحه‌های کاوش ویدیو به ۴۸dp توصیه‌شده افزایش داد تا از دسترس‌پذیری در دستگاه‌های دارای صفحه‌نمایش بزرگ اطمینان حاصل کند. صفحه جزئیات ویدیو آن‌ها اکنون تطبیقی است و با اندازه‌ها و جهت‌های مختلف صفحه‌نمایش سازگار می‌شود. آن‌ها فراتر از مقیاس‌بندی ساده تصویر رفتند و درعوض از کلاس‌های اندازه پنجره برای تشخیص اندازه و تراکم پنجره در زمان واقعی استفاده کردند و مناسب‌ترین تصویر اصلی را برای هر فرم فاکتور بارگذاری کردند که به بهبود وفاداری بصری کمک کرد. پیمایش نیز بهبود یافته است و چیدمان‌ها با اندازه‌های مختلف صفحه‌نمایش سازگار می‌شوند.

اکنون کاربران می‌توانند محتوای موردعلاقه‌شان را از JioHotstar در دستگاه‌های دارای صفحه‌نمایش بزرگ با تجربه تماشای بهبودیافته و بسیار بهینه‌سازی‌شده مشاهده کنند.

«دستیابی به وضعیت برنامه صفحه‌نمایش بزرگ سطح ۱ با Google نقطه عطفی است که نشان‌دهنده قدرت چشم‌انداز مشترک ما است. در JioHotstar، همیشه معتقد بوده‌ایم که بهینه‌سازی برای دستگاه‌های دارای صفحه‌نمایش بزرگ فراتر از سازگاری است، بلکه هدف ارتقای تجربه تماشا برای مخاطبانی است که به‌سرعت به دستگاه‌های تاشو، رایانه‌های لوحی، و تلویزیون‌های متصل روی می‌آورند.

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

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