Προσαρμοσμένες σε μητρική γραμματοσειρές σε εφαρμογές

Πριν από λίγο, το Trade Me είχε μια προσαρμοσμένη γραμματοσειρά μάρκας που δημιουργήθηκε από το Klim Type Foundry, που ονομάστηκε Story Sans. Από το πίσω μέρος του προβλήματος προέκυψε το ερώτημα, τι γίνεται με τις εγγενείς εφαρμογές; Χρησιμοποιούμε τη νέα γραμματοσειρά προσαρμοσμένης μάρκας ή χρησιμοποιούμε την αντίστοιχη γραμματοσειρά κάθε πλατφόρμα, το San Fransico για iOS και το Roboto για Android;

Οι υποψήφιοι

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

Γραμματοσειρά συστήματος Android (Roboto)

Οφέλη:

  • Ταχύτεροι χρόνοι φόρτωσης
    Η χρήση γραμματοσειράς συστήματος σημαίνει ότι η γραμματοσειρά δεν χρειάζεται να φορτώνεται πριν από την απόδοση κειμένου.
  • Σχεδιασμένο για διαφορετικές αναλύσεις οθόνης
    Το Roboto έχει βελτιωθεί ώστε να λειτουργεί σε ένα ευρύ σύνολο υποστηριζόμενων πλατφορμών, μεγεθών οθόνης και αναλύσεων. Η χρήση του Roboto σημαίνει ότι η εφαρμογή θα αποκτήσει εγγενώς οποιεσδήποτε βελτιώσεις / αλλαγές που κάνει η Google στο τυπογραφικό.
  • Πληκτρολόγηση κλίμακας (δυναμικού τύπου)
    Μια τυπογραφική κλίμακα έχει ένα περιορισμένο σύνολο μεγεθών τύπου που λειτουργούν καλά μαζί μαζί με το πλέγμα διάταξης. Αυτά τα μεγέθη και στυλ αντισταθμίζουν την πυκνότητα του περιεχομένου και την άνεση ανάγνωσης Τα μεγέθη τύπου καθορίζονται με sp (κλιμακούμενα εικονοστοιχεία) για την ενεργοποίηση μεγάλου τύπου τρόπων πρόσβασης.
  • Αυτόματα ύψη γραμμής
    Όπως αναφέρεται στις κατευθυντήριες γραμμές για τα υλικά, για να επιτευχθεί η κατάλληλη αναγνωσιμότητα και η κατάλληλη βηματοδότηση, τα ύψη των γραμμών έχουν καθοριστεί βάσει του μεμονωμένου μεγέθους και βάρους κάθε στυλ. Η περιτύλιξη γραμμής ισχύει μόνο για το Body, Subhead, Headline και τα μικρότερα στυλ εμφάνισης. Όλα τα άλλα στυλ θα πρέπει να υπάρχουν ως μεμονωμένες γραμμές.
  • Ομοιότητα με τη γραμματοσειρά προσαρμοσμένης μάρκας
    Στην περίπτωσή μας, η γραμματοσειρά εμπορικών σημάτων του Trade Me έχει συγκρίσιμες μετρήσεις με το Roboto και το Σαν Φρανσίσκο, επομένως πιθανότατα δεν διαφέρει αισθητά οπτικά από τους περισσότερους χρήστες. Αυτό σημαίνει ότι δεν μπορούμε να χάσουμε τόσο την παρουσία της μάρκας όσο αναμενόταν, αλλά κερδίζουμε πολλά δωρεάν.
  • Υποστήριξη εναλλακτικών γλωσσών

Προκλήσεις

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

Android προσαρμοσμένη γραμματοσειρά

Οφέλη

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

