18 أمثلة للصفحات المقصودة ذات تصميم مثير للاهتمام ورقائق غير عادية

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

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

انظر ، وكن مصدر إلهام ، طبّق أفكارك المفضلة في الممارسة ، وامزجها بأفكارك ولا تنس إجراء اختبارات A / B - هذه هي الوصفة الصحيحة الوحيدة لإنشاء صفحات مقصودة قاتلة.

شكل موسع

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

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

زرين CTA

على الصفحة المقصودة لجدولة المهام wunderlist.com/ru - نداءان للعمل في وقت واحد ، مما يعزز بعضهما البعض: "إنشاء حساب مجاني" و "تنزيل Wunderlist". ينقر المستخدمون على كلا الرابطين ، وينمو التحويل ، وتؤدي الصفحة المقصودة وظيفتها بشكل جيد.

أرقام محددة (النتائج)

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

نحن نفعل الهبوط مع مراعاة مصالح آسيا الوسطى وسهولة الاستخدام. 7 أيام - والهبوط جاهز. الاتصال!

التخصيص

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

شكل الإجابة مريحة

في العديد من عمليات الهبوط والمواقع ، يمكنك طرح سؤال فقط من خلال النموذج. هذا يعني أنك بحاجة إلى تحديد الاسم واللقب ، وترك الهاتف والبريد الإلكتروني. في بعض الأحيان بشكل عام عليك إدخال كلمة التحقق والأكواد - رعب! من الواضح أن هذا يتم من أجل الحصول على خيوط. ولكن هناك خيار آخر - كما هو الحال في الهبوط "الهدف Cerebro". إذا كنت مسجلاً في "فكونتاكتي" ، فلن تحتاج إلى ملء أي شيء - خذها واكتبها. والعميل مرتاح ، والمالك جيد - تبقى جهة الاتصال ، يمكنك الاستمرار في العمل.

مراجعات العملاء

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

مظاهرة النتائج

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

تأثير المنظر

التمرير المنظر هو تأثير خاص نظرًا لأن صور الخلفية تتحرك أبطأ قليلاً من تلك الموجودة في المقدمة. إليك كيف على موقع valenkivodka.com. Proscroll Landing - زجاجة الفودكا ستتبعك من أعلى إلى أسفل ، وتتحرك ببطء. الفقاعات السحرية في جميع أنحاء الخلفية تجعلك تتذكر عيد رأس السنة. تحولت عقليا خارجا!

حيوية

بشكل عام ، الرسوم المتحركة وظائف الكثير. يؤدي نقل الصور والكائنات إلى جذب انتباه المستخدم وتوجيه انتباهه ، وتوجيه نظرته إلى أهم عناصر الصفحة المقصودة (الزر CTA ، والمؤقت ، والقطعة ، وما إلى ذلك) ، واستبدال النص جزئيًا. مثال واحد على madwell.com. اتبع الرابط - تحرك السلاسل. وليس فقط أنها تتحرك - يستمعون إلى كل حركة الماوس.

الانتباه ، والسؤال: ما وظيفة هذه الرسوم المتحركة أداء؟ يمكنك الرد في التعليقات على هذه المادة.

الرسوم التوضيحية

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

مثال آخر على الصفحة المقصودة Satellite-express.ru. ويكمل الرسم التوضيحي العنوان الرئيسي: "الشيء الرئيسي مع مرض السكري هو إيجاد توازن".

Multilendingi

تغييرات العرض الهبوط بناءً على طلبات المستخدم. سجل "بيع الكوخ" - اقرأ على الموقع عن الكوخ. سجل "المرآب" - حول المرآب. لقد كتبنا المزيد عن هذه التكنولوجيا في المقالة حول كيفية جعل الملكية متعددة لأنفسنا.

هنا مثال على multilending لشركة Oviont ، وهو ما فعلناه.

يعتزم العميل إنشاء صفحات مقصودة منفصلة لثلاثة منتجات: أدوات التشغيل الآلي للمكاتب.

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

