يمكن تصميم النماذج البريدية بأي طريقة يرغب بها المطور، وما دام هناك مجال للابتكار اللذي يصب في مصلحة الزائر، شرط أن يحضى هذا الأخير بتجربة جيدة في الموقع، وهذا يقدونا للحديث عن user experience أو اختصارا UX، الذي هو مهنة قائمة بذاتها لا تختلف عن Web designer أو Web Developer وأن كان من الأجدر بمطور الويب الإلمام ب UX
يجب أن تقدم تجربة فريدة وممتعة للزائر وهو يتصفح وينتقل بين صفحات الموقع، وأن يشعر بأن الموقع يهتم به كإنسان وليس ك Robot، وسأعود لاحقا للحديث عن هذا الموضوع من وجهة نظري.
في هذا الدرس، سأقوم بتصميم نموذج تسجيل مع تغيير طريقة عرض الحقول ولما لا إضافة عبارات أداعب بها الزائر، كي لا يشعر أنه أمام نموذج بريدي عادي لا يختلف عن ملايين اللنماذج التي يصادفها كل يوم.
تجربة النموذج البريدي:
الطريقة:
بعد أن نضع النصوص والحقول في نفس السطر أو في فقرة، نضيف بعض الخصائص على Input
form input { border:0; border-bottom:1px dotted #666; background: none; color:#C13E1F }
من المهم أن نضيف هذا السطر في البداية، كي لا يظهر border على كامل input
form input { border:0; }
زر الأرسال كي يظهر بشكل مختلف نضيف له Class وخصائص مختلفة:
<input type="submit" value="sign up" class="submit" />form input.submit { background: #467B2C; color:#fff; border:none; padding:.5em }
يمكن إنتقاء عبارات تضعها بدل your username .. والعبارات العادية، طالما أنك صممت النموذج على شكل فقرة أو رسالة ان صح التعبير، يمكن أيضا تغيير لون وشكل الحقول لتكون أكثر وضوحا ..
درس رائع
افتقدنا لمثل هذه الدروس.
أعجبتني صفحة المثال :)
طريقة رائعة لنماذج التسجيل
شكرا
أكثر ما عجبني في الموضوع هو العنوان المناسب جدا..
أكيد الفرق واضح جدا مقارنة مع نماذج التسجيل في المنتديات مثلا..
البساطة و السهولة من أهم شروط إنجاح الـ ui ..
شكرا لك
هاد شغل حلو كتيرررر التبخل علينا من ابدعاتك
الله يعطيك العافية