19 Δεξιότητες τυπογραφίας Κάθε σχεδιαστής πρέπει να ξέρει

Περισσότερο από το 90% όλων των πληροφοριών Ιστού αποτελείται από κείμενο. Αν και οι σχεδιαστές ξοδεύουν πολύ χρόνο για να αποφασίσουν τα γραφικά, τη διεπαφή και το ύφος της σελίδας, απαιτείται ίσος χρόνος για την επιλογή της τέλειας τυπογραφίας. Ειδικά όταν πρόκειται για φορητές συσκευές, η τυπογραφία του κινητού ιστού απαιτεί ιδιαίτερη προσοχή, δεδομένου ότι έρχεται με 2 μεγάλες προκλήσεις - διαθέσιμο χώρο και τυπογραφικό μέγεθος. Αυτό το άρθρο θα αναμεταδίδει 19 συμβουλές τυπογραφίας που απαιτούνται για το ξεκλείδωμα ενός εντυπωσιακού UI στο κινητό σας web design με πλούσια εμπειρία χρήστη.

Δώστε κάποιο χώρο

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

Συμβουλή μπόνους: Kerning

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

Παρόλο που είναι ορατό στην παραπάνω εικόνα, υπάρχουν πολλά περισσότερα που πρέπει να γνωρίζουμε για τη διαφορά μεταξύ αυτών των διαφόρων τύπων πύκνωσης. Περίεργος? Διαβάστε το από αυτό το ιστολόγιο, "Kerning: Do not Cramp Your Style".

Κατάλληλο μέγεθος γραμματοσειράς

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

Χρησιμοποιήστε κατάλληλες μονάδες μέτρησης

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

Επιλέξτε Αντίθετα χρώματα

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

Εξασφάλιση καλύτερης αναγνωσιμότητας

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

Ευθυγραμμίστε τα κείμενα σωστά

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

Ρυθμίστε τον οδηγό

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

Βρείτε το γλυκό σημείο σας

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

Λευκή χρήση χώρου

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

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

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

Κάντε την τυπογραφική σας διάκριση

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

Ελέγξτε την κλίμακα και τα ποσοστά

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

Λάβετε υπόψη τη λειτουργία

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

Είναι το κείμενο σελίδας βαρύ;

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

Είναι η αλληλεπίδραση σελίδας-βαρύ;

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

Σχεδιασμός ιστοσελίδων προσαρμοζόμενος σε συσκευές

Όπως αναφέρθηκε προηγουμένως, τα εικονοστοιχεία θα πρέπει να αποφεύγονται κατά την τυπογραφία του ιστότοπου για κινητά. Έχουν σταθερό πρότυπο διάστασης. Χρησιμοποιήστε το em ή rem αντί. Βασίζονται σε ποσοστά και κλιμακούμενα. Όταν το περιεχόμενο προβάλλεται σε μια κινητή συσκευή με διαφορετική ανάλυση, προσαρμόζεται ανάλογα το μέγεθός τους. Θυμηθείτε, το περιεχόμενο κειμένου της ανταποκρινόμενης ιστοσελίδας σας πρέπει να είναι κλιμακωτό και να προσαρμόζεται αυτόματα το μέγεθος ανάλογα με το πλάτος της οθόνης. Μπορείτε να χρησιμοποιήσετε το LambdaTest για να εκτελέσετε τις δοκιμές σας. Με ένα μόνο κλικ, μπορείτε να ελέγξετε την ανταπόκριση του ιστότοπού σας σε περισσότερες από 44 κινητές συσκευές με διαφορετικές αναλύσεις.

Σύζευξη πολλών γραμματοσειρών

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

Γραμματοσειρά-Βάρος: Βαρύ ή Φως;

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

Κρατήστε το φόντο στο μυαλό

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

Η τυπογραφία είναι μια λεπτή τέχνη. Οι σχεδιαστές συχνά ξοδεύουν μια ζωή για να οξύνουν τις τυπογραφικές δεξιότητές τους. Με κάθε νέα γραμματοσειρά που φέρνει μια νέα πρόκληση, είμαστε βέβαιοι ότι οι παραπάνω συμβουλές κινητής τυπογραφίας θα είναι εύχρηστες την επόμενη φορά που σχεδιάζετε μια νέα ιστοσελίδα για κινητά. Έχετε επίσης κατά νου να εκτελέσετε δοκιμές συμβατότητας μεταξύ των browsers για να βεβαιωθείτε ότι οι γραμματοσειρές ή τα στυλ που χρησιμοποιείτε λειτουργούν σωστά σε όλα τα προγράμματα περιήγησης. Το LambdaTest μπορεί να χρησιμοποιηθεί για τη διεξαγωγή δοκιμών συμβατότητας πολλαπλών περιηγητών σε περισσότερα από 2000 διαφορετικά προγράμματα περιήγησης και τις εκδόσεις τους. Βεβαιωθείτε ότι η γραμματοσειρά υποστηρίζεται σε όλες τις απαιτούμενες περιήγησης και παρουσιάστε στους χρήστες σας την πλούσια εμπειρία του χρήστη που τους αξίζει.

Αρχικά δημοσιεύθηκε στο LambdaTest

Αρχικά γραμμένο από τον Arnab Roy Chowdhury

Περαιτέρω ανάγνωση…

Αν σας αρέσει η θέση, παρακαλώ clap και βοηθήστε τους άλλους να το βρουν επίσης.