إذا حدث معك هذا بالنص، فربما تظن أنني استخدم القليل من السحر، أو التنبأ بالمستقبل أو ربما يكون ظنك أنني أقرأ الأفكار ولكن يا عزيزي كل ما سبق خاطئ وما هو إلا التسلسل الهرمي المرئي أو Visual hierarchy

ما هو الـ Visual hierarchy؟

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

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

التطبيقات والتصاميم، مما يضمن تجربة قراءة إيجابية للمستخدم النهائي.

1- أنماط القراءة | Reading patterns:

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

وتميل أنماط المسح البصري إلى اتخاذ أحد الشكلين ، "F" و "Z" ، ويمكنك الاستفادة من ذلك في تصميمك.

✦ F-Patterns:

وعلى غرار حرف الـ F يمسح القارئ الصورة وخصوصًا المقال أو منشورات أي مدونة من اليمين لليسار ثم لأسفل قليلًا ثم يمينًا أخر ومن ثم أسفل كأنه يمثل حرف الـ F أو الـ E

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

✦ Z-Patterns:

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

في التصميم أدناه لمؤتمر Build 2010، ستلاحظ ذلك بشكل واضح:

فمثلًا إذا لاحظت تصميم هذا الموقع ستجد أنه يقوم بتطبيق نفس الـ Z-patterns، أولًا اسم الموقع حيث يبدأ حرف الـ Z ثم على أقصى اليمين زر "سجل الآن" ثم يرتكز بالأسفل أهم المتحدثين في هذا المؤتمر.

2- حجم الفونت يهم دائمًا | Size matters:

وهذا المبدأ يشير بكل بساطة إلى نظرية هامة جدًا: «يقرأ الناس الأشياء الأكبر أولًا».

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

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

3- اللون والصبغة | Color and tint:

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

4- الاتجاه | Direction:

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

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

عادة ما يكون الإتجاه ليس بقاعدة ثابتة مثل الـ Z,F patterns لذلك سُمي بالاتجاه لكونه يأخذ شكل واتجاه مختلف في كل مرة فأنت هنا من تصنع معيارك في التسلسل الهرمي البصري عما تود وقع الأبصار عليه أولًا ثم ثانيًا وثالثًا وهكذا.

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

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

فسوف تكون إجابتك بكل سهولة، إنه التسلسل الهرمي البصري | Visual Hierarchy يا سادة.