نص المقال
ينبغي أن يكون للحركة دور
يمكن للحركة أن تُظهر الصلة بين العناصر ونتيجة الفعل، وأن تساعد على التوجّه، أو تبرز أسلوب العلامة. القائمة التي تنفتح بسلاسة تشرح من أين أتت طبقة الواجهة الجديدة. والاستجابة القصيرة للزر تؤكد الضغط. وإذا كان المؤثر لا يشرح شيئًا ولا يعزّز شيئًا، فإننا نستغني عنه.
الإبهار يبدأ بالتباين
لا داعي لتحريك كل شيء. حين يتحرك كل عنصر، لا تجد العين ما تتشبّث به. والتكوين الهادئ مع حركة معبّرة واحدة كثيرًا ما يكون أقوى من عشرة مؤثرات تتنافس فيما بينها. وقد كتبنا عن الازدحام كسبب لمغادرة الناس الموقع في مقال «موقع جميل يرغب الزائر في مغادرته».
ينبغي ألا يسلب التمريرُ التحكم
تضيف الحركة المرتبطة بالتمرير عمقًا وتساعد على رواية القصة. لكن إذا استولت الصفحة على التمرير، أو أخّرت النص، أو قادت الزائر في مسار مفروض، فإن المؤثر يعمل ضد الشخص. لذلك نحرص على أن يقرأ بإيقاعه الخاص.
الماء والضوء والعمق
سطح الماء، ولمعات الضوء المنكسر، والتشوّه الخفيف، كلها يمكن أن تصبح جزءًا من لغة فنية. وتكون مقنعة حين تُستخدم باعتدال: لتتحرك العناصر بسرعات مختلفة، وليتغير الضوء بهدوء دون وميض فوضوي. يمكن تنفيذ هذه المؤثرات بـCSS أو الفيديو أو canvas أو WebGL، ونختار بحسب المهمة والأجهزة.
السرعة جزء من الانطباع أيضًا
الفيديو الثقيل وكثرة المؤثرات يبطئان التحميل ويُثقلان الجهاز. نضغط الصور والفيديو، ونُبقي عدد المؤثرات النشطة تحت السيطرة، ونفحص النتيجة على هواتف وحواسيب حقيقية.
نراعي إعدادات المستخدم
الحركة المكثفة تزعج بعض الناس. نراعي إعداد النظام prefers-reduced-motion ونستبدل الانتقالات المعقدة بأخرى هادئة. ولا ينبغي أن يتوقف معنى الواجهة على الحركة.
الهاتف يحتاج إلى حل خاص به
على الهاتف الشاشة أصغر، والتفاعل مختلف، والموارد أقل في الغالب. نبسّط بعض المؤثرات أو نحذفها: تبقى الفكرة نفسها، لكنها تتكيّف مع ظروف أخرى.
كيف نعرف أن المؤثر ناجح
هل تساعد الحركة على فهم الواجهة؟ ألا تعيق القراءة؟ هل تنتهي بسرعة؟ هل هي مريحة على الهاتف؟ هل توجد نسخة هادئة؟ كثيرًا ما يكون أسهل طريق لتحسين الحركة أن نجعلها أقصر وأهدأ وأدق.
باختصار
تساعد الحركة على إخراج الانطباع الذي يتركه الموقع. فهي تصنع الأجواء، وتساعد على التوجّه، وتجعل الموقع عالقًا في الذاكرة. ولا يُقاس الحل الجيد بعدد التفاصيل المتحركة: بل بأنه مختار بدقة، ومرتبط بصورة العلامة، ويبقى مريحًا للإنسان. أما كيف انتقل تصميم المواقع من الصفحات الثابتة إلى مثل هذه المشاهد، فيرويه مقال «تاريخ تصميم المواقع بعيون الحاسوب». وإذا كان مشروعك يحتاج إلى مشاهد معقدة وسلوك غير تقليدي للواجهة، فهذا مشروع مخصص.
— SOMO STUDIO
