جلب الحركة إلى أنظمة التصميم

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

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

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

غالبا ما تضع انظمة التصميم القليل من التركيز على الحركة

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

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

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

دعونا نلقى نظرة على بعض الأنظمة التي تعمل على تمكين فرق المنتجات لتحسين تجربة المستخدم من خلال منهج أكثر تنظيماً للحركة.

نظام سيلزفورس لايتننج

يحتوى نظام سيلز فورس على كلا من معرضًا للرسوم المتحركة وإرشادات للأسلوب الموجود داخل نظام التصميم الخاص به. فهم يعترفون ببعض الفوائد الرئيسية لتصميم الحركة والتى تشمل (“تقليل الأحمال الذهنية ، والحد من تغير العمى” ، “توصيل التناغم الهرمي للمحتوى والعلاقات المكانية بشكل أكثر فعالية” ، “مزايا إمكانية الوصول”) ، ثم الانتقال سريعًا إلى تفاصيل كيف يجب ان تكون الحركة؟

حيث توفر إرشادات الرسوم المتحركة الخاصة بهم بنية على التوقيت (مضاعفات 100م ث) ، والتأثيرات (“مجموعة متنوعة من الرسوم المتحركة الممكنة من التحولات إلى التفاعلات الصغيرة”) ، والأبعاد (إنشاء التسلسل الهرمي من خلال تغيير الموقع والمكان).

كما تتضمن ارشادات الحركة الاخرى فى نظام تصميم البرق (لايتننج):

-استخدام اوراق النمط المتعاقب لتخفيف المنحنيات

-توازن الاتساق (“من المهم الحفاظ على اتساق الرسوم المتحركة لتوصيل رسالة واضحة”) والمرونة (“إن الفهرس (زى) الحقيقي متروك للمطور للمحافظة على الظلال الصحيحة.”)

-قم بتضمين أمثلة مشفرة لكيفية محاكاة الرسوم التوضيحية والممتلكات.

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

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

ارشادات الواجهه البشرية لشركة (أبل)

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

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

وتتضمن عناصر الحركة الأخرى في إرشادات الواجهه البشرية لأبل:

-تتطلب القدرة على الانسحاب من الرسوم المتحركة

-التركيز على الرسوم المتحركة بشكل معتدل ومدروس

-الاشارة الى الفيزيائية والواقعية ولكن مع الاستفادة من مزايا المستخدمين (“إبقاء الناس موجودين ، وتقديم تعليقات واضحة استجابة لإجراءات المستخدم ، ولفت الانتباه إلى مواقع محددة على الشاشة”) التركيز الرئيسي

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

لغة التصميم للمؤسسة الدولية للحاسبات الالية

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

يركز نظام تصميم الكربون بشكل خاص على سحابة المؤسسة الدولية للحاسبات الالية.فهى مجموعة فرعية من اللغة العامة لتصميم المؤسسة حيث تقدم تفاصيل حول كيفية تفسير لغة التصميم وتنفيذها.

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

تتضمن العناصر الأخرى التي تجعل وثائق حركة المؤسسة الدولية للحاسبات الالية مميزة:

-مجموعة متنوعة من الأمثلة المتحركة لنقل كل من الأفكار المجردة وأنماط الحركة المحددة وخصائصها (بصرية بالكامل، وقائمة على الشفرات)

-ارشادات للمدد المحددة ومنحنيات مخصصة للتسهيل

-فهم القيود الفنية للرسوم المتحركة على الويب

-استكشاف متعمق لعملية تصميم الحركة

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

تصميم مواد موقع جوجل

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

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

بعض العناصر الإضافية التي تجعل التصميم متعدد الأبعاد فريدًا:

• اندرويد, اى او اس,و سى اس اس, ومنحنيات ما بعد التأثيرات لتخفيف المنحنيات
• التسلسل التفصيلي لإنشاء الرسوم المتحركة المعقدة
• أمثلة للرسوم المتحركة مصنفة جيدًا لما يجب فعله ، “لا تفعل” ، واستخدامه مع “الحذر”
• إرشادات لتخصيص الرسوم المتحركة وفقًا لاحتياجاتك وعلامتك التجارية وتطبيقك
• (https://material.io/design/motion/customization.html)

تتضمن المواد أيضًا مجموعة متنوعة من نصائح تصميم الحركة ذات الصلة ، بغض النظر عما إذا كنت تستخدم النظام ككل:

-يجب أن تحتوي الرسوم المتحركة الكبيرة على فترات أطول (سرعة متناسقة ، غير متناسقة المدة) لأن العناصر يجب أن تتحرك أكثر

– يجب أن تحدث حالات طي وخروج وإغلاق أسرع من حالات الفتح لأنها تتطلب تركيزًا عقليًا أقل

-يجب تجميع العناصر المتشابهة وتحريكها كوحدة واحدة لتقليل عناصر متعددة تتنافس للحصول على الاهتمام

-يجب عرض الرسوم المتحركة المتقنة فقط في خطوات مهمة في رحلة المستخدم لأنها يمكن أن تكون متكررة وتشتيت الانتباه إذا تم عرضها كثيرًا

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

“يوفر مزيج من مبادئ الحركة والأمثلة القابلة للتنفيذ أكثر مجموعة فعالة للفرق التي تبني أنظمة التصميم الداخلية”.

تصميم الحركة لنظام التصميم

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

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

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

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

—-صورة متحركة—-

لقاء مع ستوديو انفجن

للكاتب براين زافستوسكي

جميع الصور بتصرف من المصدر
ترجمة : آية رضوان
الكاتب: Bryan Zavestoski
المصدر: https://www.invisionapp.com/inside-design/motion-design-systems/