Προκλήσεις

  • Δεν υπάρχει υποστήριξη για εναλλακτικές γλώσσες
    Σε αντίθεση με το Roboto, οι περισσότερες προσαρμοσμένες γραμματοσειρές δεν υποστηρίζουν εναλλακτικές γλώσσες μέσα στην εφαρμογή. Αυτό μπορεί να μην είναι ένα ζήτημα αρχικά, αλλά σημαίνει ότι η εφαρμογή δεν θα προστατεύεται μελλοντικά από το να επιτρέπει στους χρήστες να ανταλλάσσουν γλώσσες.
  • Εξατομίκευση
    Τα λειτουργικά συστήματα Android Phone επιτρέπουν στο χρήστη να επιλέξει μια προσαρμοσμένη γραμματοσειρά για τη συσκευή, η οποία ουσιαστικά αντικαθιστά τη γραμματοσειρά της εφαρμογής. Αυτό είναι εντελώς έξω από τον έλεγχο των εφαρμογών και είναι αρκετά κοινή μεταξύ των χρηστών του Android. Ως εκτίμηση, αυτό σημαίνει ότι οι εφαρμογές (ιδιαίτερα το Android) δεν πρέπει να βασίζονται σε μεγάλο βαθμό στην επικοινωνία μάρκας μέσω του τύπου.
  • Χρόνοι φόρτωσης
    Ο χρόνος φόρτωσης για την εφαρμογή θα αυξηθεί καθώς η γραμματοσειρά πρέπει να φορτωθεί πριν γίνει η απόδοση του κειμένου.
  • Απόκριση συστήματος σε προσαρμοσμένες γραμματοσειρές
    Τα widgets δεν είναι όλα κατασκευασμένα με τον ίδιο τρόπο, επομένως μερικοί δεν θα απαντήσουν καθώς και άλλοι σε μια προσαρμοσμένη γραμματοσειρά.

iOS γραμματοσειρά συστήματος (San Fransisco)

Οφέλη

  • Δυναμικός τύπος & χαρακτηριστικά που εξοικονομούν εργασία dev
    Όπως εξηγείται από την Apple, το Σαν Φρανσίσκο διαθέτει πολλά χαρακτηριστικά που το καθιστούν ιδιαίτερα ευανάγνωστο. Η οικογένεια γραμματοσειρών που ονομάζεται "SF" χρησιμοποιείται για iOS / Mac και το "SF Compact" χρησιμοποιείται για το Apple Watch. Μπορείτε να δείτε τη διαφορά σε στρογγυλά γράμματα όπως 'o', 'e'. Το SF compact έχει μάλλον επίπεδες κατακόρυφες γραμμές από αυτές του SF.
  • Το Σαν Φρανσίσκο βελτιστοποιεί δυναμικά το τυπογραφικό. Το σύστημα θα μεταφέρει αυτόματα τις γραμματοσειρές οθόνης / κειμένου σύμφωνα με το μέγεθος κειμένου καθώς και την αυτόματη εφαρμογή προσεκτικής παρακολούθησης σε διαφορετικά μεγέθη και βάρη.
  • Η χρήση δυναμικού τύπου επιτρέπει στους σχεδιαστές να δημιουργήσουν μια ιεραρχία τύπου όπως "κεφαλίδα" "κεφαλίδα 1" κ.λπ. αντί για συγκεκριμένα μεγέθη σημείων κατάστασης. Αυτό σημαίνει ότι το μήλο θα ασχοληθεί αυτόματα με τον τύπο σχετικώς, τη διάταξη και δεν απαιτεί έναν προσαρμοσμένο πίνακα αναζήτησης.
Προέλευση βίντεο WWDC Εισαγωγή των γραμματοσειρών του νέου συστήματος
  • Μελλοντική διόρθωση
    Η χρήση εγγενών γραμματοσειρών θα αποδείξει μελλοντικά τις εφαρμογές όσον αφορά τις αλλαγές και τις δυνατότητες που προσθέτει η Apple στο μέλλον.
  • Υποστηρίζει εναλλακτικές γλώσσες

Προκλήσεις

  • Παρουσία της επωνυμίας
    Εξασφάλιση άλλων μέσων ενίσχυσης της ταυτότητας του οπτικού σήματος.
  • Μελλοντικές γραμματοσειρές
    Η χρήση της γραμματοσειράς του συστήματος στο iOS δεν σημαίνει απλώς τη χρήση του 'San Francisco', σημαίνει ότι χρησιμοποιείτε ό, τι η Apple ορίζει ως γραμματοσειρά συστήματος που προχωράει. Αυτό σημαίνει ότι αν η Apple αλλάξει τη γραμματοσειρά του συστήματος θα μπορούσε να προκαλέσει δευτερεύοντα προβλήματα με τις διατάξεις εφαρμογής.

iOS προσαρμοσμένη γραμματοσειρά

