التحول الهادف(Meaningful Transitions)

قد يكون من الصعب أحياناً على المستخدم أن يعرف أين يركز إهتمامة في التطبيق أو كيف تحصل عناصر التطبيق على الإنتقال من نقطة إلى نقطة أخرى. التصميم الحركي (motion design) الفعال والدقيق يمكن أن يوجه إنتباة وتركيز المستخدم من خلال خطوات متعددة من العملية والاجراء.

تجنب الإرتباك والفوضي عندما يتم تغيير التخططيات ( layouts ) أو العناصرالمعاد ترتيبها.وقم بتحسين الجمال الكلي للتجربة.

تصميم الرسوم المتحركة لا ينبغي أن يكون فقط جميلاً، ولكن يجب أن يخدم الغرض الوظيفي منه.

أمثلة

الاستمرارية البصرية (Visual Continuity)

الإنتقال بين حالتين بصريتين يجب أن يكون سلساً، ويبدو سهلا، وقبل كل شئ، يقوم بتوفير الوضوح للمستخدم، وليس الإرتباك.

التحول (transition) المصمم جيدا يسهل المهام ويمكن المستخدم من فهم واضح عن ما يجب أن يركز إهتمامة علية .والإنتقال أو التحول (transition ) يحتوى على ثلاث تصنيفات من العناصر:

• العناصر الواردة (Incoming elements).سواء تم إنشاؤها حديثاً أو ترجمتها إلى مكان المشهد(scene)، وتحتاج هذة العناصر إلى إدخالها وإعادة تأسيسها.

• العناصر الصادرة(Outgoing elements).العناصر التي لم تعد مناسبة للسياق الجديد يجب حذفها من المشهد بطريقة مميزة ومناسبة.

• العناصر المشتركة(Shared elements).العناصر التي لا تزال مستمرة منذ البداية وحتى نهاية حالة التحول أو الإنتقال (transition)، ويمكن أن تكون ذكية (subtle ) مثل رمز أو أيقونة ويمكن أن تكون ظاهرة وواضحة مثل صورة تكبر لكي تناسب حجم الشاشة.

الإعتبارات

عندما تقوم بتصميم الرسوم المتحركة عليك النظر فيما يلي:

• عليك التفكير في الكيفية التي سيتم بها توجيه إنتباه المستخدمين.وماهي العناصر والحركة التي تدعم هذا الهدف؟كيف ينبغي أن تكون العناصر الواردة، أو الصادرة، والعناصر المشتركة تكون مثبتة (emphasized ) أو غير مثبتة خلال التحول”transition”؟.
• النظر في التحولات والإنتقالات عن تصميم الشاشات وإيجاد فرص لإنشاء الإتصالات البصرية بين الحالات الإنتقالية من خلال الألوان والعناصر المستمرة.
• إضافة الحركة(motion) بحكمة:النظر في كيفية تحريك عنصر معين يضيف البهجة والوضوح إلى الإنتقال أو التحول.

أمثلة

إفعل.

الطبقة الورقية تكون ملائمة.بشكل عام، العناصر القادمة يمكن أن تنزلق لمنطقة العرض، ولكن عناصر ink لا تفعل: ينبغي أن يتلاشوا (fade in). التلاشي التقاطعي في كل الصفحة غير مرغوب، ولكن مفضل علي التقطع.

لا تفعل.

تجنب الإنقطاعات (cuts) الصعبة، الإنقطاعات المفأجاة أو الصعبة تجعل من الصعب جداً على المستخدم فهم عملية الإنتقال.

التوقيت الهرمي (Hierarchical Timing):

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

ومع ذلك ، إنها ليست صيغة بسيطة والتي يكون أهم شيئ فيها يتحرك أولا والأقل أهمية يتحرك أخيرا.توقيت انتقال وتحول العنصر يجب أن يتدفق بشكل سلس وتفادي الشعور  الغير مترابط (disjointed).

أمثلة

إفعل.

إستخدم الحركة المتداخلة (overlapping motion) للفت إنتباة المستخدم مباشرة.

لا تفعل.

التوقيت المتزامن لجميع العناصر لا يوضح ولا يركز علي ما هو مهم. إذا كانت كل العناصر أهميتها متساوية، ضع في عين الاعتبار الحركة الواسعة النطاق (larger-scale motion) لتعريفهم كمجموعة.

الكوريغرافيا المتناسقة (Consistent Choreography)

عناصر الإنتقال تتحرك حول الشاشة، يجب أن يتم ذلك بطريقة منسقة ومنظمة.مسارات العناصر  يجب أن تجعل الشعور منظم ورائع.الحركة العشوائية هي مجرد تشتيت.
التطبيق المصمم جيدا يوفر لحظات تعلم رائعة للمستخدم..عندما يتم تنسيق عناصر التحول أو الإنتقال، المستخدم يفهم تطور ونمو التطبيق.ولا يشعرون بالإرتباك من الرسوم المتحركة (animation).

أفضل الممارسات

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

إفعل.

وجه اهتمام المستخدم بحركة منسقة، مرتبة

لا تفعل.

تجنب تشتيت المستخدمين بحركات غير متسقة أو مرتبة و العناصر التي تترك أو تدخل الصورة تتحرك في اتجاهات عشوائية.

تفاصيل رائعة (Delightful Details)

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

الاستخدام الأساسي جدا للحركة يكون في الانتقالات، و لكن التطبيق الذي يسعد المستخدم فعلا عندما تكون الحركة مستخدمة بتلقائية غير واضحة. أيقونة القائمة عندما تتحول لسهم أو أيقونة التحكم التي تعيدك لللخلف  التي تتحول من واحدة لأخرى لكي تعطيك وظيفة مختلفة لكي تعلم المستخدم و أيضا تضفي على تطبيقك لحظة من الاعجاب و شعور بالانبهار مهنيا. المستخدمين يلاحظون حتى الأشياء البسيطة.

المصدر