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

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

تمر معظم مشاريع تصميم المستويات ثلاثية الأبعاد في ألعاب الفيديو بعدة مراحل:

1. ما قبل الإنتاج Pre-production. هي مرحلة وضع الخطوط العريضة وتصميم تجربة الاستخدام العامة.
2. المعارك Combat. هذه مرحلة اختيارية خاصة بالألعاب القتالية، وفيها تُحدد طبيعة التفاعل بين اللاعبين وأنواع الأعداء التي ستكون في اللعبة.
3. المخطط Layout. مرحلة رسم مخطط مرئي ثنائي الأبعاد من منظور علوي top view.
4. النماذج الهيكلية Blockout. مرحلة بناء مسودة أولية ثلاثية الأبعاد للنماذج الهيكلية (الأجسام والمباني وغيرها) لاختبار قابليتها للعب.
5. البرمجة النصية أو كتابة السكربتات Scripting. مرحلة ربط الأحداث بالسلوكيات الخاصة بها، وتشمل المهمات والأبواب -أسلوب فتحها مثلًا-، الأزرار ووظائفها، الذكاء الاصطناعي، إلخ، وقد كان هناك فرق كبير في الأجيال السابقة من محركات الألعاب بين شيفرة محرك اللعبة ومنطق السكربت أو البرمجة النصية في مستوى معين داخل اللعبة.
6. الإضاءة. مرحلة توزيع مصادر الإضاءة للعناصر داخل اللعبة لوضوح رؤيتها ولإضفاء عمق واقعي عليها.
7. فن البيئة Environment Art. هي مرحلة وضع اللمسة الفنية النهائية من خلال إضافة الأجسام والهياكل والأثاث وغيرها.
8. الإطلاق Release. مرحلة توثيق المشروع والتسويق له ونشره.

تخصيص المراحل

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

المشاريع الجماعية

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

ألعاب القتال أو خرائط الألعاب الجماعية

تحتاج ألعاب القتال combat games أو خرائط الألعاب الجماعية multiplayer maps إلى التركيز على إنشاء النماذج الهيكلية Blockouts من أجل إخراج متقن للمواجهات encounters التي يواجهها اللاعب، خاصة مع الشخصيات غير القابلة للعب Non playable characters (NPC)، وكذلك التركيز على موازنة الخرائط map balancing للتحكم في الخيارات المتاحة للاعب داخل المستوى، واختبارات مكثفة لتجربة اللعب نفسها playtests لمعرفة إن كان المستوى شيقًا أم مملًا، واضحًا أم محيرًا للاعب، وهكذا.

الألعاب الفردية القصصية

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

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

مرحلة ما قبل الإنتاج

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

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

مرحلة المعارك (مرحلة اختيارية)

ننتقل الآن إلى مرحلة المعارك، سنحتاج إليها إذا كانت اللعبة قتالية أو فيها معارك بين اللاعبين أو بين اللاعبين والشخصيات غير القابلة للعب NPCs، نحتاج هنا أن نعرف الصورة التي ينبغي أن تكون عليها المعركة داخل اللعبة، من حيث مكوناتها واستعداد اللاعبين لها، وكيف نجعل المعارك متجددة وغير مكررة.

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

اقتباس

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

صورة نشرها المصمم جيسون دي هيراس Jason de Hera على تويتر توضح مصفوفة الحركات لشخصيات فالكيري في لعبة God Of War.

مرحلة المخططات Layouts

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

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

صورة توضح رسمًا لخريطة Warpath متعددة اللاعبين في لعبة Team Fortress Classic، من رسم المصمم روبن ووكر Robin Walker.

مرحلة النماذج الهيكلية

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

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

هذا يعني أن ملفات النماذج الهيكلية هي مستويات كاملة أو ملفات مشاهد من اللعبة scene files يمكن لعبها وتجربتها وتحميلها داخل محرك اللعبة.

صورة لنموذج هيكلي لمستوى في لعبة Uncharted 4.

مرحلة البرمجة النصية

تدور مرحلة البرمجة النصية أو كتابة السكربتات حول دمج السلوكيات والأحداث ومنطق اللعبة معًا في مستوى اللعبة، وننصح هنا بالبدء ببرمجة سلوك الأزرار والعناصر القابلة للجمع collectables قبل النظر في الكائنات الأعقد، فصدق أو لا تصدق، تمثل برمجة الأبواب واحدة من أعقد المشاكل في تطوير الألعاب! وبرمجة المنصات أو الكائنات المتحركة مثل القطارات أشد تعقيدًا.

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

اقتباس

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

صورة لنسخة أولية من لعبة Gone Home، لم تعمل الأبواب بالطريقة الصحيحة، من مقالة Code Judo.

مرحلة الإضاءة

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

تتعامل صناعة الألعاب عادة مع الإضاءة كعنصر تجميلي يتبع فن البيئة، لكن الحقيقة أن لها وظائف محورية في أسلوب اللعب نفسه، لذا يجب أن تُصمَّم بعد تنسيق دقيق مع مصمم المستوى لفهم كيف ستؤدي دورها في خدمة الهدف من المستوى واللعبة ككل.

صورة لإضاءة غرفة من العصور الوسطى نفذها هارلي ويلسون Harley Wilson توضح توزيع الإضاءة في المشهد.

مرحلة فن البيئة

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

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

صورة متحركة تظهر تطور قاعدة عسكرية بحرية في لعبة Sniper Elite.

مرحلة الإطلاق

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

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

خاتمة

يشمل تصميم مستويات الألعاب عدة خطوات هي على الترتيب: ما قبل الإنتاج، تصميم المعارك -في حالة الألعاب القتالية-، المخططات العامة، النماذج الهيكلية، البرمجة النصية، الإضاءة، فن البيئة، والإطلاق.

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

ترجمة -بتصرف- للفصل How to make a level من كتاب The Level Design Book.

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

أهمية التصميم للمبرمجين

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

يُعَد التصميم الجيد ضروريًا لتقديم منتجات ناجحة، فهو يساعد على تحسين تجربة المستخدم، وزيادة تفاعله مع المنتج، إضافةً إلى تحسين معدل التحويل؛ لذا فإن الالتزام بمبادئ التصميم سيساعد المنتج في التفوق على منافسيه وزيادة ولاء العملاء للعلامة التجارية.

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

التعاون

العمل في بيئة واحدة مع المصممين أمر شائع في مشاريع البرمجة، لذا فإن فهم المبرمجين لمبادئ التصميم سيساعدهم على التواصل بفعالية مع المصممين والتعاون معهم بصورة جيدة، مما يؤدي إلى سير العمل بسلاسة أكبر وتحقيق نتائج أفضل

التركيز على المستخدم

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

كفاءة التنفيذ

عندما يفهم المبرمجون مبادئ التصميم، سيأخذون تلك المبادئ في الحسبان خلال عملية البرمجة، وهو ما يؤدي إلى تنفيذٍ عالي الكفاءة، ومشكلات أقل متعلقة بالتصميم، وسرعة أكبر في التطوير

حل المشكلات

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

تعدد الخبرات

في الفرق الصغيرة أو الشركات الناشئة، غالبًا ما يتولى المبرمجون مهام متعددة، بما في ذلك مسؤوليات تصميم الواجهات؛ لذا سيساعدهم امتلاك معرفة أساسية بالتصميم على التعامل مع المهام المختلفة وتوفير الوقت والموارد.

يمكن للمبرمجين الذين يفهمون مبادئ التصميم تطوير منتجات رقمية أفضل، كما يمكنهم سد الفجوة بين التصميم والبرمجة، وتطوير منتجات سهلة الاستخدام وجذابة بصريًا.

نظرية الألوان ولوحات الألوان

نظرية الألوان هي دراسة كيفية تفاعل الألوان مع بعضها البعض، وهو مجال معقد ويتطور باستمرار، لكن هناك بعض المبادئ الأساسية التي يجب على المبرمجين فهمها.

فيما يلي أهم المبادئ التي يجب على المبرمجين معرفتها.

تناغم الألوان

من المهم استخدام الألوان التي تتناغم معًا، وهناك العديد من الطرق المختلفة لتحقيق تناغم الألوان، مثل استخدام الألوان المتشابهة Analogous Colors والألوان المكملة Complementary Color والتركيبات اللونية الثلاثية Triadic Colors

التباين

هو مدى الفرق بين لونين أو أكثر، ويمكن استخدامه لخلق شعور بالعمق والاهتمام والإثارة في التصميم، وهناك نوعين رئيسيين من التباين، هما تباين الصبغة Hue Contrast وتباين القيمة Value .Contrast

التأثير العاطفي لمجموعات الألوان المختلفة

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

الكتابة واختيار الخطوط

الكتابة هي فن الترتيب، وهي عنصر أساسي في التصميم البصري؛ إذ يمكن من خلالها تقديم المعلومات وترتيبها حسب الأولوية، إضافةً إلى تأسيس هوية مرئية.

يجب على المبرمجين التعرف على المفاهيم التالية فيما يخص الكتابة.

عائلات الخطوط

هي مجموعات الخطوط التي تشترك في نفس التصميم الأساسي، وهناك العديد من عائلات الخطوط المتاحة، ولكل منها خصائصها الفريدة، مثل خطوط Arial وكذلك Times New Roman.

أنماط الخط

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

التسلسل الهرمي

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

مبادئ التخطيط Layout والتكوين Composition

التخطيط Layout والتكوين Composition هما المبدآن اللذان يحكمان كيفية ترتيب العناصر في التصميم، وهي جزئية ضرورية لإنشاء واجهات جذابة وسهلة الاستخدام.

التخطيط الجيد يؤدي إلى بنية مرئية واضحة ويوجه المستخدمين من خلال المحتوى، وفيما يلي المبادئ التي يجب على المبرمجين فهمها.

التوازن

توزيع المحتوى في التصميم بما يساعد على تحقيق التوازن البصري، وينتج عن ذلك تصميم متوازن ومتناغم.

المحاذاة

هي الطريقة التي تترتب من خلالها العناصر بجانب بعضها البعض، فالتصميم الجيد تكون عناصره مرتبة ومتناسقة.

القرب

هي المسافة بين العناصر، فالعناصر القريبة من بعضها يجب أن تكون مترابطةً ومتعلقةً ببعضها، بينما العناصر المتباعدة تُعَد أقل ارتباطًا.

استخدام المساحة البيضاء والتوازن البصري

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

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

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

التسلسل الهرمي البصري وترتيب المعلومات

التسلسل الهرمي البصري هو ترتيب العناصر في التصميم حسب أهميتها، وهو يُستخدم لتوجيه عين المستخدم نحو المعلومات المهمة أولًا.

يمكن استخدام مجموعة متنوعة من التقنيات لتحقيق التسلسل الهرمي البصري، ومن جملة ذلك:

• الحجم: يُنظر إلى العناصر الكبيرة على أنها أكثر أهمية من العناصر الأصغر
• اللون: يُنظر إلى الألوان الفاتحة على أنها أكثر أهميةً من الألوان الداكنة
• التباين: يُنظر إلى العناصر التي بينها تباين كبير على أنها أكثر أهميةً من العناصر ذات الألوان المتقاربة
• الموضع: يُنظر إلى العناصر التي تُوضع في أماكن بارزة على أنها أكثر أهميةً من العناصر التي تُوضع في مواقع هامشية

الرموز والرسوم التوضيحية

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

وفيما يلي الأمور التي يجب على المبرمجين فهمها فيما يتعلق بالرموز والرسوم التوضيحية:

• البساطة: يجب أن تكون الرموز بسيطةً وسهلة الفهم، كما يجب ألا تحتوي على الكثير من التفاصيل أو الفوضى
• الوضوح: يجب أن تكون الرموز واضحةً وذات معنى، بحيث يفهمها المستخدم على الفور
• الاتساق: من الضروري أن تكون الرموز متسقةً مع بعضها البعض، من خلال استخدام نفس النمط والتنسيق لجميع الرموز

تصميم تجربة المستخدم UX

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

التصميم الموجه للمستخدم UCD

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

هناك العديد من مبادئ التصميم الموجه للمستخدم UCD، أهمها:

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

المخططات الهيكلية Wireframes والنماذج الأولية prototypes

تُعَد المخططات الهيكلية Wireframes والنماذج الأولية prototypes تقنيتان أساسيتان لترجمة الأفكار إلى تصاميم ملموسة.

المخططات الهيكلية Wireframes هي طريقة سريعة وسهلة لتصور التصميم، ويمكن القيام بها باستخدام الورقة والقلم أو من خلال مجموعة متنوعة من الأدوات البرمجية، وتتمثل فائدتها في إمكانية الحصول على تعليقات وآراء المستخدمين في وقت مبكر من عملية التصميم، بحيث يمكن إجراء تغييرات على التصميم قبل عملية التنفيذ.

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

إنشاء دعوات لاتخاذ إجراء CTAs

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

هناك بعض الأشياء الرئيسية التي يجب أخذها في الحسبان عند كتابة دعوات لاتخاذ إجراء CTAs:

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

تصميم متجاوب مع الهواتف المحمولة

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

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

تصميم لأحجام شاشة متعددة ودقات متنوعة

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

فيما يلي بعض المبادئ الرئيسية التصميم المتجاوب:

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

أنماط التفاعل والإيماءات عبر الهواتف المحمولة

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

فيما يلي بعض أنماط التفاعل الشائعة التي يجب على المبرمجين فهمها:

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

إمكانية الوصول في التصميم

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

مقدمة إلى معايير إمكانية الوصول إلى محتوى الويب WCAG

توفر أدلة إمكانية الوصول إلى محتوى الويب WCAG معلومات شاملة حولة كيفية إنشاء محتوى يمكن للجميع الوصول إليه، فأدلة WCAG هي مجموعة من الإرشادات التي طورتها جمعية World Wide Web Consortium بهدف تطوير الويب وإتاحته لذوي الاحتياجات الخاصة.

تنقسم أدلة WCAG إلى ثلاثة مستويات:

• المستوى A: تتضمن أدلة المستوى A الحد الأدنى من متطلبات إمكانية الوصول
• المستوى AA: توفر أدلة المستوى AA ميزات إضافية تتعلق بإمكانية الوصول، ويُوصى بها لمعظم مواقع الويب
• المستوى AAA: هو المستوى الأعلى، إذ توفر أدلة المستوى AAA أعلى الميزات الممكنة في مجال إمكانية الوصول، ويُوصى بها للمواقع التي تحتاج إلى الوصول إلى نطاق واسع من المستخدمين

هناك عدد من الأدوات التي يمكن استخدامها لاختبار مدى امتثال الموقع بأدلة WCAG، مثل أداة AX وأداة TAW.

تغطي أدلة WCAG مجموعةً واسعةً من الموضوعات، بما في ذلك:

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

تصميم للمستخدمين ذوي الاحتياجات البصرية والسمعية والحركية والذهنية

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

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

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

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

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

إرشادات تباين الألوان وقابلية قراءة النص

يُعَد تباين الألوان الكافي وقابلية قراءة النص من الأمور الضرورية للمستخدمين ذوي الإعاقات البصرية.

يمكن أن تساعد الإرشادات التالية على إنشاء موقع إلكتروني يمكن لجميع المستخدمين التعامل معه:

• استخدام ألوان عالية التباين: يوصي معيار WCAG 2.1 بنسبة الحد الأدنى للتباين 4.5 : 1 للنصوص العادية، وكذلك 3 : 1 للنصوص الكبيرة، ويمكن استخدام أدوات اختبار التباين لمعرفة نسبة التباين في ألوان موقعك، مثل أداة فحص التباين
• استخدام خطوط واضحة: من المهم تجنب استخدام الخطوط الصغيرة أو الخطوط الرقيقة أو الخطوط الزخرفية، واستخدام حجم خط لا يقل عن 16
• ترك مساحة بيضاء: تزيد المساحة البيضاء من سهولة القراءة، مع استخدام العناوين المناسبة والعناوين الفرعية لتنظيم المحتوى
• استخدام الصور ومقاطع الفيديو المناسبة: المحتوى المرئي مفيد لإيصال المعلومات، مع استخدام نصوص بديلة لجميع الصور ومقاطع الفيديو

توفير نصوص بديلة للصور والوسائط

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

التعاون مع المصممين

التعاون بين المبرمجين والمصممين أمر لا بُدّ منه لتقديم تجارب رقمية مميزة.

التواصل الفعال مع المصممين

يُعَد التواصل القوي ضروريًا بين المبرمجين والمصممين، وهو يشمل القدرة على نقل التفاصيل التقنية من جهة المبرمجين والقيود التصميمية من جهة المصممين، مما يخلق بيئةً تعاونيةً تؤدي إلى نتائج تصميمية أفضل.

فيما يلي بعض النصائح للتواصل الفعال مع المصممين:

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

فهم موجز التصميم والعقبات الإبداعية

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

فيما يلي بعض الأشياء التي يجب البحث عنها في موجز التصميم:

• أهداف المشروع: ما هي الأهداف العامة للمشروع؟
• الجمهور المستهدف: من هم مستخدمي المنتج؟
• الوظائف التي يؤديها: ما هي الميزات التي يحتاجها المنتج؟
• الجانب الجمالي: ما هو المظهر الذي يجب أن يبدو عليه للمنتج؟
• الميزانية: كم هو المبلغ المتاح للمشروع؟
• الجدول الزمني: متى يجب إكمال المنتج؟

التعاون من خلال لوحات الإلهام Mood Boards وأدلة الأسلوب Style Guides

توفر لوحات الإلهام Mood Boards وأدلة الأسلوب Style Guides مرجعًا بصريًا أساسًا للتوجه العام للتصميم، إذ يمكن استخدامهما لتوصيل رؤية المصمم إلى المبرمج ولضمان أن تكون خيارات التصميم متناسقةً عبر جميع أجزاء المشروع.

فيما يلي بعض النصائح للتعاون عبر لوحات الإلهام وأدلة الأسلوب:

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

تقديم الملاحظات واستقبالها

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

فيما يلي بعض النصائح الخاصة بتقديم الملاحظات واستقبالها:

• أن نكون محددين: معنى ذلك أن لا نقول مثلًا: "لم يعجبني التصميم"، بل نخبر المصمم بما لا يعجبنا تحديدًا وما السبب
• تعليقات بناءة: تقديم اقتراحات بناءة حول كيفية تحسين التصميم
• أن نكون محترمين: من المهم تذكر أن المصمم قد بذل جهدًا كبيرًا في العمل على التصميم، لذا من المهم احترام جهوده

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

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

فيما يلي بعض النصائح لمعالجة تحديات سير العمل بين الطرفين:

• التواصل مبكرًا: يجب أن يبقى كل من المصممين والمبرمجين على اطلاع على تطورات عمل الطرف الآخر
• المرونة: من المهم أن نكون على استعداد لتعديل عملية التصميم أو التطوير حسب الحاجة
• استخدام ضبط النسخ: سيساعد ذلك على تتبع التغييرات وتجنب الخلافات
• استخدام أداة تصميم تعاونية: سيجعل ذلك من السهل مشاركة ومراجعة التصميمات

من خلال اتباع هذه النصائح، يمكن للبرمجين والمصممين التعاون بفعالية وتقديم تجارب رقمية مميزة.

أدوات التصميم والبرامج

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

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

• أداة Adobe Creative Suite: هي حزمة برامج تتضمن مجموعة من البرامج التصميمية لتحرير الصور والرسومات المتجهة والرسومات المتحركة
• أداة Sketch: هو برنامج للتصاميم المتجهة، يتميز بواجهة سهلة الاستخدام وقدرة على إنشاء نماذج أولية تفاعلية
• أداة Figma: هي أداة تصميم سحابية زادت شعبيتها في الآونة الأخيرة لمزاياها وقدرتها على تصدير التصميمات بمجموعة متنوعة من التنسيقات
• أداة Zeplin: تتيح هذه الأداة للمبرمجين استخراج الأصول ومواصفات التصميم من تصميمات أداة Figma وبرنامج Sketch

من خلال امتلاك معرفة أساسية بهذه الأدوات، يمكن للمبرمجين تعزيز التعاون مع المصممين وتبسيط عملية التصميم والبرمجة.

دمج سير عمل التصميم والبرمجة

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

سد الفجوة بين التصميم والبرمجة

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

فيما يلي بعض النصائح لسد الفجوة بين التصميم والبرمجة:

• متابعة دورات أو دروس تعليمية في التصميم
• قراءة كتب ومقالات عن التصميم
• مناقشة المصممين وطرح الأسئلة عليهم
• تجربة استخدام أدوات وبرامج التصميم
• الطلب من المصممين تعلم أساسيات لغات البرمجة، مثل لغة HTML ولغة CSS ولغة JavaScript

تطبيق أنظمة التصميم ومكتبات المكونات

ستساعدك أنظمة التصميم ومكتبات المكونات على سد الفجوة بين التصميم والبرمجة من خلال إيجاد روابط مشتركة ومجموعة من الأدوات لكلا التخصصين.

أنظمة التصميم هي مجموعة من مبادئ التصميم والأنماط والأصول التي يمكن استخدامها لإنشاء واجهات متناسقة وسهلة الاستخدام؛ أما مكتبات المكونات، فهي مجموعة من النصوص البرمجية لأداء عمليات مختلفة على النظام، ويمكن استخدامها لإنشاء واجهات معقدة بسرعة وبسهولة.

فيما يلي بعض النصائح لتطبيق أنظمة التصميم ومكتبات المكونات:

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

الممارسات الفعالة لتسليم التصميم للمبرمجين

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

فيما يلي بعض النصائح لتسليم التصميم للمبرمجين:

• استخدام أداة تصميم تعاونية تتيح للمصممين والمبرمجين العمل معًا على نفس الملفات
• تحديد مواصفات تصميم واضحة ومختصرة
• تزويد المبرمجين بجميع الأصول التي يحتاجونها لتنفيذ التصميم
• إجراء مراجعات تصميم منتظمة مع المبرمجين

إجراء مراجعات منتظمة بين المصممين والمبرمجين

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

فيما يلي بعض النصائح لإجراء مراجعات منتظمة بين المصممين والمبرمجين:

• الحصول على آراء مجموعة متنوعة من الأشخاص، بما في ذلك المصممين والمبرمجين والمستخدمين
• يجب أن تكون التعليقات بنّاءةً وتركز على تحسين المنتج، لا على انتقاد الأشخاص
• الانفتاح عل على سماع جميع التعليقات مع استعداد لإجراء التغييرات

اختبار A/B والتصميم المستند إلى البيانات

في العالم الرقمي، يمكن أن تكون القرارات المستندة إلى البيانات هي الفارق بين النتائج الجيدة والنتائج العظيمة.

اختبار A/B هو طريقة لمقارنة نسختين من التصميم يختلفان في عنصر محدد، بهدف تحديد أيهما يؤدي إلى نتائج أفضل؛ فعلى سبيل المثال، يمكن اختبار ألوان مختلفة من الأزرار لترى أيها لديه معدل نقر أعلى.

وبمجرد جمع البيانات من اختبارات A/B أو مصادر أخرى، يمكن استخدام هذه البيانات لتحسين التصميمات، من خلال إجراء تغييرات بسيطة متكررة على التصميمات مع مرور الوقت، وذلك بناءً على البيانات التي نجمعها.

تحسين رحلات المستخدم

رحلة المستخدم هي المسار الذي يسلكه المستخدم عبر تطبيقك أو موقعك الإلكتروني.

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

في الختام

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

ترجمة -وبتصرّف- للمقال The Ultimate Design Principles Guide For Developers لصاحبه Hossein Mousavi.

اقرأ أيضًا

• أساسيات تصميم واجهات الاستخدام للمبرمجين
• لماذا يجب على المبرمجين أن يتعلموا التصميم
• أنماط التصميم البرمجي Design patterns

كل تطبيق أو موقع نراه أمامنا هو أكثر من مجرد كود يعمل في الخلفية، فهو تجربة متكاملة يعيشها المستخدم. يتكون أي نظام رقمي من واجهتين رئيسيتين هماالواجهة الأمامية Frontend التي يتفاعل المستخدمون مباشرةً، والواجهة الخلفية Backend، التي تدير البيانات وتعالج العمليات في الخلفية.

اقتباس

" إن التصميم ليس مجرد شكل جمالي، بل هو كيف يعمل الشيء." – ستيف جوبز

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

فوائد تعلم أساسيات تصميم واجهات المستخدم للمبرمجين

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

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

كيف يؤثر فهم أساسيات تصميم واجهات الاستخدام على كودك البرمجي؟

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

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

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

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

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

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

كل هذه العوامل تؤدي إلى النتيجة الكبرى المُستهدفة: تجربة سلسلة، وكود متين، ومستخدم أكثر رضا.

متى يحتاج المبرمج إلى الإلمام بأساسيات تصميم واجهات الاستخدام؟

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

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

على سبيل المثال، إذا كنا مبرمجين متخصصين في تطوير الواجهات الأمامية Frontend Development، فإن تعلم أساسيات تصميم واجهات المستخدم يُعَد جزءًا أساسيًا من مهاراتنا اللازمة؛ أما إذا كنا سنعمل كمطوري برمجيات كاملة Full Stack Developer، فإن فهم تصميم واجهات الاستخدام يصبح ذا أهمية مضاعفة. وذلك لأنه يتعامل مع النظام ككل، بما في ذلك الجوانب المتعلقة بتصميم الواجهة، مما يتطلب معرفة كيفية تنسيق واجهات المستخدم مع الكود الخلفي بسلاسة وفاعلية.

في المقابل، إذا كان المبرمج متخصصًا في مجالات أخرى مثل تطوير البرمجيات الخلفية Backend Development، فقد لا يحتاج إلى التعمق في تفاصيل تصميم واجهات الاستخدام بنفس القدر، ولكن من المفيد له فهم الأساسيات لتسهيل التعاون مع فرق التطوير الأخرى؛ ناهيك عن أنه في العديد من الحالات العملية، يزداد الاحتياج لتعلم أساسيات تصميم واجهات الاستخدام في مواقف متنوعة، على سبيل المثال:

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

مبادئ تصميم واجهات الاستخدام التي يجب أن يعرفها المبرمج

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

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

التسلسل الهرمي البصري

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

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

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

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

البساطة والتقليلية

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

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

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

الاتساق

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

الاتساق هو ما يجعل تجربة الاستخدام سلسة، وهو ما يجعل التطبيق يبدو وكأنه مفهوم لدى المستخدم قبل أن يتعلمه، وهو ما يمنع المستخدم من الارتباك عند الانتقال بين الصفحات.

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

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

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

قابلية التوسع Scalability

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

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

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

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

ولذلك يجب أن يكون هناك حرص على التنفيذ بحيث يكون تصميم الواجهة قابلًا للنمو والتوسع دون أن يتعرض للتعقيد أو الفوضى مع مرور الوقت.

التفاعل والتغذية الراجعة

أغلبنا جرب على الأقل مرة الضغط على زر في موقع ما ولم يحدث شيء مما جعلنا نرتبك! فهل تم إرسال الطلب؟ هل تعطل التطبيق؟ هل ننتظر أم نعيد المحاولة؟

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

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

سرعة التحميل والأداء

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

تقنيات مثل Lazy Loading، وضغط الصور، وتقليل عدد الطلبات الخارجية ليست مجرد تحسينات، بل هي أساسيات تجعل التطبيق يعمل بسلاسة دون أن يشعر المستخدم أنه عالق في متاهة من الانتظار، لذا من المهم البحث بين خيارات وأدوات تحسين أداء المواقع وتسريعها لجعل أداء الموقع أو التطبيق الذي نعمل عليه متوافق مع التطلعات.

إمكانية الوصول Accessibility

هل فكرت يومًا كيف يمكن لشخص يعاني من ضعف البصر أن يتفاعل مع التطبيقات؟ ماذا عن شخص لا يستطيع استخدام الفأرة؟ تصميم الواجهة الجيد لا يخدم فئة معينة فقط، بل يراعي الجميع. ومن المهم هنا تذكر أن هناك أكثر من ١٥٪ من سكان العالم يعانون من شكل من أشكال الإعاقة.

يمكن للتعامل مع الأمر إضافة دعم لقارئات الشاشة، واستخدام ألوان ذات تباين عالٍ لمن يعانون من ضعف البصر، وتوفير اختصارات لوحة المفاتيح، كما يمكن الاستعانة ببعض الأدوات لقياس مدى إمكانية الوصول في مواقعنا أو تطبيقاتنا، ومن ضمنهم إضافة Accessibility Insights for Web للمتصفحات، التي تخبرنا بكافة التفاصيل التي تحتاج إلى تطوير.

تجنب التحميل المعرفي Cognitive Load

كلما زاد عدد المعلومات التي يحتاج المستخدم لمعالجتها في لحظة واحدة، زادت احتمالية شعوره بالإرهاق والتخلي عن التطبيق. البشر يحبون البساطة، وعقولهم تفضل القرارات السهلة.

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

يقول البعض:

اقتباس

إذا احتاج المستخدم لقراءة دليل إرشادي لمعرفة كيفية استخدام تطبيقك، فقد أخطأت في التصميم!

منع الأخطاء البشرية والتعامل معها

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

ولتحقيق ذلك، لا نجعل مثلًا رسالة الخطأ غامضة مثل: "Error 403"، بل نجعلها تخبر المستخدم بما حدث بوضوح، مثل: "عذرًا، لا يمكنك الوصول إلى هذه الصفحة. تحقق من صلاحياتك أو تواصل مع الدعم الفني.".

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

الاهتمام بالتفاصيل الصغيرة Micro interactions

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

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

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

باهتمامنا بهذه المبادئ، فنحن لا نبني مجرد تطبيقات ومواقع، بل نصنع تجربة حقيقية!

أدوات التصميم المناسبة لاستخدام المبرمجين

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

أداة فيجما Figma

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

يستطيع المبرمجون من خلال فيجما الحصول على:

• تصميم دقيق بلا تخمينات: إمكانية فحص مقاسات العناصر وتباعدها ونوع الخطوط والألوان
• استخراج الأكواد مباشرةً: توليد أكواد CSS وSwift وXML للمطورين
• التعاون الفوري: إمكانية العمل على نفس الملف مع المصمم في نفس الوقت الفعلي، والتفاعل المباشر مع التعديلات
• اختبار التطبيق قبل البرمجة: إنشاء نماذج تفاعلية لفهم تدفق الصفحات قبل البدء في البرمجة
• التناسق البصري: استخدام أنظمة التصميم لضمان تناسق العناصر في التطبيق

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

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

أداة بالساميك Balsamiq

يبدأ تصميم واجهة الاستخدام من الفكرة الخام وينتهي بتجربة مستخدم سلسة. ولمرحلة التخطيط المبدئي Wireframing تحديدَا، تستخدَم أداة بالسميك كوسيلة سريعة لإنشاء الهيكل الأولي الأساسي للواجهة قبل الدخول في التفاصيل الجمالية، وتوفر تجربةً شبيهةً بالرسم اليدوي.

تتمتع أداة بالساميك بعدة مزايا، أهمها ما يلي:

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

الأخطاء الشائعة في التعامل مع تصميم واجهة الاستخدام

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

التركيز على التفاصيل قبل الأساسيات

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

الأصح هنا هو اتباع نهج التخطيط أولًا، بحيث يتم نركز على بناء المخطط العام Wireframe قبل الدخول في التفاصيل البصرية. يمكن استخدام أدوات مثل Balsamiq أو Figma ، فهما يتيحان لنا التخطيط المرئي لتصميماتنا، خاصةً في الحالات التي لا يتوفر بها مصمم للواجهات.

التطبيق غير الدقيق للتصميم

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

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

ضعف التباعد والتباين

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

مثال آخر هو عدم وجود مسافات كافية بين الأزرار أو الحقول النصية، مما يجعل النقر عليها أمرًا صعبًا، خاصةً عند استخدام الأجهزة التي تعمل باللمس.

الحل هو الاعتماد على المساحات البيضاء Whitespace لضمان ترتيب مريح للعناصر، والتأكد من وجود تباين كاف بين النصوص والخلفيات، مثل استخدام لون داكن مع خلفية فاتحة أو العكس؛ كما يجب اختبار الواجهة على عدة أجهزة وشاشات لضمان وضوع التباعد والتباين لجميع المستخدمين، بما في ذلك من يعانون من ضعف البصر أو يستخدمون أوضاع القراءة الليلة Dark Mode.

عدم اختبار الواجهة كفاية

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

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

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

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

