التسلسل الهرمي البصري في التصميم
كيف تتحكم في أين ينظر الناس. خمسة أذرع واختبار التحديق.
تصميمك لديه ثلاث ثوانٍ ليخبر المستخدم أين ينظر. إذا صرخ كل شيء طلباً للانتباه بالتساوي، لن يُقرأ شيء، ولن يُنقر على شيء، وسيغادر المستخدم. هذا ليس رأياً في التصميم. هذه هي طريقة عمل الرؤية.
التسلسل الهرمي البصري هو النظام الذي يتحكم في تلك النافذة ذات الثلاث ثوانٍ. إليك كيفية بناء نظام يوجه الناس فعلاً.
ما هو التسلسل الهرمي البصري حقاً
التسلسل الهرمي البصري هو ترتيب العناصر بحيث تعالجها العين بترتيب مقصود. ليس عشوائياً، وليس كل شيء دفعة واحدة، بل بتسلسل: هذا أولاً، ثم هذا، ثم هذا.
الدماغ لا يقرأ الصفحة من أعلى إلى أسفل كالكتاب. يبحث عن إشارات. الحجم، التباين، اللون، المسافات، والموضع كلها تخبر العين بما هو الأهم. التسلسل الهرمي المبني جيداً يجعل العنصر الأهم مستحيل التجاهل والعنصر الأقل أهمية سهل التجاوز.
أدوات التحكم الخمس
كل تسلسل هرمي بصري مبني من خمسة أذرع. لا تحتاج الخمسة كلها في وقت واحد. تحتاج التركيبة المناسبة لتخطيطك المحدد.
١. الحجم
العناصر الأكبر تُرى أولاً. هذا أوضح ذراع وأكثره موثوقية. عنوان بحجم ٤٨ بكسل سيجذب الانتباه دائماً قبل فقرة بحجم ١٤ بكسل. النسبة بين الأحجام هي التي تصنع التسلسل، وليس الأرقام المطلقة.
الخطأ الشائع: تكبير كل شيء. عندما يكون العنوان والعنوان الفرعي والنص وزر الإجراء كلها كبيرة، يتسطح التسلسل ولا شيء يقود.
٢. التباين
التباين العالي يجذب العين. عنصر داكن على صفحة فاتحة، زر ساطع على خلفية هادئة. التباين هو أسرع طريقة لإبراز عنصر واحد دون تغيير حجمه.
هذا يعمل بالعكس أيضاً. التباين المنخفض يدفع العناصر للخلف. البيانات الوصفية والتسميات الثانوية يجب أن تكون ذات تباين منخفض حتى لا تنافس المحتوى الرئيسي.
٣. اللون
اللون يصنع وزناً عاطفياً. شارة حمراء واحدة في بحر من الرمادي ستجذب الانتباه دائماً، ليس لأن الأحمر مميز بل لأنه العنصر الوحيد ذو الطاقة اللونية في سياقه. لوحة الألوان تخدم التسلسل عندما يكون لكل لون دور محدد.
٤. المسافات
المساحة البيضاء ليست مساحة فارغة. إنها إشارة. العنصر المحاط بمساحة سخية يُقرأ كمهم لأن المساحة تعزله وتمنحه مجالاً للتنفس. العناصر المتراصة تُقرأ كثانوية.
أكثر فشل شائع للتسلسل في تصميم الويب هو عدم كفاية المسافات بين الأقسام.
٥. الموضع
العين تبدأ طبيعياً من أعلى اليسار في اللغات التي تُكتب من اليسار لليمين. وضع العنصر الأهم في موضع البداية الطبيعي يمنحه ميزة قبل تطبيق أي ذراع آخر.
الموضع وحده ضعيف. عنصر صغير منخفض التباين في أعلى اليسار سيخسر أمام عنصر كبير عالي التباين في المركز.
اختبار التحديق
أسرع طريقة للتحقق من عمل تسلسلك. حدق في تصميمك حتى يصبح كل شيء ضبابياً. العناصر التي تبقى مرئية هي التي يعطيها تسلسلك الأولوية.
إذا كان أول شيء تراه عند التحديق هو زر الإجراء أو العنوان، تسلسلك يعمل. إذا كان شريط جانبي تزييني، فهو لا يعمل.
الإخفاقات الشائعة
كل شيء عريض. إذا بدأت كل فقرة بنص عريض، لا شيء يُؤكد. العريض يعمل عندما يكون نادراً.
نقاط بؤرية كثيرة. صفحة بها ثلاثة عناصر متساوية الحجم واللون ليس لها تسلسل. لديها ثلاثة منافسين.
تجاهل الهاتف. تسلسل مصمم لشاشة ١٤٤٠ بكسل غالباً ينهار على هاتف ٣٧٥ بكسل.
لون بدون تباين. زر ملون على خلفية ملونة يختفي. التسلسل يعمل فقط عندما تكون نسبة التباين عالية بما يكفي.
بناء التسلسل عملياً
إطار عمل عملي لأي تخطيط صفحة:
- حدد الشيء الواحد. ما أهم إجراء أو رسالة في هذه الصفحة؟ ذلك العنصر يحصل على أكبر حجم وأعلى تباين وأفضل موضع.
- رتب كل شيء آخر. أنشئ قائمة مرقمة لكل عنصر بترتيب الأهمية.
- طبق عنصري تحكم على الأقل لكل مستوى. المستوى الأول: حجم كبير + تباين عالٍ. الثاني: حجم متوسط + لون. الثالث: حجم صغير + تباين منخفض.
- احذف حتى ينكسر. احذف العناصر حتى يتأثر التسلسل. آخر عنصر حذفته قبل الانكسار كان على الأرجح غير ضروري.
الأسئلة الشائعة
ما هو التسلسل الهرمي البصري في التصميم؟
التسلسل الهرمي البصري هو ترتيب عناصر التصميم حسب الأهمية. يستخدم الحجم والتباين واللون والمسافات والموضع للتحكم في تسلسل معالجة العين للمعلومات.
لماذا يهم التسلسل الهرمي البصري؟
لأن المستخدمين لا يقرأون، بل يمسحون. بدون تسلسل واضح، كل عنصر ينافس بالتساوي على الانتباه، يشعر المستخدم بالإرهاق، ويغادر.
كيف أختبر التسلسل الهرمي البصري؟
اختبار التحديق هو أسرع طريقة. اجعل التصميم ضبابياً وتحقق من العناصر التي تبقى مرئية. إذا سيطرت عناصر خاطئة، عدّل الحجم أو التباين أو المسافات حتى تقود العناصر الصحيحة.
Need layouts that guide the eye? Brainy builds interfaces with hierarchy baked in.
Get Started
