تصميم موقع 3D تفاعلي بحركات وأنيميشن لشركتك

الانطباع الفاخر لا يأتي من كثرة المؤثرات، بل من الانضباط: خط واضح، ومساحات واسعة، وصور بجودة عالية، وحركة لها سبب. المواقع التي يتذكرها الناس من العلامات العالمية تشترك في شيء واحد: كل عنصر يتحرك ليشرح شيئًا، لا ليستعرض. المجسم يدور ليُري الزائر الجهة الخلفية من المنتج، والقسم يظهر مع التمرير ليقود العين إلى الفكرة التالية.

لذلك نبدأ بالقصة قبل التقنية: ما الذي يجب أن يفهمه الزائر في الشاشة الأولى، وما الذي يراه بعدها، وأين يضغط. ثم نقرر أين يخدم المجسم هذه القصة وأين تكفي صورة جيدة. ويمكنك أن ترى النتيجة بنفسك: صفحتنا الرئيسية على www.fortunecode.org مبنية بواجهة ثلاثية الأبعاد وأقسام متحركة باستخدام three.js. مرّر فيها على جوالك وعلى حاسوبك، فهي المثال الحي لما نبنيه.

تفيد عندما يكون الشيء الذي تبيعه صعب الشرح بالكلام أو بصورة مسطحة: منتج صناعي له أجزاء داخلية، أو مشروع عقاري لم يُبنَ بعد، أو جهاز يعمل بطريقة جديدة، أو منصة تقنية فكرتها مجردة. هنا يختصر المجسم المتحرك فقرات من الشرح، ويمنح الزائر شعورًا بأنه أمسك المنتج بيده.

وتضر عندما يأتي الزائر لمعلومة سريعة: رقم هاتف، أو ساعات العمل، أو سعر، أو نموذج حجز. من يبحث عن أقرب فرع لا يريد أن ينتظر عرضًا. إذا كانت هذه مهمة موقعك الأساسية، فالموقع النظيف السريع هو الشراء الأصح، ونقول لك ذلك صراحة قبل أن تدفع مقابل شيء لا تحتاجه. والحل الوسط متاح: صفحة رئيسية أو صفحة منتج بمشهد 3D، وبقية الصفحات خفيفة ومباشرة.

الخوف الأول من مواقع 3D أنها ثقيلة، وهو خوف في محله إن بُنيت بلا خطة. القاعدة التي نعمل بها: الصفحة تظهر أولًا بنصها وعنوانها وزر الإجراء كأي موقع سريع، ثم يُحمَّل المشهد ثلاثي الأبعاد في الخلفية ويظهر عندما يجهز. الزائر الذي يريد أن يقرأ أو يتواصل لا ينتظر المجسم.

والجوال يحصل على نسخة أخف من المشهد نفسه: نماذج بتفاصيل أقل، وخامات أصغر، ومؤثرات أقل، لأن معالج الرسوم في الجوال وبطاريته غير الحاسوب. وإذا فعّل الزائر في جهازه إعداد تقليل الحركة، نحترمه ونعرض نسخة هادئة. وإذا كان الجهاز أو المتصفح لا يستطيع تشغيل WebGL، يرى صورة ثابتة جيدة مكان المشهد، ويبقى الموقع كاملًا يعمل.

محركات البحث تقرأ النص، ولا ترى ما يُرسم داخل لوحة ثلاثية الأبعاد. الخطأ الشائع أن يوضع العنوان واسم المنتج ووصفه داخل المشهد نفسه، فيبدو الموقع رائعًا للزائر وفارغًا لجوجل. نبني العكس: العناوين والفقرات والروابط نص حقيقي في الصفحة، والمشهد طبقة بصرية فوقه أو خلفه.

ونضيف ما يُضاف لأي موقع مهيأ للبحث: عنوان ووصف لكل صفحة، وروابط نظيفة، وخريطة موقع، وبيانات منظمة، ونص بديل للصور. هذا ما نلتزم ببنائه. أما الترتيب نفسه فيعتمد على المنافسة والمحتوى والوقت، ولا نعد بمركز معين في نتائج البحث.

ثلاثة أشياء تحدد مدة المشروع أكثر من البرمجة: الهوية، والنماذج، والمحتوى. إن كانت لديك ملفات تصميم المنتج من قسم الهندسة أو من المصنّع، مثل ملفات CAD أو نماذج جاهزة، فهي نقطة بداية ممتازة نبسّطها ونجهزها للويب. وإن لم تكن موجودة، نبني النموذج من الصور والمقاسات ببرامج مثل Blender، ويُحسب ذلك بندًا واضحًا في العرض.

ونتفق مبكرًا على عدد المشاهد وما يحدث في كل منها، لأن هذا ما يحرك التكلفة والمدة. مشهد واحد متقن في الواجهة يختلف كثيرًا عن خمسة مشاهد بنماذج مختلفة. نكتب ذلك في لوحة قصة بسيطة تعتمدها قبل أن نبدأ التنفيذ.

أغلب المواقع ثلاثية الأبعاد التي تخيّب أصحابها لا تفشل في الشكل، بل في الاستخدام. تبدو مبهرة في العرض التجريبي على حاسوب قوي، ثم يفتحها العميل الحقيقي على جواله في شبكة متوسطة.

لذلك نختبر على أجهزة حقيقية متوسطة منذ الأسابيع الأولى، ونعرض عليك الموقع على رابط تجريبي تفتحه من جوالك، لا في تسجيل مصور فقط.