البحث في الموقع

كلمة حركات مستمدة من الفعل «حرَّك» والتحرُّك سمةٌ تعطينا الإحساس بالحيوية وتجعل أحداث الطبيعة تبدو أكثر واقعيةً بالنسبة لنا، فالحركات تجذب انتباه الناظر وتجعلة يشعر بإثارة الموقف وتبرز المشاهد الأكثر أهميةً وإقناعًا من غيرها. أمَّا العناصر الساكنة التي تجلس بلا حراك، فتشعرك أنَّها ميتة، حتى وإن كان تصميمها جذابًا. يعدُّ التحريك فنًا مثله كَمَثل أي فنٍّ سواءً كان الشعر أو الرسم أو غيرهما من الفنون، وصارفي هذه الأيام علمًا يُدرّس وعملًا يُنجَز، حتى أنه أصبح متأصلًا في روح تصميم الويب ويبدو أنه إضافة رائعة إلى العديد من عناصر موقع الويب. هل تجلب الحركات المزيد من الحياة للتصميم أم أنها قد تفسده أحيانًا؟ دعنا نتعرف على الفوائد التي يمكن أن تقدمها الحركات لموقع الويب وما هي الحالات التي يكون من الأفضل تجنبها. كيف ظهرت الحركات في تصميم المواقع ظهرت الحركات في الويب منذ وقت طويل. أولاً، كانت هناك ملفات ‎.gif صغيرة الحجم بها صور متحركة ومقاطع فيديو متنوعة. كانت تلك العصور المظلمة مع الكثير من بطاقات Flash وأشياء نفضل أن لا نراها. في تلك الأيام، لم يكن أحدًا يعتبر الحركات وسيلة لتحسين قابلية استخدام موقع الويب. كانت تستخدم في الغالب للتزين أو للمتعة فقط. اليوم، يمكنك استخدام تأثيرات الحركة لتحسين التنقل والاستخدام لموقعك. منذ وقت ليس ببعيد، أُنشئت جميع العناصر والتأثيرات المتحركة على مواقع الويب بمساعدة تقنية Flash. بالطبع، لقد كانت تقنية ثورية في ذلك الوقت على الرغم من أنها كانت ثقيلة جدًا وزادت من وقت تحميل الموقع بشكل كبير. في هذه الأيام، تُصمّمم الحركات باستخدام شيفرات JavaScript و CSS الخفيفة التي تساعد على إضافة عناصر متحركة إلى الموقع دون زيادة تحميله. والأهم من ذلك، تُستخدم الحركات هذه الأيام لتحسين UX، وليس فقط للمتعة. إنها وسيلة رائعة لمصممي الويب التي تساعد في جعل موقع الويب أفضل وأسهل في الاستخدام. كما في الحالات التالية: تحسين قابلية الاستخدام بالحركات في كثير من الحالات، تُستخدم تأثيرات الحركة لجذب انتباه المستخدم لتفاصيل مهمة تساعده لاتخاذ القرار الصحيح بشأن إمكانية النقر فوق عنصر من بين أشياء أخرى. وبالتالي، تستخدم العديد من مواقع الويب تأثيرًا هزَّازًا في نماذج تسجيل الدخول لتبين للمستخدمين أن هناك خطأ ما وأن المعلومات قد أُدخلت بشكل غير صحيح، مثل كلمة السر الخاطئة. هذا الأسلوب يحاكي هزِّة رأس إنسان يقول "لا". هناك العديد من الطرق الأخرى لاستخدام الحركات لتحسين تجربة المستخدم UX. يمكن استخدامها في أشرطة التنقل لفصل الفئات الرئيسية عن الفئات الفرعية؛ أو ضمن خيارات متعددة، عندما تتلاشى جميع العناصر باستثناء العنصر المختار. موقع Etechevent مع عناصر متحركة يمكن استخدام الحركات لتوجيه المستخدمين حول الموقع وحتى جعلهم يشترون. إن إضافة عناصر تفاعلية وجذب انتباه المستخدمين إليها بمساعدة تأثيرات الحركة يمكن أن يساعد مواقع الويب التجارية على تحسين العقارات وعائد الاستثمار. ويمكن أن تستفيد مواقع رواية القصص أيضًا من تضمين الحركات. حيث يمكنها أن تبين للمستخدمين ما الخطوة التالية التي يجب أن تكون أو كيفية اختيار مكان الانتقال في موقع الويب. استخدام الحركات في التصميم الماديّ (Material Design) أثبتت فكرة الحركات في تصميم الويب أنها مفيدة للغاية إذا لم تستخدم بطريقة تزيينية فقط. غالبًا ما يستخدمها مصممو UI و UX لتحسين سير العمل لديهم. حتى Google تدرك أهمية الحركة لسهولة الاستخدام، وهكذا ظهر التصميم الماديّ. أصبح التصميم المادي أكثر وأكثر عصرية ويُستخدم هذه الأيام في العديد من التطبيقات وتَصاميم المواقع. سر شعبيته هو اهتمامه الكبير بكيفية إدراك الكائن أو العنصر؛ كيف يمكن للحركة أن تخبر المستخدمين أكثر عن هذا العنصر وكيفية استخدامه. تنص Google في دليلها للتصميم المادي على أن الحركة يمكن أن تخبر المستخدمين أن أي كائن هو خفيف أو ثقيل أو مرن أو كبير أو صغير. يجب استخدام الحركات لتزويد المستخدمين بِفهم أفضل لطبيعة الكائن، وبالتالي، كيف يمكن وينبغي أن تستخدم داخل التصميم. تتقدم Google إلى أبعد من ذلك مع الحركات وتوصي باستخدام العناصر المتحركة التي تغير سرعتها ومدتها اعتمادًا على الهدف أو التأثير الذي ترغب في الحصول عليه. وبالتالي، تقدم Google العناصر الواردة والصادرة التي تظهر على الشاشة عندما ينبغي جذب الانتباه، أو إزالته من الشاشة عندما لم تعد هناك حاجة إليه. نصائح لاستخدام الحركات في المواقع عند إضافة الحركات إلى موقعك، يجب أن تفكر جيدًا في جميع مخاطرها أيضًا. العناصر المتحركة يمكن أن تضر بأداء موقع الويب وتجربة المستخدم UX. أولًا، يجب إعادة التفكير في استخدام الحركات إن كانت تبطئ من سرعة تحميل موقعك وأداءه العام. يمكن الكشف عن ذلك بمقارنة بسيطة لموقعك بحركاته مع أداء ألعاب الحاسوب الثقيلة. إذا كانت اللعبة تعمل بسلاسة على سطح المكتب أكثر من موقعك فيجب أن يكون هذا سببًا في إعادة النظر في استخدام الحركات. موقع التوقعات السعيدة استفد من CSS عند إنشاء حركات لموقعك. تعد مكتبة jQuery مثاليةً وتستخدم في العديد من المشاريع، لكنها يمكن أن تبطئ بالفعل من أداء موقعك. تسمح شيفرة CSS بإنشاء حركات خفيفة ستبدو رائعةً على أي جهاز دون إِثْقال التصميم. يجب أن تتأكد أن حركاتك متجاوبةً (responsive). موقع الويب المتجاوب أمر لا بد منه إن كنت ترغب في النجاح. ولكن إذا كان الأداء يبدو رائعًا على شاشة سطح المكتب فقط، فقد تخسر المعركة مع المستخدمين. هناك العديد من الأدوات التي تسمح بإنشاء حركات مُتجاوبة (مثل Adobe After Effects أو Invision) فبُناة مواقع الويب (مثل Webflow أو MotoCMS) تتضمن تأثيرات حركية متجاوبة وتوفر أنواع مختلفة من الحركات التي يمكن استخدامها داخل المواقع لتحسين تصميمها وقابليتها للاستخدام مثل: التلاشي (اليسار ، اليمين ، أعلى ، أسفل) (Fade in). الارتداد(Bounce in). التدوير (يسار ، يمين ، أعلى ، أسفل) (Rotate). الزلق (اليسار ، اليمين ، أعلى ، أسفل) (Slide in). اللمعان والنبض(Flash and Pulse). التذبذب (Wobbling). الاهتزاز (Swinging) وإلى آخره. الحركات يجب أن تلفت الانتباه ولكن ليس كثيرًا. تأكد من أن الحركة لا تستغرق وقتًا طويلاً ولا تدوم طويلًا على الشاشة. هذا هو الحال خاصةً إذا كنا نتحدث عن العناصر التي يجب على المستخدمين التفاعل معها كثيرًا. قد يكون الأمر ممتعًا مرةً أو مرتين، لكن مع الاستخدام المتكرر قد يصبح الأمر معرقلًا للغاية. موقع Laerepenger مع حركات غامضة ابدأ باستخدام العناصر الصغيرة بالحركة على الموقع. في الواقع، الحركات وسيلة للهدف، وليست الهدف نفسه. يجب عليك عدم تضمينها أينما تريد. يجب أن يكون هناك ما يبرر لاستخدامها. من الأفضل تضمين الحركات في عناصر واجهة المستخدم أو العناصر التي يتفاعل معها المستخدمون أكثر، مثل قوائم التنقل أو نماذج الاشتراك. وفكر قبل إضافة حقل قفَّاز وصور منزلقة: كيف ستؤثر على تجربة المستخدم، هل ستحسن التفاعل مع الموقع؟ تعد الحركات رائعةً لصنع تصميم موقع لا ينسَ. فهي لا تزال تستخدم على نطاق واسع في تصميم الموقع على الرغم من النظرات المختلفة حولها مثل سرعة التحميل أو عدم الاستجابة. ولكن الشيء الرئيسي الذي يجب أن تتذكره عند تقديم عناصر متحركة لموقعك هو تأثيرها على قابليتها للاستخدام. الأمر متروك لك - تحديد أين ومقدار دمج الحركة في التصميم الخاص بك. فيما يلي ملخص قصير لمواقع الويب التي تستخدم الحركات لدرجة كبيرة: موقع KiKK تصميم موقع مقهى مثلجات موقع شركة JD للاستشارات موقع VN Star تصميم شركة Soane Capital المالية موقع وكالة Nodeplus الرقمية تصميم موقع Creative Cruise للفنادق تصميم مواقع صناعي مع تحريك تصميم موقع وكالة Pomade الرقمية موقع مجوهرات Puca تصميم موقع Carioca Promo الترويجي موقع Ultranoir مع تحريك إبداعي تصميم موقع Mahno الشخصي تصميم منظر حديقة Vintage المتحرك ترجمة -وبتصرف- للمقال Animation in Web Design: Why and When to Use من موقع line25

