التصميم المادي … المزايا والعيوب
الحمد لله الذي علَّم بالقلم، علَّم الإنسان ما لم يعلم، والصلاة والسلام على خير معلِّم الناس الخير سيدنا محمد - صلَّى الله عليه وسلم … أما بعد ،،
التصميم المادي (Material Design) عبارة عن مجموعة معايير لتصميم صفحات المواقع والتطبيقات، بهدف الدمج بين المعايير الكلاسيكية الفعالة للتصميم الجيد وبين المعايير التكنولوجية الإبداعية، مع الأخذ في الإعتبار طريقة تفاعل المستخدمين مع الأجهزة الإلكترونية، بما يحقق أفضل تجربة استخدام (User experience).
تم تطوير هذه المعايير بواسطة شركة جوجل عام 2014، وكان الدافع الرئيسي هو توحيد المعايير الخاصة بالتطبيقات عند استخدامها على مختلف المنصات سواء (ويب أو موبايل) وبخاصة نظام التشغيل أندرويد (Android).
لماذا ظهر التصميم المادي ؟
لفهم أسباب ظهور هذا النوع من التصميم يجب أولا أن نفهم الأنواع الأخرى التي سبقته، تقريبا عام 2010 انتشر ما يعرف بالتصميم الزخرفي أو البارز (Skeuomorphism) الذي تميز بجعل عناصر واجهة الشاشة (UI) أقرب ما تكون إلى شكلها الحقيقي في الواقع، وقد ظهر هذا المفهوم في ذلك الوقت بوضوح عندما تم استخدامه في الخلفيات والأيقونات.
الصورة السابقة للصفحة الرئيسية لموقع شركة أبل (Apple) عام 2012.
العديد من الرموز و أيقونات التطبيقات التي تراها على شاشة الآيباد تتبع نظام التصميم الزخرفي، على سبيل المثال الأيقونات المحددة باللون الأصفر في الصورة:
- أيقونة تطبيق "الكاميرا" تشبه إلى حد كبير شكل عدسات التصوير في الكاميرات.
- تطبيق "الساعة" تشبه أيقونته إلى حد كبير شكل الساعات القديمة التي كانت تعلق على الحوائط في المنزل.
- أيقونة "التقويم" تشبه (النتيجة / الرزنامة) الورقية الخاصة بتاريخ اليوم.
لعل السبب الرئيسي الذي ساعد في انتشار هذا النظام هو رغبة المصممين في مساعدة المستخدمين على سهولة التعرف على عناصر الشاشة من خلال ربطها بشكلها الفعلي في الواقع، مما يعطي تجربة استخدام أفضل نتيجة توقُّع وظيفة الأيقونة حتى لو لم يكن المستخدم يعرف وظيفتها في البداية.
لكن مع الوقت اتضح أن هذه الطريقة في تصميم عناصر الشاشة قد تؤدى إلى تشتيت انتباه المستخدم عن عناصر أخرى أكثر أهمية داخل نفس الصفحة، إضافة إلى مزيد من التعقيد والتفاصيل الكثيرة التي تحتاجها العناصر للخروج بهذا المستوى من الجودة، وخاصة مع ظهور أجهزة الموبايل ذات الشاشات الصغيرة.
التصميم المسطح (Flat design)
على العكس من النظام السابق فقد كان الاتجاه إلى تبسيط طريقة تصميم العناصر إلى الحد الأدنى، عن طريق إزالة أي زخارف أو بروز في العنصر مما يعطي التصميم مظهرا نظيفا وبسيطا في نفس الوقت.
والأجمل أن هذا الأسلوب ساعد في زيادة مرونة العناصر (Responsiveness) عند تصميم الشاشات الخاصة بالموبايل والأجهزة اللوحية الأخرى.
فيما يلي شكل الأيقونات التي تحدثنا عنها سابقا على جهاز أيفون عام 2020
لاحظ كيف تغير شكل الأيقونات (وغيرها الكثير من شعارات التطبيقات المشهورة) حيث أصبحت أكثر بساطة عن طريق إزالة الزخارف والتفاصيل التي تجعلها شبيهة بصورتها الواقعية.
وعلى الرغم من استمرار التصميم المسطح حتى يومنا هذا، لأنه مبني على معايير مهمة مثل التبسيط والتركيز على أن يكون التصميم نظيفا ونقيا، إلا أنه قد ظهرت عيوب خطيرة في هذا النظام.
نتيجة المبالغة في تبسيط وإزالة العديد من التفاصيل التي تُميِّز الأيقونات والعناصر في الصفحة، فقد أدى ذلك إلى أن المستخدم - في الغالب - قد فقد القدرة على تمييز هذه العناصر أو معرفة وظائفها في الشاشة بمجرد النظر إليها ومحاولة التفاعل معها.
أيضا التبسيط المبالغ فيه للأسف يَحُد من الإبداع في التصميم، ويضع قيود أمام المصممين تمنعهم من التميز والاختلاف عن باقي التصميمات الأخرى التي تطبق نفس الأسلوب في التبسيط.
مشكلة أخرى وهي افتقاد "التصميم المسطح" إلى أي قواعد أو معايير أو خطوات إرشادية توضح ما يجب عمله للحكم على التصميم إن كان جيدا أو لا.
التصميم المادي (Material design)
بناء على ما سبق، فقد ظهر التصميم المادي كوسيلة للجمع بيع مزايا كلا النظامين السابقين، فهو يشير إلى جعل العناصر مشابهة لشكلها في العالم الواقعي، ولكن بقدر معين من التجريد.
نحن كبشر يمكننا تمييز الأشياء المادية حولنا، فمثلا يمكننا معرفة ملمس المعادن، ويمكن أن نميز شكل الأجسام الخشبية كالمكتب أو الكرسى، ويمكن أيضا أن ندرك المسافات بين العناصر وترتيب عرضها كأن نُميِّز قلم رصاص موضوع على ورقة على أحد المكاتب.
يمكن القول أن "التصميم المادي" يشبه إلى حد كبير "التصميم المسطح"، لكن مع دمج خصائص من "التصميم البارز" مثل الظلال (Shadows) والطبقات (Layers) والبعد الثالث للعناصر (3D) والحركة (Animation).
أضف لما سبق، وضع معايير واضحة ومحددة لكل عنصر من عناصر الشاشة، بالتالي نحصل في النهاية على لغة تصميم (Design language) يمكن استخدامها بفاعلية عند التواصل مع مستخدمي التطبيق، مع تقديم تجربة استخدام مستقرة وفعالة حتى مع اختلاف الأجهزة وأنظمة التشغيل المعروض عليها التطبيق.
مزايا "التصميم المادي"
فيما يلي مناقشة مختصرة لأهم المزايا التي تحصل عليها عند تطبيق معايير "التصميم المادي" عند انشاء واجهات التطبيقات التي تعمل عليها.
- سرعة التنفيذ إذ أن "التصميم المادي" نظام تصميم جاهز للاستخدام والتطبيق العملي، مصحوبا بعدد كبير من المعايير والإرشادات التوضيحية، مع وجود عدد كبير من المكونات (Components) المعدة مسبقا مثل الأزرار (Buttons) والقوائم (Lists) و عناصر الإدخال (Form inputs) وغيرها الكثير.
- سهولة التكيف مع جميع الشاشات فلا داعي للقلق بشأن الهيئة التي سيظهر بها التطبيق على مختلف الشاشات، إذ أن "التصميم المادي" يعتني جيدا بمرونة (Responsive) عرض العناصر في الصفحة، مما يساعد مستخدمي التطبيق على سهولة تصفحه من أي جهاز، لا يمكن أن ننسي أن الدافع الرئيسي لتطوير التصميم "المادي" بواسطة جوجل كان - في المقام الأول - بهدف تطبيقه في نظام الأندرويد الخاص بها.
- عنصر الحركة (Animations) وما يضيفه من لمسة جمالية للتصميم، إذ يجعل الأمر أسهل لمستخدمي التطبيق أن يفهموا العلاقة بين عناصر شاشة التطبيق المعروضة على أجهزتهم، كما ان تحريك العناصر يمكن أيضا أن يكون وسيلة فعالة لجذب انتباه المستخدم لأجزاء معينة من الشاشة، مثلا عند الإنتقال من شاشة لأخرى أو عند الإشارة (Hovering) أو الضغط (Click) على أحد الأزرار.
- وضوح المعايير الخاصة بالتصميم "المادي" تساعد بشكل كبير في سهولة التواصل بين أعضاء فريق العمل على التطبيق سواء مصممين او مبرمجين، إذ أن وجود تصور واضح لشكل ووظيفة كل مُكوِّن (Component) يساعد في تقريب وجهات النظر مما يؤدي لسرعة تنفيذ شاشات التطبيق.
- الأداء العالي (Performance) لأن التصميم "المادي" عند إنشائه وتطويره كان بهدف مساعدة فرق العمل في بناء تجربة استخدام عالية الجودة للتطبيقات على جميع المنصات سواء أندرويد أو IOS او على الويب، فقد تم الأخذ بالاعتبار تطبيق معايير دقيقة تضمن تحقيق أفضل أداء وسرعة تصفح وتقديم تجربة استخدام أفضل.
- الدعم والتحديث المستمر إذ أن معايير التصميم "المادي" تحت الإشراف والتحسين المستمر من طرف شركة جوجل، من خلال عمل اصدارات جديدة كل فترة للمراجعة والتأكد من ملائمة المعايير لاحتياجات ومتطلبات المستخدمين، أيضا وجود دليل استخدام (Documentation) شامل وغني بالمعلومات والنصائح والأمثلة العملية للتطبيق، بجانب استخدام نفس المعايير في جميع تطبيقات جوجل على جميع المنصات كدليل عملي على مدى قوة وفاعلية هذه المعايير.
عيوب "التصميم المادي"
علي الرغم من المزايا الواضحة التي يقدمها التصميم "المادي"، إلا أن ذلك لا يعنى أنه خالي تماما من العيوب عند استخدامه في بعض الحالات.
التصميم "المادي" للوهلة الأولى قد يكون مرتبط ذهنيا بشركة "جوجل" وشديد الالتصاق بها، خاصة مع استخدام وتطبيق هذه المعايير في نظام "الأندرويد" الخاص بجوجل وأيضا في جميع التطبيقات والمواقع الخاصة بها.
من الممكن ألا يمثل ذلك مشكلة للبعض، لكن البعض الآخر قد لا يقبله، خاصة الشركات الكبرى التي تسعى لوضع بصمتها وبناء الهوية (Brand) الخاصة بها.
أيضا الإرتباط الوثيق بين عناصر التصميم وبين الحركة الملائمة لكل عنصر في إطار المعايير والإرشادات الخاصة به، قد يسبب مشكلة إذا تم تطبيق الشكل فقط دون الحركة الملائمة الخاصة بالعنصر، إذ أن ذلك قد يعطي انطباع أن التصميم ينقصه شئ ما.
كما أن الإفراط في كثرة استخدام العناصر المتحركة داخل الشاشة قد يؤثر بالسلب على تجربة الاستخدام خاصة على الأجهزة الصغيرة مثل الموبايل الذي يعتمد على البطارية وإمكانياته التقنية أقل مقارنة بأجهزة الكمبيوتر، لذا يجب على المصمم مراعاة تحقيق التوازن بقدر الإمكان عند استخدام عناصر متحركة في الصفحة.
أيضا البعض قد يأخذ انطباع - في البداية - أن معايير التصميم "المادي" معقدة ويصعب تطبيقها، وذلك لأنها كثيرة وتحتاج وقت أطول لتعلمها، أضف إلى ذلك أن بعض المصممين قد يوجد لديهم شعور أن هذه المعايير تحد من ابداعاتهم وتقيد تطبيق بعض الأفكار العصرية التي لا تندرج تحت هذه المعايير.
لكن على الجانب الآخر - ولنكون منصفين - يجب القول أن شركة "جوجل" قامت فقط بوضع القواعد الأساسية للتصميم "المادي"، ثم قام العديد من المصممين حول العالم بتبنى هذه القواعد ومحاولة تحسينها وتطويرها بما يلائم استخداماتهم، بدليل ظهور العديد من الإصدارات من جوجل حتى (الاصدار الثالث - وقت كتابة هذا المقال) كاستجابة عملية منها لهذه المقترحات والملاحظات ودعوات التجديد والتطوير.
ختاما، أشكرك أنك وصلت لنهاية المقال، ويسعدني أن تشاركني - في التعليقات - رأيك وتجربتك حول "التصميم المادي".
وفقنى الله وإياك إلى ما يحبه ويرضاه ،،