Φόρμα Σύνδεσης / Εγγραφής Ιδέες και Όμορφα Παραδείγματα

Όλα σε ολόκληρο τον σύγχρονο ιστό, βλέπουμε έναν αυξανόμενο αριθμό θέσεων για την είσοδο των χρηστών. Αυτά περιλαμβάνουν καροτσάκια αγορών, διαδραστικά παιχνίδια ιστού και σίγουρα έντυπα εγγραφής στο διαδίκτυο. Φαίνεται ότι όχι μόνο οι σχεδιαστές πρέπει να επικεντρώνονται στο σχεδιασμό της σελίδας, αλλά και η αισθητική είναι εξίσου ζωτικής σημασίας.

Εξετάστε πόσες φόρμες μπορεί να έχετε συμπληρώσει κατά τη διάρκεια του ιστορικού σας στο Διαδίκτυο. Υπάρχουν αμέτρητα παραδείγματα αυτών από φόρουμ, πίνακες μηνυμάτων, ιστολόγια και πολλά άλλα. Σε αυτό το άρθρο θα ρίξουμε μια ματιά σε μερικά μεγάλα κόλπα για το σχεδιασμό των εντύπων σας στη σελίδα.

Είναι συνετό να εξετάσουμε ορισμένα από τα αντικείμενα εδώ από μια αντικειμενική προοπτική. Παρόλο που πολλές φόρμες σύνδεσης και εγγραφής λειτουργούν καλά με έναν τύπο ιστότοπου, δεν υπάρχει καμία τελική κρίση για το τι είναι το “καλύτερος” λύση. Χρησιμοποιήστε τη σχεδιαστική σας διαίσθηση για να εφαρμόσετε κομμάτια από τις φόρμες που προσβλέπουμε προς την κατεύθυνση.

Εξετάστε τις πολλαπλές εισόδους

Για να ξεκινήσετε τα πράγματα, εξετάστε μια μικρή φόρμα επικοινωνίας από το Foundation Six Web Design. Ναι αυτό δεν είναι μια φόρμα σύνδεσης, ώστε να μπορεί να οδηγήσει λίγο εκτός θέματος. Ωστόσο, ο σχεδιασμός των σελίδων τους είναι πολύ εντυπωσιακός και σας δείχνει τι μπορεί να κάνει μια μικρή δημιουργικότητα.

Καθένα από τα πεδία εισαγωγής προσφέρει χώρο για να πληκτρολογήσετε προσωπικές πληροφορίες επικοινωνίας - όνομα, ηλεκτρονικό ταχυδρομείο κλπ. Τα στυλ υπερβαίνουν τα συνηθισμένα, προσφέροντας εισροές χρηστών σε ένα είδος χειρόγραφου καλλιγραφίας. Αυτός ο τύπος μορφοποίησης θα κρατήσει τους χρήστες σας σε κατάσταση απορίας και θα επιτύχει έναν στόχο με πολύ υψηλότερα πρότυπα σχεδίασης.

Θα θελήσετε να εφαρμόσετε στυλ όπως αυτά παρόμοια με όλες τις σελίδες σύνδεσης. Σίγουρα δεν θα συνιστούσα να κολλήσω με το ίδιο στυλ εισόδου κειμένου και επιλογών / επιλογών μενού. Όταν τρέχετε το μυαλό σας για δημιουργικότητα, σκεφτείτε πώς πρέπει να τοποθετηθεί κάθε στοιχείο: αφθονία χώρου μεταξύ στρώσεων, μεγάλο ευανάγνωστο κείμενο και ακόμη και συνδέσεις στην πλαϊνή γραμμή στην απευθείας γραμμή ηλεκτρονικού ταχυδρομείου.

jQuery κουτιά σύνδεσης

Αυτό έχει χρησιμοποιηθεί σε αμέτρητες ιστοσελίδες στο παρελθόν και σίγουρα θα το δείτε στα νέα σχέδια. Πολύ μακριά είναι οι ημέρες όπου οι συνήθεις πρακτικές θα έφερναν τους χρήστες σε μια νέα σελίδα για κάθε βήμα της διαδικασίας σύνδεσης. Κανονικά, αυτό θα σήμαινε μια σελίδα για την εισαγωγή των δεδομένων σας και μια νέα σελίδα για την επεξεργασία των πληροφοριών σύνδεσης.

Το Pixel2Life προσφέρει κάποια φανταστική εικόνα σε ένα νέο πεδίο εισαγωγής δεδομένων. Από την αρχική σελίδα τους μπορείτε να κάνετε κλικ στο σύνδεσμο σύνδεσης και να εμφανίσετε ένα δυναμικό πλαίσιο σύνδεσης με jQuery. Αυτή η φόρμα περιέχει μια κλήση Ajax σε μια εξωτερική δέσμη ενεργειών PHP που ελέγχει τα διαπιστευτήρια των στοιχείων σύνδεσής σας και, αφού υποβληθεί σε επεξεργασία, είτε χορηγεί είτε αρνείται πρόσβαση.

Πηγαίνοντας ένα ακόμη βήμα, το ευφυές μπορεί να παρατηρήσει έναν σύνδεσμο εγγραφής ακριβώς κάτω από το πλαίσιο σύνδεσης. Αυτό προσφέρει μια πολύ πιο ομαλή εμπειρία χρήστη για όσους επιθυμούν να εγγραφούν για τον ιστότοπο αλλά δεν μπορούν να εντοπίσουν το σύνδεσμο εγγραφής.

