تo للمساعدة في ضمان تجربة متميزة لجمهورها الواسع، قامت JioHotstar برفع تجربة المشاهدة من خلال تحسين تطبيقاتها للأجهزة القابلة للطي والأجهزة اللوحية. لقد أنجزوا ذلك من خلال اتباع إرشادات التطبيق التكيفي من Google واستخدام موارد مثل عينات, com.codelabs, كتب الطبخ، و الوثائق للمساعدة في إنشاء تجربة سلسة وجذابة باستمرار عبر جميع أحجام العرض.
تحدي الشاشة الكبيرة لـ JioHotstar
قدم JioHotstar تجربة مستخدم ممتازة على الهواتف القياسية وأراد الفريق الاستفادة من عوامل الشكل الجديدة. للبدء، قام الفريق بتقييم تطبيقهم مقابل تطبيق إرشادات جودة تطبيقات الشاشة الكبيرة لفهم التحسينات المطلوبة لتوسيع تجربة المستخدم لتشمل الأجهزة القابلة للطي والأجهزة اللوحية. لتحقيق المستوى 1 في حالة تطبيق الشاشة الكبيرة، نفذ الفريق تحديثين استراتيجيين لتكييف التطبيق عبر عوامل الشكل المختلفة والتمييز بين الأجهزة القابلة للطي. من خلال معالجة التحديات الفريدة التي تطرحها الأجهزة القابلة للطي والأجهزة اللوحية، تهدف JioHotstar لتسليم تجربة عالية الجودة وغامرة عبر جميع أحجام العرض ونسب العرض إلى الارتفاع.
ما كان عليهم القيام به
واجهت واجهة مستخدم JioHotstar، المصممة أساسًا لشاشات الهواتف القياسية، تحديات في تكييف نسب أبعاد الصورة الرئيسية والقوائم وشاشات العرض مع أحجام الشاشات المتنوعة ودقة عوامل الشكل الأخرى. أدى هذا في كثير من الأحيان إلى اقتصاص الصور، وتنسيق الحروف، وانخفاض الدقة، والمساحة غير المستغلة، خاصة في الوضع الأفقي. للمساعدة في الاستفادة الكاملة من إمكانات الأجهزة اللوحية والأجهزة القابلة للطي وتقديم تجربة مستخدم محسّنة عبر هذه الأنواع من الأجهزة، ركزت JioHotstar على تحسين واجهة المستخدم لضمان مرونة التخطيط الأمثل وعرض الصور والتنقل عبر مجموعة واسعة من الأجهزة.
ماذا فعلوا
للحصول على تجربة مشاهدة أفضل على الشاشات الكبيرة، أخذت JioHotstar زمام المبادرة لتحسين تطبيقها من خلال دمجه WindowSizeClass وإنشاء تخطيطات محسنة للعروض المدمجة والمتوسطة والممتدة. سمح ذلك للتطبيق بتكييف واجهة المستخدم الخاصة به مع أبعاد الشاشة ونسب العرض إلى الارتفاع المختلفة، مما يضمن واجهة مستخدم متسقة وجذابة عبر الأجهزة المختلفة.
اتبعت JioHotstar هذا النمط باستخدام مكتبة Material 3 Adaptive لمعرفة مقدار المساحة المتوفرة في التطبيق. أولا استدعاء الحاليWindowAdaptiveInfo() وظيفة, ثم استخدام تخطيطات جديدة وفقًا لفئات حجم النافذة الثلاثة:
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() }
نقاط التوقف مرتبة، من الأكبر إلى الأصغر، حيث تتحقق واجهة برمجة التطبيقات داخليًا من أكبر أو يساوي ذلك الحين، وبالتالي فإن أي عرض أكبر أو يساوي على الأقل موسعة سيكون دائما أكبر من واسطة.
JioHotstar قادر على توفير تجربة متميزة وفريدة من نوعها للأجهزة القابلة للطي: وضع الطاولة. تعمل هذه الميزة على نقل مشغل الفيديو بسهولة إلى النصف العلوي من الشاشة وعناصر التحكم في الفيديو إلى النصف السفلي عندما يكون الجهاز القابل للطي مطويًا جزئيًا للاستمتاع بتجربة التحدث الحر.
