الصفحة الرئيسية » تصميم المواقع » نصائح جميلة صفحات الهبوط والأمثلة

    نصائح جميلة صفحات الهبوط والأمثلة

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

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

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

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

    نصائح لتصميم الصفحة المقصودة

    بعض النصائح السريعة للبدء منها عند تصميم الصفحة المقصودة:

    1. استخدم مبدأ AIDA

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

    1. وعي - جذب الانتباه من الزائر
    2. فائدة - والتي يمكن أن تثار من خلال تسليط الضوء على الفوائد التي تعود على العميل
    3. رغبة - لحث العملاء على فكرة أنهم تريد المنتج أو الخدمة
    4. عمل - العملاء الذين يقومون بعملية الشراء

    2. ليس الكثير من الانحرافات. ترك وسيلة للخروج

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

    3. جعله اجتياز اختبار وميض

    عادةً ما يتعين على الصفحة المقصودة جذب انتباه الزائر في أول 3 ثوانٍ من الدخول. إذا كان الضيف يومض ولم يتمكن من رؤية ما ينبغي أن يجده على الصفحة بوضوح أو لا يهتم بما رآه ، فمن المرجح أن يرتد خالي الوفاض.

    4. لا تخلق توقعات خاطئة

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

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

    عرض: الصفحات المقصودة الجميلة

    99Designs

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

    123RF

    يُظهر 123RF بيانًا واضحًا للهدف في هذه الصفحة المقصودة باستخدام منزلق الصورة ومربعات الوسيط الأربعة. أنت تفهم في لحظة ما هي الخدمة وكيف يمكنك استخدامها (البحث ، التسجيل ، الدفع الفوري ، اشتراك الشراء). الخلفية الرمادية الفاتحة غير مزعجة وتسلط الضوء على الجوهر ، كونها الصورة. ما أعتقد شخصياً أنه يمكنهم تحسينه هو قائمة فئات التصوير الفوتوغرافي للأوراق المالية ، إنها محشوة قليلاً. و CTA خفية بعض الشيء بالنسبة للمربعات القابلة للنقر.

    Favomatic

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

    BiznessApps

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

    Brusheezy

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

    الهروب من السجن

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

    PageLines

    بساطتها هو المفهوم الرئيسي هنا. أنا شخصياً أحب أن هذه الصفحة لا تخبرك بكل شيء على الفور ، ولكنها تدعوك لاكتشافه. ما لا أجده ممتعًا ، مع ذلك ، هو الفيديو الذي يبدأ تلقائيًا (ميزة أتجنبها عمومًا) - حتى لو لم يكن Andrew Powers ماهراً فحسب ، بل وسيم أيضًا! أيضًا ، قد تكون حقيقة عدم وجود CTA فوريًا بمثابة عيب لموقع الويب.

    بيكو

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

    Shoeboxed

    الأسطر الوصفية لكل قسم هي مثال على استخدام اللغة الوصفية. أنت تفهم الرسالة في ثانية مقسمة ، حيث أن خط البصر الخاص بك يقوم بمسح الصف الأول بسرعة ويصل إلى زر CTA. إذا كنت لا تزال مترددًا ، فهناك شهادة للمساعدة ، إلى جانب موافقات قوية - ألا تثق في شركة موجودة في Forbes و Tech Crunch؟ أود.

    SquareSpace

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

    ملحوظة المحرر: هذا هو مكتوب من قبل لورا مويسي ل Hongkiat.com. حصلت لورا على شهادة البكالوريوس في علوم الاتصال وتقضي معظم الوقت في متابعة شغفها بالتصميم والكتابة. تعمل لصالح 123ContactForm ، وهي منشئ النماذج والمسح عبر الإنترنت والتي تساعد المستخدمين على إنشاء نماذج جميلة لأي صفحة ويب.