خاتمة

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

المصادر

• Visual Hierarchy in Web Design: How to, Examples & Techniques for 2025
• Consistency in UI design
• Feedback UI: How to Humanize the SaaS User Interface? (+Examples)

اقرأ أيضًا

• تطوير الواجهة الأمامية لمواقع الويب Frontend Web Development
• لماذا يجب على المبرمجين أن يتعلموا التصميم
• أنماط التصميم البرمجي Design patterns

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

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

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

1. التركيز على أصحاب المصلحة الرئيسيين

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

تُعَدّ مصفوفة السلطة والاهتمام الموضَّحة في الصورة أدناه وسيلةً رائعة لتحديد أصحاب المصلحة الرئيسيين ومعرفة كيفية التعامل مع جميع أصناف أصحاب المصلحة بالطريقة المناسبة، بمن فيهم أصحاب المصلحة صعبو المراس.

لإعداد مصفوفة السلطة والاهتمام، سنحتاج أولًا إلى تصنيف أصحاب المصلحة حسب درجة اهتمامهم بعملنا من جهة، وسلطتهم أو تأثيرهم علينا من جهة أخرى.

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

الحرص على تلبية توقعاتهم

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

التحقق من رضاهم

أصحاب المصلحة ذوو السلطة العالية والاهتمام المحدود بعملنا هم الفئة الأصعب تعاملًا في معظم الأحيان، ذلك أن فرصة التعاون والتفاعل معهم ضئيلة، لذا فمن الضروري التفكير في كيفية إبقائهم راضين لكي لا يؤثروا علينا سلبيًا.

إطلاعهم على التحديثات باستمرار

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

الحفاظ على علاقة جيدة معهم

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

2. الاستفادة من المهارات المكتسبة من تصميم تجربة المستخدم UX

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

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

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

3. البحث عن الأهداف المشتركة

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

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

4. توضيح الأدوار والمسؤوليات

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

من الأساليب الرائعة لإرساء فهم مشترك للأدوار والمسؤوليات، من المهم استخدام نموذج RACI المكون من اختصار الحروف الأولى بالإنجليزية لأربع أدوار، وهي:

• منفِّذ
• مسؤول
• مستشار
• مطّلع.

ولتطبيق هذا النموذج يجب أن يجتمع الأطراف ويراجعوا المهمات ليقرروا توزيع الأدوار والمسؤوليات كما يلي:

• من المسؤول عن ضمان إنجاز المهمة؟
• من المنفذ للمهمة؟
• من الذي يجب استشارتُه أثناء المهمة؟
• من الذي يجب أن يبقى على اطلاع لكن ليس بالضرورة استشارته بصورة مباشرة؟

5. كسب ثقة أصحاب المصلحة

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

يُعَد تحقيق انتصارات مبكرة على مستوى العمل طريقةٌ ممتازةً لبناء الثقة بيننا وبين أصحاب المصلحة. لذا من المهم تحديد هدف مفيد وواقعي وقابل للإنجاز للعمل على تحقيقه وإظهار التأثير الإيجابي لجودة التصميم وقوة الأبحاث على سير العمل.

6. عدم الاعتماد على القول بل على الفعل

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

7. التحدث بلغة أصحاب المصلحة

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

8. إشراك أصحاب المصلحة في دائرة العمل

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

9. مشاركة العمل مع أصحاب المصلحة

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

اقتباس

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

• تيريزا توريس، مدربة تطوير منتجات.

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

10. العمل فرديًا مع صاحب المصلحة صعب المراس

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

في هذه الحالات قد يكون الابتعاد عن جو العمل الجماعي واللجوء إلى العمل الفردي حلًّا مثاليًا، مما يفسح المجال لتوطيد علاقة عمل جيدة واستغلال الوقت باجتماع فردي مثمر.

11. التواصل المستمر

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

12. عدم التهرب من الخلافات

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

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

خاتمة

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

ترجمة -وبتصرّف- للمقال How to work with difficult stakeholders لصاحبه Neil Turner.

اقرأ أيضًا

• دليلك الشامل خطوة بخطوة لاحتراف تصميم تجربة المستخدم UX
• أساسيات تصميم تجربة المستخدم
• مبادئ التصميم وأهميتها

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

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

ما هي لوحة ألوان واجهة المستخدم UI

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

تُعَد لوحة ألوان واجهة المستخدم ضروريةً للتناغم البصري وتحديد هوية العلامة التجارية والتأثير على سلوك المستخدم، كما أن استخدامها الصحيح يحسّن تجربة المستخدم من خلال توجيه المستخدم بسلاسة ضمن الواجهة.

الفرق بين النظام اللوني ولوحة الألوان

يعمل النظام اللوني ولوحة الألوان جنبًا إلى جنب في تصميم واجهة المستخدم، فاللوحة تعطي ألوانًا محددة، في حين يضع النظام يُعَد طريقةً منظمةً لترتيب هذه الألوان.

للتوضيح أكثر، يمكن تعريف النظام اللوني على أنه مجموعة واسعة من الألوان المنظمة وفق نموذج معين، وهي بمثابة صندوق ألوان كبير يمكن مزج بضعة ألوان منه لإنشاء أسس لونية hues أو تدرجات داكنة؛ وبذلك يمكنك إنشاء نمط لوني اعتمادًا على النظام اللوني المختار لتصميم المواد. من الأمثلة على الأنظمة اللونية نظام RGB ونظام CMYK ونظام Lab، يُستخدَم نظام RGB في تطبيق الألوان على واجهة المستخدم، وهو يتضمن ثلاثة ألوان أساسية هي الأحمر والأخضر والأزرق.

أساسيات نظرية الألوان في تصميم واجهة المستخدم UI

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

وفي عام 1839 ابتكر الكيميائي الفرنسي ميشيل أوجين شيفرول مبادئ تناغم الألوان، التي ساعدت على تطوير فهمنا الحالي للألوان وكيفية استخدامها. ابتكر شيفرول قاعدةً فعالةً رغم بساطتها، لشرح التأثير البصري للتباين المتزامن في جميع الحالات، وهي تنص على أنه: عند رؤية لونين بجانب بعضهما أو واحدًا تلو الآخر، يحدث تباينٌ بصري فيما بينهما، مما يجعل كل لون يبدو وكأنه قد أخذ من مواصفات اللون المعاكس للون الآخر في عجلة الألوان، وبالتالي يؤثر ذلك في درجة الأساس اللوني ودرجة سطوعه المحسوسة. كان لنظرية شيفرول تأثير كبير في الحركة الانطباعية الفرنسية ـوهي تيار فني ظهر في أواخر القرن التاسع عشرـ.

والآن لنحلل العناصر الأساسية للون وهي: الأساس اللوني والتشبُّع والإضاءة، والتي يرمز لها بـ HSL اختصارًا.

الأساس اللوني Hue

الأساس اللوني Hue هو اللون الذي نختاره من عجلة الألوان، ويرمز له بحرف H. على سبيل المثال، الأساس اللوني رقم 0 أو 360 هو اللون الأحمر.

أما الأساس اللوني رقم 120، فهو اللون الأخضر.

بينما الأساس اللوني رقم 240 هو اللون الأزرق.

التشبُّع Saturation

يعبر التشبع Saturation عن مدى قوة اللون، ويرمز له بحرف S؛ فتشبع 100% يعني أن اللون نقي ومشرق

في حين أن تشبع 50% يعني أن اللون ممزوج بالرمادي.

بينما تشبع 0% يعني أن اللون رمادي فقط، ولا أثر للأساس اللوني.

الإضاءة Lightness

تعبر الإضاءة Lightness عن مقدار الضوء في اللون، ويرمز لها بحرف L؛ حيث تعني الإضاءة 0% أن اللون غامق جدًا.

في حين تعني الإضاءة 50% أن اللون معتدل، لا غامق ولا فاتح.

بينما الإضاءة 100% تعني أن اللون مضيء أو ساطع جدًا.

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

كيف تطبق نظرية الألوان عمليا في تصميم واجهات المستخدم؟

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

هناك العديد من المخططات اللونية الأساسية التي يمكن استخدامها:

1. أحادي اللون: يعتمد هذا المخطط على أساس لوني واحد ويشتق منه التدرجات الداكنة والفاتحة لتلوين عناصر التصميم الأخرى

2. متناظر: يتضمن هذا المخطط استخدام ثلاثة ألوان متجاورة على عجلة الألوان، مثل الأخضر المصفر/ الأصفر/ الأصفر البرتقالي

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

4. تكميلي منشطر: في هذا المخطط يُستخدم اللونان الواقعان على جانبي اللون المقابل لتخفيف حدة التباين

5. ثلاثي: في هذا المخطط تُستخدم ثلاثة ألوان متساوية البُعد عن بعضها على عجلة الألوان، مما يحافظ على التناغم ويوفّر تباينًا عاليًا

6. رباعي: ويتضمن استخدام أربعة ألوان تشكّل مجموعتين من الأزواج المتكاملة، مع سيطرة أحد الألوان

7. مربع: وهو أحد أشكال المخطط اللوني الرباعي، ويتضمن استخدام أربعة ألوان متساوية البُعد عن بعضها في عجلة الألوان

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

لماذا تُعَد نظرية الألوان أمرا بالغ الأهمية في تصميم واجهة المستخدم؟

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

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

علم نفس الألوان في تصميم واجهة المستخدم

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

من الجدير بالذكر أن تفسير الألوان يختلف باختلاف الثقافات؛ إذ يرتبط كل لون بطيف واسع من المشاعر المختلفة حسب كل ثقافة. في ما يلي نبذة عن معاني الألوان بناءً على بعض الأبحاث:

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

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

أمثلة على دلالات الألوان

سنعرض فيما يلي أمثلة عن دلالات الألوان.

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

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

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

كيف نختار لوحة ألوان واجهة المستخدم؟

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

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

1. التأكد من الاختيار الجيد للألوان الأساسية والثانوية وألوان التمييز التكميلية

إن اختيار الألوان الأساسية والثانوية وألوان تمييز العناصر بطريقة صحيحة شرطٌ أساسي لفعالية لوحة ألوان واجهة المستخدم.

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

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

يُعَد التباين عنصرًا حاسمًا في اختيار اللون الأساسي، لأن نقص التباين عن المستوى المطلوب قد يؤدي إلى مشكلات في سهولة الوصول.

تقدم إرشادات سهولة وصول محتوى الويب WCAG معاييرًا لضمان أن تكون نسبة التباين بين الخلفية والعناصر الأمامية مرتفعةً بما يكفي لتسهيل القراءة على معظم المستخدمين، وتوصي بأن لا تقل نسبة التباين عن 4.5 إلى 1 للنص العادي و3 إلى 1 للنص كبير الحجم؛ مع العلم أنه لا يُشترَط (حتى الآن) أن يحقق التباين اللوني معايير المستوى AAA (سهولة الوصول الممتازة) من إرشادات سهولة وصول محتوى الويب WCAG.

في ما يلي كيفية استخدام هذه الألوان بطريقة صحيحة:

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

2. استخدام قاعدة 60-30-10

قاعدة 60-30-10 هي إرشادات مجرَّبة لضمان التوازن والراحة البصرية في التصميم. وفقًا لهذه القاعدة:

• يجب تعبئة 60% من المساحة باللون الأساسي
• و30% باللون الثانوي أو الداعم
• و10% بلون من ألوان التمييز

هذه هي المساحات البصرية التي يجب أن يشغلها كل من الألوان؛ فإذا فرضنا أن مساحة التصميم الكاملة تمثل 100%، سواءً كانت صفحة ويب أو غرفةً أو ملصقًا، فإن قاعدة 60-30-10 تعطي نسبةً لكل من الألوان في هذه المساحة.

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

تساعد هذه النسبة على توجيه نظر المستخدم بسلاسة ضمن الواجهة، وتمنع من ظهور التصميم بمظهر عشوائي أو مربك.

في ما يلي خطوات تطبيق قاعدة 60-30-10:

• تحديد المساحة: عيِّن المساحة الكلية التي ستعمل عليها
• اختيار الألوان: اختر الألوان الأساسية والثانوية وألوان التمييز
• التخطيط: حدّد مكان كل لون
• التطبيق: ابدأ بتعبئة التصميم بالألوان وفق المخطط
• المراجعة: انظر نظرة شاملة وتأكد من تحقيق التوازن في قاعدة 60-30-10

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

3. فهم الجمهور

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

4. استلهام الألوان من المناظر والصور

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

5. الاستفادة من التباين

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

6. استخدام مسميات واضحة للألوان

رغم إهمال ذلك في كثيرٍ من الأحيان إلا أنّ تسمية الألوان بدقة في نظام التصميم خطوةٌ أساسية، لذا يُنصح بالابتعاد عن الأسماء غير الدقيقة واختيار أوصاف موحدة وواضحة للألوان. يمكن الاستعانة بأنظمة الألوان المعيارية مثل الألوان المعيارية للويب W3C أو أنظمة لونية مثل نظام بانتون من أجل تسمية الألوان.

يُعَد اختيار لوحة ألوان لواجهة تطبيقات الويب أو الهاتف المحمول عمليةً فنيةً تتطلب فهمًا كافيًا لنظرية الألوان واتجاهات التصميم الحالية وعلم نفس المستخدمين. ومن خلال اتباع الخطوات المذكورة يمكن اختيار ألوان تتناغم مع الجمهور وتحسين تجربتهم في استخدام المنتج.

الممارسات المثلى لسهولة الوصول في اختيار لوحة ألوان واجهة المستخدم

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

لكن ما أهمية ذلك؟

حوالي 16% من سكان العالم مصابون بنوع من أنواع الإعاقة، والإعاقات البصرية هي الأكثر شيوعًا؛ لذلك فلن يحظى التصميم بالنجاح ما لم يستوعب هذه الشريحة الواسعة من المستخدمين.

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

كيفية اختيار لوحة ألوان سهلة الوصول

سنذكر في الآتي بعض الممارسات المثلى المساعِدة على اختيار لوحة ألوان سهلة الوصول.

• المحافظة على تباين لوني كافٍ: يجب أن تكون نسبة التباين بين لون النص والخلفية مرتفعة بما يكفي لتمكين الجميع من القراءة؛ مع العلم أن هناك أدوات تساعد على التحقق من التباين بين الألوان مثل منصة WebAIM.
• تجنب الاعتماد على الألوان لوحدها لإعطاء المعلومات: إذا كنا نستخدم الألوان لإعطاء المعلومات ضمن التصميم فلا بد من الحرص على إضافة وسيلة تمييز أخرى من أجل الأشخاص الذين لا يميّزون الألوان. يمكن مثلًا استخدام الأنماط أو الزخارف أو وضع أيقونات بجانب الألوان
• الاختبار على مقياس التدرج الرمادي: من المهم فحص تصميمنا في وضع التدرج الرمادي. وفي حال كان لا يزال مفهومًا وجيد المظهر، فمن المرجح أن يصل لذوي العيوب البصرية اللونية
• استخدام العلامات والمؤشرات: من المهم تقليل الاعتماد على اللون لوحده للإشارة إلى التفاعل أو تغير الحالة في عناصر واجهة المستخدم، إذ من المهم أيضًا استخدام التوضيحات النصية أو الأحجام المتباينة أو غيرها من المؤشرات البصرية المساعِدة.
• استخدام أدوات فحص سهولة الوصول: هناك العديد من الأدوات التي تساعد على اختيار لوحة ألوان موافقة لمعايير سهولة الوصول لواجهة المستخدم، مثل Color Safe وContrast Grid.
• الابتعاد عن استخدام ألوان قد تسبب نوبات: من المهم تجنب استخدام الألوان التي قد تثير تفاعلات حساسية ضوئية لدى بعض الأشخاص، مثل بعض تدرجات الأحمر أو الوميض السريع للأضواء

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

أمثلة على واجهات مستخدم بلوحات ألوان مناسبة

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

1. سبوتيفاي Spotify للبث الموسيقي

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

الدرس المستفاد: الألوان المتباينة تحسّن الرؤية وتجذب انتباه المستخدم.

2. إير بي إن بي Airbnb للسفر والضيافة

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

الدرس المستفاد: الألوان التي تتماشى مع قيم العلامة التجارية تعزز هوية العلامة التجارية وتؤثر عاطفيًا على المستخدمين.

3. إنستاجرام Instagram للتواصل الاجتماعي

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

الدرس المستفاد: يساعد تبسيط ألوان الواجهة على تركيز انتباه المستخدم نحو المحتوى الرئيسي.

4. سلاك Slack للعمل الجماعي

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

الدرس المستفاد: يساعد اختيار لون فريد على تمييز منتجك في السوق التنافسي.

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

أدوات إنشاء لوحة ألوان واجهة المستخدم

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

1. برنامج Adobe Color

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

2. برنامج Coolors

برنامج Coolors هو أداة سريعة سهلة الاستخدام لتوليد لوحات الألوان، ويسمح بإنشاء مخططات لونية وحفظها ومشاركتها بنقرة واحدة، كما يتيح إمكانية استكشاف اللوحات اللونية الرائجة لإلهام المصممين.

3. برنامج Color Hunt

برنامج Color Hunt هو منصة مجانية تقدّم لوحات ألوان أنشأها مصممون حول العالم، وهو مكان رائع لاستلهام الأفكار والعثور على مشاركات لونية تم استخدامُها بنجاح من قِبل مصممين آخرين.

4. برنامج Paletton

Paletton هو أداة تساعد على إنشاء مشاركات لونية قائمة على أساس لوني محدد، وتقدّم خيارات عديدة للتناغمات اللونية، كما تتيح إمكانية معاينة كيف ستبدو اللوحة اللونية المختارة على التصميم الواقعي.

5. برنامج Colormind

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

6. برنامج Contrast Checker

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

خاتمة

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

من المهم الاطّلاع باستمرار أيضًا على أحدث الدراسات والاتجاهات والتعلَّم من الأمثلة الناجحة؛ إلى جانب الاستفادة من الأدوات المتوفرة عبر الإنترنت لتسهيل عملية التصميم وتوليد مخططات لونية فعالة وشاملة وجذابة.

ترجمة -وبتصرّف- للمقال UI Color Palette 2024: Best Practices, Tips, and Tricks for Designers لصاحبه Mads Soegaard.

اقرأ أيضًا

• قواعد تصميم الهوية البصرية
• علم نفس الألوان في تصميم العلامات التجارية
• اختيار الألوان المناسبة لواجهة المستخدم
• النسخة العربية الكاملة لكتاب: مدخل إلى تصميم واجهات المستخدم UI

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

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

ما المقصود بتجربة المستخدم وتصميم تجربة المستخدم؟

تجربة المستخدم UX هي ما يشعر به المستخدم أثناء استخدام المنتج. وتكمُن وظيفة مصمم تجربة المستخدم في تصميم منتج يقدم أفضل تجربة ممكنة؛ لكن كيف يجري ذلك؟

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

يتركز اهتمام مصممي تجربة المستخدم عادةً على ثلاثة عوامل رئيسية هي: مظهر المنتج، وانطباعه، وسهولة استخدامه Usability.

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

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

العناصر المشتركة بين التصميم الجرافيكي وتصميم تجربة المستخدم

يشترك التصميم الجرافيكي وتصميم تجربة المستخدم في كل من الذكاء العاطفي والتفكير الإبداعي والنمذجة الأولية، بينما يختلفان في عناصر أخرى خاصة بكل مجال.

التصميم العاطفي

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

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

التفكير الإبداعي

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

النمذجة الأولية

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

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

الاختلاف بين التصميم الجرافيكي وتصميم تجربة المستخدم

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

التركيز على المستخدم مقابل التركيز على التفاصيل

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

الطريقة التكرارية لحل المشكلات

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

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

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

بعد ذلك يحين موعد إطلاق المنتج، لكن عملية التصميم لا تنتهي هنا، إذ يستمر إجراء اختبارات على التصميم وجمع آراء وملاحظات المستخدمين من خلال دورة جديدة من أبحاث المستخدمين، ثم تطبَّق تحسينات لاحقة على التصميم على ضوء هذه الملاحظات.

تعدد المجالات مقابل التخصص

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

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

فوائد خبرات التصميم الجرافيكي عند الانتقال إلى مجال تصميم تجربة المستخدم

يتمتع مصمم الجرافيك بخبرات مفيدة جدًا في تصميم تجربة المستخدم، أهمها:

النواحي الجمالية

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

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

التصاميم المألوفة والتصاميم الرائجة

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

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

كيف يمكن تحسين المهارات للانتقال من التصميم الجرافيكي إلى تصميم تجربة المستخدم

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

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

وكما ذكرنا مسبقًا، المفتاح الحقيقي لمصمم الجرافيك هو فهم جميع أشكال أبحاث المستخدمين، وهو ما يمكن تعلُّمه من خلال ما يلي:

الدورات عبر الإنترنت

هناك العديد من المنصات التي تقدم دورات تعليمية تغطي المهارات الأساسية في تصميم تجربة المستخدم ومجالات العمل المختلفة لهذا الاختصاص مع التدريب على المهارات العملية. هذا النوع من الدورات يُكسِب المصمم الجرافيكي الخبرة والثقة الكافية لاجتياز مقابلات التوظيف، ومن ثم العمل في مجال تصميم تجربة المستخدم.

الدورات على أرض الواقع

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

الدراسة الجامعية

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

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

التشبيك

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

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

الإرشاد والتقييم

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

خاتمة

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

ترجمة -وبتصرّف- للمقال How to Change Your Career from Graphic Design to UX Design لصاحبه Teo Yu Siang.

اقرأ أيضًا

• دليلك الشامل خطوة بخطوة لاحتراف تصميم تجربة المستخدم UX
• قابلية الاستخدام وأهميتها في تجربة المستخدم
• دليل المبتدئين إلى التصميم التفاعلي Interaction Design

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

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

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

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

• تحديد المشكلة، وإنشاء شخصيات المستخدم، تحديد السيناريوهات
• إعداد رحلات المستخدم
• إنشاء رسوم تخطيطية
• إنشاء نماذج أولية
• إجراء اختبارات سهولة الاستخدام

منهجية غير مرنة في تصميم تجربة المستخدم قد تتّبعُها بعض الفرق بغض النظر عن المشروع

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

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

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

عملية تصميم الماسة المزدوجة من Design Council.

إذا كان اختيار المنهجية المناسبة لتصميم تجربة المستخدم والإجراءات التي يجب تنفيذها يعتمد على العديد من المتغيرات المختلفة، فكيف يمكن استكشاف هذه المتغيرات؟ يكمُن الجواب في البدء بطرح الكثير من الأسئلة مثل:

• ما خلفية المشروع؟
• ما معايير نجاح المشروع؟
• ما هي القيود؟
• من هم المشاركون بالمشروع؟
• ما الذي قد يمنع نجاح المشروع؟
• من هم المستخدمون؟
• ما هي مشكلات المستخدمين التي يجب حلُّها؟
• ما الموارد والأفكار المتوفرة؟
• ما هي الافتراضات والأسئلة الرئيسية؟
• ما مدى أهمية المشروع؟

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

يساعد استخدام مخطط لجمع المعلومات الرئيسية حول المشروع على تحديد الإجراءات اللازمة لتصميم تجربة المستخدم في هذا المشروع

خاتمة

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

ترجمة -وبتصرّف- للمقال What are the best UX activities to carry out? It depends…‎ لصاحبه Neil Turner.

اقرأ أيضًا

• أهم التقارير اللازمة لتصميم تجربة المستخدم
• دليلك الشامل خطوة بخطوة لاحتراف تصميم تجربة المستخدم UX
• ما الفرق بين تجربة المستخدم UX وواجهة المستخدم UI؟
•  النسخة الكاملة لكتاب مدخل إلى تجربة المستخدم (User Experience - UX)

لقد تعرفنا في المقالات السابقة على على كيفية ضرب المصفوفات بمصفوفة عمودية وكذلك كيفية حساب عمليات ضرب المصفوفات لعمل تصاميم ثلاثية الأبعاد 3D وغيرها، وسنتابع في هذا المقال، شرح آخر نوع من عمليات ضرب المصفوفات، إذ يوضّح هذا المقال خاصيات أخرى لعملية ضرب المصفوفات، خاصةً المصفوفة المحايدة Identity Matrix ومعكوس المصفوفة Matrix Inverse.

سنوضّح في هذا المقال المواضيع التالية:

• المصفوفة المحايدة: ‎IA = AI = A‎
• المصفوفة المحايدة هي مصفوفة فريدة
• منقول Transpose المصفوفة المحايدة: ‎I^T = I‎
• ضرب المصفوفة المحايدة بنفسها: ‎II = I‎
• المصفوفة المحايدة الموجودة في المنتصف بين مصفوفتين: ‎AIB = AB‎
• معكوس مصفوفة: ‎AA^-1 = A^-1A = I‎
• المصفوفات المفردة Singular وغير المفردة Non-singular
• معكوس المصفوفة هو مصفوفة فريدة
• معكوس ضرب مصفوفتين:

‎(AB)^-1 = B^-1 A^-1‎‎

• معكوس منقول المصفوفة:

‎‎(A^-1)^T = (A^T)^-1‎‎

• محدِّد Determinant المصفوفة المفردة

ستكون جميع المصفوفات في هذا المقال مصفوفات مربعة؛ فالمصفوفة المربعة هي المصفوفة التي يكون فيها عدد الصفوف مساويًا لعدد الأعمدة.

الضرب الملحق Post-multiplication للمصفوفات في المصفوفة المحايدة

تستخدم الرسوميات الحاسوبية المصفوفات المربعة لأغراض متعددة؛ إذ تُطبَّق معظم عمليات التحويل Transformations، مثل تغيير مجال الرؤية في العالم ثلاثي الأبعاد أو عرضها على صورة ثنائية الأبعاد، باستخدام المصفوفات المربعة.

وكما هو معروف، للمصفوفات المربعة خاصيات لا تتشارك فيها مع المصفوفات الأخرى، لذا سنتعرف أولًا على إحدى هذه الخاصيات من خلال إجراء عملية الضرب التالية:

وبالتالي نلاحظ أن الضرب الملحق لمصفوفةٍ ما بالمصفوفة المحايدة يعطي المصفوفة نفسها:

‎AI = A‎‎

الضرب المسبق Pre-multiplication للمصفوفات بالمصفوفة المحايدة

لنجرِ الآن عملية الضرب التالية:

سنلاحظ أن الضرب المسبق لمصفوفةٍ ما بالمصفوفة المحايدة يعطي المصفوفة نفسها:

‎IA = A‎‎

المصفوفة المحايدة Identity Matrix

تُسمَّى المصفوفة I بالمصفوفة المحايدة، لأن ضرب المصفوفة بها، يعطي المصفوفة نفسها: IA = A و ‎AI = A‎، وذلك مهما كانت المصفوفة A؛ وهي مشابهة للعدد الحقيقي 1 الذي يمثل العنصر المحايد لعملية ضرب الأعداد الحقيقية، لأن 1a = a و a1 = a لجميع الأعداد الحقيقية a.

لا توجد مصفوفة محايدة مُحدَّدة للمصفوفات بجميع أبعادها؛ إذ تكون المصفوفة ‎I_N×N‎ مصفوفةًَ محايدةً للمصفوفات المربعة التي أبعادها N×N فقط، فمثلًا المصفوفة المحايدة للمصفوفات التي أبعادها 3×3 هي:

نضع العدد 1 مكان عناصر القطر الرئيسي Main Diagonal للمصفوفة المحايدة ذات N بُعد ‎I_N×N‎، والعدد 0 للعناصر الأخرى في المصفوفة؛ إذ يتكون القطر الرئيسي من العناصر التي يتساوى فيها رقم الصف مع رقم العمود، ويجب أن تكون الأرقام من النوع 1 على هذا القطر، وليس على القطر الآخر.

المصفوفة المحايدة هي مصفوفة فريدة

لا توجد مصفوفة أخرى أبعادها N×N تماثل في عملها المصفوفة المحايدة؛ فبما أن العدد 1 فريدٌ بالنسبة للأعداد الحقيقية، فإن المصفوفة المحايدة هي مصفوفةٌ فريدة بالنسبة للمصفوفات التي أبعادها NxN، وسنبرهن ذلك فيما يلي:

لنفترض أن جميع المصفوفات لها الأبعاد الصحيحة لعملية الضرب، وأن هناك مصفوفة Z تحقق ما يلي:

‎ZA = A‎     (1)‎

مهما كانت المصفوفة A التي لها الأبعاد الصحيحة، فستعمل المصفوفة Z مثل عمل المصفوفة I، ولكن نأمل أن تكون مختلفةً عنها؛ أما بالنسبة للمصفوفة B فنعلم أن ضرب مصفوفة B بالمصفوفة المحايدة يعطي المصفوفة B نفسها مهما كانت المصفوفة B التي لها الأبعاد الصحيحة.

‎BI = B‎      (2)

لنضع المصفوفة المصفوفة I مكان المصفوفة A في العلاقة رقم (1)، بما أن A يمكن أن تكون أي مصفوفة مناسبة.

‎ZI = I‎      (3)

ولنضع الآن المصفوفة Z مكان المصفوفة B في العلاقة رقم (2):

ZI = Z      (4)

لاحظ من العلاقتين (3) و(4) أن Z و I متساويين مع الشيء نفسه، لذا يجب أن يكونا متساويين.

Z = I      (5)

يمكنك البدء مرةً أخرى من الخطوة رقم (1) بالترتيب الآخر ‎AZ = A‎ والوصول إلى النتيجة ذاتها؛ لذا إذا وجدت مصفوفةً تعمل مثل عمل المصفوفة المحايدة، فهي بالتأكيد المصفوفة المحايدة بحد ذاتها.

خاصيات أخرى للمصفوفة المحايدة

لنوضح الآن بعد الخاصيات الأخرى للمصفوفة المحايدة. على سبيل المثال، يُعَد منقول المصفوفة المحايدة هو المصفوفة المحايدة نفسها:

I^T = I‎

وهناك خاصية أخرى مفيدة للمصفوفة المحايدة، والتي تُعَد مجرد تطبيقٍ لتعريفها؛ حيث إذا جاءت المصفوفة المحايدة بين مصفوفتين، فلن تؤثر على عملية الضرب:

AIB = AB‎

كما أن مربع المصفوفة المحايدة هو المصفوفة المحايدة نفسها:

I I = I‎

أو

I² = I

تُعَد هذه الخاصيات واضحةً ولا حاجة لحفظها.

المصفوفة القطرية Diagonal Matrix

تُعَد المصفوفة القطرية (a I‎) مفيدةً أحيانًا في الرسوميات الحاسوبية. لنفترض مثلًا أننا نريد حساب الآتي، بحيث يكون a عدد حقيقي و x مصفوفة عمودية:

a Ax‎‎‎

هنا وبحالات كثيرة، سنجد أنه من المفيد أحيانًا التفكير على النحو التالي:

‎(a I) Ax

وبهذا تكون قد أصبحت جميع العمليات عبارة عن عمليات ضرب مصفوفات، ويُعَد ذلك ميزة، نظرًا لأنه يمكن إجراء عملية ضرب المصفوفات باستخدام عتاد الرسوميات الحاسوبية دون الحاجة لحسابها.

لنحاول الآن إيجاد ناتج ضرب المصفوفتين التاليتين بأبسط طريقة كما يلي:

عملية ضرب المصفوفات التي ينتج عنها المصفوفة المحايدة

من الواضح أن:

‎(2 I)(0.5 I) = 2 (0.5) I = 1 I = I

ولكن جرّب ضرب هاتين المصفوفتين بالطريقة العادية:

لاحظ أن الصفوف من المصفوفة الأولى تتلاءم مع أعمدة المصفوفة الثانية، بحيث يساوي حاصل الجداء النقطي لها القيمة 1 لعناصر القطر الرئيسي فقط؛ بينما تساوي جميع عمليات الجداء النقطي الأخرى القيمة 0، وبالتالي فالمصفوفة الناتجة هي المصفوفة المحايدة I.

معكوس المصفوفة

لنفترض أن ax = b للأعداد الحقيقية a و b، وأن المتغير الحقيقي هو x، ولنوجد قيمة x الآن.

إذا كان ax = b، فإن ‎(a^-1) ax = (a^-1)b، أو x = (a^-1)b، إلّا عندما يكون العدد a صفرًا؛ فالقيمة (a^-1‎) هي معكوس العدد a، وجميع الأعداد الحقيقية غير الصفرية لها معكوس. توجد فكرة مماثلة خاصة بالمصفوفات المربعة، وليكن لدينا مثلًا:

