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