Οφέλη

  • Ταυτότητα μάρκας
    Η χρήση ενός προσαρμοσμένου τύπου ενισχύει την οπτική ταυτότητα της μάρκας.
  • Custom Kerning
    Υπάρχουν ιδιότητες kerning για προσαρμοσμένες γραμματοσειρές στο iOS, αλλά πρέπει να γίνει χειροκίνητα.

Προκλήσεις

  • Δεν υπάρχει δυναμικός τύπος εκτός αν αφιερώνουμε χρόνο dev
    Ο δυναμικός τύπος δεν υποστηρίζεται από προσαρμοσμένες γραμματοσειρές. Αυτό σημαίνει ότι εάν ένας χρήστης έχει μια μεγαλύτερη / μικρότερη ρύθμιση μεγέθους γραμματοσειράς στη συσκευή του, αυτό δεν θα τιμηθεί μέσα σε μια εφαρμογή με μια προσαρμοσμένη γραμματοσειρά. Οι χρήστες που χρησιμοποιούν αυτή τη λειτουργία είναι συνήθως παλαιότερης δημογραφικής ομάδας και χρησιμοποιούν αυτό το εργαλείο για σκοπούς προσβασιμότητας. Αυτό θα δημιουργήσει επίσης μια δοκιμαστική εμπειρία, καθώς όλες οι άλλες εφαρμογές της συσκευής θα εμφανίζονται σε μεγαλύτερη γραμματοσειρά. Είναι δυνατό να εφαρμοστεί η δυναμική σε προσαρμοσμένες γραμματοσειρές, αλλά αυτό θα απαιτούσε πολλούς πόρους για προγραμματιστές, σχεδιασμό και δοκιμή.
  • Δεν υπάρχει υποστήριξη για εναλλακτικές γλώσσες
    Σε αντίθεση με το Σαν Φρανσίσκο, οι περισσότερες προσαρμοσμένες γραμματοσειρές δεν υποστηρίζουν εναλλακτικές γλώσσες μέσα στην εφαρμογή. Αυτό μπορεί να μην είναι ένα ζήτημα αρχικά, αλλά σημαίνει ότι η εφαρμογή δεν προστατεύεται μελλοντικά από το να επιτρέπει στους χρήστες να ανταλλάσσουν γλώσσες.
  • Αντιμετωπίζοντας δυσκολία
    Οι προσαρμοσμένες γραμματοσειρές στο iOS συχνά έχουν δυσκολία στην απόδοση σε διαφορετικά μεγέθη και ενδέχεται να καταστούν ασαφείς. Επιπλέον, οι γραμματοσειρές μπορούν να αποδίδουν με εσφαλμένες γραμμές βάσης και glyphs.
  • Συγχαρητήρια σχόλια
    Με το πληκτρολόγιο που έχει οριστεί στο Σαν Φρανσίσκο, ακριβώς πάνω, τα γράμματα φαίνονται εντελώς διαφορετικά καθώς πληκτρολογείτε. Υπάρχουν επίσης αλληλεπιδράσεις πλατφόρμας όπως οι ειδοποιήσεις ώθησης, οι προβολές ειδοποιήσεων, τα φύλλα κοινής χρήσης και τα μενού 3D αφής, που έχουν οριστεί στο Σαν Φρανσίσκο και δεν μπορούν να αλλάξουν. Οι ειδοποιήσεις παρακολούθησης τοποθετούνται επίσης στο Σαν Φρανσίσκο.
  • Τα μεγέθη σημείων σε όλες τις γραμματοσειρές δεν είναι ίσες
    Τα μεγέθη σημείων σε όλες τις γραμματοσειρές δεν είναι ίσες (δηλ. Το 17pt SF δεν θα ταιριάζει με το 17pt so-and-so typeface), οπότε πρέπει να υπάρχει λίγη διαμάχη για να βρείτε τα σωστά ισοδύναμα για όλα τα μεγέθη του συστήματος.
  • Χρόνοι φόρτωσης
    Ο χρόνος φόρτωσης για την εφαρμογή θα αυξηθεί καθώς η γραμματοσειρά πρέπει να φορτωθεί πριν γίνει η απόδοση του κειμένου.
  • Προσαρμοσμένη παρακολούθηση
    Απαιτεί νέο κώδικα για να γραφτεί και είναι λίγο hack.
  • Αντιφάσεις με τα συνήθη στοιχεία του UI
    Πολλά εξαρτήματα στο UIKit δεν είναι εύκολα προσαρμοσμένα. Για παράδειγμα, οι κεφαλίδες ενοτήτων και τα φύλλα εργασίας δεν παρέχουν τεκμηριωμένο τρόπο αλλαγής της γραμματοσειράς τους. Έτσι, αν δεν αναδημιουργηθούν αυτά τα τυποποιημένα συστατικά, δεν υπάρχει τρόπος να μην υπάρχει συνδυασμός γραμματοσειράς System και Custom.