Ap = q‎

لدينا: p و q هي أشعة عمودية، أما A فهي مصفوفة أبعادها n×n. ومع افتراض أن A و q معلومتان:

لنجرّب معرفة قيمة المصفوفة العمودية p للوصول إلى النتيجة التالية:

يُعَد إيجاد قيمة p بالتخمين أمرًا صعبًا، وسيكون الأمر أسوأ بكثير إذا كانت أبعاد المصفوفة A هي 5 × 5؛ لذا توجد طريقة أفضل لذلك، وهي باستخدام معكوس المصفوفة.

إذًا، لتكن لدينا p و q مصفوفات عمودية و A مصفوفة أبعادها N×N، حيث تكون قيمة q و A معلومتين، ونريد معرفة قيمة p:

‎q = Ap‎      (1)‎

لنفترض وجود مصفوفة ‎B_N×N‎ تحقق ما يلي:

‎p = Bq‎      (2)

إذا وُجِدت مثل هذه المصفوفة، فيمكننا حساب ما نريده (أي المصفوفة p) من المصفوفة q، لذا عوّض ما توصلت إليه من العلاقة رقم (2) في العلاقة رقم (1):

‎q = A (Bq)‎      (3)

‎q = (AB) q‎      (4)

إذا كانت العلاقة رقم (4) صحيحة، فإن ‎(AB) = I‎. وعلينا هنا أن نتذكّر أن المصفوفة المحايدة هي مصفوفة فريدة.

إذا كانت المصفوفة B موجودةً فعلًا، فهي تُعَد معكوسًا للمصفوفة A، وتُكتَب بالشكل: ‎A^-1‎؛ وبالتالي يمكننا الآن إيجاد قيمة p في العلاقة رقم (1) من خلال ضرب كل طرف منها في المعكوس ‎ A^-1‎كما يلي:

A^-1 q = A^-1 Ap‎

A^-1 q = p‎

المصفوفة غير المفردة Non-singular

ليس لجميع المصفوفات المربعة معكوس دائمًا، فالمصفوفة الصفرية مثلًا ليس لها معكوس؛ إذ لا توجد مصفوفة ‎0^-1‎ تحقق الخاصية: ‎0 ‎0^-1‎ = I‎، ولكن الأمر أسوأ من ذلك، فالعديد من المصفوفات المربعة التي أبعادها N × N ليس لها معكوس.

تسمى المصفوفة التي لها معكوس: المصفوفة غير المفردة Non-singular، في حسن تسمى المصفوفة التي ليس لها معكوس: المصفوفة المفردة Singular.

إذا كانت المصفوفة A غير مفردة، فهي تحقق ما يلي:

AA^-1= A^-1A = I

لدينا هنا مثال عن مصفوفة لها معكوس:

وليكن لدينا مثلًا ما يلي:

بحيث يمكننا إيجاد قيمة p باستخدام المعكوس ‎A^-1‎ كما يلي:

معكوس المصفوفة هو مصفوفة فريدة

إذا كانت المصفوفة A غير مفردة (أي لها معكوس) وكان ‎Ap = q‎، فإن ‎p = A^-1 q‎.

يُعَد معكوس المصفوفة المربعة غير المفردة فريدًا، وإحدى الطرق لإثبات ذلك هي وجود مصفوفة عمودية واحدة p فقط تُعَد حلًا للمعادلة ‎Ap = q‎، لذلك يجب أن يكون هناك معكوس ‎A^-1‎ واحد فقط للمصفوفة. ويُعَد المعكوس ‎A^-1‎ مفيدًا في المناقشات حول المصفوفات وعمليات التحويل، ولكنه ليس مفيدًا جدًا للحسابات الفعلية، لذا لا حاجة لحسابه أبدًا.

لنفترض مثلًا أن المصفوفة العمودية p تمثل نقطةً في عالم الرسوميات الحاسوبية، وأنه في حال تغير مجال الرؤية، فستُحوَّل المصفوفة العمودية إلى العلاقة ‎ .q = Ap‎ قد يفكر الكثيرون هنا بعكس التحويل باستخدام ‎A^-1 q‎، ولكن هناك دائمًا طريقة أسهل للعودة إلى مجال الرؤية الأصلي بدلًا من حساب المعكوس.

لنحاول إيجاد ناتج (‎AB) (B^-1 A^-1‎) كما يلي:

باستخدام خاصية التجميع:

‎(‎AB) (B^-1 A^-1‎) = A (B B^-1) A^-1

‎= A I A^-1 = A A^-1 = I

خاصيات معكوس المصفوفة

يساوي معكوس ضرب مصفوفتين نتيجة ضرب معكوس المصفوفة الثانية بمعكوس المصفوفة الأولى؛ فقد عكسنا ترتيب المصفوفات كما يلي:

‎(AB)^-1 = B^-1 A^-1

وتوجد خاصية أخرى مفيدة وهي:

‎(A^-1)^T = (A^T)^-1

محدد Determinant المصفوفة المفردة

يمكن حساب محدِّد المصفوفة التي أبعادها 2 × 2 على النحو التالي:

إليك مثال لحساب محدّد مصفوفة:

يُعَد حساب محدد المصفوفات الأكبر أكثر تعقيدًا؛ إذ يندر تطبيقها، حيث يُستخدَم المحدّد عند مناقشة المصفوفات، وليس في العمليات الحسابية.

ملاحظة: يساوي محدّد المصفوفة المفردة الصفر.

رتبة Rank المصفوفة

إليك مثال آخر لحساب محدّد مصفوفة:

للمصفوفة في المثال السابق محدّد صفري، وبالتالي فهي مصفوفة مفردة، وليس لها معكوس، وتتكون من صفين متطابقين، وبالتالي يمكن القول بأن صفوفها غير مستقلة؛ فإذا كان أحد الصفوف مضاعفًا لصف آخر، فإننا نسمّيها صفوفًا غير مستقلة؛ إذ يساوي محدّد هذه المصفوفة الصفر. وبالمثل، إذا كان أحد الأعمدة مضاعفًا لعمود آخر، فسيكون هذين العمودين غير مستقلين، وبالتالي يكون محدّد هذه المصفوفة صفرًا.

رتبة المصفوفة هي الحد الأقصى لعدد الصفوف المستقلة (أو الحد الأقصى لعدد الأعمدة المستقلة)، وتكون المصفوفة المربعة ‎A^n×n‎ غير مفردة فقط إذا كانت رتبتها تساوي n.

لنجرب إيجاد رتبة المصفوفة التالية:

رتبة المصفوفة السابقة هي 3، حيث يُعَد الصف الأخير مضاعفًا للصف الأول.

خاتمة

بهذا نكون قد تعرفنا على مفهوم كل من المصفوفة المحايدة Identity Matrix ومعكوس المصفوفة وكيفية استخدامهما في عملية ضرب المصفوفات. وبهذا نكون قد وصلنا لنهاية هذه السلسلة التعليمية حول الأشعة وجبر المصفوفات من وجهة نظر رسومات الحاسوب، حيث غطينا عدة مواضيع عن الأشعة والمصفوفات وتعرفنا على عدة حالات للتعامل معها.

ترجمة -وبتصرُّف- للفصل Identity Matrix and Matrix Inverse من كتاب Vector Math for 3D Computer Graphics لصاحبه Bradley Kjell.

اقرأ أيضًا

• المقال السابق: ضرب المصفوفات وحسابها لعمل تصاميم ثلاثية الأبعاد 3D
• التعرف على النقاط والخطوط في الرسوميات الحاسوبية ثلاثية الأبعاد
• الأشعة والنقاط والمصفوفات العمودية في الرسوميات الحاسوبية ثلاثية الأبعاد
• تعرف على المصفوفات Matrices وعملياتها البسيطة في التصاميم 3D

تُستخدَم عملية ضرب المصفوفات في الرسومات الحاسوبية من أجل إنشاء مصفوفات التحويل Transformation التي تُطبَّق على النقاط والأشعة. وتُصمَّم المناظر في الألعاب ذات نمط منظور الشخص الأول First Person Game مثل لعبة DOOM باستخدام النقاط والأشعة أيضًا، كما ينشأ العرض المتغير الذي نراه أثناء تحرّك اللاعب عبر هذه المناظر بتحويل تلك النقاط والأشعة.

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

لقد تحدثنا في المقال السابق عن كيفية ضرب المصفوفات بمصفوفة عمودية، ولمعرفة كيفية التعامل مع المصفوفات أكثر، سنناقش بهذا المقال مفهوم ضرب المصفوفات وخاصيتها وكيفية حسابها لعمل تصاميم ثلاثية الأبعاد 3D؛ وسنتحدث عما يلي:

• متى نضرب المصفوفات
• ناتج ضرب المصفوفات
• نتاج كل عنصر من عناصر المصفوفة المحصل عليها بتطبيق عملية جداء نقطي
• الخاصية التجميعية لضرب المصفوفات
• الخاصية غير التبديلية لضرب المصفوفات
• توزيع ضرب المصفوفات على عملية الجمع
• الضرب بالمصفوفة الصفرية

أبعاد نتيجة ضرب المصفوفات

يمكن ضرب المصفوفتين ‎A_4×3‎ و ‎B_3×5‎ عند تطابق البعد الداخلي الذي قيمته 3؛ فإذا رتبنا مصفوفتين مستطيلتين بحيث يكون البعد الداخلي لكل منهما متساويًا، فيمكن ضرب هاتين المصفوفتين، وستكون النتيجة عمومًا عبارة عن مصفوفة مستطيلة كالآتي:

A_R×N‎ B_N×C‎ = Z_R×C‎

تحتوي عملية الضرب AB -إذا كان تشكيلها ممكنًا- على نفس عدد صفوف المصفوفة A وعلى نفس عدد أعمدة المصفوفة B؛ وهنا إذا لم نتمكن من تجاهل البعد الداخلي، فلن نتمكن من تشكيل عملية الضرب.

فلنطّلع الآن على المثال التالي، مع تجاهل كيفية حساب العناصر مبدئيًا؛ إذ سنضرب مصفوفةً أبعادها 3‎×2 في مصفوفة أخرى أبعادها 2‎×2، والنتيجة ستكون عبارة عن مصفوفة أبعادها 3‎×2:

انطلاقًا مما سبق، نستطيع القول أن أبعاد نتيجة ضرب المصفوفتين ‎A_4×4‎ B_4×2‎ مثلًا، ستكون:

A_4×4‎ B_4×2‎ = C_4×2

ملاحظة: تُعَد المصفوفات العمودية والمصفوفات السطرية حالة خاصة من المصفوفات المستطيلة، لذا فإن قاعدة أبعاد نتيجة ضرب المصفوفات تسري عليها أيضًا.

لنتدرب الآن على مزيدٍ من الأمثلة في الجدول التالي؛ إذ سنحدّد أبعاد نتيجة ضرب كلّ زوج من المصفوفات:

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

يمكننا تشكيل عملية الضرب ‎A_n×m‎ B_m×p‎، ولكن لا يمكننا تشكيل عملية الضرب ‎B_m×p‎ A_n×m‎ إذا كانت n ≠ p. وسيتضح لاحقًا أنه حتى لو أمكن تشكيل كلتا عمليتي الضرب، فمن النادر أن يكون ‎AB = BA‎.

تشكيل عملية ضرب المصفوفات

يُحسَب حاصل ضرب مصفوفتين AB من خلال تطبيق الجداء النقطي على كل صف من المصفوفة A مع كل عمود من المصفوفة B، بحيث يكون عدد الأعمدة في المصفوفة A مساويًا لعدد الصفوف في المصفوفة B.

لنجرب قلب أحد أعمدة المصفوفة B بحيث تصبح عناصره محاذيةً لصفوف المصفوفة A، ثم نطبّق عليها الجداء النقطي؛ وهنا سينتج لدينا العنصر الموجود في الصف 1 والعمود 1 من المصفوفة الناتجة. لننتقل بعدها إلى الصف التالي مع تطبيق الجداء النقطي، لينتج لدينا العنصر الموجود في الصف 2 والعمود 1 من المصفوفة الناتجة؛ وسنستمر بهذه العملية حتى الوصول إلى الصف الأخير.

لننتقل الآن إلى العمود التالي ونقوم بنفس الشيء عند الانتهاء من العمود الأول من المصفوفة B، ونواصل تطبيق ذات الشيء على كل عمود من المصفوفة B حتى حساب جميع العناصر.

ملاحظة: العنصر ij من المصفوفة الناتجة = الجداء النقطي للصف i من المصفوفة A مع العمود j من المصفوفة B.

لنفترض أننا نشكّل عملية الضرب التالية:

‎A_5×3‎ B_3×2 = C_5×2

سنستخدم الصف الثالث من المصفوفة A والعمود الثاني من المصفوفة B، لحساب الصف الثالث، والعمود الثاني من المصفوفة الناتجة C.

طريقة أخرى لتصور عملية ضرب المصفوفات

قد تعرض كتب الرسوميات الحاسوبية طريقةً مختلفةً لضرب المصفوفات؛ إذ أن هناك عدة طرق للتفكير في الأمر بالرغم من أن النتائج هي نفسها.

يوضّح الرسم البياني التالي مثلًا طريقةً أخرى لتصور عملية الضرب ‎AB = C‎؛ إذ سنكتب المصفوفة A على يسار المصفوفة الناتجة C والمصفوفة B فوقها، ثم نرسم خطوطًا أفقية وأخرى عمودية لتقسيم المصفوفة C إلى خلايا؛ وسيؤدي ذلك تلقائيًا إلى تشكيل العدد الصحيح من الخلايا.

ينتج العدد الذي يجب وضعه في كل خلية من حاصل الجداء النقطي لصف المصفوفة A مع عمود المصفوفة B اللذين يتقاطعان عند هذه الخلية.

لنحسب الآن قيمة العنصرين c₁₁‎ و c₃₂‎ كما يلي:

c₁₁ = 1×4 + -2×-1 = 6

c₃₂ = -1×1 + 4×2 = 7

سنجرّب الآن حساب حاصل الجداء النقطي الخاص بكل خلية في الرسم البياني التالي:

وستكون المصفوفة الناتجة هي المصفوفة التالية:

عناصر المصفوفة هي أعداد حقيقية

يُعَد كل عنصر في المصفوفة مقدارًا سلميًا Scalar أي عددًا حقيقيًا.

لقد استخدمنا في أمثلتنا السابقة أعدادًا صحيحة حتى تكون العملية الحسابية سهلة، ولكن إليك مثال آخر مع قيم عشرية:

تشتمل معظم برامج جداول البيانات والآلات الحاسبة الإلكترونية العلمية على دالات رياضية خاصة بالمصفوفات؛ لكن من الأفضل محاولة إجراء الحسابات ذاتيًا عند التعلم من أجل استيعاب العملية.

اقتباس

"من المهم التدرب على إجراء ضرب المصفوفات حتى يصبح الأمر بديهيًا لنا، كما يجب أن نكون قادرين لأجل ذلك على انتقاء صفٍ من المصفوفة A وعمودٍ من المصفوفة B مباشرةً؛ بحيث يُدمجان لإعطاء مدخل معين في المصفوفة AB". بن نوبل Ben Noble وجيمس دانيال James Daniel، من كتاب الجبر الخطي التطبيقي-النسخة الثالثة لدار النشر برنتيس هول عام 1988.

عملية ضرب المصفوفات ليست عملية تبديلية

لا تُعَد المساواة ‎AB= BA‎ صحيحةً دائمًا، فحتى إذا تمكنا من تشكيل هاتين العمليتين، فمن النادر أن تكون نتيجتهما متساويتين. لنحسب مثلًا عمليتي الضرب التاليتين:

العملية	النتيجة
	الناتج
	الناتج

وهذا يوضّح أن ‎ AB ≠ BA‎بصورة عامة بالنسبة للمصفوفتين A و B، ولكن يمكن مثلًا:

A_4×4 0_4×4 = 0_4×4 A_4×4 = 0_4×4

المصفوفة 0 هي المصفوفة الصفرية ذات الأبعاد الصحيحة لجعل عملية الضرب ممكنة، وبالتالي يمكن أن تكون عملية الضرب عمليةً تبديليةً ‎AB = BA‎ بالنسبة لبعض المصفوفات؛ ولكن لا يمكننا تعميم هذه الخاصية على جميع المصفوفات.

تدريب عملي

لنوجد ناتج ضرب المصفوفتين التاليتين:

لنجرب أيضًا ضرب المصفوفتين التاليتين مثلًا:

استخراج عامل عددي من مصفوفة

ليكن c(AB) = (cA)B‎ من أجل العدد الحقيقي c، علمًا أن أن c A‎ يعني أن كل عنصر من عناصر المصفوفة A مضروب بالعدد c. سنوضّح هذه القاعدة في المثال التالي:

يمكننا تبسيط عملية ضرب المصفوفات في كثير من الأحيان من خلال استخراج عامل عددي من إحدى المصفوفات كما في المثال التالي:

عملية ضرب المصفوفات هي عملية تجميعية

لنضرب المصفوفتين الأوليتين، ثم نضرب النتيجة بالمصفوفة الثالثة كما يلي:

ولنبدأ الآن بالمصفوفتين الأخيرتين أولًا كما يلي:

وكما هو واضح، الإجابة النهائية هي نفسها بكلا الطريقتين، وهذا يوضّح أن عملية ضرب المصفوفات هي عملية تجميعية Associative:

(AB) ‪C = A (BC)

يجب أن تكون الأبعاد الداخلية للمصفوفتين A و B نفسها، كما يجب أن تكون الأبعاد الداخلية للمصفوفتين B و C نفسها.

تُكتَب عملية ضرب ثلاث مصفوفات في العادة بالشكل الآتي: ABC. إذًا لنفترض مثلًا:

A_5×5 B_?×? C_3×4 = D_?×?‪

حيث تكون أبعاد المصفوفتين B و D كما يلي:

‪A_5×5 B_5×3 C_3×4 = D_5×4

خاصية توزيع ضرب المصفوفات في جمعها

تتعامل خاصية التوزيع مع تعبيرٍ يحتوي على كلٍّ من عمليتي ضرب وجمع المصفوفات؛ وسنتبع الخطوات التالية لذلك.

• أولًا، نجمع المصفوفتين كما يلي:

• ثانيًا، نضرب المصفوفتين:

• ثالثًا، نجري العملية مرةً أخرى بترتيب مختلف؛ إذ سنجري أولًا عملية ضرب المصفوفة اليسرى بكل من المصفوفتين الأخريين كما يلي:

• في الأخير، نجمع ناتج عمليتي الضرب السابقتين:

وكما نلاحظ، كلتا النتيجتين متماثلتان، مما يدل على أن ضرب المصفوفات توزيعيٌّ على جمعها:

‪A (B + C) = AB + AC

ويمكن القول أيضًا أن:

(X + Y) Z = XZ + YZ

ملاحظة: استخدمنا في معظم أمثلتنا أعدادًا صحيحة، ولكن لا يجب أن ننسى أن عناصر المصفوفة قد تكون أعددًا حقيقية أو متغيرات كما يلي:

ملخص بالقواعد الخاصة بعملية ضرب المصفوفات

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

• يمكن تشكيل عملية ضرب المصفوفات في حال:

إذا كان ‎A_M×K B_K×N = C‎، فإن C = C_M×N‎

• ضرب المصفوفات ليس عملية تبديلية:

‎AB ≠ BA‎، إلّا في حالات ناردة

• ضرب المصفوفات هو عملية تجميعية:

A (BC) = (AB) C = ABC

• استخراج المعامل العددي من المصفوفات:

a(AB) = (a A) B = a AB = A (a B)

• خاصية التوزيع على الجمع:

A ( B + C) = AB + AC

(A + B) C = AC + BC

• الضرب بالمصفوفة الصفرية 0:

0A = 0

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

ترجمة -وبتصرُّف- للفصل Matrix-Matrix Multiplication من كتاب Vector Math for 3D Computer Graphics لصاحبه Bradley Kjell.

اقرأ أيضًا

• المقال السابق: ضرب المصفوفات بمصفوفة عمودية في التصاميم ثلاثية الأبعاد 3D
• التعرف على النقاط والخطوط في الرسوميات الحاسوبية ثلاثية الأبعاد
• الأشعة والنقاط والمصفوفات العمودية في الرسوميات الحاسوبية ثلاثية الأبعاد
• تعرف على المصفوفات Matrices وعملياتها البسيطة في التصاميم 3D

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

سنوضح في هذا المقال المواضيع التالية:

• أبعاد معامَلات ونتيجة ضرب المصفوفات بمصفوفة عمودية.
• أبعاد معامَلات ونتيجة ضرب مصفوفة سطرية بالمصفوفات.
• ضرب المصفوفات بمصفوفة عمودية.
• ضرب مصفوفة سطرية بالمصفوفات.
• استخدام الجداء النقطي لضرب المصفوفات.
• الوصول إلى نتيجة ضرب المصفوفات من خلال تطبيق عمليات متعددة من الجداء النقطي.
• قلب Flipping المصفوفة العمودية عند ضرب المصفوفات بمصفوفة عمودية.
• قلب أعمدة المصفوفة عند ضرب مصفوفة سطرية بها.
• التعريفات الرياضية لعمليات ضرب المصفوفات وخطوات تنفيذها.
• الخاصية غير التبديلية لضرب المصفوفات.

رأينا مسبقًا عمليات شبيهة بالضرب، والتي هي:

• ضرب عدد حقيقي (مقدار سلمي) Scalar بعدد حقيقي، والذي يعطي عددًا حقيقيًا.
• ضرب مصفوفة عمودية بعدد حقيقي، والذي يعطي مصفوفة عمودية.
• الجداء النقطي Dot Product للمصفوفات العمودية، والذي يعطي عددًا حقيقيًا.

ضرب المصفوفات بالمصفوفة العمودية

ناتج ضرب مصفوفةٍ ما بمصفوفة عمودية هو مصفوفة عمودية كما في المثال التالي:

سنشرح لاحقًا تفاصيل كيفية تطبيق هذه العملية، ولكن لاحظ الآن أبعاد معامَلات العملية ونتيجتها؛ إذ يمكن تشكيل عملية ضرب مصفوفة بمصفوفة عمودية إذا كان عدد أعمدة المصفوفة مساويًا لعدد أسطر المصفوفة العمودية كما يلي:

Matrix(R x N) x Col. Matrix(N x 1) = Resulting Col. Matrix(R x 1)‎‎

يمكن توضيح ذلك في المثال التالي:

Matrix(2‎ x 2) x Col. Matrix(2‎ x 1) = Resulting Col. Matrix(2‎ x 1)‎

نعرض الأبعاد بالشكل: "Row x Column" (بحيث يكون Row هو عدد الصفوف وColumn هو عدد الأعمدة)، إذ تكون المصفوفة التي أبعادها R x 1 مصفوفةً عمودية، لأنها تحتوي على عمود واحد.

لاحظ أيضًا كيف تكون أبعاد نتيجة ضرب مصفوفة بمصفوفة عمودية في المثال التالي:

Matrix(5 x 5) x Col. Matrix(5 x 1) = Resulting Col. Matrix(5 x 1)‎

لنحدّد الآن ما إذا كان من الممكن ضرب مصفوفةٍ بمصفوفة عمودية وما هي أبعاد نتيجة عملية الضرب في الأمثلة الموجودة في الجدول التالي:

لاحظ أنه من غير الممكن تشكيل عملية الضرب التي تبدو كما يلي:

‎Matrix(2 x 1) x Col. Matrix(2 x 2) = Resulting Col. Matrix‎‎(غير ممكنة)

وضع المصفوفة العمودية على الجهة اليمنى فقط من عملية الضرب

إذا ضربنا مصفوفةً مستطيلةً بمصفوفة عمودية، فستكون المصفوفة العمودية دائمًا على يمين المصفوفة المستطيلة؛ إذ لا يمكن ضربهما إّلا إذا كان "البعد الداخلي Inner Dimension" (البعد M مثلًا) لكل مصفوفة متساويًا:

Matrix(N x M) x Col. Matrix(M x 1) = Resulting Col. Matrix(N x 1)‎

حيث يمكن تشكيل عملية الضرب التي تبدو كما يلي:

‎Matrix(1 x 2) x Col. Matrix(2 x 1) = عدد حقيقي‎‎(1 x 1)

استخدام الجداء النقطي لضرب المصفوفات

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

قد يبدو غريبًا بعض الشيء عَدُّ العدد الحقيقي (المقدار السلمي Scalar) كائنًا أبعاده "1 × 1"، ولكن تبقي هذه الطريقة الأمور متناسقةً فيما بينها. لاحظ أن هذا المثال يشبه الجداء النقطي (وهو كذلك فعلًا)، وبالتالي ستتشكّل عملية الضرب كما يلي:

إذًا لنوجد الآن ناتج عملية الضرب التالية كما يلي:

قلب المصفوفة العمودية

من المفيد التفكير في "قلب" المصفوفة العمودية عند تشكيل الجداء النقطي ليحاذي كل صف من المصفوفة، ثم ضرب وجمع العناصر المتقابلة كما في المثال التالي:

وفي المثال التالي أيضًا:

لنشكّل الآن عملية الضرب التالية:

تدريب عملي

اُحسب الجداء النقطي في الجدول التالي. ستجد ناتج الجداء في عمود النتيجة:

المعامل الأول	المعامل الثاني	النتيجة
المصفوفة	المصفوفة العمودية ‎‎	الناتج ‎-2
المصفوفة	المصفوفة العمودية ‎‎	الناتج ‎-2
المصفوفة	المصفوفة العمودية ‎‎	الناتج ‎2

سنستخدم عمليات الجداء النقطي السابقة لإيجاد نتيجة ضرب المصفوفة بالمصفوفة العمودية كما يلي:

إذًا يمكننا الحصول على ناتج عملية ضرب مصفوفةٍ بمصفوفة عمودية من خلال تطبيق الجداء النقطي للمصفوفة العمودية مع كل صف من المصفوفة الأخرى، ولكن يجب أن تسمح أبعاد كل معامَل بذلك؛ إذ يساعد ذلك على قلب المصفوفة العمودية، بحيث يمكن محاذاة عناصرها مع عناصر المصفوفة كما يلي:

اقلب المصفوفة العمودية واحسب النتيجة ما يلي:

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

العملية	النتيجة
	الناتج ‎‎
	الناتج
	الناتج ‎

استخدام عمليات متعددة من الجداء نقطي لإجراء عملية ضرب المصفوفة السطرية بالمصفوفات

جرّب الآن إجراء العملية التالية:

لاحظ أن أبعاد المصفوفات متوافقة، لذا يمكن إجراء العملية كما يلي:

يمكنك أن ترى من المثال السابقة أنه يمكن إجراء عملية ضرب مصفوفةٍ سطرية بمصفوفةٍ ما من خلال تطبيق عدة عمليات جداء نقطية، ولكن يجب قلب أعمدة المصفوفة في هذه الحالة كما يلي:

وضع المصفوفة السطرية على الجهة اليسرى من عملية الضرب

لا يمكن إجراء النوع التالي من عمليات الضرب، لأن الأبعاد غير صحيحة:

Matrix (3 x 4) x Row Matrix (1 x 3)‎

إذًا يجب أن تكون المصفوفة السطرية على الجهة اليسرى عند ضرب مصفوفة سطرية بمصفوفة مستطيلة، حيث تكون أبعاد المعامَلات والنتيجة كما يلي:

Row Matrix (1 x M) x Matrix (M x C) = Result Row Matrix (M x C)‎

ملاحظة: المصفوفة التي أبعادها 1xC هي مصفوفة سطرية مكوَّنة من عددٍ "C" من الأعمدة.

نوضّح في الأمثلة الموجودة في الجدول التالي ما إذا كانت عملية الضرب ممكنة وما هي أبعاد نتيجة العملية:

لنحاول الآن إجراء عملية الضرب التالية:

وينتج ما يلي:

التعريفات الدقيقة لعمليات الضرب

قد تشعر بعدم الارتياح عند تعريف العمليات الرياضية بهذه الطريقة غير الرسمية، لذا إليك بعض التعريفات الأدق:

• ضرب مصفوفة بمصفوفة عمودية Matrix times Column Matrix: ليكن لدينا المصفوفة A التي أبعادها M x C، والمصفوفة العمودية x التي أبعادها C x 1، ويكون ناتج الجداء Ax مصفوفة عمودية أبعادها M x 1؛ إذ يتشكّل عنصرها i من ناتج الجداء النقطي للصف i من المصفوفة A مع المصفوفة العمودية x.
• ضرب مصفوفة سطرية بمصفوفة: ليكن لدينا المصفوفة السطرية x التي أبعادها 1‎ x R والمصفوفة **A التي أبعادها R x M، ويكون ناتج الجداء *xA* مصفوفة سطرية أبعادها 1‎ x M، حيث يتشكّل عنصرها الأول من ناتج الجداء النقطي للمصفوفة السطرية x مع العمود i من المصفوفة A.

لنحاول الآن إجراء عملية الضرب التالية:

وسينتج لدينا ما يلي:

خطوات إجراء عملية ضرب المصفوفات

يتضمن الضرب دائمًا عمليات جداء نقطية للصفوف الموجودة على اليسار والأعمدة الموجودة على اليمين وفقًا للتعريفات السابقة، لذا يجب اتباع الخطوات التالية لإجراء أيٍّ من هذه الحسابات:

1. دراسة أبعاد معاملات عملية الضرب حيث:
   • يجب أن تكون الأبعاد الداخلية متساوية: 1xN و NxC.
   • نتجاهل الأبعاد الداخلية للعثور على أبعاد النتيجة: 1xC.
   • نكتب مصفوفة فارغة بالأبعاد الصحيحة لتمثّل المصفوفة الناتجة.
2. ملء جميع عناصر المصفوفة الناتجة كما يلي:
   • نقلب كل عمود موجود على اليمين إلى صف على اليسار.
   • ينتج كل عنصر من عناصر المصفوفة الناتجة عن عملية جداء نقطي.

تدريب عملي

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

إذًا لنختبر مهاراتك في الأمثلة التالية:

العملية	النتيجة
	الناتج
	الناتج
	الناتج

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

ترجمة -وبتصرُّف- للفصل Matrix-Column Matrix Multiplicaton من كتاب Vector Math for 3D Computer Graphics لصاحبه Bradley Kjell.

اقرأ أيضًا

• المقال السابق: تعرف على المصفوفات Matrices وعملياتها البسيطة في التصاميم 3D
• الجداء الشعاعي في التصاميم ثلاثية الأبعاد وخاصياته وحسابه
• كيفية جمع وطرح المصفوفات العمودية والمصفوفات السطرية
• الأشعة والنقاط والمصفوفات العمودية في الرسوميات الحاسوبية ثلاثية الأبعاد

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

سنناقش في هذا المقال المواضيع التالية:

• تعريف المصفوفة.
• عناصر المصفوفة.
• أبعاد المصفوفة.
• أسماء المصفوفات.
• تَساوي مصفوفتين.
• المصفوفة المربعة.
• عملية جمع المصفوفات وقواعدها.
• المصفوفة الصفرية.
• معاكس مصفوفة.
• طرح المصفوفات.
• ضرب المصفوفات بعدد حقيقي Scalar.
• منقول Transpose المصفوفة.

تعريف المصفوفة

تتكوّن المصفوفة العمودية من عمود واحد من الأعداد، ولكن يمكن ترتيب هذه الأعداد في عدة صفوف وعدة أعمدة، وبالتالي يمكن وضع الأعداد في مصفوفة ثنائية الأبعاد. إذًا المصفوفة هي مجموعة من الأعداد المرتَّبة ضمن عددٍ ثابت من الصفوف والأعمدة، وتكون هذه الأعداد أعدادًا حقيقية.

يمكن أن تحتوي المصفوفات على أعداد معقدة أيضًا، ولكننا لن نراها في هذا المقال.

إليك مثالًا لمصفوفة مكونة من ثلاثة صفوف وثلاثة أعمدة:

الصف العلوي هو الصف 1، والعمود الموجود في أقصى اليسار هو العمود 1، والمصفوفة السابقة هي مصفوفة بحجم 3x3، لأنها تحتوي على ثلاثة صفوف وثلاثة أعمدة، ويكون التنسيق لوصف المصفوفات هو: rows X columns.