لقد صار التصميم الماديّ (material design) شائعًا جدًّا هذه الأيام، حيث بدأ كثير من المصممين بتضمينه في تصاميمهم ليس فقط لتطبيقات أندرويد، بل ولمشاريع الويب أيضًا. لأذكّرك، لقد تم طرح المفهوم لأول مرة من طرف جوجل في Google I/O 2014 keynote. لقد شوهد هذا العرض التقديميّ أكثر من 1.5 مليون مرة حتى الآن، وما زال يتم التعامل معه على أنه العرض الأساسيّ لماهيّة التصميم الماديّ وكيف علينا أن نتخيله. هل التصميم الماديّ مناسب لك؟السؤال الأول الذي سنحاول الإجابة عليه الآن هو ما إذا كان التصميم الماديّ شيء عليك تعلمه والبدء باستخدامه في عملك. ولكن، كما هي العادة عندما يتعلق الأمر بهذه الأسئلة، ليست هناك إجابة واحدة تناسب الجميع. لنحاول إذًا أخذ هذه المسألة من زاوية أخرى. هناك أشياء أنا متأكد من أنك ستوافقني عليها، ومنها أن التصاميم الرائعة هي تصاميم مميزة وتقوم بمهمتها على أكمل وجه. وقد يكون أداء التصميم دوره على اكمل وجه أهم من أي أمر آخَر. وبعبارة أخرى، جمالية التصميم لمجرد أن يكون التصميم جميلًا أمر لا جدوى منه. ولهذا، فعند التفكير في تبني تصميم material، حاول أولًا أن تربطها بالأهداف التي ترغب بتحقيقها من تصميمك. وبشكل أساسي، أجب الأسئلة التالية بنفسك: هل تتوافق مبادئ وتوجيهات التصاميم المادية مع ما أريد تحقيقه؟ ملاحظة: ربما تكون قراءة مقالنا السابق حول الاختلافات بين التصاميم المسطحة والتصاميم المادية فكرة جيدة قبل الاستمرار في قراءة هذا المقال. لقد تطرّقنا فيه إلى أكبر الاختلافات بين التصاميم المسطحة والتصاميم الماديّة، ومزايا ومساوئ كلّ منها. سيقدم لك هذا المقال مساعدة إضافية عند اختيارك لتوجّه معين. 1. تعرف على المصدر الرئيسيإذا رغبت بتعلم التصاميم الماديّة، فأفضل نقطة تبدأ بها هي المصدر الرسميّ الذي نشرته جوجل. يتم تحديث هذا المصدر باستمرار، ويشرح كلّ التفاصيل الصغيرة التي تندرج ضمن بناء تصاميم ماديّة. والجميل فيه هو أنه لا يغطي النواحي المتعلقة بأندرويد من التصاميم المسطّحة وحسب، بل ويناقش أيضًا التصاميم المسطّحة بشكل عام وعلاقتها بأيّ مشروع موقع أو تطبيق. أنصحك بشدة أن تقرأ على الأقل الفصول الأولى من التوثيق لتتعرف على المفاهيم الأساسيّة. 2. افهم معنى "ماديّ" في التصميم الماديّإن مفهوم "تصميم ماديّ" لم يأتِ اعتباطًا. ببساطة، يشير مفهوم التصاميم الماديّة إلى جعل التصاميم تمثل العالم الحقيقي، ولكن على قدر معين من التجريد. بالطبع لا تريد أن تجعل تصميمك يبدو واقعيًّا أكثر من اللازم إلى مرحلة ينتحل فيها شكل عنصر معين في العالم الحقيقيّ. إليك الفكرة. نحن -البشر- نفهم الأشياء الماديّة. نعرف ملمس المعدن، ونعرف الشكل الذي يكون عليه المكتب الخشبيّ. يمكننا أيضًا أن نميّز أشياء موضوعة فوق أشياء أخرى. يمكننا مثلًا أن نميّز قلم رصاص موضوع على ورقة موضوعة على مكتب. ببساطة، ستتعلم في التصميم الماديّ أن تعبر عن الترتيب نفسه للعناصر، ولكن بأن تستخدم فقط أقل ما يمكن من عناصر التصميم، كالظلال مثلًا. مصدر الصورة: ظلّ - لـNikhil Vootkur من Behance. 3. استخدم الظلال لتوصل مفهوم التقسيم الشجريّإن السطوح والحواف والظلال والإضاءة هي الأدوات الرئيسيّة للتصاميم الماديّة. إن إضافة العمق لتصاميم أمر هامّ جدًّا، ولكن عليك أن تنتبه لأن تستخدم الحدّ الأدنى من الجرعة الفعالة منه. فمثلًا، الظلال هي الأداة الرئيسيّة لديك للتعبير عن هرميّة العديد من العناصر التي تجتمع معًا لتشكل التصميم الكامل. عندما تقرر ما الذي يُلقي ظلًّا صغيرًا واقعيًّا على شيء آخر، فإنك تُبرز الهرميّة المرئيّة للعناصر والطبقات التي هي موضوعة عليها. إن ما يهم هنا هو التكوين العام للتصميم، وما إذا كانت الظلال لديك ككل منطقيّة بالنسبة للناس، وإن كانت تُبدي مفهوم الأشياء الماديّة الحقيقيّة. مصدر الصورة: WhatsApp | Material Design Concept - لـMário Gomide من Behance. 4. استخدم ألوان جريئةثلاثة من المبادئ الرئيسيّة للتصاميم الماديّة هي أن تكون جرئية، وجميلة التصميم، وعالميّة. التصاميم الماديّة تصاميم تعتمد على الحدّ الأدنى من التصميم دون مبالغات بالتأكيد. وبعبارة أخرى، فإنها لا تستخدم الكثير من أدوات التصميم والجماليات. ولهذا، فعلى المصممين أن يلتفوا على هذه القيود وأن يجدوا طرق أخرى لإنتاج معنى وجذب الانتباه إلى إنشاء التركيز المناسب. إن الألوان من الأشياء القليلة المتروكة للمصمم. ولنتكلم بدقة، الألوان الجريئة، وغالباً الألوان الصاخبة. للألوان الجرئية دور مهم في التصاميم الماديّة (وفي التصاميم المسطّحة أيضًا). تجعل هذه الألوانُ الأشياءَ ممتعة، وتجعل المستخدم يستمتع بالتفاعل مع التصميم. مثال على تصميم ملون: مصدر الصورة: Behance New App Concept (Material Design - لـ Fabrizio Vinci من Behance. 5. استخدم لونا أساسيا وآخر ثانوياتقول مستندات جوجل الرسميّة: "حدّد اختيارك للألوان باختيار ثلاثة ألوان من منقاة الألوان (palette) الرئيسيّة، ولونًا ثانويًا من منقاة الألوان الثانوية." قد تكون طريقة تطويع هذه لأي نوع من التصميم كالتالي: استخدم ثلاثة ألوان لتشكل منقاة الألوان الرئيسيّة لك، وانتقِ لونًا آخر ليكون لونًا ثانويًّا. يمكن أن تستخدم لونك الرئيسيّ لأشياء كالخلفية وأماكن الإدخال والصناديق والخطوط والعناصر الأخرى الرئيسيّة في الواجهة. أما اللون الثانوي، -فهو كما يشير اسمه- يعطي عمقًا إضافيًّا عندما ترغب بعرض العناصر الرئيسيّة على صفحة أو شاشة معينة. سيكون من الضروريّ بالتأكيد أن يكون اللون الثانوي متباينًا بشدّة مع الألوان الرئيسيّة. مصدر الصورة: Snapchat – Material Design - لـ Vinfotech من Behance. 6. استخدم المساحات الفارغةيأخذ التصميم الماديّ الكثير من الأفكار من تصاميم الطباعة التقليدية والمفاهيم التي أتتنا بها. فمثلًا، المساحات الفارغة جزء مهم لأيّ تصميم ماديّ، ويمكنها أن تحسن الخطوط وشكل النصوص بقدر هائل. في الواقع، المساحات الفارغة هي أهم الأدوات لإنشاء تركيز ولجذب انتباه المستخدم إلى عنصر معين (وهو شيء غالبًا يجد المصممون المبتدئون صعوبة في فهمه). لذ -باختصار- استخدم خطوطًا كبيرة للعناوين، وأضف الكثير من المساحات البيضاء، ولا تخش أن تضيف الكثير من المساحات الفارغة في تصاميمك بشكل عام. مصدر الصورة: Material Design Sign Up Page - لـ Omkar Abnave من Behance. 7. استخدم الصور من الحافة إلى الحافةإن التصاميم الماديّة صديقة للصور للغاية. ما أعنيه هنا هو أنك إذا قررت تضمين أي صور في تصميمك، فعليك أن تعطيها دورًا مهمًا. إن الصور في التصاميم الماديّة تُستخدم من الحافة إلى الحافة، في ما يعرف بطريقة full-bleed. يعني هذا عدم وجود حاشية بين حافة الصورة وحافة الشاشة. عند عمل هذا بشكل سليم، سيعطي تجربة فريدة للمستخدم، ويعطينا نحن المصممين بعض الأدوات الإضافية إضافة إلى المجموعة الصغيرة من الظلال المسموح بها مسبقًا، والألوان، والطبقات. مصدر الصورة: Twitter Material Design - لـ Rico Monteiro على Behance. 8. للتصاميم المعتمدة على الصور، استخرج الألوان من الصوربالحديث عن الصور، تنصحنا جوجل باستخراج الألوان من الصور التي نستخدمها في تصاميمنا ومن ثم نجعلها جزءًا من مجموعة الألوان لدينا. يصعب أن تجد حجّة تناقض فيها هذا المفهوم. إن اتباع هذه الطريقة سيعطي تجربة متزنة للمستخدم بكل تأكيد، وسيعطي انطباعًا بأن كل شيء في مكانه المناسب، وأن العناصر الموجودة كلها متسقة مع بعضها. مصدر الصورة: Material Design Colors Recontextualization - لـ Lonely Pig Ringo على Behance. 9. استخدم الحركاتوبحسب تعبير جوجل، فإن الحركة تُضفي معنىً. الحركة من العناصر الأساسيّة للتصميم الماديّ الجيّد. وبشكل عام، فإنك معتاد على وجود حركة في العالم الحقيقيّ. تساعدنا الحركة على معرفة كيف تعمل الأشياء وإلى أين علينا أن نركز انتباهنا. تستخدم التصاميم المادية نفس المفهوم، وتستخدم الحركة للتفاعل مع المستخدم، وتجعلك تعرف جيدًا كيف تستخدم التصميم. كيف تستخدم الحركة؟ ببساطة، أعطِ المستخدم تغذية راجعة عن الحدث الذي قام به. فمثلًا، هل ضغط المستخدم زرًّا؟ حرّكه لتظهر أن الأمر قد تمّ. مصدر الصورة: REDBUS APP – Material Design Preview - لـ Anish Chandran على Behance. 10. اجعل الحركات واقعيةكلمة "واقعية" هي مربط الفرس هنا. إن عصر الحركات المزيفة -حيث تتحرك الأشياء في داخل الشاشة- قد ولى منذ زمن. إذا كنت ستضمّن الحركة هذه الأيام، فيمكنك أيضًا أن تجعلها حقيقيّة بما يتوافق مع قوانين الفيزياء وكيفيّة عمل الأشياء في العالم الحقيقيّ. تخصص جوجل قسمًا كاملًا من توجيهات التصاميم المسطحة لمفهوم الحركة الواقعية. تشرح جوجل في هذه التوجيهات كيفية تقديم الكتلة والوزن، والتسارع والتباطؤ، وكيف يتم تحسين الحركة (بالإنجليزيّة: easing؛ وهي طريقة لجعل الحركة تبدو طبيعية أكثر بتغيير السرعة في أوقات محددة). التصاميم المادية جيدة فقط ما دامت تحاكي الحركة في الحياة الحقيقيّة. هذه هي الطريقة الوحيدة التي ستغني فيها الحركةُ الواجهةَ وتجعلها مفهومة أكثر للمستخدم. 11. اجعل كل شيء مستجيبًامن المبادئ الرئيسيّة للتصاميم الماديّة هي جعل العمل الناتج عملًا يمكن الوصول إليه واستخدامه على أيّ جهاز وأي حجم شاشة. وفوق كلّ شيء، الهدف هو جعل التجربة متّسقة. بهذه الطريقة، لن يتوه المستخدم إذا انتقل من جهاز إلى آخَر، حيث لا يجد واجهة مختلفة تمامًا بالنسبة له. باستخدام تصميم ماديّ جيّد، يمكن للمستخدم أن ينتقل دون أيّ عقبات، وأن يتابع في استخدام الموقع أو التطبيق من حيث تركه. ومن الطبيعي أن هذا يعني وجوب كون التصميم مستجيبًا. ولحسن الحظ، باستخدام الأطر البرمجية (frameworks) الحديثة، ستجد الكثير من الأشياء قد بُنيَت لك بالفعل، ولذا فجعل تطبيقك مستجيبًا لن يكون بتلك الصعوبة. 12. تذكر أن كل شيء في التفاصيلمن العناصر الأساسيّة التي تجعل التصاميم المسطحة صعبة التنفيذ جدًّا دون مشاكل هو أنها مبسطة للغاية. فمثلًا، في التصاميم المقلّدة للواقع الحقيقيّ (skeuomorphic) كانت التوجيهات بسيطة: اجعل كل جزء من التصميم يمثل قرينه من الحياة الحقيقيّة قدر الإمكان. وفيما يلي كيف أتت هذه الأشياء إلى الواقع: مصدر الصورة: 15 Puzzle - لـ Kamil Ginatulin على Behance. الأمور أبسط مع التصاميم الماديّة، ولكنها أعقد في الوقت نفسه. في غالب الأمر، التصاميم الماديّة هي لعبة التفاصيل. تحتاج فقط إلى القليل من الواقعية لتعبر عن الوظيفة الحقيقيّة والهدف من الأشياء التي تصممها، ولكنك في نفس الوقت لا ترغب بجعل الأشياء تبدو مطابقة تمامًا لمثيلاتها في الواقع الحقيقيّ. إن كنت في ريب، فتصفح بعض المعارض على الإنترنت لتوحي إليك ببعض الأفكار. هل لك تجارب مع التصاميم الماديّة بعد؟ هل تظن بالإمكان استخدامها لأكثر من مجرد تصميم تطبيقات أندرويد التي وُجِدَت أصلًا لأجله؟ شاركنا برأيك! ترجمة -وبتصرف- للمقال New to Material Design? 12 Principles You Need to Know لصاحبه Karol K.