Πώς να σχεδιάσετε ανταποκρινόμενες και συσκευές-αγνωστικές μορφές

Sep 11, 2025

πως να

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

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

01. Σχεδιασμός για κάθετη κύλιση

A single column layout works better — Μια διάταξη μιας στήλης λειτουργεί καλύτερα

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

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

02. Τοποθετήστε ετικέτες πάνω από τα πεδία

Place labels above form fields — Τοποθετήστε ετικέτες πάνω από τα πεδία φόρμας

Οι ετικέτες λένε στους χρήστες ποια είναι τα αντίστοιχα πεδία εισόδου. Όταν επιλέγετε πού να τοποθετήσετε τις ετικέτες σας, έχετε δύο επιλογές: αριστερά ευθυγραμμισμένα ή κορυφαία ευθυγραμμισμένα.

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

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

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

Γράφοντας τις ετικέτες σας πάνω από τα πεδία εισαγωγής, το καθιστά πολύ πιο εύκολο να γράψετε σαφείς και ουσιαστικές ετικέτες πεδίου, καθώς δεν θα περιορίζεστε σε μία ή δύο λέξεις.

03. Χρησιμοποιήστε στόχους βρύσης

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

Προς το παρόν, το μεγαλύτερο μέγεθος στόχου είναι για συσκευές αφής, οπότε πρέπει να σχεδιάσετε πρώτα την αφής. Αυτό εξασφαλίζει ότι οι χρήστες δεν θα πρέπει να κάνετε μεγέθυνση για να εισέλθουν στο κείμενο ή να επιλέξουν μια επιλογή. Οι περιοχές με δυνατότητα κλικ θα πρέπει να ακολουθήσουν τον κανόνα Fat Finger και να μην εμπιστεύονται τις γύρω περιοχές: το μέσο όρο ανθρώπινο δάκτυλο είναι 10 x 14mm και το μέσο όρο το δάκτυλο είναι 8-10mm, κάνοντας 10 x 10mm ένα καλό ελάχιστο μέγεθος στόχου αφής.

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

Μπορεί να είναι δύσκολο να διαβάσετε το περιεχόμενο σε κινητές συσκευές, οπότε η λήψη των εισόδων 100% και η εξασφάλιση του κειμένου έχει οριστεί τουλάχιστον 16px (1em) θα κάνει μεγάλη διαφορά. Με αυτόν τον τρόπο, δεν θα χρεωθεί καμία Zooming Pinch ή επιπλέον κύλιση για να διαβάσετε τις απαιτούμενες πληροφορίες.

04. Χρησιμοποιήστε πεδία φόρμας HTML5

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

Συμπεριλάβετε τους τύπους εισόδου αριθμός , ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ , τηλ , ουσία και ημερομηνία , και η είσοδος πληκτρολογίου στις κινητές συσκευές σας θα ενημερώσει για να διευκολύνει τον χρήστη να συμπληρώσει τη φόρμα. Δεν απαιτεί να προσθέσετε επιπλέον κλάσεις σε εισόδους φόρμας στυλ, το μόνο που χρειάζεται να κάνετε είναι να χρησιμοποιήσετε έγκυρα τύπους εισόδου HTML5:

<input type="email" id="input-email">

05. Χρησιμοποιήστε το FlexBox

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

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

Αλλά με την εμφάνιση του μοντέλου εύκαμπτου κιβωτίου HTML (ή Flexbox ), Η HTML απέκτησε τελικά έναν πλούσιο κινητήρα μορφοποίησης κιβωτίων που αντιμετωπίζει πολύπλοκες διατάξεις, συμπεριλαμβανομένων των μορφών HTML.

Το FlexBox μας δίνει μεγάλη ευελιξία για γρήγορη οικοδόμηση όμορφων μορφών. Το βασικό πράγμα που πρέπει να καταλάβετε για το FlexBox είναι ότι είναι ένα εργαλείο χειρισμού εμπορευματοκιβωτίων: στοχεύει να παράσχει έναν πιο αποτελεσματικό τρόπο να απολύσει, να ευθυγραμμιστεί και να διανείμει χώρο μεταξύ αντικειμένων σε ένα δοχείο, ακόμη και όταν το μέγεθος τους είναι άγνωστο και / ή δυναμικό (επομένως το λέξη 'flex').

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

Μας Οδηγός του Web Designer για FlexBox Το άρθρο σας ενημερώνει περισσότερα, αλλά για τώρα να κάνουμε κάποια πρακτική και να μάθουμε πώς να επωφεληθείτε από το FlexBox για να δημιουργήσετε μια ανταποκρινόμενη φόρμα. Πρώτα πράγματα πρώτα, ας ορίσουμε τη δομή HTML για τη φόρμα μας:

 & lt;
