مبادئ جوجل التوجيهية لتصميم الماتريال: الرسوم المتحركة-الجزء الأول

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

الكتلة والوزن (Mass and Weight)

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

أفضل الممارسات (Best Practices)

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

إفعل.

الحركة مع التسارع الشديد والتباطؤ المعتدل يشعر بالطبيعة والبهجة.

لا تفعل.

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

حالات خاصة:الدخول والخروج من الإطار (Entering and Exiting Frame)

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

إفعل.

ادخل و أخرج من الاطار بالسرعة القصوى. الكرة تدخل و تخرج الاطار بالسرعة القصوى، صانعة انتقالا هادئ.

لاتفعل.

الإسراع عند دخول العنصر أو الإبطاء عند خروجة. لا يشتت المستخدم بسبب تغييرات غير ضرورية في السرعة.

إجراء تعديلات (adjustments)

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

التفاعل المستجيب (Responsive Interaction)

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

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

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

أمثلة

تفاعل السطح (Surface Reaction)

إستجابة الماتريال (Material Response)

التفاعل الشعاعي (Radial Action)

تفاعل السطح (Surface Reaction)

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

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

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

إستجابة الماتريال (Material Response)

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

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

 

نقطة المنشأ أو الإنطلاق (Point of origin)

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

إفعل.

الماتريال تظهر من نقطة اللمس، بشكل بصري تربط العنصر بنقطة اللمس.

لاتفعل.

تظهر الماتريال من مركز الشاشة كاسرة العلاقة مع الإدخال.

الارتفاع عند اللمس (Lift on touch)

عند تنشيط بطاقة أو فصل عنصر ، يجب أن ترتفع البطاقة للاشارة إلي الحالة النشطة.

التفاعل الشعاعي (Radial Action)

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

المصدر

مقالات ذات صلة

4 تعليقات

  1. مصطفى وهبه
    25 أغسطس,2014 في 11:19 م - Reply

    ممتاز يا احمد تسلم ايدك .

  2. الحسن الدسوقي
    25 أغسطس,2014 في 11:56 م - Reply

    تسلم ايديك يااحمد ،،، شيء جميل ،،،
    احسن حاجة ان الكلام موضح بشروحات عملية ،،، وده المطلوب بالنسبالي مش هقعد اقرأ كلام كتير
    انا هبص على الـأنيميشن اكتر من الكلام وكدة بالنسبة اشبعت رغبتي من المقال ده بالذات ،، لأني من اعداء القراءة 🙂

    دمت بود شكرا على المجهود الطيب

  3. المصمم ابراهيم عبد الراضى
    26 أغسطس,2014 في 2:08 ص - Reply

    ماشاء الله جميل تسلم ايدك مقال ممتاز يستحق الشكر
    بالتوفيق للجميع

  4. محمد ابراهيم بسيونى
    27 أغسطس,2014 في 12:48 ص - Reply

    حاجة محترمة جدا وشغل عملى رائع

اضف رد