يسمّى كل عدد يشكّل المصفوفة عنصرًا Element من عناصرها، ويكون للعناصر مواقع مُحدَّدة في المصفوفة؛ إذ تمثّل الزاويةُ العلوية اليسرى من المصفوفة الصفَّ 1 والعمود 1، وقيمة العنصر الموجود في الصف 1 والعمود 1 في المصفوفة السابقة هي 1، وقيمة العنصر الموجود في الصف 2 والعمود 3 هي 4.6، وقيمة العنصر في الصف 3 والعمود 1 هي 4.

أبعاد المصفوفة

يُطلَق مصطلح أبعاد المصفوفة على عدد صفوفها وأعمدتها. إليك فيما يلي مصفوفةً مكونةً من ثلاثة صفوف وعمودين:

تُكتَب أحيانًا الأبعاد إلى جانب المصفوفة كما هو الحال في المصفوفة السابقة، ولكنه مجرد تذكير صغير وليس جزءًا من المصفوفة. إليك مثالًا آخر لمصفوفة ذات أبعاد مختلفة تتكون من صفين وثلاثة أعمدة، والتي تُعَد "نوع بيانات" مختلف عن المصفوفة السابقة:

المصفوفة المربعة Square Matrix

تحتوي المصفوفة المربعة Square Matrix على العدد نفسه من الصفوف والأعمدة، وتُستخدَم المصفوفات المربعة لتمثيل التحويلات الهندسية Transformations في الرسوميات الحاسوبية.

المصفوفة المستطيلة Rectangular Matrix هي المصفوفة التي يمكن ألّا يكون لها العدد نفسه من الصفوف والأعمدة. مع ذلك، تطالب بعض المراجع بوجوب أن يكون عدد الصفوف مختلفًا عن عدد الأعمدة.

أما المصفوفة العمودية Column Matrix فتتكون من عمود واحد، وهي مصفوفة بحجم N x 1، وقد استخدمنا المصفوفة العمودية في هذه السلسلة من المقالات لتمثيل الأشعة الهندسية مثل معظم كتب الرسوميات الحاسوبية. إليك مثالًا عن مصفوفة عمودية بحجم ‎:4 x 1

تتكون المصفوفة السطرية Row Matrix من صفٍ واحد، حيث تستخدم بعض الكتب المصفوفات السطرية لتمثيل الأشعة الهندسية. تسمّي بعض الكتب المصفوفة العمودية بالشعاع العمودي وتسمّي المصفوفة السطرية بالشعاع السطري، ويُعَد ذلك أمرًا جيدًا، ولكنه غامضٌ بعض الشيء، لذا سنستخدم في هذا المقال مصطلح شعاع Vector للتعبير عن كائن هندسي، وسنستخدم المصفوفات العمودية لتمثيل الأشعة، كما سنستخدمها أيضًا لتمثيل النقاط الهندسية.

أسماء المصفوفات

إذا نسيت ما إذا كانت الصفوف أو الأعمدة تأتي أولًا، فتذكر فقط مصطلح الأعمدة الرومانية ROWman COLumns.

يمكن إعطاء اسمٍ للمصفوفة، ويكون هذا الاسم عادةً حرفًا إنجليزيًا كبيرًا بخط عريض في النصوص المطبوعة مثل A أو M، وتُكتَب في بعض الأحيان الأبعاد على يمين الحرف كما في المصفوفة ‎B_3x3‎.

لعناصر المصفوفة أسماءٌ أيضًا؛ إذ يكون اسم العنصر عادةً بحرفٍ مماثل لاسم المصفوفة، ولكنه حرفٌ صغير مع كتابة موضع العنصر بصورة منخفضة، لذلك يمكن مثلًا كتابة المصفوفة A التي أبعادها 3x3 على النحو التالي:

يمكن أيضًا كتابة المصفوفة ‎A = [a_ij]‎ للقول بأن عناصر المصفوفة A تسمَّى a_ij‎.

تساوي مصفوفتين

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

1. لهما الأبعاد نفسها.
2. يجب أن تكون العناصر المتقابلة متساوية.

لنفترض أن لدينا المصفوفتين ‎A _{n x m} = [a_ij]‎ و ‎B _{p x q} = [b_ij]‎، وعندها يكون ‎A = B‎ إذا وفقط إذا كان n=p و m=q وa_ij=b_ij ‎ لجميع قيم i و j ضمن المجال المحدَّد.

إليك مصفوفتين غير متساويتين بالرغم من أنهما تحتويان على العناصر نفسها:

كما أن المصفوفتين التاليتين غير متساويتين، لأن عناصرهما المتقابلة غير متساوية بالرغم من لهما الأبعاد نفسها:

جمع المصفوفات

إذا كانت لدينا مصفوفتان لهما العدد نفسه من الصفوف والأعمدة، فيمكن حساب مجموعهما؛ حيث إذا كانت A مصفوفةً أبعادها MxN، وكانت B مصفوفةً أبعادها MxN، فإن مجموعهما هو مصفوفة أبعادها MxN مكوّنة من جمع العناصر المتقابلة للمصفوفتين A و B.

إليك مثال عن جمع مصفوفتين:

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

المصفوفة الصفرية Zero Matrix

يمكن جمع مصفوفة أبعادها 3x2 مع مصفوفة أخرى أبعادها 3x2 دون تغيير المصفوفة الثانية إذا كانت جميع عناصر المصفوفة الأولى أصفارًا، والتي تُسمَّى بالمصفوفة الصفرية. إليك مثال عن مصفوفة صفرية أبعادها 3x3:

اسم المصفوفة الصفرية هو صفر مكتوب بخط عريض 0، بالرغم من أننا قد ننسى في بعض الأحيان كتابته بخط عريض.

أوجد ناتج عملية الجمع التالية:

المجموع بالطبع هو المصفوفة غير الصفرية نفسها.

قواعد جمع المصفوفات

سنوضّح فيما يلي قواعد جمع المصفوفات، إذ يفترض أن تكون للمصفوفات الأبعاد نفسها:

A + B = B + A

A + 0 = 0 + A = A

0 + 0 = 0

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

تنص القاعدة الأولى على أن جمع المصفوفات هو عملية تبديلية Commutative، بسبب إجراء عملية الجمع العادي على العناصر المتقابلة في المصفوفتين، ويُعَد الجمع العادي (الحقيقي) تبديليًا.

كما يُعَد جمع المصفوفات عملية تجميعية Associative، وهي قاعدة أخرى تماثل قواعد رياضيات الأعداد الحقيقية، بسبب إجراء عملية الجمع العادية على العناصر المتقابلة من المصفوفتين:

‎(A + B) + C = A + (B + C)

لنوجِد ناتج جمع المصفوفتين التاليتين:

لاحظ أن كل عنصر من عناصر المصفوفة الناتجة التي أبعادها 3x3 هو 10.

ضرب المصفوفة بعدد حقيقي Scalar

يمكن ضرب المصفوفة بعدد حقيقي (مقدار سلمي) من خلال ضرب كل عنصر من عناصر المصفوفة بهذا العدد. إليك مثال على ذلك، بحيث يكون المتغير a عددًا حقيقيًا:

يكون كل عنصر في النتيجة معاكسًا للعنصر الأصل إذا كانت قيمة العدد الحقيقي a في المثال السابق تساوي ‎-1، كما سنرى في الفقرة التالية.

معاكس المصفوفة

يمكن تشكيل معاكس للمصفوفة من خلال تغيير إشارة كل عنصر من عناصر هذه المصفوفة:

‎-A = -1 A

كما في المثال التالي:

تنتج المصفوفة الصفرية عن جمع المصفوفة مع معاكسها. لاحظ أن الصفر الأخير هو صفر بخط عريض، والذي يعبّر عن المصفوفة الصفرية:

A + (-A) = 0‎

ملاحظة: يمكن تعريف عملية الطرح مصفوفتين على أنها عملية جمع المصفوفة الأولى مع معاكس المصفوفة الثانية.

طرح المصفوفات

إذا كانت المصفوفتان A و B لهما العدد نفسه من الصفوف والأعمدة، فيمكن تعريف عملية الطرح ‎A - B‎ بأنها ‎A + (-B)‎؛ إذ يمكن حساب ‎A - B‎ من خلال طرح العنصر المقابل من المصفوفة B من كل عنصر من عناصر المصفوفة A.

إليك مثال غير مكتمل عن طرح المصفوفات:

لاحظ العناصر الموجودة في الصف الأول من الإجابة السابقة؛ إذ تُعَد طريقة حساب النتيجة للعناصر الموجودة في الصف 1 والعمود 2 مربكةً بعض الشيء.

لنحاول الآن وضع الإجابة مكان علامتي الاستفهام في المثال السابق كما يلي:

منقول مصفوفة Transpose

منقول المصفوفة هو مصفوفة جديدة تكون صفوفها هي أعمدة المصفوفة الأصلية، مما يؤدي أيضًا إلى جعل أعمدة المصفوفة الجديدة هي صفوف المصفوفة الأصلية. إليك مثال عن مصفوفة ومنقولها:

الحرف المرتفع "T" يعني المنقول "Transpose".

هناك طريقة أخرى للنظر إلى المنقول، وهي أن العنصر الموجود في الصف r والعمود c في المصفوفة الأصلية يُوضَع في الصف c والعمود r من المنقول؛ إذ يصبح العنصرُ ‎a_rc‎ في المصفوفة الأصلية هو العنصر ‎a_cr‎ في المصفوفة المنقولة.

نتعامل عادةً مع المصفوفات المربعة لإيجاد منقولها، ولكن يمكن نقل المصفوفات غير المربعة أيضًا مثل المصفوفة التالية:

إليك مثال آخر عن كيفية إيجاد منقول مصفوفة غير مربعة:

قاعدة خاصة بمنقول المصفوفة

إذا أوجدنا المنقول لمنقول المصفوفة نفسها، فستحصل على المصفوفة الأصلية مرةً أخرى كما في المثال التالي:

ويوضح المثال السابق القاعدة: ‎(A^T)^T = A‎‎.

لاحظ أن منقول مصفوفة سطرية هو مصفوفة عمودية، وبالتالي فإن منقول مصفوفة عمودية هو مصفوفة سطرية كما في المثال التالي:

المصفوفة المتناظرة Symmetric Matrix

المصفوفة المتناظرة هي المصفوفة التي تتساوى مع منقولها، أي: ‎A^T = A‎، ولكن يجب أن تكون مصفوفةً مربعة. إليك فيما يلي مثال عن بعض المصفوفات المتناظرة:

إذا كانت المصفوفة متناظرة، فستكون عناصرها ‎a_ij = a_ji‎.

ملاحظة: تُعَد المصفوفة الصفرية مصفوفةً متناظرةً أيضًا.

قطر المصفوفة الرئيسي Main Diagonal

يتكوّن القطر الرئيسي للمصفوفة من العناصر التي تقع على القطر الذي يمتد من أعلى يسار المصفوفة إلى أسفل يمينها، فإذا كانت لدينا المصفوفة A مثلًا، فإن عناصر قطرها الرئيسي هي العناصر التي يتساوى فيها رقم الصف مع رقم العمود ‎a_jj‎.

لا يُعَد القطر الآخر للمصفوفة مهمًا وليس له اسم.

ملاحظة: عناصر المصفوفة A التي لا تتغير عند تشكيل المنقول ‎A^T‎، هي العناصر الموجودة على طول القطر الرئيسي، لأن العناصر ‎a_jj‎ في المصفوفة A هي العناصر نفسها في المنقول ‎A^T‎.

الخلاصة

إليك بعض القواعد التي ناقشناها في هذا المقال؛ إذ يجب عليك فهمها بدلًا من حفظها، حيث تحتوي المصفوفات في كل قاعدة من القواعد التالية على العدد نفسه من الصفوف والأعمدة:

• ‎A + 0 = A‎
• ‎A + B = B + A‎
• 0 + 0 = ‎0
• ‎A + (B + C) = (A + B) + C‎‎
• ‎(ab) ‎A = a(b A)
• ‎a(A + B) = a B + a A‎‎
• ‎a 0 = 0‎
• ‎(-1) ‎A = -A
• A - A = 0‎
• ‎(A^T)^T = A
• 0^T = 0‎

حيث أن a و b هي مقادير سلمية (أعداد حقيقية)، و A و B مصفوفتان، و 0 هي المصفوفة الصفرية ذات البعد المناسب.

ملاحظة: إذا كان ‎A = B‎ و ‎B = C‎، فإن ‎A = C‎.

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

ترجمة -وبتصرُّف- للفصل Matrices and Simple Matrix Operations من كتاب Vector Math for 3D Computer Graphics لصاحبه Bradley Kjell.

اقرأ أيضًا

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

يُعَد الجداء الشعاعي عمليةً تستخدم شعاعين على أساس معامَلين. وتكمن أهمية هذا في الرسوميات الحاسوبية عند محاولة العثور على شعاع عمودي على مستوٍ؛ ويُعَد ذلك ضروريًا عند حساب كيفية انعكاس الضوء على السطوح.

سنوضّح في هذا المقال المواضيع التالية:

• تعريف الجداء الشعاعي لشعاعين.
• قاعدة اليد اليمنى: يكون منحى Orientation الجداء الشعاعي ‎u × v‎ باتجاه "الإبهام" إذا طويت أصابعك من الشعاع u إلى الشعاع v.
• خاصيات الجداء الشعاعي والتي هي:

• حجم Magnitude الجداء الشعاعي: حجم الجداء الشعاعي u × v هو مساحة متوازي الأضلاع التي يحدّدها هذان الشعاعان.
• لا يُعَد الجداء الشعاعي عملية تبديلية Anti-commutative:

u × v = -(v × u)‎‎

u × u = 0‎ و (ku) × u = 0

• نتيجة الجداء الشعاعي لشعاع مع شعاع صفري هي شعاع صفري:

u × 0 = 0 × u = 0‎

• لا يُعَد الجداء الشعاعي عملية تجميعية:

‎(u × v) × w ≠ u × (v × w)

• إمكانية توزيع الجداء الشعاعي على جمع الأشعة:

u × (v + w) = u × v + u × w‎

• الجداء الشعاعي بين محاور الإحداثيات:

i × j = k و j × k = i و k × i = j

• حساب الجداء الشعاعي باستخدام المصفوفات العمودية.
• استخدام أداة مساعدة شبيهة بمحدّدات المصفوفات Determinant لتذكّر صيغة حساب الجداء الشعاعي للمصفوفات العمودية.

تذكير: يكون نوع الكائنات التي تمثّلها معامَلات الجداء النقطي أشعةً، وتكون نتيجة الجداء النقطي عددًا حقيقيًا (مقدارًا سلميًا) Scalar.

لقد شاهدت حتى الآن العمليات التالية:

ولكن لا توجد عملية تشبه الضرب وتأخذ شعاعين كمعامَلين وينتج عنها شعاع، وهذا ما يمثله جداء الأشعة الشعاعي الذي سنشرحه في هذا المقال.

تعريف الجداء الشعاعي

إذا كان u و v شعاعين في فضاء ثلاثي الأبعاد، فإن الجداء الشعاعي لهما ‎u × v‎ هو شعاع ثلاثي الأبعاد، ويجب أن تكون معاملات هذه العملية ونتيجتها أشعةً ثلاثية الأبعاد على عكس العمليات الأخرى؛ إذ أن عملية الجداء الشعاعي ليست مُعرَّفةً في الفضاء ثنائي الأبعاد 2D.

يمكن تعريف الجداء الشعاعي لشعاعين u × v كما يلي:

• يجب أن يكون u و v شعاعين ثلاثي الأبعاد.
• والنتيجة هي شعاع ثلاثي الأبعاد مع الطول والمنحى التاليين:
  • الطول: ‎|‎ u × v | = | u | | v | sin θ حيث θ هي الزاوية بين الشعاعين u و v.
  • المنحى: يكون ناتج الجداء الشعاعي u × v عموديًا على كلٍّ من الشعاعي u و v.
  • يجري الاختيار من بين منحيين متعامدين على الشعاعين u و v باستخدام قاعدة اليد اليمنى.

ناتج الجداء الشعاعي لشعاعين هو شعاع عمودي على هذه الشعاعين، ولكن هناك اتجاهين متعامدين على كلٍّ من هذين المعامَلين، حيث يمكن الاختيار من بينهما باستخدام قاعدة اليد اليمنى، والتي سنشرحها في الفقرة التالية.

قاعدة اليد اليمنى Right-hand Rule

نضع البرغي الخشبي عموديًا على لوحٍ من الخشب، ونلفّه باتجاه اللوح الخشبي باستخدام مفك براغي؛ إذ يجب أن ندير البرغي اليميني (النوع العادي) باتجاه عقارب الساعة من رأسه إلى اللوح الخشب.

يكون الجداء الشعاعي لشعاعين متعامدًا عليهما، وتختار قاعدة اليد اليمنى أحد الاتجاهين المتعامدين المُحتمَلين. ويوضح الرسمان البيانيان السابقان هذه القاعدة.

لا تنسَ أن ترتيب المعاملات مهم، إذ تؤشّر نتيجة الجداء الشعاعي ‎u × v‎ إلى الاتجاه نفسه الذي يجب أن يؤشّر إليه البرغي، إذا دفع الالتفافُ من الشعاع u إلى الشعاع v البرغي إلى داخل قطعة الخشب، أو فكّر في الاتجاه الذي يؤشّر إليه إبهامك عندما تطوي أصابعك من الشعاع u إلى الشعاع v.

ملاحظة: يؤشّر الجداء الشعاعي ‎u × v‎ و ‎v × u‎ إلى اتجاهين متعاكسين.

تصور الجداء الشعاعي

يُظهر الشكل التالي الشعاعين u و v ومتوازي الأضلاع المُحدَّد بينهما.

مساحة متوازي الأضلاع هي: ‎| ‎u | | v | sin θ، حيث θ هي الزاوية بينهما.

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

عكس ترتيب معاملات الجداء الشعاعي

تذكير: يمكن عكس اتجاه الشعاع w من خلال ضربه بالعدد ‎-1؛ إذ يؤشّر الشعاعان w و ‎-w إلى اتجاهين متعاكسين.

يوضح الشكل السابق حاصل عمليتي جداء شعاعين حدّدنا منحاهما باستخدام قاعدة اليد اليمنى، ويكون حجم الجداء الشعاعي:

‎‎u × v‎ = ‎| u | | v | sin θ = | v | | u | sin θ‎‎

وبالتالي:

‎u × v‎ = -(v × u)‎‎

ويمكن القول أن:

‎-(v × u) = -v × u‎‎‎

المعاملات المتوازية للجداء الشعاعي

طول ‎u × v‎ هو ‎| u | | v | sin θ، وإذا كان u و v شعاعين على استقامة واحدة Collinear (متوازيين)، فإن الزاوية بينهما θ = 0، وبالتالي سيكون sin θ = 0، وحجم ناتج الجداء الشعاعي يساوي الصفر، ولكن النتيجة هي شعاع؛ وبالتالي تكون نتيجة الجداء الشعاعي هي الشعاع الصفري 0.

u × u = 0

بما أن k u‎ على استقامة واحدة مع الشعاع u (حيث k عدد حقيقي)، فسيكون:

‎(k u) × u = 0

نتيجة الجداء الشعاعي u × u = 0 عمودية على كلا المعامَلين، لأن ‎0‎ · u = 0، مما يعني أنهما متعامدان؛ فالشعاع الصفري 0 عمودي على جميع الأشعة كما مر معنا سابقًا.

حجم الجداء الشعاعي ‎u × 0‎ وهو ‎| u | | 0 | sin θ يساوي الصفر، والنتيجة هي شعاع، وبالتالي:

u × 0 = 0 × u = 0‎

لنوجد الآن الجداء الشعاعي ‎(k u) × v‎ من خلال الاطلاع على الرسم البياني السابق، أو من خلال العمل بالصيغة التالية:

‎(k u) × v = k( u × v‎ )

وسينتج ما يلي:

| (k u) × v | = | k u | | v | sin θ = | k | | u | | v | sin θ

إذًا يكون حجم ‎(k u) × v أكبر بمقدار | k | عن حجم u × v مع إبقاء الاتجاه نفسه.

ليس الجداء الشعاعي للأشعة عملية تجميعية

لا يُعَد الجداء الشعاعي للأشعة عمليةً تجميعية، ويمكن رؤية ذلك من خلال النظر إلى الرسم البياني السابق، ثم تشكيل الجداء الشعاعي (‎u × v‎)، ثم إجراء الجداء الشعاعي للناتج مع الشعاع w. نشكّل بعد ذلك حاصل الجداء الشعاعي (‎v × w‎)، ثم نجري الجداء الشعاعي للناتج مع الشعاع u؛ وينتج لدينا ما يلي:

‎(u × v) × w ≠ u × (v × w)

لاحظ أن ناتج الجداء الشعاعي للشعاعين u × v من الرسم البياني السابق يساوي الشعاع الصفري 0، لأنهما على استقامة واحدة.

إمكانية توزيع الجداء الشعاعي على جمع الأشعة

توجد خاصية أخرى للجداء الشعاعي، وهي إمكانية توزيع الجداء الشعاعي على عملية جمع الأشعة كما يلي:

u × (v + w) = u × v + u × w‎

ويمكن الوصول إلى هذه الخاصية من خلال التعويض في الصيغة التي تعرّف الجداء الشعاعي.

الجداء الشعاعي بين محاور الإحداثيات

تسمَّى أشعة الوحدة Unit Vectors التي تكون باتجاه المحاور x و y و z (في أيّ إطار إحداثي مُستخدَم)، i و j و k في أغلب الأحيان، وتوضَع أحيانًا قبعات صغيرة على كل حرف كما في الشكل التالي:

بما أن طول كل شعاع من هذه الأشعة يساوي 1، وهي أشعة متعامدة فيما بينها، فإن جيب Sine الزاوية بين أيّ شعاعين منها يساوي 1.0، وستكون الصيغ التالية صحيحة:

i × j = k‎

j × k = i‎

k × i = j‎

i × k = - ‎j

k × j = - ‎i

j × i = - k‎‎

i × i = 0‎

j × j = 0‎

k × k = 0‎

ولكن يُفضَّل رسم الرسم البياني ثم استخدام قاعدة اليد اليمنى بدلًا من حفظها.

الجداء الشعاعي للمصفوفات العمودية

نعرّف الجداء الشعاعي لمصفوفتين عموديتين ‎u × v‎ كما يلي:

• يجب أن تمثّل المصفوفتان العموديتان u و v أشعة ثلاثية الأبعاد.

• تمثّل النتيجة شعاعًا ثلاثي الأبعاد.

• إذا مثّلنا الشعاع u بالمصفوفة العمودية:

  ‎u = (u_i, u_j, u_k)^T‎

• ومثّلنا الشعاع v بالمصفوفة العمودية:

  ‎v = (v_i, v_j, v_k)^T‎

• فإن:

  ‎‎u × v = ( u_j v_k - u_k v_j, u_k v_i - u_i v_k , u_i v_j - u_j v_i )^T‎‎

ملاحظة: لا تفكر في حفظ النتيجة السابقة، بل حاول إيجاد نمط محدّد لتشكيلها.

لنوجد الآن الجداء الشعاعي ‎(1, 2, 3)^T × (0, 0, 0)^T‎:

لاحظ أن:

‎(1, 2, 3)^‎T × 0 = 0

أو يمكنك التعويض في صيغة الجداء الشعاعي للمصفوفات العمودية:

‎(1, 2, 3)^T × (0, 0, 0)^T = ( 2×0 - 3×0, 3×0 - 1×0, 1×0 - 2×0)^T = 0

طريقة مساعدة لتذكر صيغة الجداء الشعاعي للمصفوفات العمودية

سنوضّح الآن طريقة لحساب الجداء الشعاعي من خلال ترتيب عناصر كل شعاع في محدّد مصفوفة Determinant، والذي يساعدك لتذكر صيغة الجداء الشعاعي السابقة الصعبة جدًا، ولكن إذا كنت تعرف مسبقًا كيفية تقييم المحدّدات ذات الحجم 3x3، فيمكنك تخطي هذه الطريقة، واستخدام الصيغة الموجودة في التعريف.

يحتوي الصف العلوي من المحدّد على الرموز التي تمثل كل محور، ولكن تذكّر أن هذه الطريقة لا تمثّل تعريف الجداء الشعاعي، ولا تمثّل محدد مصفوفة، ولكنها مجرد أداة مساعدة للتذكر.

تعمل هذه الطريقة فقط مع الأشعة ثلاثية الأبعاد، إذ لم يُعرَّف الجداء الشعاعي إلّا للأشعة في الفضاء ثلاثي الأبعاد، لذا ضع مكونات الشعاع الأول في الصف الثاني من المحدّد، ومكونات الشعاع الثاني في الصف الثالث.

تدريب عملي

تدريب1:

لنوجِد الجداء الشعاعي للمصفوفتين العموديتين ‎(1, 2, 1)^T‎ و ‎(0, -1, 2)^T‎ كما يلي:

ولنقيّم الآن النتيجة من خلال البحث عن العوامل المساعدة للمكوّن i و j و k التي أحطناها بدائرة حمراء في الصف العلوي؛ فالعوامل المساعدة للمكوّن i مثلًا هي عناصر الصفين 2 و 3 التي ليست موجودة في العمود i.

يمكن إيجاد العامل المساعد من خلال ضرب العنصرين الموجودين على القطر الرئيسي، ثم طرح حاصل ضرب العنصرين الموجودين على القطر الآخر من نتيجة ضرب العنصرين الموجودين على القطر الرئيسي، فعلى سبيل المثال، يكون العامل المساعد للمكوّن i هو 2×2 - 1×(-1) = 2 + 1 = 5.

تدريب2:

يكون حاصل الجداء الشعاعي للمصفوفتين العموديتين ‎(0, -1, 2)^T‎ و ‎(1, 2, 1)^T‎ كما يلي (لاحظ أننا عكسنا ترتيب الشعاعين السابقين):

يتبع تقييم هذا المثال نمط المثال السابق نفسه، ولكن مع تبديل الصفين الثاني والثالث كما يلي:

لاحظ أن النتيجة تمثّل معاكس النتيجة السابقة، مما يدل على أن:

u × v = -(v × u)‎

ولقد رأينا ذلك سابقًا عندما استخدمنا الأشعة الهندسية.

الجداء الشعاعي لمصفوفة عمودية مع نفسها

يبقى الصفان الثاني والثالث كما هما عندما نأخذ الجداء الشعاع لشعاعٍ مع نفسه، وتذكّر من دروس الرياضيات في المرحلة الثانوية أنه إذا كان صفان من المحدّد متماثلين، فستكون قيمته صفرًا؛ حيث يكون كل عامل مساعد صفرًا، مما يؤدي إلى أن:

0‎ i + 0 j + 0 k = 0‎‎

يحدث الشيء نفسه إذا كان أحد الصفوف مضاعفًا للآخر؛ إذ تعكس هذه النتائج ما رأيناه مسبقًا مع الأشعة الهندسية:

k u × u = 0‎

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

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

ترجمة -وبتصرُّف- للفصل Vector Cross Product من كتاب Vector Math for 3D Computer Graphics لصاحبه Bradley Kjell.

اقرأ أيضًا

• المقال السابق: إسقاط شعاع على شعاع آخر واستخداماته في الرسوميات الحاسوبية 3D
• تغيير حجم شعاع Scaling في التصاميم ثلاثية الأبعاد 3D
• الجداء النقطي وارتباطه بطول الأشعة وتعامدها في التصاميم 3D

ناقشنا في مقالٍ سابق أن الرسوميات الحاسوبية ثلاثية الأبعاد تتكون من عمليتين: أولهما إنشاء عالم خيالي داخل الحاسوب، وثانيهما إنتاج صور ثنائية الأبعاد لذلك العالم من مجالات رؤية مختلفة؛ إذ يُعَد إنتاج صورة ثنائية الأبعاد من صورة ثلاثية الأبعاد مثالًا عن عملية الإسقاط Projection، وسنناقش في هذا المقال المفاهيم الأساسية فقط للإسقاط.

سنوضّح في هذا المقال المواضيع التالية:

• تشكيل مستوٍ Plane واحد من شعاعين.
• مفهوم الإسقاط.
• إسقاط شعاعٍ على شعاع آخر.
• صيغة لإسقاط الأشعة.
• طريقة إسقاط الأشعة خطوةً بخطوة.
• المكون العمودي لإسقاط الأشعة.
• مثال لإسقاط الأشعة ثنائية الأبعاد.
• مثال لإسقاط الأشعة ثلاثية الأبعاد.

المساقط ثنائية الأبعاد المتعددة

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

تشكيل مستوٍ واحد من شعاعين

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

يوضّح الشكل السابق الشعاع w والشعاع v، وجعلنا ذيل هذين الشعاعين يبدأ من النقطة نفسها لتسهيل التصور، ولكن لا تنسَ أن الأشعة ليس لها موضع محدّد، وجعلنا الشعاع v أفقيًا للسهولة أيضًا، ولكن يمكن أن يكون له أيّ منحى Orientation.

إسقاط شعاع على شعاع آخر

إذا ضربنا الشعاع v بعدد حقيقي Scalar (أو مقدار سلمي) k، فسيؤدي ذلك إلى تغيير طول هذا الشعاع، ولكنه لن يؤثر على منحاه، وبالتالي ليكن لدينا الشعاعان w و v كما في الشكل التالي:

يمكن أن يكون الشعاعان w و v أيّ شعاعين، ونريد شعاعًا u عموديًا على الشعاع v وعددًا حقيقيًا k مضروبًا به، بحيث:

w =‎ k v + u‎

ويسمى عندها k v‎ مسقط الشعاع w على الشعاع v.

صيغة لكيفية إسقاط الأشعة

ملاحظة: إذا كان الشعاعان u و v متعامدان، فإن الجداء النقطي لهما هو: ‎.u · v = 0

يجب أن تتحقق العلاقة: k v + u = w‎ بشرط أن يكون u عموديًا مع v، حتى يكون k v‎ مسقط الشعاع w على الشعاع v؛ إذ نعلم من علم المثلثات أن:

• طول المسقط k v‎ =‫ ‎| w | cos θ.
• منحى k v‎ هو شعاع الوحدة ‎v_u‎.

تذكر أن أشعة الوحدة Unit Vectors تُستخدَم لتمثيل المنحى في الفضاء ثلاثي الأبعاد، وبالتالي يكون منحى الشعاع v هو شعاع الوحدة ‎v_u‎؛ إذ يبدو المنحى أفقيًا في الشكل السابق، ولكننا استخدمنا ذلك للسهولة فقط. وبما أن cos θ يساوي ‎w_u · v_u‎، فسينتج ما يلي:

‎k v = | w | (w_u · v_u) v_u

يمثل الجزء ‎| w | (w_u · v_u)‎ عددًا حقيقيًا بحيث يُضبَط الشعاع v على الطول المطلوب، وهو طول الخط الأفقي باللون الأزرق الفاتح في الشكل السابق؛ بينما يعبّر الجزء المتبقي من الصيغة: ‎v_u‎ عن منحى الشعاع v نفسه.

طريقة إسقاط الأشعة خطوة بخطوة

تذكير: يمكنك حساب شعاع الوحدة من خلال تقسيم الشعاع على طوله.

لنتّبع طريقة خطوة بخطوة لإسقاط الشعاع w على v، بدلًا من حفظ الصيغة السابقة لتطبيق عملية الإسقاط.

أولًا، نحسب أطوال الأشعة كما يلي:

‎| w | = √(w · w)

‎| v | = √(v · v)

ثانيًا، نحسب أشعة الوحدة:

w_u = w / | w‎ |‎

v_u = | v | / | v |‎

ثالثًا، نحسب جيب تمام Cosine الزاوية بين الشعاعين:

w_u · v_u

رابعًا، نعوّض في صيغة الإسقاط التالية:

‎k v = | w | (w_u · v_u) v_u

المكون العمودي لإسقاط الأشعة

ملاحظة: لا يُعَد مسقط الشعاع w على الشعاع v مماثلًا لمسقط الشعاع v على الشعاع w، إذ يكون منحى الشعاع الناتج عن عملية الإسقاط بالاتجاه نفسه للشعاع المُسقَط عليه.

أوجدنا في الفقرة السابقة k v‎، لذا من السهل العثور على الشعاع المتعامد معه u:

‎w = k v + u‎، إذًا ‎u‎ = w - k v‎

