لوحة المتصدرين

تنبيه: الاختلافات في التفاصيل. بالنسبة للعين غير المدربة، فإنّ التصاميم المسطّحة (flat designs) والتصاميم الماديّة (material designs) تبدوان متشابهة جدًّا. أرجو أن لا تشعر بالإهانة عندما أقول ذلك، فمهما كنت مشجّعًا لأحد التوجّهين على حساب الآخر، فعليك أن تتفق معي على أنّ الاختلافات بينها طفيفة جدًّا. أو يفترض بي أن أقول: طفيفة ولكنّها هامّة. ولكن لنبدأ من البداية ولننظر إلى الحقائق عن كلّ من النوعين من التصاميم. أما بالنسبة للتصاميم المسطّحة، فقد غطّينا مبادئها الرئيسيّة وتاريخها (حتى أنّنا جلبنا 10 مصممين عظماء ليدلوا بدلوهم في الموضوع وليشاركوننا آراءهم حول سيطرة التصاميم المسطّحة على ساحة تصميم المواقع). ولتذكيرك، فإن التصاميم المسطّحة نوعٌ من التصاميم التي جُرِّدَت من كل العناصر ثلاثيّة الأبعاد. إنها تُزيل أيّة أشكال تحاول أن تحاكي العالم الحقيقيّ من هذه العناصر. كلّ ما هو جزء من تصميم مسطّح يبدو كما لو كان ملقىً على سطح واحد منبسط. ومن هنا جاءت التسمية. أما الآن، فلنقارن هذا مع التصاميم الماديّة. أولًا، التصاميم الماديّة مُنتَج ذو علامة تجاريّة (بطريقة ما). ما أعنيه بهذا هو أنّها تشكّلت على أيدي Google، وكل المعايير تم وضعها من طرف Google، وكل التغييرات على المفهوم تتحكم بها أو تقبلها Google. رغم هذا، إلّا أنك ما زلت حرًّا بعمل تصاميم ماديّة دون الحاجة للإشارة إلى Google بأيّ طريقة. يمكنك إلى حدّ ما أن تعتبر التصاميم الماديّة نقطة التقاء تصاميم الوِب، حيث أنه تصميم مسطّح في برنامجك الرياضيّ الخاصّ للتقوية والتطويع. اعذرني على هذا التشبيه. وتبعًا لهذا القَول، فإن ما ذُكِرَ أعلاه مجرد نظرة عامّة على ماهيّة التصاميم المسطّحة والماديّة، لذا هيّا بنا نغوض أعمق قليلًا الآن ونحاول تحديد بعض الاختلافات البسيطة والمبادئ التي عليك أن تلتزم بها عندما تصمِّم تصاميم مسطّحة أو ماديّة، حسب الحالة لديك. ولكن لن اكون وحدي من يناقش هذا الموضوع، فقد دَعَوتُ بعض خبراء تصميم المواقع لمساعدتي، وفيما يلي السؤال الذي سألتهم إياه: ما الذي يمكنك اعتباره الاختلافات الثلاثة الأهم بين التصاميم المسطّحة والتصاميم الماديّة؟وفيما يلي ما سنقوم به. أولاً، لنلقِ نظرة على الاختلاقات التي ذكرها الخُبراء، ثم لنتحدّث عن بعضها بتفصيل أكثر. وفي النهاية نقوم بتجميع كل شيء معاً لنخرج بقائمة للمزايا والمساوئ لكلّ من نمطي التصميم. الاختلافات الثلاثة الأهمّ بين التصاميم المسطّحة والتصاميم الماديّة – الخبراء يُدلون بدلوهم التصاميم الماديّة مفهوم معرّف جيدًافي وقت مضى، قدِمَت جوجل بمقدمتها للتصاميم الماديّة، والتي هي وثيقة متعمِّقة جدًّا تناقش مبادئ وأهداف وتعليمات التصاميم الماديّة. ذاك المستند مستمرٌّ في تلقّي التحديثات. لذا يمكنك عرضه في أيّ وقت لتعلم الخصائص والطبائع للحركة بأكملها. لم قدّمت جوجل التصاميم الماديّة؟ يمكن أن تكون الأهداف كثيرة، لكن أحدها يكمن في توحيد الطريقة التي تظهر فيها الأشياء على أجهزة أندرويد المختلفة (التي تستخدم شائات عرض وأجهزة مختلفة). جعل تطبيق يظهر متشابهًا على أجهزة عِدَّة مهمّة صعبة على المطوّرين، والتصاميم الماديّة تعمل جيدًا كمجموعة من التوجيهات لتسهيل هذه المهمّة. ولهذا، فالأمر المختلف بين التصاميم المسطّحة والماديّة هو أنّ التصاميم الماديّة مفهوم محدّد جيّدًا، بينما التصاميم المسطّحة نتيجة اختباريّة لعدد من أعمال التصميم المستمرة في اتجاه البساطة المطلقة. التصاميم المسطّحة كانت ردّة فعلإضافة إلى ذلك، فقبل أن تأتي التصاميم المسطّحة إلى حيّز الوجود – أو بالأحرى القول أنها تطوّرت إلى شكلها الحاليّ - كانت محاكاة الواقع التوجّه الشائع لتصميم المواقع. ولكن الواقعية (المبالغ فيها) بدت أكثر مما يحتمل للأعمال الحديثة، خاصة عند أخذ قابلية الاستخدام على الأجهزة النقّالة وعلى أجهزة متنوعة بعين الاعتبار. ماذا كان الردّ على ذلك؟ التصاميم المسطّحةباستخدام التصاميم المسطحة، لم يعد على المصممين أن يقلقوا بشأن جعل مشاريعهم تبدو واقعيّة. بدلًا من ذلك، يمكنهم أن يركّزوا على الفعالية والأداء. تعيد التصاميم الماديّة جانبًا من تقليد الواقعرغم أنّها فعّالة، إلّا أنّ مشكلة التصاميم المسطّحة هو أنّها ليست النوع الأكثر بداهة بين أنواع التصميم، وخاصّة عندما يتعلق الأمر بالمستخدمين غير العارفين لواجهات المواقع. بالنسبة لهؤلاء الناس، فإنّ خيارات التصميم والواجهات تجعل التفاعل أكثر صعوبة، خاصة عندما تكون قريبة جدًّا إلى مظهر عدم الوجود. التصاميم المادية تضيف الفيزياءتقول Google: كلمة "ماديّة" مجاز. أحد المبادئ الرئيسيّة للتصاميم المسطّحة تقليد الطريقة التي تعمل فيها الأشياء في العالم الحقيقيّ، ولكن عمل ذلك بطريقة بسيطة للغاية. وبعبارة أخرى، عمل ذلك بطريقة تستخدم الواقعيّة كأداة فقط لجعل أدمغتنا معتادة أكثر على كيفيّة عمل الواجهة، ولكن – في نفس الوقت – عدم جعلها تبدو واقعيّة زيادة عن اللزوم لمجرد ذلك إلى درجة أن تنتحل شخصيّة المقابل الحقيقيّ للعنصر. فمثلًا، زر يبدو كهذا ما زال يظهر كزِرّ: زِر ماديّ من تصميم Mauro Marini على Behance. ليس عليه أن يذهب بعيدًا في تقليد الواقع. انظر لهذا: زر تشغيل نظيف مصمم بـ photoshop من تصميم Pixel Mustache على Behance مزايا ومساوئ التصاميم المسطّحةبأخذ كل ما سبق بعين الاعتبار، لنُسَمِّ بعض المزايا والمساوئ للتصاميم المسطّحة: المزايا:بسيطة وبالحدّ الأدنىأقل استهلاكًا للموارد، وينتج عن ذلك وقت تحميل واستهلاك سرعة أقلّ.تبدو في العدة متطابقة على كلّ الأجهزة، وهي مناسبة للأجهزة النقّالةتتخلص من كلّ العناصر التي لا تخدم غرضًا معيّنًا، مما يعني أنّ كلّ ما يتبقّى على الشاشة ذو هدف.إيجابيّة. هذا مرافق – نوعًا ما – للمفهوم نفسه. ما أعنيه أنّه عندما وجدت التصاميم المسطّحة بالأساس بألوان وأشكال عَنَتْ أن يكون إبراز العنصر مرئيًّا مرتبطًا باستخدام المصمّم لألوان بارزة تجذب انتباه المستخدم بطريقة صحيحة. ومقارنة بغيرها، نادرًا ما نرى تصاميم مسطّح ذات لون رماديّ بَحْت.المساوئ:قد تكون بسيطة زيادة عن اللازم في بعض الأوقاتمحدودة. لا يمكنك أن تفعل الكثير في ظل التعقيدات المرئيّة وهويّة العلامة التجاريّة.ليست بديهيّة. المستخدمون غير المطّلعين يجدون صعوبة في التفاعل مع التصاميم المسطّحة، وهي ليست واضحة جدًّا حتى للمستخدمين الملمّين.يصعب إيصال فكرة تتعلق بأن الموقع فريد من نوعه. إلى حدّ ما تستخدم كلّ المواقع مظاهر تصاميم مسطّحة متشابهة.مزايا ومساوئ التصاميم المادّيةأما الآن فمع مزايا ومساوئ التصاميم المادّية. المزايا:تجعل كل شيء حقيقيًّا بإضفاء بعد ثالث (Z-Axis).هي معايير واضحة يتم تحديثها باستمرار. يمكنك استخدام تلك الموارد للحصول على إجابات حول أيّ شكّ أو شأن لديك اهتمام به عند عملك على مشروع جديد.بديهيّ أكثر. أسهل في الاستخدام من التصاميم المسطّحة لكلّ من المتخدمين الجدد/غير ذوي الخبرة والمستخدمين المتمرّسين.تدعم الحركة في تصاميم الوِب. كما قلنا في المرة الماضية، فإنّ الحركة تساعد المستخدمين على فهم ما يجري على الشاشة والتعرف على العناصر الأهمّ التي عليهم أن ينتبهوا إليها.العيوب:بَنتها وتتحكم بها – إلى حدّ ما – شركة واحدة وهي Google. (ليست مشكلة يوميّة).تستغرق وقتًا أطول لتطويرها، وهذا بسبب وجود المحور الثالث (Z-axis).تدعم الحركة في التصاميم، مما يعني أنّ عليك تضمين الحركات من أجل جعل عملك تصميمًا مادّيًّا حقيقيًّا.مسطّح أم ماديّ؟السؤال الذي يبقى حاضرًا هو إذا ما كان أحد التوجهين خيارًا أفضل من الآخَر… لذا، هل عليك استخدام أحد هذين النوعين من التصميم وتجاهل النوع الآخر؟ الإجابة البديهيّة هي لا. كلاهما لهما مكان اعتمادًا على الهدف مما تبنيه. لتبسيط الأمر بأكمله، يمكننا القول أن التصميم التقليديّ المقلّد للواقع الحقيقيّ هو تقليد لما كانت عليه الأمور، وهي انطباع واقعيّ لعناصر للعالم الحقيقيّ من أجل جعل واجهات التصميم تبدو مألوفة. أما التصاميم المسطّحة فهي بيئة مبسّطة تعتمد كثيرًا على معرفة المستخدم لواجهات التصميم عمومًا، وتتخلص من كل ما لا يخدم هدفًا وظيفيًّا. أما عن التصاميم الماديّة فتحاول أن تزوج بعض أفكار التصاميم التقليديّة للتصاميم المسطّحة، ويهدف ذلك إلى تقديم واجهة محسّنة للعالم الرقمي تُذكّرنا في نفس الوقت بالعالم الحقيقي بما يكفي لجعل الواجهة بديهيّة. ما رأيك؟ هل أنت محبّ لأحد هذين التوجّهين على حساب الآخَر؟ تفضّل وشاركنا رأيك في التعليقات. ترجمة -مع شيئ من التصرف- للمقال: ?Flat Design vs. Material Design: What Makes Them Different لصاحبه: Karol K.