أساسيات التصميم المتجاوب: تصميم واجهات الاستخدام المتجاوبة (مع تطبيق عملي)

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

تعريف التصميم المتجاوب (Responsive Design)

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

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

أهمية التصميم المتجاوب

لا يمكنك معرفة والتأكد من نوع الجهاز الذي يستخدمه المستخدم للدخول إلى موقعك، وهنا تكمن أهمية التصميم المتجاوب، حيث لا يهمّ نوع الجهاز المستَخدَم عندما تكون واجهات الاستخدام متجاوبة. تٌسهم التصاميم المتجاوبة في:

1. تحسين تجربة المستخدم (User Experience).
2. زيادة وصول موقعك إلى قاعدة أكبر من المستخدمين.
3. تسهيل عملية برمجة الموقع على المبرمج.
4. تحسين محركات البحث (SEO) حيث يؤثر التصميم المتجاوب على ترتيب الموقع على محركات البحث، إذ يعطي محرك البحث غوغل الأولوية للمواقع المتجاوبة.

الفرق بين التصميم المتجاوب والتصميم التكيفي

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

أما في التصميم التكيفي، يقوم المصمم بتصميم خاص للموقع في كل جهاز؛ تصميم خاص للتابلت وآخر للموبايل وآخر للكمبيوتر أيضاً، كلٌ على حدة، بحيث تؤخذ بعين الاعتبار إمكانيات كل جهاز.

مزايا وعيوب التصميم المتجاوب والتصميم التكيفي

إليك مقارنة بسيطة بين مزايا وعيوب التصميمين:

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

مثال عن التصميم المتجاوب: تطبيق “فاذكروني أذكركم”. لاحظ ملاءمة التطبيق لأحجام الشاشات التي فتِح منها. مثلاً، عندما يُفتح التطبيق على شاشة بحجم 1200 بكسل، فستظهر الواجهة كما في الصورة أقصى اليمين، وحتى لو تجاوزت 1200 بكسل ولنفترض كان الحجم 1400، فستأخذ ذات الواجهة. أما عندما تكون بين 1199 – 810 بكسل فستظهر كما الصورة الوسطى، وهي مناسبة للتابلت، وعندما يُفتح على شاشة أصغر من ذلك (موبايل)، فسيظهر التطبيق كما في الواجهة اليمينية في الصورة.

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

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

• عدد الأعمدة في نظام الشبكة: يستخدم مصممو الواجهات نظام الشبكة لترتيب المحتوى بناءً على هذه الأعمدة، فعلى سبيل المثال، سيكون هناك حدود للشاشة بحيث لا تحتوي هذه الحدود على محتوى، وهناك أعمدة فاصلة بين الأزرار وما إلى هنالك. غالباً ما يكون عدد الأعمدة 4 في الجوال و8 في التابلت و12 في الكمبيوتر.

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

• أحجام المساحات الداخلية (Padding) والمسافات الخارجية (Margin): تصغر هذه الأحجام كلما انتقلنا إلى جهاز ذو واجهة أصغر حجماً. لاحظ اختلاف الأحجام بالأرقام في الصورة أدناه.

• شريط التنقّل: لاحظ كما في الصورة أدناه، في المساحات الكبيرة مثل الكمبيوتر، تظهر روابط الانتقال في الصفحة واضحة، بينما لا يمكن أن تظهر في شاشات الموبايل لعدم توافر مساحة كافية، فتجتمع في أيقونة واحدة (رمز الهمبرغر على سبيل المثال) يمكن ظهور الروابط جميعها عند الضغط عليها.

• ترتيب المحتوى: في مساحات الشاشات الأوسع يكون ترتيب المحتوى أفقي، بينما عندما تقلّ المساحة (أي ننتقل لشاشة الموبايل مثلاً) نلاحظ أن المحتوى يصبح عمودي.

مراحل تطبيق التصاميم المتجاوبة على المواقع من خلال برنامج فيغما (Figma)

لتصميم موقع ما تصميماً متجاوباً تحتاج لتطبيق عدة خطوات:

1. ابدأ بتخطيط وتشكيل أحجام الخطوط المناسبة لكل جزء من صفحة الموقع من عناوين ونصوص.
2. استخدم خاصية “المتغيرات الحالية (Local Variables)” في برنامج فيغما لحفظ أحجام الخطوط في كل جهاز.
3. أضف جميع المتغيرات المطلوبة.
4. ابدأ العمل وتطبيق أحجام الخطوط المحددة والمسافات على التصميم المطلوب.
5. يمكنك بعد ذلك تطبيق التصميم المتجاوب على مختلف الأجهزة بنسخ التصميم الجاهز الذي انتهيت منه ثم تعديل المسافات والخطوط بحسب خاصية المتغيرات الحالية.

الأسئلة الشائعة

ما هي المشاكل التي تحلّها واجهات الاستخدام المتجاوبة؟

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

هل الأفضل استخدام التصميم المتجاوب أم التكيفي؟

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

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