لا يحتاج التمرير المنظر إلى مقدمة عندما يتعلق الأمر بمناقشة ممارسات التصميم الأكثر جاذبية. بشكل عام ، يتم مشاهدة Parallax Scrolling على نطاق واسع على مواقع WordPress. إنه تأثير حيث تتحرك صورة الخلفية بمعدل أبطأ من عناصر المقدمة. هذا يعطي وهمًا بوجود ثلاثة أبعاد في سطح مسطح ثنائي الأبعاد. تستخدم العديد من الألعاب هذا الاتجاه لفترة طويلة ، ومع ذلك ، فقد شقت طريقها في تصميم الويب مؤخرًا نسبيًا واكتسبت شعبية هائلة. إنه منتشر للغاية لدرجة أنك على الأرجح شاهدته في مكان ما عندما تتصفح الويب ، حتى لو لم تكن تعرف ما هو. يعمل مفهوم التمرير المنظر على خلق وهم يبدو جذابًا وفريدًا. يضيف قيمة جمالية لتصميم الويب ويلفت الانتباه إلى المحتوى الموجود في شريط التمرير المنظر ، مما يساعد على إبراز المحتوى القيم من الفوضى.
جدول المحتويات إخفاء
1. تحسن تجربة المستخدم بشكل ملحوظ:
2. يساعد في عملية سرد القصص:
3 - انخفاض كبير في معدلات الارتداد:
1. تمرير خلفية المنظر:
2. Parallax Vertical Scroll:
3. تأثير الشفافية المنظر:
4. Parallax Horizontal Scroll:
5. تأثير مقياس المنظر:
1. تذكر دائمًا الهدف الأساسي لموقعك على الويب:
2. لا تفرط في استخدام تأثير التمرير المنظر:
3. اصنع تأثيرات التمرير في النموذج الأولي واختبرها: Pin
4. تخطيط المحتوى للاستخدام على الأجهزة المحمولة:
5. استجابة موقع الويب الخاص بك:
1. قصة The Goonies:
2. Dogstudio:
3. فايرواتش:
نشأ اتجاه التصميم هذا عندما ظهر اتجاه التصميم المسطح. قبل اتجاه التصميم المسطح ، كان التصميم الواقعي يتجه. مع هذا الاتجاه ، سيكون التركيز على الظلال المسقطة والانعكاسات وغيرها من الحيل لخلق إحساس بالعمق والمظهر ثلاثي الأبعاد. كان التصميم المسطح ثنائي الأبعاد بشكل مفرط ، ولن تعمل مثل هذه الحيل معهم لإنشاء مظهر ثلاثي الأبعاد. عند رؤية هذه الفجوة ، ظهر التمرير المنظر كمفهوم لإدخال ثلاثة أبعاد لتصميم مسطح.
لفهم تمرير المنظر بمزيد من التفاصيل ، يجب أن ننظر أولاً إلى سبب كونه ممارسة تستحق الاستثمار فيها.
1. تحسن تجربة المستخدم بشكل ملحوظ:
دبوس
يرى بعض الأشخاص أن تمرير المنظر هو ميزة إضافية تضيف تعقيدًا إلى واجهة المستخدم دون أي مساهمة. ومع ذلك ، هذا ليس صحيحًا لأن التفاعلات الدقيقة والرسوم المتحركة تحدث فرقًا كبيرًا في إنشاء واجهات مستخدم جذابة مقارنة بوجوه المستخدم المسطحة. تتمتع تجربة المستخدم (UX) بقيمة ممتازة.
2. يساعد في عملية سرد القصص:
دبوس
إذا كان علينا أن نروي قصة لشخص آخر ، فيمكننا فعلها دون عناء. ومع ذلك ، فإن الحصول على نفس سهولة سرد القصص وتدفقها في تصميم مواقع الويب يمكن أن يكون أمرًا صعبًا للغاية. غالبًا ما يكون ربط النقاط وتسهيل الانتقال وإبقاء الجمهور على اتصال به أمرًا صعبًا. يساعد التمرير المنظر في حل هذه المشكلة من خلال إنشاء تجربة جذابة وغامرة لتدفق القصة. نظرًا لوجود اختلاف في سرعة الخلفية وعناصر المقدمة ، يمكن أن يؤدي تنظيم العناصر بكفاءة إلى تحسين تجربة سرد القصص بشكل كبير.
3 - انخفاض كبير في معدلات الارتداد:
دبوس
يشير معدل الارتداد إلى عدد الأشخاص الذين يقومون بالنقر فوق موقع الويب والنقر فوق الزر "رجوع" في علامة التبويب قبل الانتقال إلى موقع الويب بدقة. يمكن أن تؤثر معدلات الارتداد المتكررة والمرتفعة على تصنيف تحسين محركات البحث بشكل كبير. تتمتع مواقع الويب التي تستخدم المنظر بالتمرير بمعدلات ارتداد أقل بشكل ملحوظ حيث أن معظمها عبارة عن مواقع تمرير بصفحة واحدة. التجربة الديناميكية التي يحصل عليها المستخدمون من مشاهدة التمرير المنظر تحافظ على مشاركتهم.
الآن بعد أن قمنا بتغطية مزايا استخدام التمرير المنظر ، يمكننا مناقشة الأنواع المختلفة من تقنيات التمرير المنظر المتاحة لمصممي الويب. هناك فئتان عريضتان لتأثيرات اختلاف المنظر. التمرير القائم على تأثيرات المنظر وتأثيرات المنظر القائمة على الماوس.
تأثيرات المنظر القائمة على التمرير هي تأثيرات اختلاف المنظر التي قد تواجهها عند التمرير لأسفل عبر موقع ويب. يلبي كل نوع من أنواع التمرير المنظر احتياجات وغرض مختلفين. بعض تأثيرات تمرير المنظر هي -
1. تمرير خلفية المنظر:
إنها واحدة من أقدم الطرق الفعالة لاستخدام اللفيفة المنظر. باستخدام هذا ، عندما يقوم المستخدم بالتمرير على موقع الويب ، ستتغير صورة الخلفية. يساعد هذا في سرد قصص مقنعة بأسلوب.
2. Parallax Vertical Scroll:
Parallax Vertical Scroll مثالي لمواقع الويب حيث تريد أن يشعر المستخدمون أن موقع الويب يتحرك معهم ، باستخدام عناصر عائمة من شأنها أن تتحرك بسرعات مختلفة. يمكن القيام بذلك في طبقات متعددة أيضًا.
3. تأثير الشفافية المنظر:
تأثير Parallax Transparency هو تأثير سلس حيث يتلاشى النص أو الصورة ببطء عندما يقوم المستخدم بالتمرير لأسفل. كما أنه يتلاشى مرة أخرى عندما يقوم المستخدم بالتمرير لأعلى.
4. Parallax Horizontal Scroll:
يخلق التمرير الأفقي المنظر إحساسًا بالحركة أفقيًا عندما يقوم المستخدم بالتمرير لأسفل موقع الويب. العناصر الموجودة على اليسار تقترب من المركز. هذا يخلق إحساسًا بالحركة.
5. تأثير مقياس المنظر:
يتيح Parallax Scale Effect للمستخدم إنشاء تكبير وتصغير تأثير النفق. يتناسب التكبير مع نسبة العرض إلى الارتفاع ، لذا فهو يخلق وهمًا فريدًا يبدو رائعًا. يبدو وكأنه تأثير تزييف يأخذ المستخدم إلى بُعد آخر.
الآن وقد ناقشنا الاختلافات المختلفة لتأثيرات التمرير المنظر ، يمكننا الانتقال إلى مناقشة ممارسات التصميم الأساسية التي يجب وضعها في الاعتبار أثناء تصميم تأثير التمرير المنظر لموقع الويب الخاص بك:
1. تذكر دائمًا الهدف الأساسي لموقعك على الويب:
دبوس
التمرير المنظر ممتع ويمكن أن يكون آسرًا. ليس فقط للمشاهدين ولكن للمصمم أيضًا. لا ينبغي أن يُترجم هذا إلى امتلاك موقع ويب له تأثير رائع في التمرير المنظر ولا يركز على المحتوى. يجب أن يعمل التمرير المنظر مثل عناصر التصميم الأخرى كإشارات بصرية يجب أن توجه الزائر إلى الأماكن التي تنوي أن يكونوا فيها. يجب أن يساعد في تحقيق أهداف العمل مثل بيع منتج أو نشر محتوى أو توليد عملاء محتملين.
إذا كنت تستخدم التمرير المنظر بشكل مفرط دون وضع أي سياق أو غرض في الاعتبار ، فقد تنال إعجاب المشاهدين على موقعك ، لكنهم لن يترجموا إلى عملاء محتملين أو محولين فعالين. استفد من التمرير المنظر لزيادة فرص ما تريد أن يفعله المستخدم. اختراق ممتاز لهذا هو تثبيت CTA مقنع ودقيق في تذييل الصفحة. بهذه الطريقة ، عندما يقوم المستخدمون بالتمرير خلال الموقع ، سيرون المنظر يتم تمريره في العمل. سيكون لديهم أيضًا زر أو زران ثابتان ثابتان وموجودان في كل مكان. سيؤدي هذا إلى جذب الزائر للنقر فوق الزر لمعرفة ما سيحدث.
2. لا تفرط في استخدام تأثير التمرير المنظر:
دبوس
تأثير التمرير المنظر له عامل نجاح معين مرتبط به. إنه يكسر الطبيعة الدنيوية والراكدة لأي موقع ويب يثير اهتمامًا مفاجئًا في عين الزائر. نظرًا لأن استخدام التمرير المنظر يجعل عناصر موقع الويب تتحرك بسرعات مختلفة ، فإن إيجاد التوازن الصحيح بين المرح والفوضى يعد أمرًا ضروريًا عند استخدام تمرير المنظر. إذا كان موقع الويب يحتوي على العديد من العناصر سريعة الحركة أو العديد من العناصر المتحركة أيضًا ، فقد يكون من الصعب على الزائر مواكبة ذلك. سيؤدي ذلك إلى التخلص من دليلهم المرئي في جميع أنحاء الموقع وإحداث ارتباك.
3. اصنع تأثيرات التمرير في النموذج الأولي واختبرها: دبوس
من الجيد دائمًا بناء نموذج أولي تفاعلي قبل الانتهاء منه في مرحلة التطوير. يساعد هذا المصممين على اختبار تأثير التمرير المنظر قبل تشغيله. يجب على المصممين اختبار التأثير على قابلية الاستخدام وتجربة المستخدم. نظرًا لأن اختلاف المنظر متعدد الاستخدامات ومختلف في منهجه ، فإنه يمكن أن يؤثر على أشخاص مختلفين بطرق مختلفة. من السهل الانحراف عن اختلاف المنظر المفيد إلى إنشاء تأثيرات تمرير المنظر التي تسبب تشتيت الانتباه. ومن ثم اختبرها بدقة مع مستخدمين حقيقيين يتمتعون بالموضوعية ولديهم حس بتصميم الويب. أيضًا ، اختبرها مع الجمهور العام لأنهم هم من تُحدث التأثير لهم.
4. تخطيط المحتوى للاستخدام على الأجهزة المحمولة:
دبوس
لم يعد تصفح الإنترنت مقتصراً على أجهزة الكمبيوتر. بدلاً من ذلك ، يفضل أكثر من نصف المستخدمين التصفح على هواتفهم الذكية والأجهزة اللوحية. قامت Google أيضًا بتغيير نتائج محرك البحث الخاصة بها بناءً على ما ينظم ويصنف مواقع الويب بشكل مختلف للجوال مقارنة بسطح المكتب. هذا يعني أنه إذا كان موقع الويب الخاص بك يحتل مرتبة جيدة في تصفح سطح المكتب ، ولكن لديه تصميم محمول غير ودي ، فلن يحتل مرتبة عالية على Google عندما تبحث عنه عبر هاتفك. لا يعد تمرير المنظر مناسبًا للجوّال. الأجهزة اللوحية تدعمها إلى حد ما ولكن ليس الهواتف المحمولة. الحل العملي لذلك هو عدم استخدام تأثيرات اختلاف المنظر لموقعك المحمول.
يجب تصميم التخطيط الأساسي لموقعك بطريقة يمكن ترجمتها بسهولة إلى هاتف محمول. يجب الانتباه إلى أي قسم يتداخل ويتدفق. يجب ألا تتعارض الخلفيات مع وضوح المحتوى. بالنسبة لموقع الجوال ، احتفظ فقط بعناصر التصميم الضرورية. سيساعدك هذا في طريقتين - قد يستخدم المستخدمون الذين يستخدمون المتصفح على هواتفهم المحمولة بيانات الجوال. سيساعدهم امتلاك موقع أخف على تحميل الموقع بشكل أسرع وإنفاق بيانات أقل في تصفح موقعك. كما أنه لن يؤثر على تصنيف SEO الخاص بك بهذه الطريقة.
5. استجابة موقع الويب الخاص بك:
دبوس
ليس لدينا اتصالات شبكة تستغرق دقائق أو ساعات لتحميل موقع ويب بعد الآن. يمكن للجميع الوصول إلى الإنترنت بالسرعة التي يمكن للمستخدمين من خلالها التواجد على موقع ويب واحد لمدة ثانية والانتقال إلى موقع آخر في ثانية تمر أخرى. مع سهولة السرعة هذه تأتي سهولة الخيارات. يتصفح الناس عدة مواقع كل يوم. إذا لم يتم تحميل موقع الويب الخاص بك بسرعة نسبيًا ، فلن يستمروا في انتظار تحميل موقع الويب الخاص بك وإظهار تأثيره المذهل المنظر. المنظر هو خدعة ثقيلة وحتى عندما تقوم بتحسينها ؛ سوف يستغرق وقت تحميل الصفحة. يصبح من واجبك تحسينها قدر الإمكان إذا كنت تشعر بأن الاحتفاظ بتمرير المنظر يساهم بشكل كبير في موقع الويب الخاص بك.
الآن بعد أن فهمنا جميع جوانب التمرير المنظر وكيفية تحقيق أقصى استفادة منه ، دعنا نلقي نظرة على بعض مواقع الويب التي نجحت في تنفيذ التمرير المنظر في تصميم مواقع الويب الخاصة بهم بكفاءة:
1. قصة The Goonies:
دبوس
استخدم موقع الويب هذا تأثير تمرير المنظر المخصص لتسليط الضوء على الفيلم الكلاسيكي The Goonies. يستخدم التمرير المنظر الغامر للتحدث عن حبكة الفيلم والتفاصيل الأخرى مثل اسم المخرج وتاريخ الإصدار وملفات تعريف الشخصية والمزيد. تم إنشاؤه باستخدام WebFlow ويعمل كإشادة بالفيلم الكلاسيكي. عندما تزور موقع الويب ، يستخدم التفاعل الأول تأثير Parallax Scale الذي يساعد المستخدم على الشعور كما لو كان يسافر داخل القصة مع موقع الويب. يتم استخدام كل تأثير اختلاف المنظر لتوجيه إشارة بصرية للزائر ، ويتم ذلك بسهولة. كما أنه يستخدم الصوت للحصول على تجربة غامرة في سرد القصص.
2. Dogstudio:
دبوس
Dogstudio هو استوديو إبداعي يمزج بين الفن والتكنولوجيا والتصميم. لعرض هذا ، قاموا بتصميم موقع الويب الخاص بهم بذكاء. يحتوي مركز موقع الويب على كلب من شأنه أن يتوسع ويدور مع استمرار المستخدم في التمرير عبر موقع الويب. يتغير الضوء الموجود على الكلب أيضًا عند تحريك الماوس فوق مشاريعهم الأخيرة. هناك أيضًا تأثيرات اختلاف المنظر التي تعتمد على الماوس. في بداية صفحة الويب ، إذا قمت بتمرير الماوس الخاص بك إلى اليسار ، فإن الكلب يميل نحو اليمين والعكس صحيح. إنه استخدام فعال للتمرير المنظر.
3. فايرواتش:
دبوس
Firewatch هي لعبة أنشأها كامبو سانتو. يوجد موقع ويب للترويج لهذه اللعبة يستخدم بشكل خفي ولكنه مثير للإعجاب للتمرير المنظر. عندما تزور الموقع ، تتم معاملتك بصورة لافتة تبدو غامرة كما هي. عندما تقوم بالتمرير لأسفل في موقع الويب ، تتحرك الصورة والمحتويات لأعلى ، مما يؤدي إلى إنشاء تأثير تمرير المنظر البسيط والفعال. يستخدم الموقع 6 طبقات لجعله سلسًا كما هو. باقي الموقع ثابت ، حيث يوجد كل المحتوى. يساعدك هذا على قراءة المحتوى والتعرف على اللعبة دون الشعور بدوار البحر مع تأثيرات المنظر المفرطة. يستخدمون تأثير اختلاف المنظر لجذب الانتباه ، ثم تقديم المعلومات ذات الصلة لجذب اهتمام الزائر.
أنت تعرف الآن لماذا يعد التمرير المنظر اتجاه تصميم شائعًا جدًا في عصر اليوم. لديها العديد من المزايا التي يمكن لمصممي الويب استغلالها. لا يوجد مجال للتكرار مع موقع ويب آخر بسبب الاختلافات العديدة المتاحة للتمرير المنظر. تغطي مواقع الويب المذكورة في هذه القائمة أيضًا كيفية استخدام التأثير بالكامل لغرض سرد القصص أو كعنصر إضافي لتعزيز الإحساس بموقع الويب. افهم لماذا وأين ستحتاج إلى استخدام التمرير المنظر في موقع الويب الخاص بك والاستفادة منه. لا تجبره على ذلك من أجل القيمة الجمالية فقط.
