12 اتجاهات الحركة الأساسية للتمرير إلى عرض
تكون عناصر الصفحة المتحركة شائعة جدًا في الصفحات المقصودة ومواقع بدء التشغيل. ولكن لا يتم الحديث عنها دائمًا في دوائر التصميم نظرًا لأن فكرة "تحريك العرض" لا تغطيها كثيرًا.
أستخدم عبارة scroll-to-view لأنه يبدو مثل وصف دقيق. بشكل أساسي أثناء التمرير لأسفل ، تظهر العناصر المتحركة الجديدة في العرض.
إنها تقنية لا تعمل لكل موقع ، ولكنها تضيف لمسة لطيفة إلى تخطيطات معينة. وقد قمت بتنسيق بعض الأشياء المفضلة هنا لعرض كيفية عمل هذه الرسوم المتحركة التي يتم التمرير إليها ولماذا قد تحاول استخدامها بنفسك.
1. غدا النوم
على ال غدا النوم سوف تلاحظ بعض الآثار المتحركة الحميدة إلى حد ما. تتلاشى هذه الأجزاء المختلفة من النص وعبارات الحث على اتخاذ إجراء في جميع أنحاء التخطيط.
المثير للاهتمام هو كيف أن معظم الصور والمناطق الخلفية مرئية بشكل كامل حتى عند التمرير الأول. تستخدم العديد من مواقع الويب الرسوم المتحركة الباهتة لعرض الصور ولقطات الشاشة مع إبقاء النص مرئيًا.
يساعد هذا الاختلاف الطفيف في جذب الانتباه إلى النص عند اختفائه. طريقة رائعة لجذب الانتباه من الزائرين الذين يتصفحون.
2. تويست
أسلوب آخر أراه كثيرًا هو استهداف معظم محتوى الصفحة للرسوم المتحركة على التمرير.
على سبيل المثال تويست الصفحة الرئيسية التطبيق يتضمن أجزاء صفحات مختلفة وكتل نص متحركة داخل وخارج العرض أثناء التمرير. هذه له تأثير يتلاشى لينة جدا لذلك فهي ملحوظة حتى الآن لا قاسية جدا.
قد يكون بعض الزوار منزعجون من التأخير ، لكنني لا أعتقد أنه طويل جدًا. بالإضافة إلى أنه ينشط مرة واحدة فقط ، لذلك إذا وصلت إلى أسفل الصفحة ، يتم تنفيذ جميع الرسوم المتحركة.
3. الغزل التطبيق
لمزيد من الرسوم المتحركة المعقدة تحقق من الغزل التطبيق المسبار. هذا واحد لديه الرسوم المتحركة متعددة الأجزاء وحتى العناصر التي تأتي في عرض من زوايا مختلفة.
تحرّك بعض الصور التوضيحية لشاشة الصورة إلى الأعلى بينما تتحرك أنماط النص / BG المصاحبة في العرض. هذا النمط البديل فريد من نوعه ولا شيء أراه كثيرًا.
ومع ذلك ، فإن الصفحة المقصودة بسيطة للغاية ولا يوجد الكثير هنا لجذب الانتباه. في هذه الحالة ، تختلف الرسوم المتحركة بشكل جيد.
4. DashFlow
من بين كل هذه الأمثلة أعتقد DashFlow يستخدم تقنيات الرسوم المتحركة الأكثر شيوعا.
تقوم أداة lander هذه بنقل الصور والنص إلى عرض الكل في جلسة واحدة. إنها عملية بسيطة وتستخدم تخطيطًا بعمود واحد بحيث يتدفق كل المحتوى مباشرة في مسار خطي.
لا يوجد شيء خاص بطبيعته حول هذا التصميم يتجاوز الأسلوب الواضح للغاية في تنشيط العناصر على التمرير. نمط رائع إذا كان لديك موقع ويب مماثل وتريد الحفاظ على الرسوم المتحركة بسيطة.
5. تعزيز Quuu
Quuu الترويج يبقي الرسوم المتحركة إلى الحد الأدنى ويستخدم فقط في مناطق CTA.
لا أستطيع أن أقول ما إذا كان هذا يزيد التحويلات ولكن يبدو أن هذا هو الهدف. عند تحميل الصفحة لأول مرة ، يتم عرض الرأس العلوي جدًا في العرض مع حركة متحركة مائلة على CTA.
أثناء التمرير لأسفل ، ستلاحظ أن باقي الصفحة ثابت جدًا. ولكن في الجزء السفلي ، هناك CTA أخيرًا أعلى التذييل الذي ينشط أيضًا ويدير نفس الحركة المتحركة المائلة.
لتظهر لك أنه يمكن أن يكون لديك تأثيرات متحركة على التمرير لا تعمل على الصفحة بأكملها.
6. Qonto
الصفحة الرئيسية ل Qonto لديه تأثير مثير للاهتمام على التمرير لعرض الرسوم المتحركة. ويستخدم نفس النوع من الرسوم المتحركة عبر الموقع بأكمله ويحفز العناصر الفردية في العرض من الجانب.
بالنسبة لغالبية الصفحة ، يتضمن هذا أقسام الرموز التي تحتوي على رسم صغير فوق بعض المحتوى يشرح ميزات التطبيق. ليس دقيقا جدا ولكن ليس بشكل مفرط أيضا.
بالإضافة إلى ذلك ، يمكنك العثور على بعض أنماط الرسوم المتحركة الأخرى في رأس الصفحة جنبًا إلى جنب مع بعض صور BG التي تتلاشى. هذه الصفحة هي مجرد مثال رائع على ماذا الرسوم المتحركة على شبكة الإنترنت يقدر على.
7. تنزه
على سبيل المثال من الرسوم المتحركة خفية تحقق من رفع .
صفحتهم تتناوب بين العناصر المتحركة والعناصر الثابتة. لكن تأثيرات الحركة سريعة حتى لا تشعر بالضيق في انتظار المحتوى القابل للعرض.
هذا هو تفضيل لأي تأثير التمرير إلى الحركة. انها دائما تقنية جميلة ولكن يجب أن يكون توقيت سريع وإلى النقطة. لا أحد يرغب في الانتظار حتى يظهر المحتوى ويتفرج بوضوح هذا الأمر.
8. مشروع فاي
إذا كان هناك أي شخص يعرف جيدًا لـ UX فهو Google. وعبر جميع منتجاتهم لديهم الكثير من الصفحات المقصودة ، مشروع فاي كونه مثال واحد مع بعض الرسوم المتحركة الرائعة.
تنطبق هذه العناصر على الرموز فقط ولا تتلاشى ، بل تنبثق من أسفل الصفحة. أثناء التمرير ، ستعثر على رموز يتم عرضها في كل مقطع صغير.
إنه تأثير خفي إلى حد ما ولكنه يضيف بعض الحياة في التصميم. وهو يعتمد فقط على وضع المشاهد على الصفحة ، لذلك إذا قمت بالتمرير إلى الأعلى والتحرك لأسفل ، فسيتم تحييدك بنفس تأثيرات الرسوم المتحركة.
9. قاعدة
ال الصفحة الرئيسية لـ CRM الأساسي هو مثال ممتاز على الرسوم المتحركة البسيطة في العمل. يستخدم هذا الموقع تأثيرات حركة مخصصة لنقل الصور إلى خط عين المشاهد.
استنادًا إلى عدد الصفحات المقصودة التي أراها يوميًا ، يعد هذا نموذجًا مثاليًا لما أتوقعه. انها ليست حقا الرسوم المتحركة المعقدة لإعادة إنشائها ولا يؤثر على التجربة أكثر من اللازم.
شيء واحد أود أن يتم تحميل الرسوم المتحركة أسرع قليلا. ولكن أبعد من ذلك أعتقد أن هذا هو مثال رئيسي على الصور المتحركة على التمرير مع تخطيط نظيفة جدا للتمهيد.
10. أي قائمة
كل أفضل تطبيقات المحمول لديها مواقعها الخاصة للترويج. وأفضلها عادة ما يكون بعض أنماط الرسوم المتحركة الرائعة.
AnyList يمزج بعض التقنيات المختلفة معًا في صفحة واحدة. تنقسم صورة رأس الصفحة إلى أعلى من أسفل منطقة القطع ، ولكنها الرسوم المتحركة "المتحركة" الوحيدة في الصفحة.
يتلاشى أي شيء آخر تمامًا ، ويستخدم كل ذلك وقت تحميل سريعًا جدًا للرسوم المتحركة. يتم استخدام هذه التقنيات في مكان آخر على الموقع مما يمنحه إحساسًا أكثر تماسكًا.
11. ارنست
نمط الصفحة لـ إرنست يختلف قليلاً عن الصفحات المقصودة الأخرى التي قمت بتغطيتها.
يستخدم الرسوم المتحركة التمرير المنظر لإنشاء حركة على تخطيط صفحة واحدة بأقسام مختلفة.
تختلف هذه بناءً على الاتجاه الذي تقوم بالتمرير إليه سواء قمت بالتحرك لأعلى أو لأسفل وبأي سرعة. وتختلف أيضًا مع الكثافة استنادًا إلى الأقسام المختلفة للصفحة.
يمكنك التنقل باستخدام قائمة التنقل في النقطة الجانبية ، وهذا يقفز بسرعة حول الصفحة إلى مناطق مختلفة. انها واحدة من التقنيات القليلة التي غالبا ما تراها على صفحات المنظر وبالتأكيد تساعد أرنست على التميز عن الآخرين.
12. TaxiNet
لالتقاط لمحة من الرسوم المتحركة صفحة كاملة في العمل نلقي نظرة على TaxiNet موقع الكتروني.
إنها عبارة عن smorgasbord من تأثيرات الحركة المستندة إلى التمرير مرتبطة بالأيقونات والنص والصور وحتى أنماط الخلفية. تحرّك ألوان خلفية الصفحة الفردية للعرض مع المستخدم ، وبالتأكيد ليست تقنية نموذجية ولكنها بالتأكيد مثيرة للاهتمام.
إذا كنت تحب هذا النمط ، يمكنك تطبيق منهج مشابه تمامًا على صفحتك المقصودة. فقط تأكد من الحفاظ على الرسوم المتحركة سريعة وسريعة لأن لا أحد يريد الانتظار حتى يتم تحميل الرسوم المتحركة الأنيقة.
ولكن إذا كنت تعمل بشكل صحيح ، فإن عناصر التمرير إلى العرض هذه تضيف تأثيرًا جيدًا إلى أي صفحة مقصودة.