& lt; ul class = "flex" & gt;
& lt; li & gt; & lt; label for = "first-name" & gt; πρώτη ονομασία & lt; / label & gt; "text" type = "text" id = "first-name" placeholder = "Εισάγετε το όνομα σας εδώ" & gt; & lt; / li & gt;
& lt; li & gt; "label for =" lay-name "& gt; / label & gt; / lt; type type =" text "id =" id = "id-name" placeholder = "Εισάγετε το επώνυμό σας εδώ" & gt; & lt; / li & gt;
& lt; li & gt; & lt; label for = "email" & gt; email & lt; / label & gt; "email" id = "email" id = "email" placeholder = "Εισάγετε το email σας εδώ" & gt; / li & lt; / li & lt; / li & lt;
& lt; li & gt; & lt; label for = "τηλέφωνο" & gt; / label & gt; "tel id =" tel "id =" phone "placeholder =" Εισάγετε το τηλέφωνό σας εδώ "& gt; / li & lt; / li & lt;
& lt; li & gt; & lt; label for = "μήνυμα" & gt; / lt. / labe & gt; & lt; textarea rows = "6" id = "μήνυμα" placeholder = "Εισάγετε το μήνυμά σας εδώ" & gt; / textarea & gt; / lt; / lt; / LI & GT;
& lt; li & gt; & lt; button type = "υποβολή" & gt; / button & gt; / li & lt; / li & gt;
& lt; / ul & gt;
& lt; / form & gt;

Παρατηρήστε ότι κάθε ένα από τα στοιχεία της λίστας στη φόρμα μας έχει μια τάξη καλώδιο . Αυτή η τάξη προσδιορίζει το δοχείο Flex στη φόρμα μας. Ένα από τα μεγάλα οφέλη του FlexBox είναι η ικανότητά του να χρησιμοποιεί οποιοδήποτε στοιχείο HTML για να ορίσει τα δοχεία και τα στοιχεία του.

Μπορείτε να εφαρμόσετε το Stylbox Styling σε οποιοδήποτε στοιχείο HTML, το οποίο σημαίνει ότι μπορείτε εύκολα να επαναλάβετε και να ανακουφίσετε τα στοιχεία ανεξάρτητα το ένα από το άλλο. Λάβετε υπόψη ότι το FlexBox είναι απλώς ένας μηχανισμός στυλ, πράγμα που σημαίνει ότι μπορείτε να προσθέσετε και να το αφαιρέσετε στο Will.

Ας προσδιορίσουμε τα δοχεία flex στο CSS μας. Επιπλέον, θέλουμε να κεντράσουμε κάθετα τα αντικείμενα Flex στον εγκάρσιο άξονα. Είναι πολύ εύκολο να ορίσετε ότι, απλά πρέπει να δημιουργήσουμε ένα απλό κανόνα CSS:

 .FLEX LI {
Εμφάνιση: Flex;
Flex-Wrap: Wrap;
Ευθυγράμμιση-αντικείμενα: Κέντρο;
}

Το επόμενο βήμα είναι να καθορίσετε τα πλάτη για τα flex στοιχεία. Οι κύριες απαιτήσεις:

Οι ετικέτες πρέπει να είναι τουλάχιστον 100px και το πολύ 200px
Τα στοιχεία που έρχονται μετά τις ετικέτες πρέπει να είναι τουλάχιστον 200px

Τι μας δίνει αυτό; Κάθε ετικέτα και το σχετικό στοιχείο του σχήματος του θα εμφανιστούν σε μια ενιαία οριζόντια σειρά όταν το πλάτος της φόρμας είναι τουλάχιστον 300px (θυμηθείτε, χρησιμοποιούμε ετικέτες δεξιά ευθυγραμμισμένων εδώ).

 .FLEX & GT; LI & GT; ετικέτα {
Flex: 1 0 100px;
Μέγιστο πλάτος: 200px;
}
.FLEX & GT; LI & GT; ετικέτα + * {
Flex: 1 0 200px;
}

Τέλος, για το κουμπί υποβολής, το οποίο είναι επίσης ένα στοιχείο flex, ορίζουμε μερικές βασικές μορφές:

 .Flex Li κουμπί {
Περιθώριο: Αυτόματη;
Padding: 22px 46px;
}

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

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

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

Σχετικά Άρθρα:

Δημιουργήστε ανταποκρινόμενες φόρμες και πίνακες
Ξεκινήστε με την προσβασιμότητα στο Web
7 εξαιρετικά εργαλεία για τη δοκιμή των ανταποκρινόμενων σχεδίων ιστού σας

Πώς να σχεδιάσετε ανταποκρινόμενες και συσκευές-αγνωστικές μορφές

01. Σχεδιασμός για κάθετη κύλιση

02. Τοποθετήστε ετικέτες πάνω από τα πεδία

03. Χρησιμοποιήστε στόχους βρύσης

04. Χρησιμοποιήστε πεδία φόρμας HTML5

05. Χρησιμοποιήστε το FlexBox

πως να - Τα πιο δημοφιλή άρθρα

Ξεκινήστε με τον ζωγράφο Flame

Ρυθμίσεις απορρήτου Facebook: Πώς να διατηρήσετε το προφίλ σας ιδιωτικό

Πώς να σαρώσετε ένα άτομο σε λιγότερο από πέντε λεπτά

5 Συμβουλές για Super-Fast CSS

Τέλεια πρωτότυπα και σχέδια χεριών με Marvel

Πώς να αναπτύξουν μυθικά πλάσματα

Πώς να προσθέσετε βίντεο σε διαδραστικά PDF

Πώς να δημιουργήσετε τα μαλλιά στο Cinema 4D

Κατηγορίες