مبادئ التصميم - مقدمة في التسلسل الهرمي البصري

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

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

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

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

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

التسلسل الهرمي المرئي: فهم جديد للتكوين المرئي للواجهات التفاعلية

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

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

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

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

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

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

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

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

من الأمثلة الجيدة على الاستخدام البنيوي الهادف للون في تصميم الويب موقع The Names for Change. يتواصل الموقع على الفور مع هيكله من خلال استخدام الألوان ؛ تكون المنظمة مبعثرة بشكل افتراضي ولكن يمكن إعادة ترتيبها حسب الموضوع و / أو اللون.

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

الحجم في التسلسل الهرمي المرئي

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

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

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

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

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

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

المحاذاة في التسلسل الهرمي المرئي

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

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

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

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

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

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

الأشكال في التسلسل الهرمي المرئي

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

مزيد من القراءة على مدونة Toptal Design:

• عزز تجربة المستخدم الخاصة بك مع التسلسل الهرمي المرئي الواضح
• أسس التصميم - دليل للتسلسل الهرمي المرئي (باستخدام مخطط المعلومات الرسومي)
• مبادئ التصميم: مقدمة في التسلسل الهرمي
• أفضل ممارسات تصميم واجهة المستخدم لإمكانية مسح ضوئي أفضل
• عزز تجربة المستخدم الخاصة بك مع مبادئ تصميم التفاعل الناجح هذه