Τελικές σκέψεις και σκέψεις

Τα συμπεράσματα αυτά βασίζονται στην περίπτωση χρήσης του Trade Me.

  • Λαμβάνοντας υπόψη την αξία έναντι της προσπάθειας
    Από την έρευνα αυτή φαίνεται ότι, αν και είναι δυνατόν, η προσπάθεια που θα πρέπει να αναπτυχθεί είναι σημαντική. Έχουμε ήδη μια τεράστια βάση κώδικα, έτσι θα χρειαστεί να κάνουμε πολλά backtracking αν είχαμε εφαρμόσει μια προσαρμοσμένη γραμματοσειρά.
  • Ομοιότητα
    Επειδή οι μετρήσεις γραμματοσειράς Story Sans βασίζονται σε μεγάλο βαθμό στο Roboto και στο Σαν Φρανσίσκο, πρέπει να αναρωτηθούμε, υπάρχει κάποια αξία στο να κάνουμε μια μεγάλη προσπάθεια να έχουμε μια προσαρμοσμένη γραμματοσειρά που δεν είναι σαφώς διαφορετική; Είναι πιθανόν οι χρήστες να είναι σε θέση να τους ξεχωρίζουν; Πιθανόν να δοκιμάσετε κάτι από το χρήστη.
  • Χρήση προσαρμοσμένου τύπου για επίδραση μάρκας
    Θα μειώσει σημαντικά το ποσό των έργων ανάπτυξης εάν χρησιμοποιήσαμε μερικές φορές μια προσαρμοσμένη γραμματοσειρά στην εφαρμογή σε συγκεκριμένες σελίδες για την παρουσία μάρκας. Αυτό θα επιτρέψει στις εφαρμογές να έχουν το καλύτερο και των δύο κόσμων.
  • Χρόνος πυγμαχίας μια πρώτη καλύτερη προσπάθεια
    Εάν θέλουμε να διερευνήσουμε περισσότερα για τη χρήση μιας προσαρμοσμένης γραμματοσειράς στις εφαρμογές, έχει προταθεί ότι έχουμε το χρόνο να βγάλουμε μια πρώτη προσπάθεια και να δούμε πόσο μπορούμε να πάρουμε και ποιες προκλήσεις συμβαίνουν. Από εκεί μπορεί να γίνει πιο ενημερωμένη απόφαση.
  • Πού να επενδύσουμε το χρόνο μας
    Υπάρχουν και άλλα πράγματα που μπορούμε να κάνουμε πέρα ​​από αυτό που παίρνουμε δωρεάν χρησιμοποιώντας τις εγγενείς γραμματοσειρές. Για παράδειγμα, να διασφαλίσουμε ότι οι σχεδιάσεις μας ανταποκρίνονται καλά στη χρήση δυναμικού τύπου και να τυλίγονται ευχερώς ή να διασφαλίζουμε ότι κάνουμε ό, τι μπορούμε για να κάνουμε την τυπογραφία όσο το δυνατόν πιο προσιτή. Αυτός μπορεί να είναι ο χρόνος που δαπανάται καλύτερα αντί να προσπαθούμε να αμφισβητούμε τι θα μπορούσαμε να έχουμε κερδίσει δωρεάν χρησιμοποιώντας τις εγγενείς γραμματοσειρές μέσα στις εφαρμογές.

Προχωράμε μπροστά

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

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

Καλή ανάγνωση & πόροι

  • Apple στο Σαν Φρανσίσκο
  • Μήλα WWDC talk που εισάγει το Σαν Φρανσίσκο
  • Προσαρμοσμένες γραμματοσειρές στο Android
  • Google στο Roboto

@GiliSharrock στο twitter αν θέλετε να έρθετε σε επαφή