بسم الله الرحمن الرحيم

وبه نستعين

التصميم الجرافيكي / التفاعل في صفحات الويب (الروابط - الأزرار)

Interaction on Web Pages (Links - Buttons)

 

التفاعل

Interactivity

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

إنشاء الروابط التشعبية

Creating Hyperlinks

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

تختلف عملية إنشاء الروابط اختلافًا طفيفًا من أداة تصميم مواقع ويب إلى أخرى (كما رأينا في السابق بشكل موضح في Freeway)، ولكن المبدأ واحد. تبدأ العملية بتحديد رسم أو نص على الصفحة. بعد ذلك، يمكنك إضافة رابط إليه، وإعداده بكتابة عنوان URL كامل أو اختيار إحدى الصفحات الأخرى ضمن الموقع الذي تقوم بإنشائه. عند اختبار الصفحة في متصفح الويب، سيؤدي النقر على العنصر المرتبط إلى نقل المستخدم إلى الصفحة المحددة.

تأثيرات التمرير وخرائط الصور

Rollovers and Image Maps

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

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

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

تعمل خرائط الصور Image Maps عن طريق رسم مناطق منفصلة من صورة أكبر وربط كل منطقة بعنوان URL منفصل. يؤدي هذا إلى إنشاء "نقاط تفاعل hot spots" داخل الصورة تنقل المستخدم إلى وجهات مختلفة عند النقر عليها. الصورة نفسها عبارة عن ملف صورة عادي، وتُدرج إحداثيات الخريطة، التي تحدد مناطق النقاط التفاعلية، ضمن كود HTML.

تتيح خرائط الصور أسلوب تصميم مرئي للغاية ولا تتطلب من المصمم تقسيم الصورة إلى أجزاء متعددة لإنشاء كل رابط. يوجد نوعان من خرائط الصور: من جانب العميل client-side ومن جانب الخادم server-side. تحتوي خرائط الصور من جانب العميل على كل ما يتعلق بالخريطة، بما في ذلك جميع عناوين URL، ضمن كود صفحة HTML. أما خرائط الصور من جانب الخادم فترسل رسائل مخصصة إلى خادم ويب بعيد يُعيد عناوين URL للوجهة النهائية. ولكن يجب العلم أن هذه الطريقة الأخيرة أصبحت الآن بالية عملياً.

أمثلة عن مبادئ التواصل في العالم الرقمي

Examples of Principles of Communication in the Digital World

مثال (1)

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

مثال (2)

قد يكون رسم خريطة الروابط من صفحة ما مهمة مملة، ولكن مع المواقع المعقدة، يصبح من الضروري تتبع بنية التنقل العامة للموقع. ابحث عن ميزات رسم خرائط الموقع والروابط في تطبيق تصميم الويب الخاص بك لتتمكن من متابعة هذا الأمر عند التعامل مع المشاريع الكبيرة.

مثال (3)

هناك أربع حالات محتملة لرابط نصي تشعبي قابل للنقر. نص عادي Plain Text: نص HTML أسود عادي، مكتوب بخط Verdana. نص مرتبط Linked Text: نص مرتبط hyperlinked بخط غامق؛ الروابط التشعبية في هذه الصفحة باللون الأحمر الداكن. رابط تمت زيارته Visited Link: نص مرتبط بخط غامق، ولكن تمت زيارته مسبقًا. تظهر الروابط التي تمت زيارتها باللون البني في هذه الصفحة.

تأثير التمرير (CSS) أو Hover (CSS):

باستخدام لغة CSS أو أوراق الأنماط المتتالية cascading style sheets، تم منح هذا الرابط خاصية "التمرير hover". وبالتالي عند تحريك مؤشر الماوس فوقه، يتحول لونه إلى الأحمر الفاتح للدلالة على إمكانية النقر عليه. تأثير الرابط النشط (CSS): باستخدام لغة CSS أو أوراق الأنماط المتتالية، يتحول لون هذا الرابط إلى البرتقالي عند النقر عليه.

مثال (4)

كما هو الحال في معظم برامج تصميم المواقع، يُسهّل برنامج Dreamweaver إنشاء أشرطة تنقل رسومية تفاعلية. يتم تحديد الصور والروابط في مربع الحوار الظاهر هنا، ويُخرج البرنامج نفسه أكواد JavaScript وHTML ذات الصلة دون الحاجة إلى أن يقلق المصمم بشأن التفاصيل التقنية.

مثال (5)

مجموعة من الأزرار الرسومية وتأثيرات التمرير، والتي تؤدي نفس وظيفة روابط النص التشعبي، ولكنها تمنح المصمم مجالًا واسعًا للإبداع.

 

أرجو أن تنال التدوينة إعجابكم وإلى لقاء قريب بإذن الله

 

المراجع والمصادر

الدليل الكامل للتصميم الجرافيكي الرقمي.

The Complete Guide to Digital Graphic Design

 

لمزيد من التواصل تابعونا على وسائل التواصل الاجتماعي

حساب "مدونة ألوان" على فيسبوك.

حساب "مدونة ألوان" على انستجرام.

حساب "مدونة ألوان" على تويتر.