لكل منتج حققنا أقسام مفصلة. المبلغ الإجمالي للمحتوى على التوسيم المتعدد هو حوالي 30 ألف حرف. تحتوي كل صفحة على أقسام مفصلة:

  • وصف الوظيفة ؛
  • وحدات إضافية ؛
  • الأسئلة المتداولة حول الاستخدام ؛
  • اسعار.
  • الاستعراضات.

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

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

تأثير التحويم

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

انقسام تخطيطات

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

3D الرسومات والواقع المعزز

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

ثم يقوم بتثبيت التطبيق وفتحه على الهاتف الذكي و "ينظر" إلى المكعب من خلال كاميرا الجهاز.

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

يمكن رؤية نموذج ثلاثي الأبعاد للمكعب في الرسم التوضيحي (gif).

ماذا يريد العميل

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

ماذا فعلنا

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

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

الهبوط هو التكيف تماما.

اختيار التفاعلية للألوان الطلاء والأثاث الداخلي

الصفحة المقصودة غير العادية "DSK.Color" هي القدرة على اختيار لون الأثاث والعناصر الداخلية بشكل مستقل باستخدام لوحة تفاعلية.

شركة "DSK.Color" ترسم أي سطح بألوان مختلفة. يمكنك طلب تلوين الأثاث والأجهزة المنزلية والدراجات والآلات الموسيقية وغيرها من العناصر. يمكن للعميل اختيار أي لون.

الخدمة الأكثر شعبية هي طلاء الأثاث والأدوات الداخلية. يمثل حوالي 80 ٪ من عمل العميل.

ماذا يريد العميل

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

ماذا فعلنا

قدمنا ​​للعميل فكرة: لإعطاء الزائر الفرصة لاختيار لون الأثاث والأدوات الداخلية بشكل مستقل.

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

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

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

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

التحميل المسبق غير عادية وعادية

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

ما هو التحميل المسبق وما المهام التي يحلها

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

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

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

يتم تطبيق أدوات التحميل المسبق باستخدام أدوات تطوير الواجهة الأمامية القياسية: HTML و CSS و JavaScript ومكتبات وأطر عمل إضافية ، على سبيل المثال ، jQuery و React.

كيف يمكننا تحسين عمليات الهبوط مع التحميل المسبق

نقوم بإنشاء أدوات تحميل مسبقة فريدة ، بما في ذلك أدوات التحميل المسبق. إليكم بعض أعمالنا.

  • Qubi

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

  • Levellen

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

  • Whalenet

في صفحة Whalenet المقصودة ، يمكنك رؤية غزل في شكل مستطيل الفيروز.

  • Parielle

يحتوي موقع Parielle على أداة تحميل مسبقة على شكل دائرة كلاسيكية.

  • Projectto

في مشروع الهبوط ، استخدم أداة التحميل المسبق على شكل مستطيل.

عادة ما تتم مناقشة ظهور أداة التحميل المسبق في مرحلة تصميم الصفحة المقصودة.

متفاعل

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

كيف يعمل الهبوط

يوفر Landing معلومات حول استئجار أماكن العمل في مركز أعمال. السر الرئيسي للصفحة المقصودة موجود في قسم "المكاتب". هنا يمكن للمستخدم رؤية مدى توفر المكاتب المجانية في كل طابق من المبنى.

عندما تحوم المؤشر في مكتب مجاني ، يظهر زر "Details".

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

ميزات التنفيذ

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

التصميم المناسب

في هذا المثال ، لا توجد شرائح تقنية معقدة وتأثيرات تصميمية - تأخذ عملية الهبوط بأكملها صورة جميلة: الخلفية والألوان والصور اللذيذة لكافيار Astrakhan. Odnostranichnik astrahancaviar.ru - مثال جيد على كيفية رغبة المصمم في شراء منتج. وتناول الطعام على الفور!

وأخيرا ، حول قرحة - بعض الأمثلة على الهبوط الرهيب. على النقيض من ذلك ، feyspalma ، معاناة عاجزة وكل ذلك. لن أصف ما هو الخطأ فيها - أقترح عليك حل هذه المشكلات بنفسك. Ita-a-ak ...

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

شاهد الفيديو: حكم و أمثال رائعة عن المرأة (شهر اكتوبر 2019).

ترك تعليقك