أفكار نموذج تسجيل الدخول / التسجيل وأمثلة جميلة

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

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

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

النظر في مدخلات متعددة

لبدء الأمور ، فكر في نموذج اتصال صغير من Foundation Six Web Design. نعم ، هذا ليس نموذج تسجيل دخول ، لذلك قد يؤدي إلى إيقاف تشغيل الموضوع قليلاً. ومع ذلك ، فإن تصميم صفحاتهم رائع للغاية ويوضح لك ما يمكن أن يحققه القليل من الإبداع.

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

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

صناديق تسجيل الدخول مسج

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

تقدم Pixel2Life بعض الأفكار الرائعة حول مجال جديد لإدخال البيانات. من صفحتهم الرئيسية ، يمكنك النقر فوق رابط تسجيل الدخول وإحضار مربع تسجيل دخول ديناميكي يعمل بالطاقة jQuery. يحتوي هذا النموذج على استدعاء Ajax لبرنامج نصي PHP خارجي يتحقق من بيانات اعتماد معلومات تسجيل الدخول الخاصة بك ، وبمجرد معالجته ، يمنح أو يرفض الوصول.

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

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

بسيطة من صفحة واحدة التسجيلات

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

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

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

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

بناء قبالة مبهرج الآثار

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

يشبه هذا النهج المنهجي فيما يتعلق بمنطقة تسجيل الدخول إلى مسجّل Pixel2Life. ومع ذلك ، فإن الاختلاف مع Tumblr هو أن الشبكة لا يمكنها تقديم أي محتوى لأولئك الذين ليس لديهم مدونة (بغض النظر عن تصفح حسابات الآخرين). الفائدة الحقيقية من tumblr هي إنشاء مدونتك الخاصة ومتابعة الآخرين - وبالتالي فإن هدفك الرئيسي في الصفحة الأولى هو إما إنشاء حساب أو تسجيل الدخول.

هناك بعض الأخطاء مع هذا النظام. لا سيما في IE6 / IE7 لا يدعم هذه الخصائص الجديدة CSS. يستخدم أيضًا في الصفحة الرئيسية نظام لإضافة عناصر التسمية إلى قيم إدخال النماذج - بشكل أساسي يتم تجاوز علامة “الافتراضي” الأحرف المستخدمة لصناديق البريد الإلكتروني / كلمة المرور.

تختفي هذه التصنيفات في التركيز على المتصفحات الحديثة مثل Chrome / Firefox. لكن لا حظ لهذا الحظ مع المتصفحات المهملة التي ، كما يمكنك أن تتخيل ، تحاول مزعج إعادة قراءة المدخلات الخاصة بك!

20+ أمثلة على تصميم النموذج الجميل

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

Snoggle الأخبار