3 Αντιπρόσωποι καταστροφές σχεδιασμού - και πώς να τις αποφύγετε
Οι υπεύθυνες μέθοδοι σχεδιασμού είναι πολύ χρήσιμες για τους προγραμματιστές επειδή μας επιτρέπουν να προσφέρουμε περιεχόμενο στο ευρύτερο φάσμα συσκευών χωρίς να χρειάζεται να διατηρούμε ξεχωριστές εκδόσεις του χώρου και χωρίς κάποια αρνητικά μειονεκτήματα σε άλλες μεθόδους, όπως η κλιμάκωση και οι διατάξεις υγρών.
Αυτό το άρθρο θα αναδείξει τα κορυφαία 3 λάθη σχεδιαστές συναντούν με ανταποκρινόμενα σχέδια, και θα παράσχει ορισμένες στρατηγικές για την αποφυγή αυτών των λαθών.
Κλιμάκωση έναντι υγρού έναντι απόκρισης
Υπάρχει πολλή σύγχυση σχετικά με αυτούς τους όρους και οι σχεδιαστές συχνά χρησιμοποιούν εσφαλμένα τις εναλλασσόμενες. Στην πραγματικότητα, κάθε ένα από αυτά είναι ξεχωριστά εξελικτικά βήματα στην τεχνική διάταξης που έχουν προκύψει με την πάροδο του χρόνου σύμφωνα με την πρόοδο της τεχνολογίας.
Οι διατάξεις κλιμάκωσης σχεδιάζονται έτσι ώστε να κλιμακώνουν κάθε στοιχείο σε σχέση με κάθε άλλο στοιχείο . Αντιδρούν με την έννοια ότι θα προσαρμόσουν δυναμικά το περιεχόμενο σε απάντηση σε αλλαγές στο μέγεθος του παραθύρου προβολής. Η ίδια η διάταξη παραμένει στατική, αλλάζοντας το μέγεθος κάθε στοιχείου για να διατηρήσει μια συνεπή εμφάνιση.
Πάνω: παράδειγμα διάταξης κλιμάκωσης σε διαφορετικές αναλύσεις: το σχεδιασμό θυσιάζει την αναγνωσιμότητα για συνεκτικότητα.
Οι διατάξεις υγρού είναι διαφορετικές επειδή μεταβάλλουν τα στοιχεία του δοχείου σε σχέση με το μέγεθος του παραθύρου προβολής . Αυτό επιτυγχάνεται με τη χρήση σχετικών μονάδων, όπως ems, για να ξεπεραστεί το πρόβλημα της συρρίκνωσης του κειμένου. Ο σχεδιασμός μπορεί να διακοπεί από το χρήστη κλιμακώνοντας το.
Πάνω: παράδειγμα μιας υγρής διάταξης σε διαφορετικές αναλύσεις: η σχεδίαση θυσίες συνέπειας για την αναγνωσιμότητα.
Οι ανταποκρινόμενες διατάξεις δεν κλίνουν τίποτα. Αντ 'αυτού, αλλάζουν αυτό που εμφανίζεται ανάλογα με το μέγεθος του παραθύρου προβολής.
Πάνω: ένα παράδειγμα μιας ανταποκρινόμενης διάταξης σε διαφορετικά ψηφίσματα.
Καταστροφή 1) Μενού περιτύλιξης
Εάν χρησιμοποιείτε μια γραμμή πλοήγησης στο επάνω μέρος της σελίδας σας, ένας σχεδιασμός που ανταποκρίνεται θα πρέπει να "κουμπώνει" σε μια πιο συμπαγή μορφή όταν η σελίδα εμφανίζεται σε μια μικρή οθόνη. Αλλά αυτό δεν λειτουργεί πάντα τέλεια αν η περιοχή της οθόνης είναι ευρύτερη από το σημείο θραύσης, αλλά είναι πολύ μικρή για να εμφανίσει όλα τα στοιχεία του μενού σε μία γραμμή. Το αποτέλεσμα είναι ένα μενού που αναδιπλώνεται.
Υπάρχουν διάφοροι τρόποι επίλυσης αυτού του προβλήματος. Το πρώτο είναι να μειώσετε τον αριθμό των στοιχείων που εμφανίζονται οριζόντια στη γραμμή πλοήγησης Navbar, ταξινομώντας τα σε κατηγορίες και υποκατηγορίες. Στη συνέχεια, μπορείτε να χρησιμοποιήσετε αναπτυσσόμενα στοιχεία για να εμφανίσετε τις υποκατηγορίες όταν επιλεγεί μια κατηγορία.
Ο δεύτερος τρόπος είναι να αλλάξετε το σημείο θραύσης σε χαμηλότερη τιμή. Ο πραγματικός αριθμός που θα χρησιμοποιήσετε είναι το πλάτος στο οποίο η ναυπηγική σας γραμμή ξεκινά να αποτυγχάνει, όχι ένα συγκεκριμένο μέγεθος συσκευής.
Ο τρίτος τρόπος είναι να χρησιμοποιήσετε ένα διαφορετικό μενού για συσκευές, όπως ένα συρόμενο συρτάρι.
Καταστροφή 2) Χρησιμοποιώντας εικόνες σταθερού πλάτους
Οι περιοχές περιεχομένου συνήθως ρυθμίζονται σε μέγεθος σχετικά με το παράθυρο προβολής. Έτσι, όταν μια εικόνα σταθερού πλάτους είναι ευρύτερη από το μέγεθος της περιοχής, εμφανίζεται περικοπή εικόνας.
Πάνω: παράδειγμα κακής σταθερού πλάτους εικόνας που είναι πολύ μεγάλο: τώρα έχει γραμμές κύλισης και το περιεχόμενο ωθείται εκτός οθόνης.
Μπορείτε να αποφύγετε αυτό το πρόβλημα χρησιμοποιώντας σχετικές μονάδες για να ορίσετε το πλάτος της εικόνας ή εάν χρησιμοποιείτε ένα πλαίσιο που την υποστηρίζει (όπως το Bootstrap) μπορείτε να χρησιμοποιήσετε μια κατηγορία ανταποκρινόμενης εικόνας (π.χ.: class = "img-responsive" ).
Πάνω: Το ίδιο στοιχείο με προσέγγιση απόκρισης κατηγορίας εικόνας: τώρα η μπάρα κύλισης έχει φύγει.
Καταστροφή 3) Παραμόρφωση στοιχείου
Αυτός είναι λίγο πιο ασαφής, αλλά ουσιαστικά αυτό που συμβαίνει όταν η διάταξη σας εμφανίζεται σε ένα μικρό παράθυρο προβολής είναι ότι όλες οι μη επεξεργασμένες στήλες συμπεριφέρονται σαν σειρές. Αυτό είναι ένα πρόβλημα επειδή η στρέβλωση του περιεχομένου προκαλεί ακούσια αλλαγή της ιεραρχίας του σχεδίου σας.
Πάνω: η στήλη γίνεται μια σειρά, στρεβλώνει το περιεχόμενο.
Η λύση είναι προφανής, αλλά είναι εκπληκτικό το πόσοι άνθρωποι αγωνίζονται με αυτό: απλά ορίστε το ύψος, το πλάτος και την επένδυση του στοιχείου ρητά. Εάν μετακινηθεί εκτός θέσης και καλύπτει άλλα στοιχεία, μπορείτε να τον αναγκάσετε να είναι εκεί που θέλετε, περιτυλίγοντάς το σε περιθώριο div και ρύθμιση.
Ο προγραμματισμός βοηθάει στην αποφυγή λαθών
Αυτό το άρθρο έχει συζητήσει μόνο τις 3 πιο συχνά απαντημένες καταστροφές σχεδιασμού, αλλά υπάρχουν πολλοί άλλοι τρόποι για να μην πάει καλά ο σχεδιασμός. Η πρόληψη των σφαλμάτων δεν είναι πολύ δύσκολη. Τα σύγχρονα προγράμματα περιήγησης έχουν ενσωματωμένο έλεγχο ανταποκρίσεων, ώστε να σχεδιάζετε το σχεδιασμό σας καλά και να δοκιμάζετε συχνά.