يقوم التدفق المرئي بنقل نظر المشاهد عبر المستند بطريقة تجعل كل العناصر المهمة تحظى بالبروز ، ولا شيء يعوق الرؤية أو يتسبب في فقد المشاهد للقطعة. إن استخدام عناصر التدفق الواضحة مثل الأسهم أو الأرقام هو أكثر الطرق شيوعًا في استخدام مصممي الويب للتدفق ، ولكن هناك أنواع أخرى من العناصر التي يمكن استخدامها وسوء استخدامها لتوجيه القراء للتحرك في مسار محدد. ستوضح لك الخطوات الواردة في هذا البرنامج التعليمي أمثلة للتدفق الجيد والسيئ ، وتساعدك على تعلم مفردات التدفق البصري في التصميم.
ما هو التدفق البصري؟
يمكن تحقيق التدفق المرئي بعدة طرق:
- السهام
- صور تسلسلية أو عناصر نصية
- إنطباع
- التدرجات
- تغييرات الحجم
- منحنيات
- الحركة في الصور
- الوجوه - خاصة العيون
ستعرض الصور التالية بعض الأخطاء الشائعة في تدفق صفحات الويب وكيفية تصحيحها.
02 من 07تدفقات النص الغربي من اليسار إلى اليمين
إذا كبرت في قراءة لغة غربية ، فأنت معتاد على التفكير في أن النص يجب أن ينتقل من اليسار إلى اليمين. لذلك ، بينما تتحرك العين عبر خط النص ، فإنها تتحرك من اليسار إلى اليمين.
في الصورة أعلاه ، يتدفق الشلال من اليمين إلى اليسار ، ويتدفق النص إلى أعلى الشلال. بما أننا جميعًا نعرف أن الشلالات تسقط ، فهناك فصل في اتجاه تدفق المياه مع تدفق النص. تتحرك عين المشاهد في الاتجاه الخاطئ لقراءة النص.
03 من 07النص الخاص بك يجب أن تتدفق مع الصور
في هذه الحالة ، تم عكس الصورة بحيث يتدفق النص في نفس اتجاه الماء. كل العناصر تقود عين المشاهد إلى أسفل مع تدفق الماء وتدفق النص.
04 من 07من اليسار إلى اليمين يساوي بسرعة
يتم تشغيل الحصان في هذه الصورة من اليمين إلى اليسار ، ولكن النص باللغة الإنجليزية ومن ثم ترك إلى اليمين. يؤدي التأثير المرئي لسباق الخيل في اتجاه واحد إلى إبطاء وتيرة المستند بأكمله لأنه يسير باتجاه مختلف عن النص.
في الثقافات الغربية ، لأن لغاتنا تتحرك من اليسار إلى اليمين ، فقد وصلنا لربط اتجاه بصري من اليسار إلى اليمين على أنه متقدم وسريع ، بينما من اليمين إلى اليسار أكثر تخلفًا وبطيئًا. عندما تقوم بإنشاء تخطيط بدلالة السرعة ، يجب عليك تذكر ذلك - والحفاظ على نقل صورك في نفس اتجاه النص.
05 من 07لا تفرض عين المشاهد على الإبطاء
عندما يسير الحصان والنص في نفس الاتجاه ، تزداد السرعة الضمنية.
06 من 07شاهد العيون في صور الويب
العديد من المواقع على شبكة الإنترنت مع الصور تجعل هذا الخطأ - يضعون صورة لشخص ما على الصفحة ، والشخص يبحث بعيدا من المحتوى. يمكن حتى رؤية هذا على موقع تصميم الويب About.com في التصميم القديم.
كما ترون ، يتم وضع صورتي بجانب بعض النص. لكنني أنظر بعيداً عن هذا النص ، كاد أن أحول ظهري إليه. إذا رأيت لغة الجسد بين شخصين في مجموعة ، فسيكون من السهل افتراض أنني لا أحب الشخص الذي أقف إليه (في هذه الحالة كتلة النص).
أظهرت العديد من دراسات تتبع العين أن الأشخاص يرون الوجوه على صفحات الويب. وقد أظهرت الدراسات ذات الصلة أنه عند النظر إلى الصور ، سوف يتابع الناس ، دون قصد ، عيونهم لرؤية الصورة التي ينظرون إليها. إذا كانت إحدى الصور على موقعك تبحث عن حافة المتصفح ، فسيظهر العملاء ، ثم اضغط على زر الرجوع.
07 من 07العيون في أي صورة يجب أن تواجه المحتوى
في التصميم الجديد لـ About.com ، تكون الصورة أفضل قليلاً. الآن عيني تتطلع إلى الأمام أكثر ، وهناك تلميح طفيف أنني أتطلع إلى يساري - حيث النص.
صورة أفضل لهذا الموقف ستكون صورة حيث تكون كتفي زاويًا أيضًا نحو النص. لكن هذا حل أفضل بكثير من الصورة الأولى. وبالنسبة للمواقف التي تكون فيها الصورة على يسار المحتوى بالإضافة إلى اليسار ، يمكن أن يكون هذا بمثابة حل وسط جيد.
تذكر أيضًا أنه على الرغم من أن صور وجوه الأشخاص تستقطب أكبر قدر من الاهتمام ، إلا أن الأمر نفسه ينطبق على صور الحيوانات. على سبيل المثال ، في تخطيط هذا النموذج ، لدي كلابي ينظر إلى اليسار ، ولكن الصورة تتدفق على اليمين. لذلك يبحثون عن الصفحة. سيتم تحسين هذا التخطيط إذا قمت بتغيير اتجاه الكلاب بحيث كانوا ينظرون إلى وسط الشاشة.
