20 Όροι Βιομηχανίας Web Design για τον πελάτη Clueless

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

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

“Κινουμένων σχεδίων”

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

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

“Μπρεκκρουμπ”

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

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

“Σύγχυση”

Ένα σφάλμα σχεδιασμού ιστοσελίδων, ένας δείκτης ενός ανεπαρκώς σχεδιασμένη σελίδα.

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

“Χρώμα”

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

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

“Αντίθεση”

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

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

“Κενό κράτος”

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

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

“Σταθερή διάταξη”

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

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

“Επίπεδη σχεδίαση”

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

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

“Διάταξη υγρών”

ΕΝΑ τύπος διάταξης ότι χρησιμοποιεί σχετικές μονάδες για να καθορίσετε το πλάτος μιας τοποθεσίας και των στοιχείων της.

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

“Πτυχή”

Η κάτω πλευρά του ορατού τμήματος της οθόνης.

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

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

“Χαριτωμένη υποβάθμιση”

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

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

“Ήρωας Εικόνα”

Μια υπερμεγέθη εικόνα banner τοποθετηθεί πάνω από την πτυχή.

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

“Σελίδα προορισμού”

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

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

“Lazy Φόρτωση”

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

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

“Αναφορά μέσων”

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

Συνήθως, ανταποκρινόμενες τοποθεσίες έχουν ξεχωριστές διατάξεις για οθόνες για υπολογιστές, tablet και κινητά, το ορια ΑΝΤΟΧΗΣ μεταξύ τους είναι που καθορίζονται από τα ερωτήματα των μέσων ενημέρωσης προστέθηκε στο CSS.

“Προοδευτική Ενίσχυση”

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

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

“Ανταποκρίσιμος σχεδιασμός”

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

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

“Σκεομορφισμός”

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

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

“Μετάβαση”

Μια τεχνική σχεδιασμού ιστοσελίδων για απεικονίζοντας απλές αλλαγές όταν ένα στοιχείο στην οθόνη αλλάζει ομαλά μεταξύ της αρχικής και της τελικής κατάστασης.

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

“Λευκός χώρος”

ο κενός χώρος μεταξύ παρακείμενων στοιχείων σχεδιασμού. Αναφέρεται επίσης ως αρνητικό χώρο.

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