التسلسل الهرمي المرئي للمبتدئين

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

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

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

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

ستوفر هذه المدونة للمبتدئين أساسيات التسلسل الهرمي المرئي.

التسلسل الهرمي المرئي مفصول

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

ثلاثة منها هي ثلاثة أدوار أساسية في التسلسل الهرمي المرئي ، اثنان منها مرتبطان ارتباطًا وثيقًا.

بحجم

يمكن أن يساعد تغيير حجم الأشياء في لفت الانتباه إليها أو الابتعاد عنها.

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

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

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

الألوان والتباين

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

اللون والتباين هما جزءان من التسلسل الهرمي المرئي ، لكن كلاهما يعملان معًا بشكل لا تشوبه شائبة لجذب الانتباه.

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

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

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

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

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

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

أنماط F & Z

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

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

النمط F

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

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

يتم تسمية النمط بالتناوب E-pattern ، على الرغم من أن النمط F أكثر شهرة.

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

هذا التصميم رائع في التخلص من الملل المرتبط بقراءة النص من كتل كبيرة من الفقرات.

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

النمط Z

في حين أن النمط F مناسب للمواقع ذات النص الثقيل ، فإن النمط Z مختلف.

يعتبر النمط Z مثاليًا لمواقع الويب أو الإعلانات التي لا تحتوي على نصوص متعددة.

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

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

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

يشتمل منتصف التصميم عادةً على صورة لملء الجزء الفارغ.

يتضمن الجزء السفلي الأيمن والأيسر جميع النصوص أو المعلومات المقصودة التي تريد عرضها للزائر.

فهم أسلوب الطباعة

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

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

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

توفر العناوين الفرعية تنقلًا مباشرًا للمستخدمين للعثور على معلومات محددة.

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

أهمية التباعد

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

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

يوفر المحتوى المحيط بمساحة تصميم UX بسيطًا وسهل المتابعة.

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

باستخدام المحاذاة

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

تجسد تصميمات النمط F والنمط Z استخدام المحاذاة. تستخدم تصميمات نمط F المحاذاة إلى اليسار ، بينما تستخدم تصميمات نمط Z المحاذاة اليسرى واليمنى والمحاذاة الوسطى.

عند عمل تصميم مرئي مع التركيز على النص ، من الأفضل المحاذاة إلى اليسار.

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

باستخدام الشبكات

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

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

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

القرب والعلاقة

عندما تقترب العناصر من بعضها ، سيفترض القارئ أنها مرتبطة ببعضها البعض.

يمكن أن يساعدك ذلك في تنظيم الكثير من المعلومات وتسهيل فهمها للمشاهد.

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

الخطوط والتسلسل الهرمي المرئي

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

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

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

نصائح حول التسلسل الهرمي المرئي

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

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

حاول أيضًا تخيل رحلة القارئ وحاول تحسين تصميم UX وإزالة أي تفاصيل تشوش.

يستحق عائد الاستثمار من تصميم UX الجيد دائمًا العمل الإضافي ، لذلك لا تقلل من أهميته.

يتم إحتوائه

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

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

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