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

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

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

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

JioHotstar تجربه کاربری بسیار خوبی را در گوشی‌های استاندارد ارائه داد و تیم می‌خواست از فرم‌فکتورهای جدید بهره ببرد. برای شروع، تیم برنامه خود را با توجه به دستورالعمل‌های کیفیت برنامه‌های صفحه بزرگ ارزیابی کرد تا بهینه‌سازی‌های لازم برای گسترش تجربه کاربری خود به دستگاه‌های تاشو و تبلت‌ها را درک کند. برای دستیابی به وضعیت برنامه صفحه بزرگ Tier 1 ، تیم دو به‌روزرسانی استراتژیک را برای تطبیق برنامه با فرم‌فکتورهای مختلف و ایجاد تمایز در دستگاه‌های تاشو اجرا کرد. 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 به صورت داخلی با بزرگتر یا مساوی then بررسی می‌کند، بنابراین هر عرضی که حداقل بزرگتر یا مساوی 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 اکنون دستورالعمل‌های کیفیت برنامه‌های صفحه نمایش بزرگ برای سطح ۱ را رعایت می‌کند. این تیم از راهنمایی‌های تطبیقی ​​برنامه ، نمونه‌ها ، آزمایشگاه‌های کد ، کتاب‌های آشپزی و مستندات برای گنجاندن این توصیه‌ها استفاده کرد.

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

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

«دستیابی به جایگاه Tier 1 برای برنامه‌های صفحه بزرگ با گوگل، نقطه عطفی است که نشان‌دهنده قدرت چشم‌انداز مشترک ما می‌باشد. در JioHotstar، ما همیشه معتقد بوده‌ایم که بهینه‌سازی برای دستگاه‌های صفحه بزرگ فراتر از سازگاری است، بلکه در مورد ارتقاء تجربه مشاهده برای مخاطبانی است که به سرعت در حال پذیرش دستگاه‌های تاشو، تبلت‌ها و تلویزیون‌های متصل هستند.»

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

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