لقد صار التصميم الماديّ (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.
أفضل التعليقات
لا توجد أية تعليقات بعد
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.