تعبّر إشارة "+" في الصيغة السابقة عن جمع الأشعة، وتعبّر إشارة "-" عن طرح الأشعة.

تدريبات عملية

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

تدريب 1:

نمثّل الشعاع w بالمصفوفة العمودية ‎(6, 5)^T‎، ونمثّل الشعاع v بالمصفوفة العمودية ‎(9,0)^T‎، ولنوجد مسقط الشعاع w على الشعاع v، أي لنبحث عن الشعاعين k v‎ و u. يمكنك ببساطة قراءة الإجابة من الرسم البياني الورقي التالي، ولكن تظاهر أنك لم تلاحظ ذلك.

أولًا، نحسب الأطوال كما يلي:

‎| w | = √ ((6, 5)^T‎·(6, 5)^T‎) = 7.81‎

‎| ‎v | = √ ((9, 0)^T‎·(9, 0)^T‎) = 9

ثانيًا، نحسب أشعة الوحدة كما يلي:

‎w_u = (6, 5)^T / 7.81

‎v_u = (9, 0)^T / 9 = (1, 0)^T

ثالثًا، نحسب جيب تمام الزاوية بين الشعاعين وهو:

‎w_u · v_u = (1/7.81) (6, 5)(1, 0)^T · (1, 0)(1, 0)^T = 6/7.81

رابعًا، نعوّض في صيغة الإسقاط التالية:

k v = | w | (w_u · v_u) v_u

‎‎k v = 7.81 (6/7.81) (1, 0)^T = 6(1, 0)^T = (6, 0)^T

خامسًا، نحسب الشعاع العمودي:

u = w - k v

‎u = (6, 5)^T - (6, 0)^T = (0, 5)^T

والنتيجة هي أن ‎u = (6,0)^T + (0,5)^T‎ كما هو متوقع. وكان هذا المثال سهلًا طبعًا.

ملاحظة: ليس عليك أن تحسب طول w، لأنه يُلغَى قبل الإجابة النهائية، لذا فكل ما تحتاج إليه هو مربع طول v، أي ‎|v|²‎؛ إذ تعرض بعض الكتب صيغًا مختلفة للإسقاط تستفيد من هذه الحقائق.

تدريب 2

إليك مثال آخر، ولكنه ليس بهذه السهولة، إذ نمثّل الشعاع w هنا بالمصفوفة العمودية ‎(3.2, 7)^T‎، ونمثّل الشعاع v بالمصفوفة العمودية ‎(8, 4)^T‎؛ ولنوجِد الآن الشعاعين k v‎ و u.

أولًا، نحسب الأطوال كما يلي:

| w | = (لا داعي لحسابه، لذا أبقيه بالرموز)

‎| v |² = (8, 4)^T ·(8, 4)^T = 80

ثانيًا، نحسب أشعة الوحدة وهي:

w_u = (3.2, 7)^T / | w |‎

v_u = (8, 4)^T / | v |‎

ثالثًا، نحسب جيب تمام الزاوية بين الشعاعين كما يلي:

‎w_u · v_u = (3.2, 7)^T / | w | · (8, 4)^T / | v | = 53.6 /( | w | | v |)‎

رابعًا، نعوّض في صيغة الإسقاط التالية:

‎k v = | w | (w_u · v_u) v_u

k v = | w | [53.6 / (| w | | v |)] (8, 4)^T / | v |‎

k v = 53.6 / (| v |) (8, 4)^T / | v |‎

‎k v = 53.6 / (| v |²) (8, 4)^T

‎k v = 53.6 / 80 (8, 4)^T

k v = ((53.6*8)/80, (53.6*4)/80)^T = ( 5.3, 2.68)^T

خامسًا، نحسب الشعاع العمودي:

u = w - k v

u = (3.2, 7)^T - (5.3, 2.68)^T = (-2.1, 4.32)^T

لنتحقّق الآن من أن: ‎w = k v + u‎ من خلال تعويض النتائج في العلاقة k v + u‎ كما يلي:

‎( 5.3, 2.68)^‎T + (-2.1, 4.32)^T = (3.2, 7.0)^T = w

فوائد عملية إسقاط الأشعة

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

لنوجِد الآن مسقط الشعاع w على الشعاع v في الرسم البياني التالي:

حاول إجراء العمليات الحسابية المطلوبة كما فعلنا في الأمثلة السابقة، ولكن يمكن أن تحصل على الإجابات التالية مباشرةً من قراءة الرسم البياني السابق:

w = (4, 8.2)^T

v = (2.8, 1.75)^T

k v = (5.8, 1.6)^T

u = (-1.8, 6.4)^T

تبدو الإجابات السابقة جيدة، ولكن لنتحقّق منها كما يلي:

أولًا، هل ‎w = k v + u‎؟

‎(5.8, 1.6)^T + (-1.8, 6.4)^T = (4, 8.0)^T = w

(حسنًا، تقريبًا)

ثانيًا، هل ‎v · u = 0.0؟

‎(5.8, 1.6)^T · (-1.8, 6.4)^T = -10.44 + 10.24 = -0.2 = ‎0.0‎

(تقريبًا)‎

ملاحظة: لنفكر في جميع الأشعة المحتملة w و v ومسقط الشعاع w على الشعاع v، إذ يمكن أن يكون الشعاع k v‎ أطول من الشعاع v كما في المثال السابق، ولكن لا يمكن أن يكون الشعاع k v‎ أطول من الشعاع w، فأكبر طول ممكن للشعاع k v‎ هو | w | عندما يكون w و v على استقامة واحدة.

مثال آخر لعملية الإسقاط

لاحظ أن عملية إسقاط الشعاع w على v لا تعتمد على طول v، بل يؤثر اتجاه الشعاع v فقط على النتائج. يكون طول المسقط هو ‎| w | cos θ، حيث θ هي الزاوية بين الشعاعين، وبما أن دالة جيب التمام لا تزيد عن 1 أبدًا، فلن يكون طول المسقط أبدًا أطول من الشعاع المُسقَط.

أسقِط الشعاع w على الشعاع v من خلال الاطلاع على الرسم البياني التالي:

وستحصل على الإجابات التالية:

w = (-5, 5)^T

v = (5, 1)^T

k v = (-3.8, -.8)^T

u = (-1.3, 5.6)^T

حصلنا على الإجابات السابقة من خلال قراءة الرسم البياني السابق، ولكنها ليست دقيقة بالضرورة، إذًا لنتحقّق منها.

أولًا، هل ‎w = k v + u‎؟

‎(-3.8, -0.8)^T + (-1.3, 5.6)^T = (-5.1, 4.8)^T = w

(تقريبًا)

ثانيًا، هل ‎v · u = 0.0؟

‎‎(5, 1)^T · (-1.3, 5.6)^T = -6.5 + 5.6 = -0.9 = 0.0

(ليس تمامًا)

ملاحظة: يمكن لمسقط الشعاع w على الشعاع v أن يؤشّر إلى الاتجاه المعاكس للشعاع v كما حدث في المثال السابق.

أمثلة لإسقاط الأشعة ثلاثية الأبعاد

سنستعرض هنا بعض الأمثلة حول كيفية إسقاط الأشعة ثلاثية الأبعاد

المثال الأول

يظهر الرسم البياني السابق الشعاعين التاليين:

‎w = (4, 2.5, 2.5)^T‎ (الشعاع الأحمر)

‎v = (5, 0, 3.1)^T (الشعاع الأخضر)

أسقِط الشعاع w على الشعاع v، وتذكّر أن طول الشعاع v لا يؤثر على الإسقاط، بل يؤثر منحاه عليه فقط، لذا أنزِل رأس سهم الشعاع w على الخط المنقط.

يمكن بالنظر تقدير مسقط الشعاع ‎w = (4, 2.5, 2.5)^T‎ على الشعاع ‎v = (5, 0, 3.1)^T‎ بأنه k v = (4, 0, 2.5)^T‎.

يتضمن إسقاط الشعاع w على الشعاع v في هذه الحالة "انهيار Collapsing" البعد y للشعاع w. فلنتحقّق الآن مما إذا كانت النتيجة نفسها رياضيًا، إذ يمكن تطبيق الخطوات نفسها في الفضاء ثلاثي الأبعاد 3D.

أولًا، نحسب الأطوال وهي:

| w | = (لا داعي لحسابه، لذا أبقيه بالرموز)

‎| v |² = ((5, 0, 3.1)^T · (5, 0, 3.1)^T) = 34.61

ثانيًا، نحسب أشعة الوحدة كما يلي:

w_u = (4, 2.5, 2.5)^T / | w |‎

v_u = (5, 0, 3.1)^T / | v |‎

ثالثًا، نحسب جيب تمام الزاوية بين الشعاعين كما يلي:

‎w_u · v_u = (4, 2.5, 2.5)^T / | w | · (5, 0, 3.1)^T / | v | = 27.75 / ( | w | | v |)

رابعًا، نعوّض في صيغة الإسقاط التالية:

‎k v = | w | (w_u · v_u) v_u‎

k v = | w | (27.75 / (| w | | v |)) (5, 0, 3.1)^T / | v |‎

k v = 27.75 / (| v |) (5, 0, 3.1)^T / | v |‎

‎k v = 27.75 / (| v |²) (5, 0, 3.1)^T

k v = (27.75 / 34.61) (5, 0, 3.1)^T‎

‎k v = ((27.75*5)/34.61, 0, (27.75*3.1)/34.61)^T

‎k v = ( 4.00, 0, 2.49)^T

وبالتالي فإن التقدير بالنظر k v = (4, 0, 2.5)^T‎ يطابق النتيجة الرياضية ‎(4, 0, 2.5)^T‎، ويمكن الآن بسهولة حساب الشعاع العمودي:

u = w - k v

u = (4, 2.5, 2.5)^T - (4, 0, 2.5)^T = (0, 2.5, 0)^T

أبقِ الشعاع w كما هو في الرسم البياني السابق، وحاول تصوّر إسقاط w على شعاع مختلف v'‎ ينتج عنه المسقط k ،v'‎ الذي يؤدي إلى انهيار البعدين y و z للشعاع w؛ فمثلًا، إذا أسقطنا الشعاع ‎w = (4, 2.5, 2.5)^T‎ على الشعاع ‎v' = (1, 0, 0)^T‎، فستكون النتيجة k v = (4, 0, 0)^T‎.

المثال الثاني

إذا أسقطنا شعاعًا في فضاء ثلاثي الأبعاد على محاور إحداثية، فستحصل على أحد الأبعاد الثلاثة فقط لذلك الشعاع، لذا لنلقِ نظرة على مثال آخر أصعب.

لدينا من الشكل السابق الشعاعان ‎w = (4, 2, 3)^T‎ و ‎v = (6, 4, 2)^T‎، ونريد إسقاط الشعاع w على الشعاع v.

يمكن أن نقدّر بالنظر أنه إذا "أنزلنا" رأس سهم الشعاع w عموديًا على الشعاع v، فستصل إلى الشعاع v عند حوالي 4/10 من طول v، لذا فإن k تساوي 0.4 تقريبًا و k v‎ يساوي:

k v = 0.4 (6, 4, 2)^T = (2.4, 1.6, 0.8)^T

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

أولًا، نحسب الأطوال وهي:

| w | = (لا داعي لحسابه، لذا أبقيه بالرموز)

‎| v |² = ((6, 4, 2)^T · (6, 4, 2)^T) = 56

ثانيًا، نحسب أشعة الوحدة كما يلي:

w_u = (4, 2, 3)^T / | w |‎

v_u = (6, 4, 2)^T / | v |‎

ثالثًا، نحسب جيب تمام الزاوية بين الشعاعين كما يلي:

w_u · v_u = (4, 2, 3)^T · (6, 4, 2)^T / | w | | v | = 38 / ( | w | | v |)

رابعًا، نعوّض في صيغة الإسقاط التالية:

k v = | w | (w_u · v_u) v_u

k v = | w | {38 / (| w | | v |)} {(6, 4, 2)^T / | v |}

k v = {38 / | v |} {(6, 4, 2)^T / | v |}

k v = {38 / | v |²} (6, 4, 2)^T

k v = {38/56} (6, 4, 2)^T

k v = 0.679 (6, 4, 2)^T

k v = ( 4.07, 2.7, 1.36)^T

لنحسب الآن الشعاع u كما يلي، حيث ‎u + k v = w‎ (الشعاع u هو الشعاع الأسود المنقط في الرسم البياني السابق):

u + k v = w

u = w - k v = (4, 2, 3)^T - ( 4.07, 2.7, 1.36)^T = (-0.07, -0.7, 1.64)^T

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

ترجمة -وبتصرُّف- للفصل Projecting one Vector onto Another من كتاب Vector Math for 3D Computer Graphics لصاحبه Bradley Kjell.

اقرأ أيضًا

• المقال السابق: كيفية إيجاد الزاوية بين شعاعين في فضاء ثلاثي الأبعاد 3D
• تغيير حجم شعاع Scaling في التصاميم ثلاثية الأبعاد 3D
• تطبيق الجداء النقطي Dot Product على الأشعة في التصاميم 3D

رأينا في المقالات السابقة أن نستطيع استخدام الجداء النقطي Dot Product من أجل الآتي:

• حساب طول الشعاع: حيث يكون الجداء النقطي للشعاع مع نفسه = الطول².
• اكتشاف التعامد بين شعاعين: حيث يكون الجداء النقطي لشعاعين متعامدين = 0.
• حساب الزاوية بين شعاعين: حيث يكون cosθ = حاصل الجداء النقطي لشعاعي وحدة Unit Vectors.

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

سنتعرّف في هذا المقال على المواضيع الآتية:

• صيغة حساب جيب تمام Cosine الزاوية بين أشعة الوحدة.
• قائمة بالخطوات التي يجب اتخاذها لتطبيق هذه الصيغة على الأشعة التي ليست أشعة وحدة.
• استخدام الأشعة في مسائل الهندسة الفراغية.

الزوايا في الفضاء ثلاثي الأبعاد

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

الزوايا بين محاور الإحداثيات

لا يؤدي تغيير مجال رؤيتك إلى تغيير الكائنات ثلاثية الأبعاد، ولكن ستتغيّر الصورة ثنائية الأبعاد.

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

رأينا في المقال السابق الصيغة التالية لحساب الزاوية θ بين شعاعي الوحدة:

a_u · b_u = cosθ‎

إذًا لنطبّق هذه الصيغة على شعاعي الوحدة الموازيين للمحور x والمحور y وهما: ‎(1,0,0)^T‎ و ‎(0,1,0)^T‎ لحساب الزاوية المحصورة بين المحورين x و y كما يلي:

‏‏‎(1,0,0)^T ‎· (0,1,0)^T =‎ 0

وبالتالي فإن المحورين x و y متعامدان كما توقعنا.

الزاوية بين شعاعين

كان المثال السابق سهل التصور والحساب، إذًا لنجرب شيئًا أصعب، حيث يظهر الشكل الآتي شعاعين:

• الشعاع a الذي تمثله المصفوفة العمودية ‎(4,4,4)^T‎.
• الشعاع b الذي تمثله المصفوفة العمودية ‎(4,0,4)^T‎.

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

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

صيغة حساب الزاوية بين شعاعين

لاحظ أنه عند الانتقال من ذيل الشعاع a إلى رأسه تزيد المسافة العمودية بمقدار 4، بينما تزيد المسافة الأفقية بمقدار 4‎ √2، وظل الزاوية Tangent هو:

4‎ / (4 √2) = 1.0/ √2 = 0.7071

وبالتالي فإن الزاوية مع المستوي الأفقي هي: arctan( 0.7071 )‎ =‫ 35.26 درجة. وبما أن الشعاع b يقع في المستوي الأفقي، فإن الزاوية بين الشعاعين يجب أن تساوي هذه القيمة.

وبالتالي فإن صيغة حساب الزاوية θ بين شعاعي وحدة هي:

a_u · b_u = cosθ

ويمكننا استخدام هذه الصيغة مع الأشعة التي ليست أشعة وحدة باتباع الخطوات التالية:

1. توحيد Normalize كل شعاع.
2. حساب الجداء النقطي لشعاعي الوحدة الناتجين.
3. استخدم arc cos للحصول على الزاوية.

لنطبّق هذه الصيغة على الشعاع a الذي تمثله ‎(4,4,4)^T‎ والشعاع b الذي تمثله ‎(4,0,4)^T‎ كما يلي:

‎| a | = √(16 + 16 + 16) = 4√3 و | b | = √(16 + 16) = 4√2

a_u = (4, 4, 4)^T / (4√3)‎ و a_u = (4, 0, 4)^T / (4 √2 )

a_u · b_u = (16 + 16)/( (4√3)(4 √2) ) = 2/(√3√2 ) = √2 /√3 = cosθ‎

cosθ = 0.81649

وبالتالي فإن الزاوية بين الشعاعين هي: θ =‫ 35.26 درجة.

لا تُعَد الحسابات الكثيرة في التمرين السابق هي الغرض الحقيقي، ولكن الهدف هو توضيح الصيغة ‎a_u · b_u = cosθ، والتي تُعَد مهمةً في كل جزء من أجزاء الرسوميات ثلاثية الأبعاد.

تدريب عملي

يوضح الشكل الآتي شعاعين تمثّلهما المصفوفتان العموديتان التاليتان:

f = (2, 4, 6)^T‎

‎g = (6, 4, 3)^T

يمكن أن ترغب في قياس الزاوية بين الشعاعين من خلال وضع مِنقلة مسطحة بين الشعاعين، ولكن لا يمكنك ذلك لأن كل ما تراه هو إسقاطٌ للشعاعين على الشاشة.

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

أولًا، نحسب الأطوال وهي:

‎| f |² = (2, 4, 6)^T · (2, 4, 6)^T = 4 + 16 + 36 = 56

‎| g |² = (6, 4, 3)^T · (6, 4, 3)^T = 36 + 16 + 9 = 61

ثانيًا، نوحّد الشعاعين كما يلي:

f_u = (2, 4, 6)^T / √56‎

g_u = (6, 4, 3)^T / √61‎

ثالثًا، نحسب الجداء النقطي لهما وهو:

f_u · g_u = (2, 4, 6)^T · (6, 4, 3)^T / ( √56 √61) = (12+16+18)/( √56 √61) = 46 / ( √56 √61) = 0.78704‎

رابعًا، نحسب الزاوية بينهما كما يلي:

cos θ = 0.78704‎

θ = arc cos 0.78704 = 38.1‎ درجة

لاحظ أن الجواب ليس بعيدًا جدًا عن التخمين.

الزاوية بين اتجاهي شعاعين

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

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

ليكن باسم وبلال جالسين على الشاطئ، ويريدان تسمير بشرتهما كما في الشكل التالي:

يؤشر إطار الإحداثيات المناسب إلى المحور x شمالًا، والمحور y للأعلى بصورة مستقيمة والمحور z شرقًا، حيث يكون الاتجاه نحو الشمس في هذا الإطار هو ‎(-3, 4, 0)^T / 5، وشعاع الوحدة العمودي على ظهر باسم هو ‎( -1, 2, 2)^T / 3، وشعاع الوحدة العمودي على ظهر بلال هو ‎( -2, 1, 2)^T / 3.

إذًا سيكون أحدهما متمتعًا بأفضل موضع للتسمير السريع، حيث سنوضّح ذلك كما يلي:

• الاتجاه نحو الشمس = ‎( -3, 4, 0)/5.
• الاتجاه العمودي على ظهر باسم = ‎( -1, 2, 2)/3.
• الاتجاه العمودي على ظهر بلال = ‎( -2, 1, 2)/3.

يجب أن يكون ظهرك مُوجَّهًا مباشرةً نحو الشمس ليصل إليك أكبر قدرٍ من أشعتها، كما يجب أن تكون الزاوية بين الاتجاه العمودي على ظهرك واتجاه الشمس صغرى.

بالنسبة لباسم:

‎( -1, 2, 2)/3 · ( -3, 4, 0)/5 = (3+8+0)/15 = 11/15

arc cos( 11/15 ) = 42.8‎ درجة

وبالنسبة لبلال:

‎( -2, 1, 2)/3 · ( -3, 4, 0)/5 = (6+4+0)/15 = 10/15

arc cos( 14/15 ) = 48.2 درجة

وبالتالي سيحصل باسم على تسمير لبشرته بصورة أسرع.

تدريبات عملية

تدريب 1:

يظهر الرسم البياني الآتي الشعاعين التاليين:

q = (-2, 4, 3)^T

p = (3, 1, -4)^T

وضعنا ذيل الأشعة عند نقطة الأصل لسهولة التصور، إذ تؤشّر الأشعة إلى ثُمنَين Octants مختلفتين من الفضاء ثلاثي الأبعاد.

لنحسب الآن الزاوية بين هذين الشعاعين كما يلي:

أولًا، نحسب الأطوال وهي:

‎| p |² = ( -2, 4, 3)^T · ( -2, 4, 3)^T = 4 + 16 + 9 = 29

‎| q |² = ( 3, 1, -4)^T · ( 3, 1, -4)^T = 9 + 1 + 16 = 26

ثانيًا، نوحّد الشعاعين كما يلي:

p_u = (-2, 4, 3)^T / √29‎

q_u = (3, 1, -4)^T / √26‎

ثالثًا، نحسب الجداء النقطي لهما وهو:

p_u · q_u = (-2, 4, 3)·(3, 1, -4)^T / ( √29 √26) = (-6 + 4 - 12)/( √29 √26) = -14/( √29 √26) = -0.50985‎

رابعًا، نحسب الزاوية بينهما كما يلي:

cos θ = -0.50985

θ = arc cos( -0.50985) = 120.654‎ درجة

تدريب2:

أوجد جيب تمام الزاوية بين شعاعي الوحدة التاليين:

s = (1, 0, 1)^T /√2‎

t = (1, 1, 1)^T /√3‎

cosθ = (1, 0, 1)^T · (1, 1, 1)^T / ( √2 √3) = 2 / ( √2 √3) = √2 / √3 = 0.8164‎

استخدام صيغة الجداء النقطي لحل المسائل الهندسية

يمكن استخدام صيغة الجداء النقطي لحل بعض المسائل الهندسية التي قد تكون صعبة الحل، فمثلًا، تتطابق الحواف الحمراء في الشكل التالي على محاور الإحداثيات، وتشترك في نقطة النهاية (0, 0, 0)، وتنتهي الحافة على طول المحور x عند x=2، وتنتهي الحافة على طول المحور y عند y=3، وتنتهي الحافة على طول المحور z عند z=4، وتربط الحواف المتبقية نقاط النهاية هذه.

لنفترض الآن أنك تريد حساب الزاوية بين الحافتين الخضراويتين، وقد يكون ذلك مملًا إلى حدٍ ما باستخدام علم المثلثات، لذا يمكنك:

1. تشكيل شعاع لكل حافة خضراء (من خلال طرح نقاط النهاية).
2. توحيد كل شعاع منهما.
3. استخدام قاعدة الجداء النقطي لحساب الزاوية بينهما.

إذًا لنطبّق هذه الخطوات لحساب الزاوية بين الحافتين الخضراويتين كما يلي:

أولًا، نقاط النهاية هي:

(0‎, 3, 0) إلى (2‎, 0, 0)

(0‎, 3, 0) إلى (0‎, 0, 4)

ثانيًا، نحسب أشعة الإزاحة وهي:

a = (2, 0, 0) - (0, 3, 0) = (2, -3, 0)^T‎

b = (0, 0, 4) - (0, 3, 0) = (0, -3, 4)^T‎

ثالثًا، نحسب الأطوال كما يلي:

‎| a |² = (2, -3, 0)^T · (2, -3, 0)^T = 13

‎| b |² = (0, -3, 4)^T · (0, -3, 4)^T = 25

رابعًا، نوحّد الأشعة كما يلي:

a_u = (2, -3, 0)^T / √13‎

b_u = (0, -3, 4)^T / 5‎

خامسًا، نحسب الجداء النقطي لهما:

a_u · b_u = (2, -3, 0)^T · (0, -3, 4)^T / (5 √13) = 9 / (5 √13) = 0.49923‎

سادسًا، نحسب الزاوية بينهما كما يلي:

cosθ = 0.49923‎

θ = arc cos 0.49923 = 60.051‎ درجة

إذا حسبتَ أشعة الإزاحة بالطريقة المعاكسة (بالطرح من ‎(0, 3, 0)‎)، فلن يؤثر ذلك على الإجابة، إذ يمكن أن يؤشّر شعاعان إلى اتجاهين متعاكسين، ولكن حاصل جدائهما النقطي سيكون نفسه.

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

ترجمة -وبتصرُّف- للفصل The Angle between 3D Vectors من كتاب Vector Math for 3D Computer Graphics لصاحبه Bradley Kjell.

اقرأ أيضًا

• المقال السابق: كيفية إيجاد الزاوية بين شعاعين في فضاء ثنائي الأبعاد 2D
• الجداء النقطي وارتباطه بطول الأشعة وتعامدها في التصاميم 3D
• تطبيق الجداء النقطي Dot Product على الأشعة في التصاميم 3D
• تغيير حجم شعاع Scaling في التصاميم ثلاثية الأبعاد 3D

ناقشنا في المقال السابق بعض استخدامات الجداء النقطي والتي هي:

1. حساب طول الشعاع: حيث يكون الجداء النقطي للشعاع مع نفسه = الطول².
2. اكتشاف تعامد شعاعين: حيث يكون الجداء النقطي لشعاعين متعامدين = 0.

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

سنناقش في هذا المقال المواضيع التالية:

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

تأثير طول الأشعة على الجداء النقطي

لنفكّر حاليًا في الأشعة في فضاء ثنائي الأبعاد مثل الشعاع a في الرسم البياني السابق، حيث يُحتمَل أن يكون جداؤه النقطي مع الشعاع c الذي له منحى Orientation مقداره 60 درجة أكبر من جدائه النقطي مع الشعاع b الذي له منحى مقداره 30 درجة، لأن الشعاع c أطول بكثير من الشعاع b، ولنتأكد الآن من ذلك الآن. ولتكن لدينا الأشعة التالية:

a = (6, 0)^T

b = (3, 2)^T

c = (5, 9)^T

ويكون الجداء النقطي لها هو:

a · b = 18.0

a · c = 30.00

توجد خاصيتان متعلقتان بحاصل جداء الأشعة النقطي كما ذكرنا سابقًا وهما:

• الزاوية بين أشعة الإدخال.
• طول أشعة الإدخال.

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

توحيد الأشعة

يوضّح الرسم البياني السابق كل شعاع بعد توحيده، أي إنشاء شعاع وحدة باتجاه الشعاع الأصلي نفسه.

ملاحظة: تذكّر أن الحرف u المنخفض يشير إلى شعاع الوحدة: ‎b_u‎.

إلغاء تأثير الطول على جداء الأشعة النقطي

لنتأكد الآن من الجداء النقطي الأكبر من بين الجداءين ‎a_u · b_u‎ و ‎a_u · c_u‎ بعد أن وحّدنا الأشعة لإلغاء تأثير الطول على الجداء النقطي.

بما أن: u · v = | u | | v | cos θ، وجميع الأشعة طولها يساوي 1.0، فإن الجداء النقطي ‎u · v = cos θ، وبالتالي فإن الجداء النقطي ‎a_u · b_u‎ يساوي جيب تمام الزاوية بين الشعاعين ‎a_u‎ و ‎b_u‎، والذي يمكن قراءته من الرسم البياني على أنه 0.866، بينما يساوي الجداء النقطي ‎a_u · c_u‎ جيب تمام الزاوية بين ‎a_u‎ و ‎c_u‎، والذي يمكن قراءته من الرسم البياني على أنه 0.500.

منحى الشعاع ‎b_u‎ أقرب إلى الشعاع ‎a_u‎، لذلك يكون ‎a_u · b_u‎ هو الأكبر حيث:

a_u = (1, 0): شعاع الوحدة عند الزاوية صفر درجة

b_u = (0.866, 0.5): شعاع الوحدة عند الزاوية 30 درجة

c_u = (0.5, 0.866): شعاع الوحدة عند الزاوية 60 درجة

تذكر أن: cos 30 = 0.866 و sin 30 = 0.5 و cos 60 = 0.5 و sin 60 = 0.866.

وبالتالي فإن الجداء النقطي هو:

a_u · b_u = 0.866

a_u · c_u = 0.500

لذا يمكن إزالة تأثير الطول باستخدام أشعة طولها 1، ويكون حاصل الجداء النقطي أكبر عندما تفصل زاوية صغيرة بين الأشعة، وإذا كانت الأشعة في اتجاهات متعاكسة مثل ‎(1, 0)^T‎ و ‎(-1, 0)^T‎، فسيكون مقدار الجداء النقطي سالبًا.

مجال قيمة الجداء النقطي لشعاعي وحدة

سنوضّح فيما يلي عينة لشعاع الوحدة ‎b_u‎ وحاصل الجداء النقطي له مع الشعاع ‎a_u = (1.0, 0)^T‎ لزوايا مختلفة:

الزاوية	الشعاع b	النتيجة	صورة توضيحية
الزاوية 000 درجة	‎(1.000, 0.000)T‎	تساوي 1.000
الزاوية 015 درجة	‎(0.966, 0.259)T‎	تساوي 0.966
الزاوية 030 درجة	‎(0.866, 0.500)T‎	تساوي 0.866
الزاوية 045 درجة	‎(0.707, 0.707)T‎	تساوي 0.707
الزاوية 060 درجة	‎(0.500, 0.866)T‎	تساوي 0.500
الزاوية 075 درجة	‎(0.259, 0.966)T‎	تساوي 0.259
الزاوية 090 درجة	‎(0.000, 1.000)T‎	تساوي 0.000
الزاوية 105 درجة	‎(-0.259, 0.966)T‎	تساوي ‎-0.259 ‫
الزاوية 120 درجة	‎(-0.500, 0.866)T‎	تساوي ‎-0.500	‫
الزاوية 135 درجة	‎(-0.707, 0.707)T‎	تساوي ‎-0.707	‫
الزاوية 150 درجة	‎(-0.866, 0.500)T‎	تساوي ‎-0.866	‫
الزاوية 165 درجة	‎(-0.966, 0.259)T‎	تساوي ‎-0.966	‫
الزاوية 180 درجة	‎(-1.000, 0.000)T‎	تساوي ‎-1.000	‫

‎b_u‎ هو شعاع الوحدة الذي تمثله المصفوفة ‎(cos θ, sin θ )^T‎ في كل حالة من الحالات.

إذًا مجال قيم حاصل الجداء النقطي لشعاعي الوحدة ‎a_u · b_u‎ هو ‎-1.0 … 1.0.

صيغة حساب الزاوية بين شعاعين

مجال قيم حاصل الجداء النقطي لشعاعي الوحدة ‎a_u · b_u‎ هو ‎-1.0 … 1.0، لأن كل جداء نقطي في الفقرة السابقة هو:

‎(1, 0)^T · ( cos θ, sin θ)^T = cos θ

وهذا صحيح، فعندما يكون ‎a_u‎ شعاع وحدة فإنه سيؤشر إلى أيّ اتجاه، وبالتالي يمكن حساب الزاوية بين شعاعي الوحدة كما يلي:

a_u · b_u = cos θ‎

حيث θ هي الزاوية بين الشعاعين، وتتضمن هذه الصيغة تلقائيًا حقيقة أن الجداء النقطي للأشعة المتعامدة هو صفر، لأن جيب تمام cos الزاوية 90 يساوي الصفر.

أوجد جيب تمام الزاوية بين شعاعي الوحدة اللذين تمثلهما المصفوفتان ‎(0.7071, 0.7071)^T‎ و ‎(0.5, 0.866)^T‎:

cos θ = (0.7071, 0.7071)^T · (0.5, 0.866)^T = 0.7071 · 0.5 + 0.7071 · 0.866 = 0.9659‎

تدريب عملي

تدريب 1:

يوضّح الرسم البياني السابق شعاعين هما: الشعاع الأول ‎(0.7071, 0.7071)^T‎ وهو شعاع وحدة عند الزاوية 45 درجة، والشعاع الثاني ‎(0.5, 0.866)^T‎ وهو شعاع وحدة عند الزاوية 60 درجة، وبالتالي يجب أن يكون حاصل الجداء النقطي لهما هو جيب تمام الزاوية 15. لنوضّح ذلك باستخدام الرموز كما يلي:

