التصميم 101: لماذا التسلسل الهرمي المرئي في مسائل التصميم

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

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

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

تحديد التسلسل الهرمي البصري في التصميم

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

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

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

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

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

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

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

طرق إنشاء تسلسل هرمي مرئي في التصميم

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

ضع في اعتبارك قراءة الأنماط

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

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

النمط F

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

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

النمط Z

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

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

ضع في اعتبارك الحجم والمقياس

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

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

استخدام اللون والتباين

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

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

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

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

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

اللعب بالمساحة والقوام

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

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

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

استخدم خطوطًا مختلفة وتسلسلًا هرميًا مطبعيًا

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

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

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

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

فيما يلي تفصيل سريع:

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

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

كن مدركًا للتوازن والمحاذاة

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

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

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

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

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

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

كسر الشبكة

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

العب مع التكوين

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

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

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

أفضل الممارسات لضمان التسلسل الهرمي البصري في التصميم

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

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

التسلسل الهرمي المرئي هو طريقة تنظيم التصميم

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