Εάν ένας χρήστης δεν έχει λογαριασμό αλλά θα ήθελε να κάνει ένα, αυτό θα τα φέρει στη σελίδα εγγραφής χωρίς δυσλειτουργίες σελίδων buggy. Το πλαίσιο σύνδεσης θα εξακολουθεί να είναι μια βιώσιμη επιλογή για την πρόσβαση στον δικό σας λογαριασμό, επιτρέποντας ωστόσο η επιλογή να δίνει τη δυνατότητα για μεγαλύτερες αποδόσεις και μεγαλύτερους όγκους νέων καταχωριζόντων.

Απλές εγγραφές μιας σελίδας

Ένα άλλο παράδειγμα μετατόπισης που βλέπουμε είναι η έλλειψη λεπτομερειών για νέες εγγραφές λογαριασμών. Αυτό δεν είναι απαραιτήτως ένα κακό στατιστικό στοιχείο, υποθέτοντας ότι οι χρήστες μεγαλώνουν ανυπόμονοι να συμπληρώσουν τα δεδομένα. Οι αριθμοί δείχνουν πραγματικά ιστοσελίδες με μικρότερες σελίδες εγγραφής βαρύτερο καταλόγους νέων χρηστών σε καθημερινή βάση.

Το Sikbox προσφέρει μια ελαφριά επιλογή για τους επισκέπτες να δημιουργήσουν το δικό τους πλαίσιο αναζήτησης για έναν ιστότοπο. Η μόνη απαίτηση είναι ο δικό σας προσαρμοσμένος τομέας στον οποίο θα παρέχονται αποτελέσματα αναζήτησης. Τα πεδία εισαγωγής είναι μεγάλα, το κείμενο είναι πολύ απλό να το διαβάσετε και υπάρχουν απολύτως καμία διαφήμιση να αποσπά την προσοχή των χρηστών από το έργο της κατασκευής της φόρμας αναζήτησης!

Τώρα αυτό δεν είναι η καλύτερη μορφή για να χτίσετε μακριά όταν δημιουργείτε τη δική σας σελίδα εγγραφής για ένα φόρουμ ή ένα ιστολόγιο αρχείου. Αυτά, με τυπικό ορισμό, απαιτούν τουλάχιστον κάποιο είδος διευθύνσεων ηλεκτρονικού ταχυδρομείου / ονόματος χρήστη μαζί με έναν κωδικό πρόσβασης. Ορισμένες εφαρμογές ιστού νέας ηλικίας θα παράγουν δυναμικούς κωδικούς πρόσβασης για τους χρήστες, μόνο και μόνο για να κάνουν τη διαδικασία εγγραφής πιο γρήγορη.

Φυσικά, η ανταλλαγή εδώ δεν έχει τον έλεγχο στο τέλος του χρήστη για να δημιουργήσει τον δικό του κωδικό πρόσβασης τον οποίο πολλοί άνθρωποι συνηθίζουν να.

Δημιουργήστε φανταχτερά εφέ

Μία από τις μεγαλύτερες εμπειρίες εγγραφής που είχα ποτέ ήταν η δημιουργία του πρώτου μου λογαριασμού Tumblr. Η αρχική σελίδα του ιστότοπού τους προσφέρει μια μορφή σύνδεσης και εγγραφής τοποθετημένη ακριβώς κάτω από την άλλη με νέα αποτελέσματα CSS3 highlight / fade.

Αυτή η συστηματική προσέγγιση είναι παρόμοια με την περιοχή σύνδεσης του jQuery του Pixel2Life. Ωστόσο, η διαφορά με το Tumblr είναι ότι το δίκτυο δεν μπορεί να προσφέρει περιεχόμενο σε άτομα χωρίς blog (εκτός από την περιήγηση σε άλλους λογαριασμούς). Το πραγματικό όφελος από το tumblr δημιουργεί το δικό σας blog και ακολουθώντας άλλους - ο κύριος στόχος σας στην πρώτη σελίδα είναι είτε να δημιουργήσετε έναν λογαριασμό είτε να συνδεθείτε.

Υπάρχουν ορισμένα σφάλματα με αυτό το σύστημα. Πιο συγκεκριμένα στο πλαίσιο του IE6 / IE7 που δεν υποστηρίζει αυτές τις νέες ιδιότητες CSS. Χρησιμοποιείται επίσης στην αρχική σελίδα είναι ένα σύστημα για την προσθήκη στοιχείων ετικέτας σε τιμές εισόδου φόρμας - βασικά το overruling “Προκαθορισμένο” χαρακτήρες που χρησιμοποιούνται για πλαίσια ηλεκτρονικού ταχυδρομείου / κωδικού πρόσβασης.

Αυτές οι ετικέτες ξεθωριάζουν με εστίαση σε σύγχρονα προγράμματα περιήγησης όπως το Chrome / Firefox. Αλλά δεν υπάρχει τέτοια τύχη με τα ξεπερασμένα προγράμματα περιήγησης τα οποία, όπως μπορείτε να φανταστείτε, είναι αρκετά ενοχλητικά προσπαθώντας να ξαναδιαβάσετε τις δικές σας εισόδους!

20+ Παραδείγματα Όμορφου Σχεδίου Φόρμας

Παρακάτω είναι μια γρήγορη συλλογή φωτογραφιών με φανταστικά σχέδια φόρμας σύνδεσης. Αυτά έχουν επιλεγεί από τον ιστό και περιλαμβάνουν πολλές μορφές εφαρμογών ιστού. Αν έχετε προτάσεις για άλλους ιστότοπους, μπορείτε να τις μοιραστείτε στην παρακάτω ενότητα σχολίων!

Snoggle News