لماذا يصعب العرض ثلاثي الأبعاد على الهاتف
يُبنى المشهد ثلاثي الأبعاد ويُعتمد على حاسوب المصمم القوي، باتصال سريع وشاشة كبيرة. أما معظم زوارك فسيرونه على هاتف عمره بضع سنوات، عبر بيانات الجوال، وعليه تطبيقات كثيرة أخرى مفتوحة ووضع توفير الطاقة مفعّل. وفي الفجوة بين هذين الجهازين تفشل المواقع ثلاثية الأبعاد.
على الهاتف يكون التنزيل أبطأ، ومعالج الرسوميات أضعف ويتقاسم الذاكرة مع كل ما عداه، والعمل المتواصل يرفع حرارة الجهاز فيخفّض النظام سرعته، وقد يتخلص المتصفح من الصفحة إن استهلكت ذاكرة أكثر من اللازم. لا شيء من هذا يمنع تجربة ثلاثية الأبعاد جيدة على الهاتف، لكنه يفرض أن يكون الأداء متطلباً منذ اليوم الأول، وبأرقام محددة.
حدّد ميزانيات الأداء قبل أن يبدأ التصميم
| الميزانية | ما تضبطه | لماذا تهم |
|---|---|---|
| العرض الأول | الوقت حتى يرى الزائر محتوى ذا معنى ويستطيع التمرير | الزائر يغادر قبل أن تكتمل الصفحة البطيئة، ومحركات البحث تقيس هذا الوقت أيضاً |
| حجم ملفات المشهد | إجمالي حجم النماذج والخامات والشيفرة في المشهد الأول | يحدد مدة الانتظار عبر بيانات الجوال |
| الوقت حتى يصبح المشهد تفاعلياً | من تحميل الصفحة إلى مشهد يستطيع الزائر تدويره | الانتظار الطويل يحتاج إلى شاشة تحميل مدروسة، أو إلى مشهد أخف |
| معدل الإطارات | عدد الإطارات التي تُرسم في الثانية أثناء التفاعل | إن هبط عن المعدل الذي يضمن السلاسة، بدا التدوير معطّلاً |
| الذاكرة | أقصى ما تستهلكه الصفحة من الذاكرة | إن تجاوزتها الصفحة، أعاد المتصفح تحميلها أو أغلقها |
| سرعة الاستجابة | التأخير بين اللمسة وظهور استجابة مرئية | الشيفرة الثقيلة تجعل الصفحة كلها تبدو متجمدة |
اتفق مع فريق التطوير على هذه الأرقام لأجهزة مرجعية محددة بالاسم: هاتف Android معيّن من الفئة المتوسطة، وهاتف iPhone يسبق الإصدار الحالي ببضعة أجيال، على اتصال مُبطّأ يحاكي شبكة الجوال. فالميزانيات التي لا ترتبط بجهاز مرجعي ليست إلا آراء. اكتبها في متطلبات المشروع، وتحقق منها في كل مراجعة.
حمّل الصفحة أولاً، ثم المشهد ثلاثي الأبعاد
- 01
اعرض المحتوى فوراً
يجب أن يظهر العنوان والنص وقائمة التنقل وصورة ثابتة للمشهد دون انتظار أي شيفرة ثلاثية الأبعاد. فالصفحة لا بد أن تؤدي غرضها قبل أن يصل المشهد.
- 02
ضع صورة ثابتة مكان المشهد
لقطة مُعدّة مسبقاً للمشهد في وضعه الأول تملأ مكانه، وحين يصبح المشهد جاهزاً يحلّ محلها في الموضع نفسه، دون أن يقفز تخطيط الصفحة.
- 03
لا تحمّل المشهد إلا عند الحاجة
إن كان المشهد أسفل الشاشة الأولى، فابدأ تحميله حين يقترب منه الزائر بالتمرير. وإن كان يحتاج إلى لمسة ليعمل، فانتظر تلك اللمسة.
- 04
حمّل على مراحل
نسخة خفيفة من النموذج أولاً، تتبعها التفاصيل الدقيقة والخامات الإضافية والأجزاء الاختيارية.
- 05
جهّز برامج التظليل دون أن تتجمد الصفحة
حين يجهّز المتصفح البرامج التي ترسم مواد الأسطح، وهي ما يُعرف ببرامج التظليل، قد يتوقف الهاتف لحظةً يلاحظها الزائر. لذلك يجب أن يجري هذا التجهيز في الخلفية قبل كشف المشهد، لا عند أول لمسة.
- 06
أظهر التقدم الحقيقي
إن طال الانتظار أكثر من لحظة، فاعرض مؤشراً حقيقياً للتقدم وشيئاً يقرؤه الزائر، ولا تترك مكان المشهد فارغاً أبداً.
- 07
استخدم التخزين المؤقت بحكمة
لا ينبغي أن يُضطر الزائر العائد إلى تنزيل النماذج نفسها مرة أخرى.
تشمل مقاييس تجربة الصفحة لدى Google سرعة ظهور أكبر عنصر فيها، وثبات تخطيطها، وسرعة استجابتها لتفاعل الزائر. والمشهد ثلاثي الأبعاد الذي يعطّل أياً منها قد يؤثر في تقييم الصفحة، لا في إحساس الزائر بها فحسب.
أبقِ النماذج والخامات صغيرة
- الشكل الهندسي. خفّض عدد المثلثات إلى ما يظهر في أقرب لقطة، واضغط بيانات الشكل، واحذف كل ما لا تراه الكاميرا أبداً.
- الخامات. وهي الصور التي تكسو أسطح النموذج، وتستحوذ عادةً على النصيب الأكبر من حجم التنزيل ومن الذاكرة معاً. استخدم أصغر أبعاد تحافظ على المظهر، واجعل الخامة الواحدة مشتركة بين أكثر من عنصر، وقدّمها بصيغ مضغوطة يستطيع معالج الرسوميات استخدامها مباشرة.
- عدد العناصر المنفصلة. كل عنصر يُرسم على حدة يستهلك وقتاً في كل إطار. ادمج الأجزاء التي لا تتغير أبداً، وأعد استخدام الأجزاء المتكررة.
- مواد الأسطح. المواد القليلة البسيطة تُرسم أسرع من المواد الكثيرة المعقدة، أما الشفافية والانكسار والتأثيرات متعددة الطبقات فمكلفة على الهاتف.
- الإضاءة والظلال. الظلال التي تُحسب لحظة بلحظة من أكثر الميزات كلفة. احسب الإضاءة مسبقاً واحفظها في الخامات حيث يسمح المشهد، وقلّل الأضواء التي تتغير أثناء العرض.
- المؤثرات. مؤثرات الشاشة الكاملة، مثل التمويه والتوهج وعمق الميدان، تضاعف العمل المطلوب في كل إطار. خفّفها على الهواتف أو احذفها.
- الدقة. كثافة البكسلات في شاشات الهواتف عالية جداً، والرسم بدقة تقف عند سقف أقل قليلاً من أقصى دقة للشاشة يمر في الغالب دون أن يلاحظه أحد، ويوفّر الكثير.
يشرح دليلنا عن تجهيز نماذج المنتجات ثلاثية الأبعاد للموقع كيف تُصنع النماذج خفيفة من البداية.
حافظ على معدل الإطارات والذاكرة والبطارية
- 01
هل يُرسم المشهد فقط حين يتغير فيه شيء؟
ما تطلبه من فريق التطويرالمشهد الساكن لا ينبغي أن يُعاد رسمه باستمرار. والرسم عند الحاجة وحدها يوفّر البطارية ويُبقي الهاتف بارداً.
- 02
هل يتوقف حين يخرج من مجال الرؤية؟
ما تطلبه من فريق التطويرحين يخرج المشهد من الشاشة بالتمرير، أو تُخفى علامة التبويب، يجب أن تتوقف الحركة والرسم.
- 03
هل يتكيّف مع الجهاز؟
ما تطلبه من فريق التطويرقِس معدل الإطارات في الثواني الأولى، فإن بدا الجهاز متعثراً فخفّض الجودة تلقائياً، بتقليل الدقة أو المؤثرات أو التفاصيل.
- 04
هل تُحرَّر الذاكرة؟
ما تطلبه من فريق التطويرالنماذج والخامات الخاصة بخيارات لم تعد معروضة يجب أن تُزال من الذاكرة. وتسرّب الذاكرة يظهر في صورة تعطّل الصفحة بعد دقائق من الاستخدام.
- 05
ماذا يحدث بعد عشر دقائق؟
ما تطلبه من فريق التطويرتُبطئ الهواتف نفسها حين ترتفع حرارتها، فالمشهد الذي يعمل بسلاسة ثلاثين ثانية قد يتقطع بعد استخدام متواصل. لذلك اختبر على مدى زمني طويل.
- 06
هل تبقى بقية الصفحة سريعة الاستجابة؟
ما تطلبه من فريق التطويريجب ألا يتوقف التمرير ولا القوائم ولا الأزرار أثناء تحميل المشهد وتشغيله.
مثال تطبيقي
صفحة منتج لعلامة ساعات
هذا مثال افتراضي يبيّن كيف تكشف الميزانيات المشكلة مبكراً. علامة تجارية للساعات تطلب صفحة منتج فيها ساعة ثلاثية الأبعاد يديرها الزائر ويغيّر حزامها.
- الميزانياتحُدّدت على هاتف Android معيّن من الفئة المتوسطة، على اتصال مُبطّأ: محتوى الصفحة يظهر خلال ثانيتين، والمشهد يصبح تفاعلياً خلال ست ثوانٍ، والحركة سلسة أثناء التدوير، ولا إعادة تحميل خلال عشر دقائق من الاستخدام.
- النسخة الأولىعلى حاسوب المصمم المحمول تعمل الصفحة بلا عيب. أما على الهاتف المرجعي فيحتاج المشهد إلى 19 ثانية ليظهر، وتتجمد الصفحة ثانيتين عند أول لمسة، ثم يعيد المتصفح تحميلها بعد أربع دقائق.
- الأسبابكانت الخامات أكبر بأربعة أضعاف مما تستطيع شاشة الهاتف إظهاره، وكانت الأحزمة كلها تُحمَّل منذ البداية، وبرامج تظليل المواد تُجهَّز عند أول لمسة، أما خامات الأحزمة فلم تُحرَّر من الذاكرة قط.
- الإصلاحاتصُغّرت الخامات وضُغطت، ولم يعد يُحمَّل في البداية إلا الحزام الافتراضي. وصارت برامج التظليل تُجهَّز في الخلفية بينما تظهر صورة ثابتة للساعة، وتُحرَّر الأحزمة غير المستخدمة من الذاكرة، وتُبسَّط الانعكاسات على الهواتف.
- النتيجةتظهر الصفحة فوراً ومعها صورة ثابتة للساعة، وتصبح الساعة تفاعلية في نحو خمس ثوانٍ، وتعمل عشر دقائق دون مشكلة. أما الهواتف الأقدم التي يقل أداؤها عن حد معيّن، فتعرض بدلاً من المشهد سلسلة من اللقطات المُعدّة مسبقاً يقلّبها الزائر بإصبعه.
ولأن الهاتف المرجعي اختُبر منذ المراجعة الأولى، كلّفت هذه المشكلات أسبوعاً واحداً. ولو اكتُشفت بعد الإطلاق، لما رأى معظم زوار الموقع من هواتفهم الساعة أصلاً.
البدائل واللمس وإمكانية الوصول
مشهد يراعي الزائر
- صورة ثابتة أو سلسلة صور حين يتعذر تشغيل المشهد أو يفشل تحميله
- التمرير العمودي يعمل دائماً، حتى حين يكون الإصبع على المشهد
- التدوير يحتاج إلى حركة مقصودة، مع إشارة ظاهرة تدل عليها
- احترام إعداد تقليل الحركة الذي اختاره الزائر في جهازه
- المعلومات الأساسية مكتوبة نصاً أيضاً، لمن لا يستطيع استخدام العرض ثلاثي الأبعاد
مشهد لا يراعي الزائر
- مساحة فارغة أو رسالة خطأ حين لا يدعم الجهاز الرسوميات المطلوبة
- المشهد يحتجز التمرير، فلا يستطيع الزائر تجاوزه
- حركة تبدأ تلقائياً دون وسيلة لإيقافها
- معلومات أساسية عن المنتج لا يصل إليها الزائر إلا باستكشاف النموذج
- أزرار تحكم أصغر من أن يضغطها الإبهام
اللمس يستحق تفكيراً خاصاً. فسحب الإصبع على الشاشة قد يعني تمرير الصفحة أو تدوير المجسم، وعلى الصفحة أن تخمّن. والحل الشائع أن يمرّر السحب العمودي الصفحة ويدير السحب الأفقي المجسم، أو أن يلمس الزائر المشهد ليدخل وضعاً تفاعلياً له مخرج واضح. جرّب ذلك بيد واحدة على هاتف صغير.
اختبر على هواتف حقيقية طوال المشروع
أدوات متصفح الحاسوب التي تحاكي الهاتف تغيّر حجم الشاشة وتبطئ الشبكة، لكنها لا تحاكي معالج الرسوميات في الهاتف ولا حدود ذاكرته ولا حرارته، وهذه لا يكشفها إلا جهاز حقيقي. ضع الهواتف المرجعية على مكتب من يراجع العمل، وافتح عليها كل نسخة جديدة منذ أول نموذج أولي.
اختبر على منصتي الهاتف الرئيسيتين، لأن متصفحاتهما تختلف في التعامل مع الرسوميات وفي حدود الذاكرة. واستخدم بيانات الجوال إلى جانب شبكة المكتب اللاسلكية. وقِس الأداء بملف شخصي جديد في المتصفح حتى لا يكون فيه شيء مخزّن مسبقاً، وتأكد أن الصفحة التي تختبرها هي النسخة الجديدة فعلاً. وبعد الإطلاق، اجمع بيانات الأداء من الزوار الحقيقيين، فهي تكشف أجهزة وظروفاً لا يغطيها أي مختبر.
قائمة التحقق من أداء المشاهد ثلاثية الأبعاد على الهاتف
قائمة التحقق من أداء المشاهد ثلاثية الأبعاد على الهاتف
0 من 11 منجزةماذا تفعل الآن
افتح صفحتك ثلاثية الأبعاد، الحالية أو المخطط لها، على أقدم هاتف في المكتب وعبر بيانات الجوال، وقِس الوقت حتى تستطيع قراءة شيء، ثم حتى تستطيع التفاعل. استخدمها خمس دقائق. فما ستعيشه أقرب إلى تجربة زائرك المعتاد من أي شيء تراه على شاشة الاستوديو.
تشرح صفحتا تطوير المواقع ثلاثية الأبعاد وتحسين أداء المواقع كيف نبني المشاهد ثلاثية الأبعاد ونضبط أداءها للهواتف. أرسل إلينا صفحة تقلقك، وسنخبرك بما نقيسه.
أسئلة شائعة
هل يمكن أن يعمل المشهد التفاعلي ثلاثي الأبعاد جيداً على الهاتف فعلاً؟
نعم، على معظم الهواتف الحديثة نسبياً، حين يُبنى لها: نماذج صغيرة، وخامات مضغوطة، وتحميل على مراحل، ومؤثرات محدودة، وجودة تتكيف مع الجهاز. أما المشهد المصمم للحاسوب حين يُعرض كما هو على الهاتف، فلا ينجح. قرّر منذ البداية أن الهاتف هو الهدف الأول، واختبر عليه طوال المشروع.
هل يضر المشهد ثلاثي الأبعاد بظهورنا في نتائج البحث؟
ليس بحد ذاته. تقيّم محركات البحث محتوى الصفحة وتجربتها كما تُقاس فعلاً: سرعة ظهور المحتوى الرئيسي، وهل يتحرك التخطيط، وسرعة الاستجابة. والمشهد الذي يؤخر هذه الأمور أو يعطّلها قد يُحسب على الصفحة. أما عرض المحتوى وصورة ثابتة للمشهد أولاً، ثم تحميل المشهد بعد ذلك، فيجنّبك المشكلة.
ماذا ينبغي أن يرى الزائر الذي يستخدم هاتفاً قديماً؟
بديلاً يعرض المنتج بصورة جيدة هو أيضاً: صورة عالية الجودة، أو سلسلة من اللقطات المُعدّة مسبقاً يقلّبها بإصبعه، أو مقطع فيديو قصيراً. ويجب أن يكتشف الموقع غياب دعم الرسوميات وضعف الأداء المقيس، وأن ينتقل إلى البديل تلقائياً. فالزائر الذي يرى صوراً جيدة لم يخسر إلا القليل، أما من يرى مساحة فارغة أو صفحة متجمدة فقد خسر كل شيء.
على أي الهواتف نختبر؟
هاتف Android واحد على الأقل من الفئة المتوسطة عمره بضع سنوات، وهاتف iPhone أقدم، لأنهما أقرب إلى ما تحمله شريحة كبيرة من الزوار الحقيقيين من أحدث هواتف الفئة العليا. راجع بيانات التحليلات لديك لتعرف الأجهزة التي يستخدمها جمهورك. وأضف هاتفاً صغير الشاشة لاختبار التخطيط واللمس، واختبر عبر بيانات الجوال إلى جانب الشبكة اللاسلكية.
لماذا تتعطل الصفحة بعد بضع دقائق على بعض الهواتف؟
السبب في الغالب هو الذاكرة. فمتصفحات الهاتف تحدد ما يحق للصفحة استهلاكه منها، وتعيد تحميل الصفحة أو تغلقها إذا تجاوزت الحد. وأكثر الأسباب شيوعاً الخامات الكبيرة، تليها ملفات تُحمَّل لكل خيار ولا تُحرَّر أبداً. وتصغير الخامات، واستخدام الصيغ المضغوطة، وتحرير الملفات غير المستخدمة، يحل المشكلة عادةً.