1. الشعاع الأول هو ‎(cos 45, sin 45)^T‎.
2. الشعاع الثاني هو ‎(cos 60, sin 60)^T‎.
3. حاصل الجداء النقطي لهما هو:

cos 45 cos 60 + sin 45 sin 60

‎= cos 45 cos(45 + 15) + sin 45 sin(45+15)‎

‎= cos 45 (cos 45 cos 15 - sin 45 sin 15) + sin 45 (cos 45 sin 15 + cos 15 sin45)‎

‎= cos 45 cos 45 cos 15 - cos 45 sin 45 sin 15 + sin 45 cos 45 sin 15 + sin 45 cos 15 sin 45

‎= cos² 45 cos 15 + sin²45 cos 15

‎= (cos²45 + sin²45)cos15

‎= cos 15

استخدامنا في الخطوة رقم 5 القاعدتين التاليتين:

cos(x+y) = cos(x) cos(y) - sin(x) sin(y)‎

sin(x+y) = sin(x) cos(y) + cos(x) sin(y)‎

واستخدامنا في الخطوة رقم 9 القاعدة التالية:

sin²x + cos²x = 1‎

أوجد جيب تمام Cosine الزاوية بين شعاعي الوحدة المُمثَّلان بالمصفوفتين ‎‎q_u = (0.0, 1)^T‎ و ‎r_u = (0.5, 0.866)^T‎:

q_u · r_u = cos θ = 0.866‎

وبالتالي: θ =‫ arc cos 0.866 ‫= 30 درجة.

تدريب 2:

يظهِر الشكل التالي الشعاعان ‎q_u‎ و ‎r_u‎ والزاوية بينهما:

تذكّر أن:

q_u · r_u = r_u · q_u‎

يجب أن تكون الزاوية بين الشعاعين 180 درجة أو أقل (حسب التعريف)، ولا يهم ترتيب الأشعة في الجداء النقطي.

ملاحظة: من المفيد في بعض الأحيان رسم صورة للتأكد من أن إجابتك منطقية خاصةً عندما تؤشر الأشعة إلى أرباع مختلفة.

أوجد جيب تمام الزاوية بين شعاعي الوحدة المُمثَّلان بالمصفوفتين ‎q_u = (0.0, 1)^T‎ و ‎w_u = (-0.5, 0.866)^T‎:

cos x =‫ 0.866، إذًا يجب أن تكون x =‫ arc cos 0.866 =‫ 30 درجة.

لاحظ أن كلا الشعاعين ‎r_u‎ و ‎w_u‎ يعطيان الإجابة cos 30 عند تطبيق الجداء النقطي عليهما مع الشعاع ‎q_u‎، بالرغم من أنهما يقعان على جانبي هذا الشعاع.

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

الزوايا بين شعاعين التي تكون أكبر من 90 درجة

أوجد جيب تمام الزاوية بين شعاعي الوحدة المُمثَّلين بالمصفوفتين ‎q_u = (0.0, 1)^T‎ و ‎z_u = (-0.5, -0.866)^T‎:

الزاوية بين هذين الشعاعين أكبر من 90 درجة، وبالتالي فإن جيب تمام الزاوية بينهما سالبة، حيث cos θ =‫ ‎-0.866، لأن:

θ = arc cos -0.866 = 150‎

الزاوية نفسها تعطي الجداء النقطي نفسه

لنحاول الآن رسم الشعاع الآخر الذي جداؤه النقطي مع الشعاع ‎q_u‎ يساوي ‎-0.866 كما يلي:

الشعاعان اللذان يكون ناتج الجداء النقطي لهما مع الشعاع ‎q_u = (0.0, 1)^T‎ يساوي ‎-0.866 هما:

z_u = (-0.5, -0.866)^T

v_u = (0.5, -0.866)^T‎

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

أوجد الزاوية بين الشعاعين: ‎d_u = 0.7071(1,1)^T‎ و ‎e_u = -0.7071(1,1)^T‎، وارسم هذين الشعاعين لتوضيح الحالة:

0.7071‎(1, 1)^T · -0.7071(1, 1)^T = 0.7071(-0.7071)(1+1) = -0.7071² * 2 = -0.5*2 = 1

إذًا الزاوية هي: cos( -1 )‎ =‫ 180 درجة، حيث يوجد شعاع واحد فقط يبعد 180 درجة عن الشعاع المعطى.

تدريب عملي أكثر واقعية

نادرًا ما يمنحك العالم الحقيقي زوايا سهلة تبلغ 30 درجة و 45 درجة و 60 درجة وما إلى ذلك، لذا إليك تدريبًا أكثر واقعية.

أوجد الزاوية المحصورة بين الشعاعين:

f_u = (0.6, 0.8)^T

g_u = (0.8, 0.6)^T

قد ترغب أولًا في التأكد من أن هذه الأشعة هي أشعة وحدة فعلًا، لذا ارسم هذه الشعاعين، ثم احسب ناتج الجداء النقطي لهما، واستخدم الدالة arc cos في الآلة الحاسبة لحاسوبك (أو الآلة الحاسبة الحقيقية) للعثور على الزاوية، ولا تنسَ حساب الإجابة بالدرجات وليس بالراديان كما يلي:

ناتج الجداء النقطي هو:

‎( 0.6, 0.8 ) · ( 0.8, 0.6 ) = 0.6*0.8 + 0.8*0.6 = 0.48 + 0.48 = 0.96

والزاوية بينهما هي: arc cos( 0.96 )‎ =‫ 16.26 درجة.

الأشعة التي ليست أشعة وحدة

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

j = (3, 4)^T

k = (0, 2)^T

نلاحظ أن هذه الأشعة ليست أشعة وحدة، وبالتالي لا يمكنك العثور على الزاوية بينهما دون مزيد من العمل، لذا دعونا نرسم رسمًا بيانيًا لهما أولًا.

يمكننا إيجاد الزاوية بين هذين الشعاعين من خلال توحيد Normalize كل منهما وهذا لا يغير منحاهما، وبالتالي أصبح لدينا الآن شعاعا وحدة ويمكن إيجاد جيب تمام الزاوية بينهما باستخدام الجداء النقطي.

الزاوية بين الأشعة التي ليست أشعة وحدة

لنوجد الآن الزاوية بين الشعاعين j و k:

نوجد أولًا طول كل شعاع:

| j | = 5.0

| k | = 2.0

ثم نوحّد كلًا منهما، ولكن تذكّر أنه من الحكمة عدم إجراء عملية القسمة في هذه الخطوة في كثير من الأحيان:

j_u = (3, 4)^T / 5.0‎

k_u = (0, 2)^T / 2.0‎

نحسب الآن الجداء النقطي لهما:

j_u · k_u = (3, 4)^T / 5.0 · (0, 2)^T / 2.0 = (1/10)(3, 4)^T · (0, 2)^T = (0.1)(8) = 0.8‎

أخيرًا، نستخدم دالة arc cos في الآلة الحاسبة:

arc cos 0.8 = 36.87 درجة

لنحسب الآن الزاوية المحصورة بين الشعاعين: ‎a = (10, 5)^T‎ و ‎b = (8,12)^T‎ مثلًا.

نحسب الأطوال أولًا:

| a | = √125

| b | = √208

ثم نحسب الجداء النقطي:

‎(10, 5)^T / √125 · (8, 12)^T / √208 = (108 + 512) / ( √125 √208) = 140 / ( √125 √208) = 140 / √(125*208) = 140 / √26000 = 0.86824

وبالتالي فإن الزاوية هي:

arc cos ( 0.86824 ) = 29.745 درجة

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

ترجمة -وبتصرُّف- للفصل The Angle between Two Vectors من كتاب Vector Math for 3D Computer Graphics لصاحبه Bradley Kjell.

اقرأ أيضًا

• المقال السابق: الجداء النقطي وارتباطه بطول الأشعة وتعامدها في التصاميم 3D
• تغيير حجم شعاع Scaling في التصاميم ثلاثية الأبعاد 3D
• خاصية الاتجاه Direction للأشعة الهندسية في التصاميم ثلاثية الأبعاد
• خاصية الطول Length للأشعة الهندسية في التصاميم ثلاثية الأبعاد

سنوضّح في هذا المقال حقيقتين مهمتين، أولهما أن الجداء النقطي لمصفوفة عمودية مع نفسها يعطي مربع طول الشعاع الذي تمثله، وثانيهما أن الجداء النقطي لمصفوفتين عموديتين تمثلان شعاعين متعامدين يساوي الصفر.

سنوضح في هذا المقال المواضيع التالية:

• الجداء النقطي وطول الشعاع.
• شعاع الوحدة Unit Vector.
• شعاع الوحدة الناظم Unit Normal.
• الجداء النقطي للأشعة المتعامدة ومصفوفاتها العمودية.
• كيفية بناء شعاع متعامد مع شعاع معين.
• تعريف ميل Slope الخط ثنائي الأبعاد.
• العلاقة بين ميول الخطوط المتعامدة ثنائية الأبعاد.

صيغة الجداء النقطي المتعلقة بطول الشعاع

لنفترض أن لدينا ‎v = ( 3, 4 )^T‎، فأوجد ناتج الجداء النقطي v · v وطول الشعاع v:

‎v · v = ( 3, 4 )^T · ( 3, 4 )^T = 3₂ + 4₂ = 9 + 16 = 25 = 5_2‎

طول v ‫= 5 لأنه جزء من المثلث قائم الزاوية 3/4/5.

رأينا في المقال السابق أن الجداء النقطي لشعاع مع نفسه هو:

‎(x, y, z)^‎T · (x, y, z)^T = x² + y² + z²

وتوجد طريقة أخرى لكتابة ذلك وهي:

v · v = | v |^2‎

ناتج الجداء النقطي لمصفوفة عمودية مع نفسها هو عدد حقيقي (مقدار سلمي) Scalar، وهو مربع طول الشعاع الذي تمثله.

ملاحظة: إذا استخدمتَ الإحداثيات المتجانسة Homogeneous Coordinates، فستحتاج هذه العملية الحسابية إلى التعديل بعض الشيء، وتذكّر أن الطول هو خاصية للشعاع الهندسي، وليس خاصية للمصفوفة العمودية التي يمكن استخدامها لتمثيل الشعاع.

لنوجد الآن طول الشعاع الذي تمثله المصفوفة العمودية ‎( 2, 1, -1)^T‎:

ناتج الجداء النقطي هو 4+1+1 = 6، وبالتالي فإن الطول هو ‎√6.

خاصيات الجداء النقطي المتعلقة بطول الشعاع

إليك بعض الخاصيات الجداء النقطي المتعلقة بطول الشعاع:

1. إذا غيّرتَ حجم شعاع أو ضربته مع عدد حقيقي k، فإنك تضرب طوله بهذه القيمة k:

‎(kv)·(kv) = k² v ² وبالتالي | k v | = k| v |

2. طول الشعاع الصفري هو صفر:

‎| 0 | = 0

3. ناتج الجداء النقطي للشعاع الصفري مع أي شعاع آخر هو صفر:

0‎ · v = 0

4. لا يغيّر عكس اتجاه الشعاع من طوله:

| -v | = | v |

أوجد طول الشعاع ‎(30, 40)^T‎:

‎(30, 40)^T = 10(3, 4)^T‎، وبالتالي يكون الطول 10*5 = 50.

أو يمكنك حسابه بطريقة أصعب كما يلي:

‎|(30,40)|² = 900 + 1600 = 2500

والطول = ‎√2500 ‫= 50

أشعة الوحدة Unit Vectors

تذكّر أن شعاع الوحدة هو شعاع بطول 1، وتسمَّى عملية إنشاء شعاع وحدة له اتجاه الشعاع المُعطَى نفسه بالتوحيد Normalizing التي تُعطَى بالصيغة التالية (كما ناقشنا في مقال سابق):

v_u = v / | v |

تُطبَّق هذه الصيغة على الأشعة والمصفوفات العمودية التي تمثلها، إذ يمكن حساب الطول | v | باستخدام الجداء النقطي للمصفوفات العمودية.

ملاحظة: لاحظ أننا استخدمنا مصطلح "Normal" ، ولكن يجب الانتباه إلى أن لها معانٍ متعددة، إذ يعني مصطلح التوحيد Normalizing إنشاءُ شعاع الوحدة في اتجاه الشعاع الأصلي نفسه، بينما يُطلَق على الشعاع العمودي على سطح معين أحيانًا اسم "الشعاع الناظم Normal Vector"، ولكنه ليس شعاع الوحدة بالضرورة، لذا احرص على ألّا تقول أبدًا "الشعاع الناظم" عندما تقصد "شعاع الوحدة".

إبقاء طول الشعاع صريحًا عند حساب شعاع الوحدة

جرّب إجراء عملية التوحيد للشعاع الذي تمثله المصفوفة العمودية ‎( 1.2, -4.2, 3.5 )^T‎:

ناتج الجداء النقطي هو:

‎( 1.2, -4.2, 3.5 )^T · ( 1.2, -4.2, 3.5 )^T = 1.2² + (-4.2)² + 3.5² = 31.33

ونمثّل شعاع الوحدة كما يلي:

‎( 1.2, -4.2, 3.5 )^T / √31.33. = (0.2144, -0.7504, 0.6253)^T

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

تمثيل أشعة الوحدة للاتجاه

أجب عن الاسئلة التالية (قد ترغب في التفكير في الأشعة ثنائية الأبعاد أثناء إجابتك، بالرغم من أن الإجابات ستكون صحيحة بالنسبة للأشعة ثلاثية الأبعاد أيضًا):

1. كم عدد الأشعة التي يمكن أن تكون في اتجاه معين؟ متعددة بصورة لا نهائية.
2. كم عدد أشعة الوحدة التي يمكن أن توجد في اتجاه معين؟ شعاع واحد فقط.

يمكن أن يكون هناك عدد لا نهائي من الأشعة في اتجاه معين لأن عناصر الشعاع هي أعداد حقيقية، لذلك يوجد عدد لا نهائي من الأشعة التي تحاذي المحور x في الفضاء ثنائي الأبعاد مثلًا، وتبدو المصفوفات العمودية لهذه الأشعة بالصورة ‎(s, 0)^T‎.

يؤشّر شعاع الوحدة لشعاع معين إلى اتجاه هذا الشعاع نفسه، ولا يوجد سوى شعاع وحدة واحد فقط في اتجاه معين، وتوجد قيمة واحدة فقط للتعبير ‎v / | v |‎، ويوجد شعاع وحدة واحد فقط في اتجاه x الموجب، وتمثله المصفوفة العمودية ‎( +1, 0)^T‎.

ينطبق الشيء نفسه على المناحي Orientations والأبعاد الأخرى. يظهِر الشكل التالي أشعة لها أطوال مختلفة والمنحى نفسه، ولكن يكون أحدها فقط هو شعاع الوحدة.

تذكّر الصيغة التالية لحساب زاوية الشعاع:

الزاوية = arc tan( y/x )‎

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

يُستخدَم شعاع الوحدة لشعاع معين في أغلب الأحيان للتعبير عن اتجاه هذا الشعاع، حيث يوجد شعاع وحدة واحد فقط، لذا فإن تعبيره عن الاتجاه فريد من نوعه، وينطبق الشيء نفسه على جميع الأبعاد.

ليكن لدينا الشعاع ‎v = ( -3, 2, 4)^T‎ مثلًا، حيث يمكننا معرفة اتجاهه من خلال حساب شعاع الوحدة كما يلي:

1. v| v |² = 9 + 4 + 16 = 29
2. ‎v_u = v / √29

الجداء النقطي للأشعة التي بينهما زاوية قائمة

إذا كان لدينا شعاعان موجَّهان بحيث يكون بينهما زاوية مقدارها 90 درجة مثل أن يكون أحدهما يحاذي المحور x والآخر يحاذي المحور y كما في الشكل التالي، فستكون نتيجة جدائهما النقطي هي 0:

إذًا لنوجد الجداء النقطي للشعاعين ‎r = (6, 0)^T‎ و ‎s = (0, 😎^T‎ كما يلي:

‎(6, 0)^T · (0, 😎^T = 6*0 + 0*8 = 0

لنفترض أننا دوّرنا الشعاعين السابقين بزاوية 45 درجة كما في الشكل السابق ليصبحا كما يلي (لا تقلق بشأن كيفية تدوير الأشعة، إذ سنوضّحه في مقال لاحق):

r' = ( 6cos(45), 6sin(45) )^T

s' = ( -8sin(45), 8cos(45) )^T

ستبقى الزاوية بينهما بعد تدويرها تساوي 90 درجة، وبالتالي سيكون الجداء النقطي لهما 0 أيضًا.

أوجد الجداء النقطي للشعاعين:

r' = ( 2cos(45), 2sin(45) )^T

s' = ( -3sin(45), 3cos(45) )^T

نطبّق الجداء النقطي كما يلي:

r' · s' = 2cos(45) * (-3)sin(45) + 2sin(45) * 3cos(45) = -2cos(45) * (3)sin(45) + 2sin(45) * 3cos(45) = -6cos(45) * sin(45) + 6cos(45) * sin(45) = 0‎

الجداء النقطي للأشعة المتعامدة

يبدو من المعقول أن يكون حاصل الجداء النقطي لشعاعين هو نفسه بعد تدويرهما بالمقدار نفسه، وبالتالي نستنتج أن الجداء النقطي لشعاعين متعامدين هو صفر، أي أن الجداء النقطي للمصفوفتين العموديتين اللتين تمثلهما هو الصفر.

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

يمكننا القول أن الشعاعين التاليين متعامدان لأن حاصل الجداء النقطي لهما يساوي الصفر:

q = ( -5, 3 )^T‎

r = ( 3, 5 )^T

عدم اعتماد الجداء النقطي للأشعة المتعامدة على الطول

يمكننا تشكيل مصفوفة عمودية ثنائية الأبعاد متعامدة مع مصفوفة أخرى من خلال تبديل العناصر وتغيير إشارة أحدها، ولكن تعمل هذه الطريقة فقط في الفضاء ثنائي الأبعاد، حيث يمكنك العثور على عدد لا حصر له من الأشعة المتعامدة مع شعاع محدَّد مثل الأشعة التالية المتعامدة مع الشعاع ‎( -5, 3)^T‎:

• ( 3, 5 )^T
• ( -3, -5)^T
• ( 1.5, 2.5)^T +( 6, 10)^T
• …. وغيرها

إذا كان الشعاع u متعامدًا مع الشعاع v، فإن الجداء النقطي ‎u · v = 0، وبالتالي ‎(k u) · v = k(u · v)= 0 لأي عدد حقيقي k، إذًا هناك عدد لا نهائي من الأشعة (k u‎) المتعامدة مع الشعاع v.

قد نرغب في العثور على شعاع الوحدة الناظم Unit Normal لشعاع معين الذي هو شعاع:

• متعامد (ناظم) مع الشعاع المعطى.
• يبلغ طوله 1.

ملاحظة: تذكر ألّا تخلط بين مفهومي التوحيد Normalizing (إنشاء شعاع وحدة في اتجاه الشعاع نفسه)، وحساب شعاع الوحدة الناظم (جعل شعاع الوحدة في اتجاه متعامد مع الشعاع).

لنحسب الآن شعاع الوحدة الناظم للشعاع ‎(-5, 3)^T‎:

‎(3, 5)/( √34)‎‎، أو يمكنك اختيار الخيار الآخر: ‎(-3, -5)/( √34)‎.

عدد لا نهائي من الأشعة الناظمة

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

لنوجد عددًا من الأشعة الناظمة للشعاع الذي تمثله المصفوفة العمودية ‎(1, 2, 2)^T‎ كما يلي:

• ( 0, 0, 0 )
• ( -2, 1, 0 )
• ( 0, -1, 1 )
• ( -4, 1, 1 )
• ( 0, 1, -1 )
• … وغيرها الكثير بعدد لا نهائي

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

الشعاع الصفري متعامد مع جميع الأشعة

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

قد تتذكر من مادة الهندسة التحليلية الصيغة التالية لميل خطٍ في فضاء ثنائي الأبعاد وغير موازٍ للمحور Y:

m‎‎ = (التغير في قيمة y) / (التغير في قيمة x)

هذه هي الصيغة نفسها المُستخدَمة في ظل الزاوية مع المحور x، وترتبط هذه الصيغة بالسبب الذي يجعل الجداء النقطي للأشعة المتعامدة ثنائية الأبعاد يساوي صفرًا.

ميول الخطوط المتعامدة

لنحاول الإجابة على الأسئلة التالية:

• ما هو الميل m₁‎ للشعاع ‎( 2, 5 )^T‎؟ m₁ = 5/2
• ما هو الميل m₂‎ للشعاع ‎( -5, 2 )^T‎؟ m₂ = -2/5
• ما هو ناتج الجداء النقطي لهما؟

‎(2)(-5) + (5)(2) = 0

• ما هو ناتج ضرب m₁‎ و m₂‎؟

5/2‎ * -2/5 = -1

قد تتذكر الحقيقة التالية من دروس الرياضيات السابقة:

إذا كان المستقيمان متعامدين فإن حاصل ضرب ميليهما يساوي ‎-1.

إليك ما يحدث عندما ننشئ شعاعًا ناظمًا لشعاع ثنائي الأبعاد من خلال تبديل العناصر وتغيير إشارة أحدها:

• إذا كان ‎v = ( x, y )^T‎.
• فإن الشعاع المعامد له هو ‎v' = ( -y, x )^T‎.
• لأن الجداء النقطي ‎( x, y)^T · ( -y, x )^T‎ هو ‎-xy + yx = 0.
• ميل الشعاع ‎( x, y )^T‎ هو y/x.
• ميل ‎( -y, x )^T‎ هو ‎-x/y.
• حاصل ضرب الميلين هو: y/x * -x/y = -(xy)/(xy) = -1.

إذًا هل يُعَد الشعاعان ‎( -1.5, 6)^T‎ و ‎(2, 2)^T‎ متعامدين؟ لا، لأن ناتج الجداء النقطي لهما هو ‎-3 + 12 = 9. ناتج الجداء النقطي ليس صفرًا، لذا فإن الشعاعين ليسا متعامدين، وقد توصّلنا إلى هذه النتيجة بغض النظر عن الأطوال، إذ يمكن اكتشاف تعامد الأشعة بغض النظر عن طولها.

وصلنا إلى نهاية هذا المقال الذي تعرّفنا فيه على علاقة الجداء النقطي للأشعة مع طولها وتعامدها، وسنناقش في المقال التالي الجداء النقطي غير الصفري لشعاعين.

ترجمة -وبتصرُّف- للفصل Length and the Dot Product من كتاب Vector Math for 3D Computer Graphics لصاحبه Bradley Kjell.

اقرأ أيضًا

• المقال السابق: تطبيق الجداء النقطي Dot Product على الأشعة في التصاميم 3D
• تغيير حجم شعاع Scaling في التصاميم ثلاثية الأبعاد 3D
• خاصية الاتجاه Direction للأشعة الهندسية في التصاميم ثلاثية الأبعاد
• خاصية الطول Length للأشعة الهندسية في التصاميم ثلاثية الأبعاد

سنتعّرف في هذا المقال على المواضيع التالية:

• الأسماء المختلفة التي يُعرَف بها الجداء النقطي.
• تعريف الجداء النقطي للأشعة الهندسية.
• الخاصية التبديلية للجداء النقطي للأشعة.
• جيب تمام Cosine الزاوية.
• الجداء النقطي للأشعة المتعامدة.
• الجداء النقطي وطول الشعاع.
• خاصيات الجداء النقطي للأشعة.
• الجداء النقطي للمصفوفات العمودية ثنائية الأبعاد.
• الخاصية التبديلية للجداء النقطي للمصفوفات العمودية.
• الجداء النقطي للمصفوفات العمودية ثلاثية الأبعاد.
• الجداء النقطي للمصفوفة العمودية مع نفسها.
• خاصية توزيع الجداء النقطي للمصفوفات العمودية.

تعرّفنا حتى الآن على العمليات التالية:

‪| جمع شعاعين | شعاع + شعاع | = | شعاع |

| طرح شعاعين | شعاع - شعاع | = | شعاع |

| الفرق بين نقطتين | نقطة - نقطة | = | شعاع |

| تغيير حجم شعاع (ضرب شعاع بعدد حقيقي) | عدد حقيقي * شعاع | = | شعاع |

سنناقش في هذا المقال الجداء النقطي Dot Product الذي يأخذ شعاعين بوصفهما معاملَين وينتج عنه عدد حقيقي بوصفه الخرج. يسمّى الجداء النقطي في بعض الأحيان بالجداء الداخلي Inner Product، ويسمّى أحيانًا أخرى بالجداء السلمي Scalar Product، والذي لا ينبغي الخلط بينه وبين العملية التي تسمى تغيير حجم الشعاع Scaling (ضرب الشعاع بعدد حقيقي).

| الجداء النقطي | شعاع . شعاع | = | عدد حقيقي Scalar (مقدار سلمي) |

ملاحظة: يُسمى الجداء النقطي أحيانًا بالجداء السلمي، لأنه يأخذ شعاعين وينتج عنه عدد حقيقي Scalar (مقدار سلمي).

الزاوية بين شعاعين

الزاوية بين الشعاعين u و v هي الزاوية θ التي تكون:

0‪ <= θ <= 180 درجة

ويكون ذلك صحيحًا لكل من الفضاء ثنائي الأبعاد وثلاثي الأبعاد، فهذه الزاوية هي أصغر زاوية يمكن أن يدورها أحد الأشعة حتى يحاذي الشعاع الآخر. ولكن إذا كان هناك شعاعان يؤشّران إلى اتجاهين متعاكسين، فستكون الزاوية بينهما تساوي 180 درجة (أو π راديان).

الجداء النقطي

يكون الجداء النقطي للشعاعين u و v بالنسبة للأشعة الهندسية في الفضاء ثنائي أو ثلاثي الأبعاد هو:

u · v = | u | | v | cos θ‪

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

اقتباس

لا تكتب الشعاعين بجانب بعضهما بعضًا بهذه الطريقة: uv عندما تريد استخدام الجداء النقطي، بل ضع دائمًا نقطة بينهما: u · v.

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

تكون الزاوية بين الشعاعين صفرًا عندما يؤشّران إلى الاتجاه نفسه وبالتالي:

u · v = | u | | v | cos 0 = | u | | v | 1 = | u | | v |‪

بما أن ‎-1 <= cos θ <= +1 فستكون قيمة نتيجة الجداء النقطي بين القيمتين ‎-| u | | v |‎ و ‎+| u | | v |‎ اعتمادًا على الزاوية بين الشعاعين، بينما تكون الزاوية بين الشعاعان 180 درجة وتكون قيمة نتيجة الجداء النقطي هي ‎-| u | | v |‎ عندما يؤشّر هذان الشعاعان إلى اتجاهين متعاكسين.

الخاصية التبديلية Commutative للجداء النقطي

إذا كان ‎u · v = | u | | v | cos θ، فإن v · u:

v · u = | v | | u | cos θ = | u | | v | cos θ = u · v‪‪‪‪

تُعَد عملية الجداء النقطي عملية تبديلية، إذ لا يحدِث ترتيب المعاملات أيّ فرق:

‪u · v = v · u‪

cنوعان مختلفان من الأصفار في المعادلة التالية، إذ تكون معامَلات عملية الجداء النقطي شعاعَين، ويكون خرج العملية قيمة سلمية (عددًا حقيقيًا):

0‪ · 0 = 0‪

يمكن إيجاد a (u · v)‎ حيث "a" عدد حقيقي كما يلي:

a (u · v) = a | u | | v | cos θ‪‪

نعيد ترتيب الصيغة السابقة، فينتج:

‪= | a u | | v | cos θ = (a u) · v = u · (a v)

جيب تمام Cosine الزاوية 90 درجة

قد تكون كيفية عمل دالة جيب التمام Cosine غامضةً إلى حدٍ، لذا تخيّل دائرة الوحدة مع إسقاط نصف قطرها على المحور x كما في الشكل السابق الذي ينتج عنه ما يلي:

• جيب تمام الزاوية 0 درجة = 1.0
• جيب تمام الزاوية 30 درجة = 0.866
• جيب تمام الزاوية 45 درجة = 0.707
• جيب تمام الزاوية 60 درجة = 0.500
• جيب تمام الزاوية 90 درجة = 0.0

وتذكّر أن:

u · v = | u | | v | cos θ‪‪‪

الجداء النقطي للأشعة المتعامدة Orthogonal

لنفترض أن لدينا شعاعين بينهما زاوية مقدارها 90 درجة، أي أنهما شعاعان متعامدان. هنا يمكن إيجاد جدائهما النقطي كما يلي:

u · v = | u | | v | cos 90° = | u | | v | 0.0 = 0.0‪

وبالتالي نستنتج أن الجداء النقطي للأشعة المتعامدة هو صفر، ويمكن تطبيق هذه الحقيقة على الأشعة في جميع الأبعاد.

نعني بالشعاعين المتعامدين أن بينهما زاوية مقدارها 90 درجة، ويُعَد الشعاع الصفري متعامدًا مع جميع الأشعة الأخرى، حيث أن ‎0 · v = 0.0 لجميع الأشعة v .

كشف التعامد وحساب الطول

لنفترض أن الشعاعين s و t ناتج الجداء النقطي لهما يساوي صفر، إذًا:

• ماذا يمكنك أن تقول عن المنحى النسبي Relative Orientation للشعاعين s و t؟ الشعاعان s و t متعامدان.
• ماذا يمكنك أن تقول عن طولي الشعاعين s و t؟ لا يمكنك قول أيّ شيء ممّا تعرفه عن الجداء النقطي.

إذا كان لدينا شعاعان متعامدان فيما بينهما، فسيكون جداؤها النقطي صفرًا بغض النظر عن أطوالهما، إذ يكتشف الجداء النقطي التعامد بغض النظر عن أطوال الأشعة.

ملاحظة: تعتمد إشارة الجداء النقطي لشعاعين u و v على ما إذا كانت الزاوية بينهما حادة أم منفرجة، فإذا كانت قيمة الجداء النقطي صفرًا، فستكون الأشعة متعامدة.

لنطّلع الآن على الجداء النقطي للشعاع مع نفسه:

v · v = | v | | v | cos 0 = | v | | v | 1.0 = | v |^2‪‪

وبالتالي فإن الجداء النقطي للشعاع مع نفسه يساوي مربع طوله.

‪| ‪v | = √(v · v)‪

يحسب الجداءُ النقطي الطولَ باستخدام الصيغة السابقة، وبالتالي يُعَد الجداء النقطي مفيدًا بما أن خاصيتي الشعاع هما الطول والمنحى Orientation، ولكن يمكن أن تتساءل عن إمكانية أن يكون قيمة ‎| ‎v | = √(v · v)‎ سالبة أو صفرًا. حسنًا، لا يمكن أن تكون سالبة، لأن الطول يكون دائمًا صفرًا أو قيمة موجبة، ويكون المقدار ‎| ‎v | = √(v · v)‎ صفرًا عندما يكون الشعاع v هو الشعاع الصفري.

خاصيات الجداء النقطي

سنسرد فيما يلي قائمة بخاصيات الجداء النقطي وهي:

1. ‎u · v = | u | | v | cos θ: حاصل الجداء النقطي لشعاعين
2. u · v = v · u: الخاصية التبديلية للجداء النقطي لشعاعين
3. ‎u · v = 0 : حيث u و v شعاعين متعامدين
4. 0 · 0 = 0
5. ‎| v |² = v · v‎
6. a (u·v) = (a u) · v‎
7. ‎u . (v + w ) = (u . v) + (u . w)‎
8. (v + w ) . u = (v . u) + (w . u) = (u . v) + (u . w)
9. ‎(au + bv) · w = (au) · w + (bv) · w‎: حيث a و b قيم سلمية (أعداد حقيقية)
10. ‎0 . u = 0: حيث 0 (بالخط العريض) هو الشعاع الصفري، و 0 هو عدد‫ حقيقي (مقدار سلمي)

ما هو ناتج جداء ‎u · v · w‎؟

ليس للجداء u · v · w معنىً، فإذا كان ‎u · v = a (حيث a عدد حقيقي)، فإن a · w‎ لا معنى له، وإذا كان ‎v · w = b (حيث b عدد حقيقي)، فإن ‎u · b لا معنى له، وليس للتعبير الأصلي أيّ معنًى في كلتا الحالتين.

إذًا ما هو ناتج 0‎ · u‎؟

• إذا كان "0" (بخط عادي غير عريض) عددًا حقيقيًا، فإن هذه العملية لا معنى لها.
• إذا كان "0" (بخط عريض) شعاعًا صفريًا، فالنتيجة هي 0 (عدد حقيقي أو مقدار سلمي).

الجداء النقطي للمصفوفات العمودية

يمكن استخدام الجداء النقطي أيضًا مع المصفوفات العمودية. ليكن لدينا مثلًا المصفوفتان العموديتان التاليتان:

a = ( a₁, a₂ )^T‪

b = ( b₁, b₂ )^T

فيمكننا تعريف الجداء النقطي لهما على النحو التالي:

a · b = a₁b₁ + a₂b₂

حيث نضرب العناصر المتقابلة لكل مصفوفة عمودية، ثم نجمع النواتج، وستكون نتيجة الجداء النقطي قيمة عددية (سلمية).

ملاحظة: نكتب الجداء النقطي للمصفوفات العمودية في بعض الأحيان على النحو التالي: a^T b (مع التعريف نفسه)، وسنوضّح لاحقًا هذه الصيغة الغريبة عند مناقشة ضرب المصفوفات.

أوجد ناتج الجداء النقطي للمصفوفتين العموديتين التاليتين:

a = ( 1, 2 )^T

b = ( 3, 4 )^T

والناتج هو:

a · b = 1*3 + 2*4 = 3 + 8 = 11

ولنوجد الآن حاصل جداء b · a كما يلي:

b · a = 3*1 + 4*2 = 1*3 + 2*4 = a · b

خاصيات الجداء النقطي للمصفوفات العمودية

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

لنفترض أن لدينا المصفوفتين العموديتين التاليتين:

p = ( -2, 5 )^T

q = ( 3, -1 )^T

وسيكون الجداء النقطي لهما هو:

p · q = (-2)*3 + 5*( -1) = -6 + -5 = -11‪

وإليك مثال آخر أكثر واقعية:

لنفترض أن لدينا المصفوفتين العموديتين التاليتين:

s = ( 1.082, -3.224 )^T

t = ( 2.381, 7.009 )^T

وسيكون الجداء النقطي لهما هو:

s · t = 1.082*2.381 + -3.224*7.009 = 2.576242 + -22.597016 = -20.020774‪

لاحظ أن الجداء النقطي يأخذ معاملين هما مصفوفتان عموديتان وينتج عنه قيمة عددية (سلّمية) واحدة في جميع الحالات.

الخاصية التبديلية للجداء النقطي للمصفوفات العمودية

لنوجد مثلًا الجداء النقطي للمصفوفتين ‎( -1, 3)^T‎ و ‎( 2, 4 )^T‎، ثم الجداء النقطي للمصفوفتين ‎( 2, 4 )^T‎ و ‎( -1, 3)^T‎ كما يلي:

‪( -1, 3)^T · ( 2, 4 )^T = -12 + 3*4 = -2 + 12 = 10‪

‪( 2, 4 )^T · ( -1, 3)^T = 2*(-1) + 4*3 = -2 + 12 = 10

وبالتالي نستنتج أن الجداء النقطي للمصفوفات العمودية هو عملية تبديلية:

a · b = b · a

لا يشكّل ترتيب المعاملات أيّ فرق كما هو الحال مع الجداء النقطي للأشعة، حيث يمكننا كتابة تعريف الجداء النقطي للمصفوفتين a و b في كلا الترتيبين كما يلي:

a · b = ( a₁, a₂ )^T · ( b₁, b₂ )^T = a₁b₁ + a₂b_2‪

b · a = ( b₁, b₂ )^T · ( a₁, a₂ )^T = b₁a₁ + b₂a₂ = a₁b₁ + a₂b_2‪

لاحظ أن الأشياء الموجودة بعد إِشارة المساواة "=" الأخيرة هي نفسها في الحالتين.

الجداء النقطي لأنواع المعاملات المختلطة

لنفترض أننا نريد إيجاد الجداء النقطي للمصفوفات العمودية a و b و c:

a · b · c

لكن هذه العملية لا معنى له، إذ ينتج عن الجداء النقطي لشعاعين (أو مصفوفتين عموديتين) عدد حقيقي، ولا يوجد شيء اسمه الجداء النقطي لعدد حقيقي وشعاع (أو مصفوفة عمودية)، فلا معنى للعملية التالية:

a · b · c‪ = عدد حقيقي · c

أو للعملية التالية:

a · b · c = a‪ · عدد حقيقي

لذا يجب عليك أن تتابع أنواع المعاملات والنتائج عند التعامل مع الجداء النقطي.

لكن العملية التالية لها معنًى (لاحظ أنه لا توجد نقطة بين العدد 2 والشعاع الذي يليه، وهذا يمثّل عملية تغيير الحجم أو ضرب الشعاع بعدد حقيقي Scaling، وليس الجداء النقطي):

2‪( -1, 2)^T · ( 4, 1 )^T = ( -2, 4)^T · ( 4, 1 )^T = -2*4 + 4*1 = -8 + 4 = -4

الجداء النقطي في فضاء ثلاثي الأبعاد

نعرّف الجداء النقطي لمصفوفات عمودية ثلاثية الأبعاد كما يلي، حيث نضرب العناصر المتقابلة في المصفوفتين ثم نجمع النواتج.

ليكن لدينا المصفوفتان العموديتان التاليتان:

a = ( a₁, a₂, a₃ )^T

b = ( b₁, b₂, b₃ )^T

فيمكننا تعريف الجداء النقطي لهما على النحو التالي:

a · b = a₁b₁ + a₂b₂ + a₃b₃

لكن يجب أن تحتوي المصفوفتان العموديتان على عدد العناصر نفسه كما في المثالين التاليين:

‪(1, 2, 3)^T · (6, 7, 😎^T = 1*6 + 2*7 + 3*8 = 44

‪( -1, 2, -3)^T · (1, -2, 3)^T = (-1)(1) + (2)(-2) + (-3)(3) = -1 + -4 + -9 = -14‪

ولا مانع من وجود بعض المتغيرات كعناصر للأشعة كما يلي:

‪(1, 2, 3)^T · (x, y, z)^T = x + 2y + 3z‪‪

الجداء النقطي مع شعاع صفري

جرّب إيجاد ناتج الجداء النقطي للمصفوفتين ‎( 4, 0, -3)^T‎ و ‎(0, -2, 0)^T‎ كما يلي:

‪‪( 4, 0, -3)^T · (0, -2, 0)^T = 4*0 + 0*(-2) + (-3)*0 = 0+0+0 = 0

لاحظ أن قيمة طول كل شعاع في الجداء النقطي السابق أكبر من الصفر، ولكن قيمة حاصل الجداء النقطي صفر.

إليك مثال آخر:

v(0, 0, 0)^T · (-2.3, 89.22, 0)^T = 0(-2.3) + 0(89.22) + 0(0) = 0‪

ولا يُعَد ذلك مفاجأة، إذ رأينا الخاصية التالية نفسها مع الأشعة الهندسية:

0‪ · a = 0‪

لاحظ أن 0 الأول هو المصفوفة العمودية الصفرية، والصفر الأخير هو العدد الحقيقي صفر، ويمكن أيضًا كتابة ما يلي:

0‪ · 0 = ‪0

تعني المصفوفة العمودية الصفرية في كل من هذه المعادلات مصفوفة عمودية لها بُعد المصفوفة العمودية الأخرى نفسه، وكل عنصر فيها هو العدد الحقيقي صفر.

ناتج الجداء النقطي هو جميع القيم الحقيقية الممكنة

أوجد ناتج الجداء النقطي للمصفوفتين ‎(-2, 5, -6)^T‎ و ‎( 1, 2, 3)^T‎:

v(-2, 5, -6)^T · ( 1, 2, 3)^T = (-2)*1 + 5*2 + (-6)*3 = -2 + 10 -18 = -10

لاحظ أن الجواب هو عدد حقيقي سالب، إذ ينتج عن الجداء النقطي جميع أنواع القيم الحقيقية: سالبة وصفر وموجبة، ولكن هناك شيء مهم يحدث عند إجراء عملية الجداء النقطي للشعاع مع نفسه، وهذا ما سنوضّحه في الفقرة التالية.

ناتج الجداء النقطي للمصفوفة العمودية مع نفسها هو قيمة موجبة أو صفرية

لنوجد مثلًا الجداء النقطي للشعاع ‎(1, -3)^T‎ مع نفسه كما يلي:

v(1, -3)^T · (1, -3)^T = (1)(1) + (-3)(-3) = 1 + 9 = 10

يكون ناتج الجداء النقطي للمصفوفة العمودية مع نفسها موجبًا دائمًا كما هو الحال مع الأشعة.

‪(x, y, z)^T · (x, y, z)^T = x² + y² + z² = قيمة موجبة أو صفرية

سيكون مربع x و y و z صفرًا أو أكبر من الصفر بغض النظر عن قيمها، وبالتالي سيكون المجموع صفرًا أو أكبر من الصفر، ولكن المرة الوحيدة التي يكون فيها مربع العدد الحقيقي صفرًا هي عندما يكون هذا العدد الحقيقي صفرًا، لذا فالمرة الوحيدة التي يكون فيها حاصل الجداء النقطي لمصفوفة عمودية مع نفسها صفرًا هي عندما تكون المصفوفة العمودية مصفوفة صفرية.

ليكن g شعاعًا ثلاثيّ الأبعاد، فأوجد قيم عناصر هذا الشعاع من خلال حل المعادلة التالية:

g · g = 0‪‪

نلاحظ أنه يجب أن يكون كل عنصر من عناصر الشعاع g صفرًا من خلال المناقشة السابقة، لذا:

g = 0 = (0, 0, 0)^T‪

قابلية توزيع الجداء النقطي على الجمع

يمكن توزيع الجداء النقطي على عملية الجمع كما يلي:

a · (b + c) = a · b + a · c‪

يبدو هذا جيدًا، ولكن كن حذرًا في تحديد ما تعنيه إشارة "+" على جانبي إشارة المساواة "=".

1. تمثّل إشارة "+" في الجانب الأيسر من المعادلة عملية جمع الأشعة.
2. تمثّل إشارة "+" في الجانب الأيمن من المعادلة عملية جمع الأعداد الحقيقية.

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

إذًا لنبرهن أن ‎a · (b + c) = a · b + a · c‎.

ليكن لدينا المصفوفات العمودية التالية:

a = (f, g, h)^T

b = (r, s, t)^T

c = (x, y, z)^T

نبدأ بالطرف الأيسر:

a · (b + c) = a · ( r+x, s+y, t+z )^T = f(r+x) + g(s+y) + h(t+z) = fr + fx + gs + gy + ht + hz‪

ثم بالطرف الأيمن:

a · b + a · c = (fr + gs + ht) + (fx + gy + hz) = fr + fx + gs + gy + ht + hz‪

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

تدريب عملي

أوجد ناتج الجداء النقطي التالي:

v( -2, 1, 2)^T · ( (3, -1, 4)^T + ( -2, 1, -2)^T )

قد يكون من الأسهل عدم إعادة ترتيب التعبير، بل يُفضَّل إجراء عملية جمع الأشعة أولًا كما يلي:

‪( -2, 1, 2)^T · ( (3, -1, 4)^T + ( -2, 1, -2)^T ) = ( -2, 1, 2)^T · (1, 0, 2)^T = -2*1 + 1*0 + 2*2 = -2 + 4 = 2

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

‪( -2, 0, 2)^T · ( (1, -1, 1)^T + ( 3, 1, 4)^T ) = ( -2, 0, 2)^T · (1, -1, 1)^T + ( -2, 0, 2)^T · ( 3, 1, 4)^T = 0 + 2 = 2

خاتمة

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

ترجمة -وبتصرُّف- للفصل The Dot Product من كتاب Vector Math for 3D Computer Graphics لصاحبه Bradley Kjell.

اقرأ أيضًا

• المقال السابق: تغيير حجم شعاع Scaling في التصاميم ثلاثية الأبعاد 3D
• خاصية الاتجاه Direction للأشعة الهندسية في التصاميم ثلاثية الأبعاد
• خاصية الطول Length للأشعة الهندسية في التصاميم ثلاثية الأبعاد

سنناقش في هذا المقال كيفية جداء الشعاع مععدد حقيقي، حيث تُسمَّى هذه العملية بتغيير الحجم Scaling، وكيفية استخدامها لبناء أشعة الوحدة Unit Vectors التي تُستخدَم لإظهار الاتجاه في الفضاء ثلاثي الأبعاد، وهي ضرورية للرسوميات الحاسوبية ثلاثية الأبعاد.

سنوضح في هذا المقال المواضيع التالية:

• تغيير حجم الشعاع Scaling وخاصياته.
• معامل تغيير الحجم Scalar.
• مساواة العناصر المتقابلة في جبر الأشعة.
• أشعة الوحدة.
• توحيد Normalizing الأشعة.
• منحى Orientation شعاع الوحدة.
• المتغيرات في المعادلات الشعاعية.

جداء الشعاع مع عدد حقيقي (تغيير حجم الشعاع Scaling)

جرّب معرفة كيفية تعديل عناصر مصفوفة العمودية ‎(3, 4)^T‎ بحيث يكون طول الشعاع الذي تمثله ضعف طوله الحالي ويبقى الشعاع يؤشّر إلى الاتجاه نفسه، إذ يمكنك التوصل إلى الإجابة الصحيحة بعناية باستخدام ما تعرفه مسبقًا، أو يمكنك التخمين ثم التحقق من صحة تخمينك كما يلي:

2 × (3, 4)‪^T = (6, 😎^T

لنرى إن كان تخمينك صحيحًا كما يلي:

• (الطول الجديد)‎²‎ =‏ 6²‏ + 8² ‏= 2²‏ 3² ‏+ 2²‏ 4² ‏= 2²‏ (3² + ‏4²) =‏ 2² × (الطول القديم)‎²‎.
• إذًا بأخذ الجذر للطرفين: (الطول الجديد) = 2 × (الطول القديم)
• ويكون الاتجاه نفسه باستخدام المثلثات المتشابهة، أو يمكنك ملاحظة أن:

الاتجاه الجديد = arc tan( 8/6 )‎ ‏= arc tan( 4/3 )‎ = الاتجاه القديم

وبالتالي يبدو تخمينك صحيحًا.

ملاحظة: يُطلَق على العدد الحقيقي أحيانًا اسم معامل تغيير الحجم (مقدار سلمي) Scalar عند الحديث عن الأشعة.

تعني عملية تغيير حجم Scaling الشعاع الهندسي إبقاءَ منحاه Orientation كما هو مع تغيير طوله باستخدام معامل تغيير حجم، إذ تشبه هذه العملية تغيير حجم الصورة، حيث تتوسّع أو تتقلّص الكائنات مع بقاء اتجاهاتها كما كانت سابقًا.

إذا كان الشعاع مُمثَّلًا بمصفوفة عمودية ‎(x, y)^T‎، فسيؤدي تغيير حجمه وفق عدد معين إلى جداء كل عنصر فيها بهذا العدد كما يلي:

a(x, y)^T = (ax, ay)^T

ينطبق ذلك أيضًا على الأشعة ثلاثية الأبعاد، فإذا مثّلنا الشعاع v بالمصفوفة العمودية ‎(x, y, z)^T‎، فسيكون تمثيل av‎ بالمصفوفة العمودية ‎(ax, ay, az)^T‎.

أوجد ناتج ‎0.5×‎(36.4, -18.9)^T‎:

0.5×‎(36.4, -18.9)^T = (0.5×36.4, 0.5× -18.9)^T = ( 18.2, -9.45)^T

بعض خاصيات عملية تغيير حجم شعاع

هناك العديد من خاصيات تغيير حجم الشعاع التي سنوضّحها فيما يلي.

الشعاع الذي تغير حجمه هو شعاع أيضا

إذا كان v شعاعًا، فإن:

• ‎-1 ‎v = -v
• 0‎ v = 0

لاحظ أنه يجب توخي الدقة في العبارتين السابقتين، حيث:

• ‎-1 v = -v: عدد حقيقي * شعاع = شعاع
• 0‎ v = 0: عدد حقيقي * شعاع = شعاع

نتيجة تغيير حجم شعاع هي شعاع أيضًا، ولاحظ أن 0 بالخط العريض هو شعاع تمثله المصفوفة العمودية ‎(0,0,0)^T‎، وليس العدد الحقيقي صفر.

التعابير ذات الأنواع المختلطة

أوجد ناتج 2‎ + 4‎( 3, 2, 5)^T‎:

لا يُعَد هذا التعبير صحيحًا، إذ لا يوجد معامل جمع + يطبّق العملية: عدد حقيقي + شعاع

لذا من المفيد استخدام الأقواس لإظهار ما تعنيه بالضبط في التعابير التي تحتوي على أنواع ومعاملات مختلطة كما يلي:

‎(2 + 1)(3, -5)^T + 4(1, 2)^T

يمثّل المعامل + الأول عملية جمع لأعداد حقيقية (مقادير سلمية)، ويمثّل المعامل + الثاني عملية جمع لمصفوفات عمودية، لذا يجب تنفيذ العمليات كما يلي:

‎(2 + 1)(3, -5)^T + 4(1, 2)^T = 3(3, -5)^T + 4(1, 2)^T = (3×3, 3× -5)^T + (4×1, 4×2)^T = (9, -15)^T + (4, 😎^T = (13, -7)^T

لا يُعَد تطبيق ذلك سيئًا كما يبدو، فما عليك إلّا تتبّع كل معامل وأنواع معامَلاته ونوع نتيجته.

لنوجد الآن ناتج ‎-1 (1, 2, -3)^T - (2 + 1)(1, 0, 1)^T‎:

‎-1 (1, 2, -3)^T - (2 + 1)(1, 0, 1)^T = ( -1, -2, 3)^T - 3(1, 0, 1)^T = ( -1, -2, 3)^T + (-3, 0, -3)T = (-4, -2, 0 )^T

جبر الأشعة

إذا كان هناك عنصر مجهول أو اثنان في التعبير الذي يحتوي أنواع عمليات مختلطة، فيمكنك استخدام الجبر بالطريقة المعتادة للحل، ولكن كن حذرًا من أنّ كل خطوة تطبّقها تعطي تعبيرًا صالحًا. حل ما يلي مثلًا من أجل a و y:

a(1, y)^T + 2(0, 5 )^T = (2, 20)^T

قد تقول أنه لا يمكن ذلك بسبب وجود مجهولين (a و y) مع معادلة واحدة فقط، ولكن:

a(1, y)^T + 2(0, 5)^T = (2, 20)^T

‎(a, ay)^T + (0, 10)^T = (2, 20)^T

‎(a, ay+10)^T = (2, 20)^T

يجب أن تكون العناصر المتقابلة متساوية، لذا:

a = 2

ay + 10 = 20

2y = 10

y = 5

تُعَد هذه الخدعة شائعة وتسمى مساواة العناصر المتقابلة Equating Corresponding Elements.

مساواة العناصر المتقابلة

لنوجد قيمة x و y فيما يلي:

4‎( -1, y)^T + 2( 3x, 10)^T = (8, 24)^T

4‎( -1, y)^T + 2( 3x, 10)^T = (8, 24)^T ( -4, 4y)^T + ( 6x, 20)^T = (8, 24)^T (6x-4, 4y+20)^T = (8, 24)^T

6x-4 = 8 4y+20 = 24

6x = 12 x = 2

4y = 4 y = 1

تعني الإشارةُ "=" في المعادلة الأصلية معادلةً شعاعية، بينما تؤدي مساواة العناصر المتقابلة إلى الحصول على معادلتين، حيث تعني الإشارةُ "=" معادلة عددية أو معادلة أعداد حقيقية.

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

إليك مثلًا حالة لا تنجح فيها هذه الطريقة:

أوجد قيمة x و y :

4‎(x, 5)^T + 2(y, 1)^T = 2(12, 11)^T

قد يبدو كل شيء جيدًا، ولكن يكشف تطبيق بعض الخطوات عن وجود مشكلة كما يلي:

4‎( x, 5)^T + 2( y, 1)^T = 2(12, 11)^T

‎(4x, 20)^T + (2y, 2)^T = (24, 22)^T

‎(4x+2y, 22 )^T = (24, 22)^T

4x + 2y = 24

22 = 22

لا تحتوي المعادلتان العدديتان اللتان تحصل عليهما من خلال مساواة العناصر المتقابلة على معلومات كافية للمتابعة.

لنوجِد الآن قيمة a و x :

a( -1, 5 )^T + 2( 3x, 10 )^T = ( 8, 25 )^T

يمكن أن نخمن أنه يمكننا إيجاد قيمة a و x كما يلي:

a( -1, 5 )^T + 2( 3x, 10 )^T = ( 8, 25 )^T ( -a, 5a)^T + ( 6x, 20 )^T = ( 8, 25 )^T ( 6x-a, 5a+20 )^T = ( 8, 25 )^T

ولنستخدم الآن مساواة العناصر المتقابلة:

6x-a  =  8
5a+20 = 25
5a = 5
a = 1

6x-1  = 8
6x  = 9
x = 9/6 
x = 3/2

تغيير حجم شعاع باستخدام قيم أصغر من واحد

نعلم من تعريف عملية تغيير حجم شعاع أنه:

a( x, y )^T = ( ax, ay )^T

فلا بأس إن كان a أصغر من واحد، فمثلًا:

0.5‎( x, y )^T = ( 0.5x, 0.5y )^T

يمكن كتابة ذلك في بعض الأحيان على النحو التالي:

شعاع الوحدة

اقتباس

تذكير: ما هو طول الشعاع ‎(1,0)^T‎؟ طوله يساوي 1.0.

يبلغ طول الشعاع 1 لأنه محاذٍ للمحور x (في إطار الإحداثيات الحالي)، فالعنصر الوحيد غير الصفري هو 1.0 عند تمثيله بمصفوفة عمودية، ولكن يمكن أيضًا أن يساوي طول الأشعة غير المحاذية لأيّ محور واحدًا، وبالتالي فإن شعاع الوحدة Unit Vector هو شعاع طوله 1.

هل يمثل ‎(1, 1, 1)^T‎ شعاع وحدة؟ لا، لا يمثل شعاع وحدة لأن طوله لا يساوي 1:

‎√( 1² + 1² + 1² ) = √3 = 1.7320508

إنشاء أشعة الوحدة

يبلغ طول أشعة الوحدة 1، وإذا كان لديك شعاع معين v، فيمكنك استخدامه لإنشاء شعاع وحدة، وتسمى هذه العملية بتوحيد الأشعة Normalizing التي تُطبَّق كما يلي:

• احسب طول الشعاع v وهو | v |.
• غيّر حجم الشعاع v من خلال تقسيمه على طوله: ‎.v / | v |‎

تُكتَب هذه العملية في كثير من الأحيان بالصيغة التالية (يعني الحرف "u" المنخفض "شعاعَ وحدة Unit Vector"):

v_u = v / | v |‎

إذا كان ‎v = (x, y, z)^T‎، فإن:

v_u = v / | v | = ( x /| v |, y /| v |, z /| v | )^T

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

جرب توحيد الشعاع ‎(3, 4)^T‎ كما يلي:

الشعاع هو الوتر في المثلث القائم 3-4-5، وبالتالي فإن طوله هو 5، وشعاع الوحدة هو:

1/5‎ × (3,4)^T = (3/5, 4/5)^T = (0.6, 0.8)^T

اتجاه شعاع الوحدة

تؤدي عملية تغيير الحجم إلى تغيير طول الشعاع دون تغيير اتجاهه، حيث إذا كان ‎v_u‎ هو شعاع الوحدة المقابل للشعاع v، فإن الشعاعين ‎v_u‎ و v لهما المنحى نفسه.

قد يبدو ذلك مفهومًا، ولكن لنوضّحه أكثر:

• ابدأ بالشعاع ‎v = (3, 4)^T‎.
• أنشئ شعاع الوحدة ‎v_u = (3/5, 4/5)^T‎.
• اتجاه الشعاع v هو arc tan( 4/3 )‎.
• اتجاه ‎v_u‎ هو:

arc tan( (4/5) / (3/5) ) = arc tan( (4/5) × (5/3) ) = arc tan( 4/3 )

يمكننا إنشاء شعاع وحدة له اتجاه الشعاع ‎w = (4, 6)^T‎ نفسه مثلًا كما يلي:

‎| ‎w | = √(16 + 36) = √52

w_u = (4, 6)^T / ( √52)

ولنتأكد الآن من صحة الإجابة:

‎| w_u |^T = (4^T + 6^T) / ( √52)^T = (16 + 36)/52 = 52/52 =1.0

‎| w_u | = 1.0

يؤشّر شعاع الوحدة المتشكّل من شعاع ثلاثي الأبعاد إلى اتجاه الشعاع الأصلي نفسه أيضًا، إذًا لنجرّب مثلًا توحيد الشعاع ‎g = (-3, 4, -1)^T‎:

‎| g | = √(9 + 16 + 1 ) = √26

g_u = (-3, 4, -1)^T / (√26)

الاتجاه المعاكس

يمثل ‎(1, 1)^T / (√2)‎ شعاعَ وحدة له منحى مقداره 45 درجة، وطوله ‎√‎( 1²/2 + 1²/2 ) = 1، وزاويته مقدارها arctan(1/1)‎ =‫ 45 درجة، ولكن يمكنك إنشاء شعاع وحدة يؤشّر في الاتجاه المعاكس لهذا الشعاع من خلال أخذ معاكس كل مكوّن من مكوناته كما يلي:

‎-( 1, 1)^T / (√2) = (-1, -1)^T / (√2)

تدريب:

أنشئ شعاع وحدة يؤشّر إلى الاتجاه المعاكس للشعاع ‎(3, 0, 2)^T‎:

• طول الشعاع = ‎√(9+4)‎ ‫= ‎√13
• شعاع الوحدة في الاتجاه الأول = ‎(3, 0, 2)^T / ( √13)‎
• شعاع الوحدة في الاتجاه المعاكس = ‎( -3, 0, -2)^T / ( √13)‎

بهذا نكون قد وصلنا إلى نهاية هذا المقال الذي تعرّفنا فيه على مفهوم تغيير حجم الأشعة وشعاع الوحدة، وسنناقش في المقال التالي الجداء النقطي Dot Product لشعاعين في التصاميم ثلاثية الأبعاد.

ترجمة -وبتصرُّف- للفصل Scaling and Unit Vectors من كتاب Vector Math for 3D Computer Graphics لصاحبه Bradley Kjell.

اقرأ أيضًا

• المقال السابق: خاصية الاتجاه Direction للأشعة الهندسية في التصاميم ثلاثية الأبعاد
• الأشعة والنقاط والمصفوفات العمودية في الرسوميات الحاسوبية ثلاثية الأبعاد
• التعرف على النقاط والخطوط في الرسوميات الحاسوبية ثلاثية الأبعاد
• كيفية جمع الأشعة الهندسية للتصاميم ثلاثية الأبعاد

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

إذًا ما هي بالضبط سهولة الوصول لموقع الويب؟

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

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

لماذا يجب أن تهتم بسهولة الوصول؟

هناك العديد من الأسباب التي تجعل المطورين والمصممين وأصحاب العمل/ العملاء يولون اهتمامًا لسهولة الوصول لضمان أنها تشكل جزءًا مبكرًا ومتكاملًا من عملية تطوير الويب، ومن ضمن تلك الأسباب ما يلي:

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

الأخطاء الأكثر شيوعا في أهم مليون صفحة رئيسية

بعد دراسة العوائق الرئيسية التي تواجه مواقع التجارة الإلكترونية التي أُبلِغ عنها من قِبَل المستخدمين الذين يواجهون بعض الصعوبات، بالإضافة إلى مجموعة كبيرة من المواقع (وهي الصفحات الرئيسية لأفضل مليون موقع) التي حُلِّلَت تلقائيًا بواسطة WebAIM في أغسطس 2019، تبين أن 98٪ من تلك الصفحات المُحللة تحتوي على خطأ واحد على الأقل. ومن بين تلك الأخطاء الأكثر شيوعًا ما يلي:

1. نص منخفض التباين (86.1٪).
2. نص بديل مفقود للصور (67.9٪).
3. روابط فارغة (58.9٪).
4. تسميات إدخال النموذج مفقودة (53.2٪).
5. لغة المستند المفقودة (30.5٪).

سنتعرف فيما يلي على كيفية تجنب الأخطاء الشائعة الأخرى.

كيفية تحسين سهولة الوصول إلى موقع الويب - أفضل 15 ممارسة

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

1. الكثير من المحتوى

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

• استخدام عنوان رئيسي واحد فقط <h1> على الصفحة.
• استخدام العناوين الفرعية بحرية لكسر "الرتابة" في النَص وتسهيل قراءة المحتوى للمستخدمين المبصرين؛ بينما يمكن لمستخدمي التقنيات المساعدة مثل قارئات الشاشة استخدام مفاتيح مختصرة للانتقال بين العناوين، أو الحصول على خريطة ذهنية للمحتوى من خلال ترتيب العناوين.
• الحفاظ على تسلسل العناوين عند استخدام العناوين الفرعية، يجب التأكد من أنها تتبع تسلسل صحيح. على سبيل المثال، إذا كنت تستخدم العنوان الفرعي <h3>، فتأكد من أنه مسبوق بالعنوان الفرعي <h2>.
• استخدام القوائم ذات التعداد النقطي التي كُتبت شيفرتها بطريقة صحيحة في HTML بهذا الشكل <ul> ،<li> لتوضيح قوائم المحتوى، فهذا يتيح لبرامج قراءة الشاشة إعلام المستخدمين بوجود "قائمة تحتوي على 10 عناصر" ويسمح لهم بالانتقال خلالها أو تخطيها بسهولة.

استخدام اللغة البسيطة

يسلط دليل Our tone of voice الذي أصدره بنك مونزو الضوء على أهمية استخدام اللغة الواضحة، يمكن تلخيصه فيما يلي:

• في عام 2010، أجرى المحامي الأمريكي شون فلامر تجربة حيث طلب من 800 قاضي محكمة أن يقفوا إلى جانب حجة قانونية تقليدية أو إلى جانب نسخة بلغة إنجليزية بسيطة.
• فَضَّل الحكام بالغالبية العظمى النسخة البسيطة من اللغة الإنجليزية بنسبة 66٪ مقابل 34٪، وكان هذا التفضيل ساريًا بغض النظر عن أعمارهم أو خلفياتهم.

وفي ملاحظات فلامر عن النسخة البسيطة من اللغة الإنجليزية لوحِظ ما يلي:

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

اقتباس

باختصار: قسّم النَص إلى أقسام تحتوي على عناوين وقوائم ذات تعداد نقطي، واستخدم لغة بسيطة.

2. اختبار ReCAPTCHA

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

لحسن الحظ، أصبح نمط الحروف المتذبذبة لـ reCAPTCHA مهملاً الآن.

أما في الوقت الحالي، يُعَد النمط الأكثر شيوعًا هو "No CAPTCHA reCAPTCHA" والمعروف أيضًا باسم مربع الاختيار "أنا لست روبوتًا"، إذ يُطلب من المستخدمين تحديد مربع يؤكد أنهم ليسوا روبوتًا، فإذا نجحوا في تجاوزه فلن تكون هناك حاجة لأي تفاعل إضافي؛ أما إذا فشلوا في تجاوزه، فسوف يُعرض لهم تحدي جديد.

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

يُعَد اختبار reCAPTCHA v3 واجهة برمجة تطبيقات مبنية بالكامل بلغة البرمجة JavaScript، إذ تُرجع نتيجةً تمكّنك من اتخاذ إجراءات في سياق موقعك، ومن بين تلك الإجراءات الممكنة: طلب عوامل مصادقة إضافية، أو إرسال إشعار للمشرف، أو تقييد أنشطة الروبوتات التي قد تنفذ عملية Scraping أو سحب للمحتوى؛ فباستخدام اختبار reCAPTCHA v3، يمكنك تعزيز مستوى الحماية وتعزيز التحقق من الهوية في موقعك دون أن تتسبب في إزعاج المستخدمين أو طلب إجراءات معقدة.

اقتباس

باختصار: لا تُجبر المستخدمين على تنفيذ أعمال معقدة أو صعبة من أجل توفير وقت المطور.

3. الافتقار للمقروئية

كي تتماشى الفقرات مع بعضها البعض، يجب اتباع بعض الممارسات لجعل النص سهل القراءة.

• يجب ضمان تباين كافٍ بين النص والخلفية، إذ يُعَد سوء التباين واحدًا من أكبر عوائق الوصول على الويب، لذلك تتطلب توجيهات منظمة W3C نسبة تباين لا تقل عن 4.5:1، باستثناء النصوص ذات الحجم الكبير والصور التي تحتوي على نصوص ذات حجم كبير، والتي يجب أن تكون لها نسبة تباين لا تقل عن 3:1 (باستثناء الشعارات والنصوص "المحضة")، ويتوفر العديد من الأدوات التي يمكن استخدامها لقياس نسب التباين، مثل أداة قياس التباين التي طورتها Ada Rose Cannon.
• في حال كان المحتوى باللغة الإنجليزية، يجب عليك تجنب استخدام الأحرف الكبيرة لكتابة العناوين بالكامل، إذ هناك أدلة تشير إلى أنها أكثر صعوبةً في القراءة نظرًا لصعوبة تمييز شكل الأحرف والكلمات المشتركة عندما تكون الأحرف الكبيرة بنفس الارتفاع. بالإضافة إلى ذلك، قد يتهجى بعض قُراء الشاشة الأحرف الكبيرة كما لو كانت اختصارات، فإذا كنت بحاجة لاستخدام الأحرف الكبيرة في العناوين، يُفضل كتابتها بالأحرف الصغيرة في HTML ثم تحويلها إلى أحرف كبيرة باستخدام CSS من خلال هذه الشيفرة text-transform: uppercase.
• يجب محاذاة النص إلى اليمين (أو اليسار في حالة اللغات الأجنبية) وتجنب عمل Justify أو تمليس للنص، مما يجعل القراءة أكثر صعوبةً بالنسبة للأشخاص ذوي الصعوبات في القراءة، مثل عسر القراءة، لذلك يوصي دليل أسلوب الجمعية البريطانية لعسر القراءة باستخدام خطوط بدون سواريف، مثل: Arial و Comic Sans، إذ تظهر الحروف بشكل أقل كثافة. مع ذلك يمكن الاستعانة بخطوط بديلة، مثل: Verdana و Tahoma و Century Gothic و Trebuchet و Calibri و Open Sans.

اقتباس

باختصار: تأكد من أن النَص لديه تباين كافٍ، وأنه قابل للقراءة، مع عدم تمليسه أو تسويته.

4. الصور والرسومات المُشتتة

يتطلب المستوى الأساسي لإرشادات الوصول إلى محتوى الويب WCAG لأي معلومات تتحرك أو تومض أو تمرر وتحتوي على ما يلي:

1. تبدأ تلقائيًا.
2. تستمر لأكثر من خمس ثوانٍ.
3. تُعرض جنبًا إلى جنب مع محتوى آخر. في هذه الحالة يجب توفير آلية تتيح للمستخدم إيقافها مؤقتًا، أو إيقاف تشغيلها، أو إخفائها، ما لم يكن الحركة أو الوميض أو التمرير جزءًا من نشاط ضروري، فالتشتيت يُعد أمرًا مزعجًا، خاصةً بالنسبة للأشخاص الذين يعانون من اضطراب نقص الانتباه وفرط الحركة ADHD أو مشاكل التفكير الأخرى، ونظرًا لأن الحركة والوميض قد يسببان نوبات صرع، فحسب إرشادات الوصول إلى محتوى الويب WCAG، أن يجب ألا يومض المحتوى أكثر من ثلاث مرات خلال فترة زمنية تدوم لمدة ثانية واحدة.

احترام اختيار المستخدم بشأن الرسوم المتحركة

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

@media (prefers-reduced-motion: no-preference) {
  button {
    /* `vibrate` keyframes are defined elsewhere */
    animation: vibrate 0.3s linear infinite both;
  }
}

وفي حال كنت تبحث عن تعديل موقع يحتوي على العديد من قواعد الرسوم المتحركة، فقد يؤدي ما يلي إلى إيقاف جميع رسوم CSS المتحركة المعلنة مسبقًا:

@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
  animation-duration: 0.001s !important;
  transition-duration: 0.001s !important;
  scroll-behavior: auto !important;
  }
}

كما يسمح لنا عنصر HTML للصورة picture element بعرض صورة ثابتة بدلًا من صورة متحركة GIF للمستخدمين الذين يعبرون عن تفضيل تقليل الحركة.

<picture>
  <source srcset="no-motion.jpg" media="(prefers-reduced-motion: reduce)"> 
  <img srcset="animated.gif" alt="brick wall">
</picture>

أيضًا، فيما يتعلق بموضوع احترام تفضيلات نظام التشغيل للمستخدم، قد ترغب في التفكير في تصميم موقع الويب الخاص بك للوضع المظلم.

اقتباس

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

5. معلومات غير كافية حول الروابط

غالبًا ما يكون أحد أسباب ضعف المعلومات المتعلقة بالروابط ناتجًا عن سوء كتابة النص، فمعظم قارئات الشاشة تسمح للمستخدم بعرض قائمة سريعة للروابط الموجودة في الصفحة، إذ يمكن استخدام اختصار لوحة المفاتيح Ins + F7 لعرض قائمة سريعة للروابط في قارئات الشاشة التجارية الشهيرة JAWS، أما في قارئ الشاشة NVDA المجاني فيمكن عرض قائمة الروابط والعناوين والعلامات بنفس اختصار لوحة المفاتيح.

ومع ذلك، إذا كان كل رابط يحتوي على نص يقول "انقر هنا" أو "اقرأ المزيد"، دون وجود أي عنصر آخر يمكن تمييز الرابط به، فإن هذا لا يوفر الفائدة المطلوبة. وأحد الطرائق السهلة لحل هذه المشكلة هو ببساطة كتابة نصوص فريدة للروابط؛ وإذا لم يكن ذلك ممكنًا، فيمكن استخدام السمة aria-label الفريدة على كل رابط لتجاوز النص المرئي للتقنيات المساعدة.

وإليك مثال جيد من موقع جوملا يوضح ذلك.

ففي المثال السابق سوف تلاحظ أن نص الرابط المرئي ببساطة هو "اقرأ المزيد"، ولكن Joomla تستخدم السمة aria-label لجعل كل رابط فريدًا بالنسبة للتقنيات المساعدة.

<a href="joomla-group-2-president-election-results.html" 
  aria-label="Read more: Joomla Group 2 - President election results">Read more</a>

<a href="forum-for-the-future-re-engage-re-ignite-stream.html"
  aria-label="Read more: Forum for the Future: Re-Engage &amp; Re-Ignite Stream">Read more</a>

ونظرًا لأن النص الموجود في السمة aria-label سوف يُستخدم عوض نص الرابط بواسطة التقنيات المساعدة، توصي W3C ببدء النص المستخدم في السمة aria-label بالنص المستخدم داخل الرابط، حيث "سيتيح ذلك بالتواصل المتسق بين المستخدمين".

اقتباس

تنويه: لا يوصى بإضافة نص توضيحي إلى الروابط باستخدام السمة title.

<a href="results.html" title="click here to read more about the election results">Read more></a>

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

ينبغي أن تُعرَض الروابط على هيئة روابط

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

a:hover, a:focus {text-decoration: underline;}

فعندما يركز المستخدم على الرابط باستخدام وسائل أخرى غير الفأرة، مثل: لوحة المفاتيح أو القلم الضوئي أو الإدخال الصوتي، فسيُطبق نمط التركيز Focus Style لجعل الرابط يظهر بخط تحتي أو مُسَطَّر، وبوجهٍ عام ينبغي تطبيق تأثير التحويم Hover Style في أي مكان على الصفحة. كما يجب أيضًا تطبيق تأثير التركيز Focus Style.

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

أخبر الزوار إذا كان الرابط يفتح في علامة تبويب/ صفحة جديدة

يمكن أن يسبب فتح رابط في علامة تبويب أو نافذة جديدة للزائر بعض الارتباك، خاصةً إذا كان هذا النمط مقتصرًا على بعض الروابط فقط في الصفحة مثل: فتح الروابط الخارجية في علامة تبويب جديدة، وفي حالة وجود هذا النمط بموقعك الإلكتروني، يجب أن تنبه المستخدم إما من خلال نَص الرابط نفسه أو باستخدام السمة aria-label كما بالمثال التالي:

<a href="عنوان الرابط" aria-label="فتح الرابط في علامة تبويب جديدة" target="_blank">النص الخاص بالرابط</a>

أخبر الزوار إذا كان الرابط يؤدي إلى ملف

إذا كان الرابط يؤدي إلى ملف (مثل ملف PDF أو فيديو)، فمن الضروري إبلاغ الزوار بذلك عن طريق وضع تنبيه في نَص الرابط نفسه من خلال السمة aria-label؛ فعدم إخفاء هذه المعلومة قد يكون مفيدًا أيضًا للعديد من المستخدمين القادرين على الرؤية. على سبيل المثال، بعض الهواتف المحمولة قد لا تدعم فتح ملف بصيغة "docx."، وفي حالة إذا كان الملف كبيرًا، فمن الجيد أن تفكّر في إبلاغ المستخدم بالحجم التقريبي له، فقد يُفضل بعض المستخدمين عدم تنزيل ملف فيديو ضخم عبر شبكة الجيل الثالث (3G).

ولتنفيذ ذلك يمكنك استخدام السمة download، والتي تتسبب في فتح مربع حوار نظام التشغيل لتنزيل الملف في المتصفح، وبوضع كل ذلك معًا، ستبدو الشيفرة البرمجية كما يلي:

<a href="big-report.pdf" download>Annual report (PDF, 240 MB)</a>

اقتباس

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

6. خطأ آخر في التصميم: إزالة حلقة التركيز

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

ولحل هذه المشكلة، قُدِّمَت سمة جديدة تُسمى focus-visible: التي قَدَّم متصفح فايرفوكس الدعم الأول لها. تُضيف هذه السمة تأثير تركيز على العنصر عند الوصول إليه باستخدام لوحة المفاتيح أو جهاز تأشير غير الفأرة، بينما لا يظهر أي شيء للمستخدمين الذين يستخدمون الفأرة للتأشير. ونظرًا لاحتمالية عدم دعم المتصفح الذي تستخدمه لتلك السمة، يقترح علينا باتريك لاوكي استخدام شيفرة CSS التالية للتعامل بشكل جيد مع جميع المتصفحات:

button:focus { /* some exciting button focus styles */ }
button:focus:not(:focus-visible) {
  /* undo all the above focused button styles
  if the button has focus but the browser wouldn't normally
  show default focus styles */
  }
button:focus-visible { /* some even *more* exciting button focus styles */ }

اقتباس

باختصار: تأكد من أن المستخدمين الذين يستخدمون لوحة المفاتيح يمكنهم دائمًا رؤية المكان المُرَكَّز عليه حاليًا.

7. ملء النموذج

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

الملء التلقائي هو صديقك

تتيح إمكانية تعبئة النماذج تلقائيًا Autofill في المتصفحات للزوار بتنفيذ مهام أقل، مما يزيد من احتمالية استكمال النموذج وإتمام عملية التسجيل أو الشراء لمنتجك، وبهذا الصدد توجد مقالة رائعة بعنوان "Autofill on Browsers: A Deep Dive" مُقدَّمة من eBay تتحدث بأسلوب مفصل عن هذا الموضوع (ويجب التنويه عنها ليتعرف عليها الجميع).

علاوةً على ذلك، تُعد التكملة التلقائية Autocomplete الطريقة الأمثل المعتمدة حاليًا لتحقيق امتثال AA لمعيار النجاح 1.3.5: تحديد غرض المدخلات.

جعل حقول النماذج تبدو كحقول النماذج

افتراضيًا، تظهر حقول إدخال النماذج على شكل مربعات في المتصفحات، ويمكن تنسيقها باستخدام الهوامش والحواف والجوانب، ولكن يُفضل الاحتفاظ بها كمربعات، ففي الماضي اتبع العديد من المصممين نمط تصميم Material Design السابق لشركة جوجل قبل عام 2017، وهو تصميم يستخدم خطًا واحدًا لإدخال النص من قِبَل المستخدم.

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

وفي اختبارات استخدامية مع مشاركة 600 شخص، اتضح أن الحقول المحاطة بشكل مربع أداءها أفضل من تلك التي تحتوي على خط؛ فإذا كنت تفكر في استخدام مكتبة تصميم واجهة المستخدم الكاملة لـ Material Design المقدمة من جوجل، فينصح بقراءة المقالة "Stop using Material Design text fields!" لمعرفة ما إذا كانت تلبي احتياجاتك.

ضع تسمية على جميع حقول النموذج

يجب وضع تسمية على جميع حقول النموذج، بما في ذلك:

• إدخالات النص
• مربعات الاختيار
• أزرار الاختيار
• أشرطة التمرير
• وما إلى ذلك

وأفضل طريقة لفعل ذلك هي استخدام العنصر <label> بلغة HTML.

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

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

<label for="colour">What's your favourite colour?</label>
<input id="colour">

إخفاء التسميات

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

ويمكننا ربط حقل الإدخال بنص "بحث" وهو محتوى زر الإرسال، وذلك باستخدام السمة :aria-labelledby.

<input type="text" aria-labelledby="searchbutton">
<button id="searchbutton" type="submit">Search</button>

وكان بالإمكان استخدام السمة aria-label التي تعرفنا عليها سابقًا عند الحديث عن الروابط:

<input type="text" aria-label="Search">

ومع ذلك، يُفضل دائمًا استخدام النص المرئي على الصفحة عن استخدام النص المخفي، فالنَص المرئي يمكن ترجمته عبر أدوات الترجمة، بينما النص "المخفي" في سمات HTML لن يُترجم، وتلك النصيحة أشار إليها أدريان روزيلي في مقاله My Priority of Methods for Labeling a Control.

اقتباس

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

8. توفير بدائل نصية لجميع الصور والفيديوهات والصوتيات

يجب توفير بدائل نصية لجميع الصور والفيديوهات والصوتيات على مواقع الويب، ويتضمن ذلك إضافة "نص بديل" في عناصر الصورة <img> يمكن أن يكون مفهومًا للأشخاص ذوي المشاكل البصرية أو لأولئك الذين يواجهون صعوبات في عرض الصور أو لديهم قيود في استهلاك البيانات، ما جعلهم يوقفون تحميل الصور في المتصفحات الخاصة بهم؛ كما يجب أن يشمل ذلك الصور التي تحتوي على نص. وإليك بعض القواعد الأساسية:

• إذا كانت الصورة الغرض منها مجرد الزخرفة، يجب أن يكون النص البديل فارغًا:""=alt (ولكن من الأفضل أن تستخدم الصور الزخرفية في CSS بدلًا من ذلك).
• إذا وُصِفَت الصورة في نَص الصفحة، فيجب أن يكون النص البديل فارغًا (""=alt) لتجنب التكرار، ولكن توخ الحذر إذا كانت الصورة <img> داخل <figure>، وهنا يرجى الاطلاع على المقالة ?How do you figure لمزيد من التفاصيل.
• إذا كانت الصورة تمثل الرابط بذاته (مثال: شعار المؤسسة الذي يمكن النقر عليه للعودة إلى الصفحة الرئيسية)، فيجب أن يوضح النص البديل وجهة الرابط، مثال: "alt="home page".
• لا تستخدم خطوط الرموز الأيقونية فقد تكون صعبةً جدًا للأشخاص ذوي صعوبات في القراءة، فإذا ما قررت استخدامها، يُفضل تحويلها إلى تنسيق SVG.

نص بديل للفيديو والصوت

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

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

اقتباس

باختصار: وفر نصًا بديلًا لأي معلومات تُنقل عن طريق الصور أو الفيديوهات أو الصوتيات.

9. أضف لغة الصفحة الصحيحة

تُعاني حوالي 30% من صفحات البداية من عدم إعلان اللغة التي استُخدمت في كتابة المحتوى الخاص بها، مما يمكن أن يسبب الارتباك لمستخدمي قارئ الشاشة، ويُعد هذا أمرًا هامًا، فكلمة "six" مثلًا تُنطق بشكل مختلف بناءً على اللغة المستخدمة. لكن من السهل حل هذه المشكلة عن طريق إضافة السمة lang إلى عنصر HTML الخاص بك كما يلي:

<html lang="en">

القيمة "ar" تُخبر قارئ الشاشة أو برنامج الترجمة أن هذه الصفحة باللغة العربية، بينما "en" تعني الإنجليزية و"es" تعني الإسبانية، وهكذا. وبالنسبة لمعظم اللغات، يُعَد تحديد اللغة سهل التنفيذ، ويتوفر لدى W3C دليل لاختيار علامة اللغة المناسبة.

وفي حال كانت الصفحة تحتوي على محتوى بلغة أخرى غير اللغة الرئيسية المُعلنة، يمكنك إضافة سمة اللغة إلى العنصر الذي يحتوي على ذلك المحتوى، فعلى سبيل المثال: في صفحة وُسِمَت بأن تكون باللغة الإنجليزية:

If you'd like to chat a <span lang="es">matador</span>, in some cool <span lang="es">cabana</span>
And meet <span lang="es">senoritas</span> by the score, <span lang="es">Espana por favor</span>

اقتباس

باختصار: دع التقنيات المساعدة تعرف اللغة التي يوجد بها المحتوى الخاص بك.

10. ساعد الزائر على التنقل في محتواك

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

• غَلِّف المحتوى الرئيسي، أي المحتوى الذي ليس رأس الصفحة أو التنقل الأساسي أو التذييل في العنصر <main>، ففي معظم الحالات يجب أن يكون هناك عنصر <main> واحد فقط في كل صفحة، وتسمح لك جميع المتصفحات (+IE9) بتنسيقه؛ كما تعرف التقنيات المساعدة كيفية التعامل معه.
• غَلِّف الرأس، ضع شعار العلامة التجارية، وشريط العناوين، وعنوان الصفحة داخل العنصر <header>.
• غَلِّف الذيل، ضع المعلومات القانونية، وبيانات الاتصال، وإشعار حقوق التأليف والنشر، وما إلى ذلك داخل العنصر <footer>.
• مَيِّز الملاحة الأساسية باستخدام العنصر <ul> مغلفًا داخل العنصر <nav>، ويمكنك تضمين هذا العنصر داخل العنصر <header> إذا كان ذلك مناسبًا لتصميم صفحتك.
• غَلِّف الإعلانات والمحتوى غير الأساسي داخل العنصر <aside>.
• إذا كانت لديك عدة منتجات أو فيديوهات أو أخبار أو مقالات في الصفحة، فغَلِّف كل واحدة منها داخل العنصر <article>.

في استطلاع لمستخدمي قارئ الشاشة أجْرَته WebAIM، وُجد أن 26% منهم يستخدمون هذه المناطق باستمرار أثناء تصفح الصفحة.

وبالإضافة إلى ذلك، يساعد تغليف الأجزاء المميزة من المحتوى داخل العنصر <article> على عرض المحتوى بطريقة مثالية على نظام التشغيل WatchOS الخاص بشركة Apple.

اقتباس

باختصار: استخدم العناصر التوضيحية في HTML لمساعدة مستخدمي التقنيات المساعدة في فهم وتصفح محتواك.

11. استخدام HTML بطريقة صحيحة

هناك نهج اتبعناه في هذه المقالة وهو استخدام عناصر HTML الصحيحة، فعلى سبيل المثال: يحتوي العنصر label على سلوك متصفح مضمن يركز على حقل الإدخال المرتبط به، كما يُفضل استخدام العنصر <main> على العنصر <div class =" main"> لأنه يسمح لمستخدمي قارئ الشاشة بالانتقال مباشرة إلى المحتوى المهم، مع كونه غير مزعج تمامًا لأولئك الذين لا يستخدمون قارئ الشاشة.

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

اقتباس

باختصار: افهم الدلالة والسلوك الافتراضي لعناصر HTML، واستخدام العنصر المناسب للمحتوى الخاص بك.

12. التفاعلات المعقدة

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

بطبيعة الحال، أنت لست بحاجة لإعادة اختراع العجلة من جديد، إذ يمكنك الاستفادة من تلك الأمثلة المتاحة؛ مع ذلك يجب عليك الانتباه إلى أن ليست جميع تلك الأمثلة جيدة للاستخدام، فعلى الرغم مما تَنُص عليه الإرشادات، من الجيد تجنب استخدام قوائم ARIA للتنقل داخل الموقع، كما لا ينبغي عليك استخدام الخطيط الشبكي لـ ARIA إلا إذا كنت تهدف إلى إعادة إنشاء جدول بيانات Excel.

اقتباس

باختصار: استخدم ARIA فقط في حالة عدم وجود العناصر الأساسية، واستخدم أنماط التصميم والتعليمات البرمجية التي اقترحتها W3C.

13. أُطُر العمل Frameworks

في الوقت الحالي, تُستخدم أُطُر العمل مثل React و Vue بازدياد في إنشاء صفحات الويب. ورغم أن أُطُر العمل هذه لا تمنع الوصول إليها، إلا أنه في كثير من الأحيان تُختار مكونات لم تُكتب باستخدام علامات HTML الصحيحة، كما أنها لم تُختبر باستخدام التقنيات المساعدة.

لكن لا يجب أن يكون الأمر على هذا النحو، إذ يقول ماركوس هيرمان: "لدي انطباع بأن المزيد والمزيد من أنظمة مكونات React المصممة مع وضع سهولة الوصول في الاعتبار آخذة في الظهور". أما فيما يتعلق بإطار العمل React، فهناك خيارات واعدة:

• تُعد مكتبة Reakit خيارًا يتبع بدقة معايير WAI-ARIA 1.1، فجميع المكونات تأتي مع السمات الصحيحة والتفاعلات التي يمكن التحكم بها عبر لوحة المفاتيح.
• اختُبرت مكتبة Reach UI باستخدام Safari و VoiceOver و Firefox و NVDA و Edge و JAWS، وعندما ينضج هذا المشروع سوف تُجرى له عملية تدقيق بواسطة WebAIM للتأكد من قابليته للوصول، لذا إذا اخترت استخدام مكتبة Reach UI، فإن تطبيقك سيكون له أساس قوي وقابل للوصول.

وفيما يتعلق بإطار العمل Vue:

• تتبع مكتبة Vuetensils ممارسات WAI-ARIA لإتاحة سهولة الوصول، بما في ذلك الدلالات النصية وسمات ARIA والأدوار وغيرها.
• تُعد مكتبة Tournant UI ومكتبة Vue a11y مشروعين صغيرين، ولكنهما ينموان.

وبالإضافة إلى ما سبق، فقد نشر بنك ING مكتبته الداخلية للمكونات كمشروع يُسمى Lion، والتي يمكن استخدامها مع أي إطار عمل (أو بدونه)، فهي مكتبة مكونات مفتوحة المصدر وغير مرتبطة بأي إطار عمل، ويمكن أن تكون الأساس لنظام التصميم الداخلي الخاص بك، بُنيت هذه المكتبة من الصفر لتمكين الوصول والقدرة على التوسعة، حيث تُعد تلك الأمور صعبة التغيير أو التحقق منها في وقت لاحق خلال عملية التطوير.

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

ولمساعدتك في هذا الصدد، كتب Adrian Roselli وثيقةً هامةً تحتوي على متطلبات أساسية للتحكم المخصص يمكنك استعمالها لتقييم أي مكتبة مكونات تفكر في استخدامها.

اقتباس

باختصار: اختر مكتبة المكونات التي سوف تستخدمها بعناية، ليصبح إطار العمل قابلًا للوصول.

14. أنظمة إدارة المحتوى ومُنشئي المواقع

تمتلك أنظمة إدارة المحتوى مفتوحة المصدر الرئيسية، مثل: ووردبريس و جوملا و دروبال، القدرة على إنتاج مواقع قابلة للوصول، على الرغم من أن الجودة تعتمد بشكل كبير على اختيار منشئ الموقع لقوالب وملحقات قابلة للوصول؛ أما بالنسبة لمُنشئي المواقع المستضافة، فيُنصح بتجنب خدمة Weebly لوجود بعض القيود لديهم على سهولة الوصول. أما بالنسبة لخدمة Squarespace وخدمة Wix، فهما قادران على إنشاء مواقع قابلة للوصول، ومع ذلك يجب عليك أن تتطلع إلى تحقيق هذا الأمر لأنه لن يحدث من تلقاء نفسه.

اقتباس

باختصار: اختر نظام إدارة المحتوى ومُنشئ المواقع بعناية.

15. مستندات PDF

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

يمكنك إنشاء مستندات PDF يمكن الوصول إليها من خلال علامات أو وسوم HTML و CSS، وذلك باستخدام مكتبة تدعى Prince، والتي يمكن الاستفادة بها مجانًا للاستخدام غير التجاري.

اقتباس

باختصار: أتح الوصول إلى مستندات PDF الخاصة بك.

استمر في اختبار سهولة الوصول إلى موقع الويب

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

• التحقق من صحة تنسيق HTML الخاص بك.
• اختبار تباين الألوان.
• هل يمكنك التنقل في أرجاء الصفحة باستخدام لوحة المفاتيح فقط ومعرفة مكان التركيز في الصفحة؟
• هل يمكنك ملء النماذج وإرسالها باستخدام لوحة المفاتيح فقط؟
• اربط صفحات موقعك مع ملف revenge.css الخاص بـ Heydon Pickering الذي يعرض مربعات أخطاء باللون الوردي (مع رسائل بخط Comic Sans) في كل مكان تكتب فيه HTML غير صحيح، (لا تقلق، لن تنسى إزالته قبل نشر الصفحة على الويب).

يمكنك أيضًا الاستفادة من مدقق معايير الوصول الخاص بها، كما يمكنك استخدام أدوات مثل: أداة Google Lighthouse وهي متوفرة أيضًا كامتداد لمتصفح فايرفوكس، وأداة Tenon.io التي يمكن أن تساعدك في هذه العملية. ومع ذلك، ينبغي مراعاة أن أدوات التحقق الآلي ليست موثوقة كليًا، إذ أنها لا تتمكن من كشف جميع العوامل المؤثرة في سهولة الوصول، وذلك استنادًا إلى المقالة بناء أكثر المواقع التي يتعذر الوصول إليها مع تقييم Lighthouse مثالي التي توضح أن أي أداة آلية لا يمكن الاعتماد عليها كليًا.

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

خاتمة

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

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

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

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

ترجمة -بتصرف- للمقال Website Accessibility (15 Best Practices).

اقرأ أيضًا

• إمكانية الوصول لإتاحة سهولة الاستخدام للجميع
• الفرق بين إمكانية الوصول والشمولية في تصميم تجربة المستخدم
• الاحتياجات الاجتماعية لإمكانية الوصول في تصميم تجربة المستخدم
• كيفية إنشاء مواقع تراعي إمكانية الوصول باستخدام مبادئ التصميم الشامل

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

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

العوامل التي يجب توافرها في موقعك

هناك بعض العوامل الرئيسية عندما يتعلق الأمر بإمكانية الوصول إلى الويب لذوي المشاكل البصرية، ولكي يكون موقع الويب متاحًا لهم، معناها يجب أن يتوافر به ما يلي:

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

أفضل الممارسات لإتاحة إمكانية الوصول لذوي المشاكل البصرية

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

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

توفير ما يكفي من تباين الألوان

يُعَد توفر تباين كافٍ في الألوان أمرًا حاسمًا في تصميم المواقع، لذلك استخدم التباين العالي بين لون الخلفية والنص، فهو أمر هام خاصةً للمستخدمين الذين يعانون من عمى الألوان. وكحد أدنى، يجب أن تفي في التصميم بمتطلبات WCAG 2.0، والتي تتطلب نسبة تباين 4.5: 1 للنص العادي و 3.1: 1 للنص الكبير، كما يُعد النص الكبير خطًا من 14 أو 18 نقطة أو نصًا غامقًا.

ويمكنك استخدام أداة مثل Colorzilla للتحقق من قيمة أي عنصر، كما يمكنك أيضًا استخدام أدوات التحقق من تباين الألوان المتوفرة التي تتحقق من مدى التوافق مع هذا المعيار.

ونظرًا لأن العديد من المستخدمين الذين يعانون من ضعف البصر يميزون النص من خلال تحديده بالفأرة كخدعة لزيادة التباين، فتجنب استخدام تقنيات JavaScript أو CSS التي تمنع المستخدمين من تحديد النص بواسطة الفأرة.

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

الحد من اللون وعدم الاعتماد عليه

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

تجنب النص فوق صور الخلفية

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

تمكين ضبط حجم الخط يدويا

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

وفي حالة إن كان معظم زوار موقعك من كبار السن أو ضعاف البصر، فيجب زيادة حجم الخط الافتراضي والنظر في إضافة زر لتحميل حجم خط أكبر.

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

إعطاء الأولوية للمعلومات المهمة

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

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

اجعل موقع الويب الخاص بك قابلا للوصول من خلال لوحة المفاتيح فقط

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

الحد من عدد الروابط

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

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

إضافة نصا للروابط ذي صلة

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

تقديم محتوى بديل

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

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

استخدام نص بديل فارغ

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

تنظيم المحتوى باستخدام عنوان وصفي وعناوين فرعية

عند تنظيم المحتوى يجب أخذ العنوان الوصفي والعناوين الفرعية بعين الاعتبار، وذلك لأن برامج قراءة الشاشة أول ما تقرأه عندما يصل المستخدمون إلى الصفحة هو العنوان الوصفي، ومن ثَمَّ يكون لدى المستخدمين خيار الانتقال من عنوان إلى آخر؛ لذا يُنصح بجعل العنوان وصفيًا قدر الإمكان، بالإضافة إلى تضمين جدول مع عناصر <th> في الأعلى لمساعدة المستخدمين في تحديد العناوين.

علاوةً على ذلك، ينبغي استخدام الأنماط الصحيحة للتنسيق باستخدام CSS وتحديد الهيكل باستخدام HTML، كما يُفضل استخدام العنصر <p> للفقرات، والعنصر <h1>، و<h2> للعناوين، والعنصر <ul>، و<ol>، و<li> للقوائم، فتلك الممارسات تساعد قُراء الشاشة في فهم هيكل المحتوى الخاص بك ونقله بكفاءة.

تقليل عدد الإعلانات

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

إضافة معلومات اللغة

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

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

استخدام الأدوات الصحيحة

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

• يوفر موقع Color Safe اقتراحات لألوان متوافقة مع معايير الوصول، مع التركيز على معايير AA و AAA، مما يُمَكِّن مصممي الويب من تحديد مجموعات الألوان المناسبة بناءً على العناصر الموجودة في موقع الويب.
• يساعد محلل تباين الألوان في اكتشاف النصوص غير المتوافقة من حيث تباين الألوان، حيث يمكن للمطورين استخدام هذه الأداة للتحقق من تباين الألوان بين النصوص والخلفيات وضمان قراءتها بسهولة من قِبَل الأشخاص ذوي المشاكل البصرية.
• يساعد NVDA المصممين على الحصول على نظرة شاملة حول تجربة مستخدم ضعيف البصر على موقع الويب، فهذه الأداة تساعد في التأكد من أن النصوص والعناصر المرئية يمكن الوصول إليها بطريقة صحيحة ومناسبة.
• يُجري WebAIM’s Wave تحليل لموقع الويب ويكشف الأخطاء المحتملة في إمكانية الوصول، بحيث يمكن للمطورين استخدام هذه الأداة للتحقق من وجود أي تحديات تواجه المستخدمين ذوي الاحتياجات الخاصة وتصحيحها بطريقة فعالة.

وباستخدام هذه الأدوات وغيرها، يمكن للمصممين والمطورين تحسين إمكانية الوصول لمواقعهم على الويب وضمان أَنْ يتمتع جميع المستخدمين، بغض النظر عن قدراتهم، بتجربة مريحة ومفيدة.

خاتمة

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

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

ترجمة -بتصرف- للمقال Building a User-Friendly Website for the Visually Impaired.

اقرأ أيضًا

• بناء موقع إلكتروني سهل الاستخدام لفائدة ذوي المشاكل البصرية
• شمولية التصميم: سهولة وصول جميع المستخدمين لصفحات موقع الويب
• حروف برايل لمساعدة المكفوفين في مستندات جوجل
• العوامل المؤثرة في تجربة المستخدم
• إمكانية الوصول لإتاحة سهولة الاستخدام للجميع
• أفضل النصائح لتصميم واجهة المستخدم