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

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

Εδώ είναι ένας μικρός οδηγός για το τι να έχετε κατά νου όταν σχεδιάζετε για tvos

Σχεδιάζοντας για tvOS, τα βασικά

Οδηγίες ανθρώπινης διεπαφής

HIG της Apple είναι ένας πολύ καλός οδηγός για να ξεκινήσετε και να μάθετε τα βασικά στοιχεία. Αυτός ο οδηγός ήταν η μικρή μου Βίβλος, ενώ σχεδίαζε για την εταιρεία streaming. Περιέχει συστάσεις και βέλτιστες πρακτικές για το σχεδιασμό και την ανάπτυξη όμορφων, συνεπών εμπειριών. Χρησιμοποιώντας τα πρότυπα που παρέχονται από την πλατφόρμα, η εφαρμογή σας θα νιώθει εγγενής, αλλά θυμηθείτε ότι είναι μόνο ένας οδηγός. Είναι σημαντικό να βρείτε την ισορροπία μεταξύ της μάρκας της εφαρμογής που κάνετε και των οδηγιών πλατφόρμας. Η Apple προσφέρει επίσης μεγάλη έμπνευση μέσω πολλών από τις εφαρμογές tvOS, όπως η Apple Music, η Apple TV App και οι Ταινίες iTunes.

Μέγεθος οθόνης και περιθώρια

Όταν σχεδιάζετε για tvOS, πρέπει μόνο να σκεφτείτε ένα μέγεθος οθόνης! 1920 x 1080 (16: 9). Αυτό είναι μια συγκίνηση σε σύγκριση με την επιφάνεια εργασίας και το κινητό όπου πρέπει να εξετάσετε πολλά διαφορετικά μεγέθη οθόνης. Μπορεί όμως να συμβεί ακούσια περικοπή λόγω υπερβολικής σάρωσης σε παλαιότερες τηλεοράσεις, οπότε κρατήστε το κύριο περιεχόμενο μακριά από τις άκρες. Ένας καλός οδηγός είναι να αποφύγετε 60 px από το πάνω και το κάτω μέρος και 90 px από τις πλευρές. Η τηλεόραση Apple εμφανίζει εικόνες με τυπική ανάλυση σε τηλεοράσεις HD και εικόνες υψηλής ανάλυσης σε τηλεοράσεις 4K. Η εφαρμογή σας πρέπει να παρέχει εικόνες και σε δύο μορφές. Για το σκοπό αυτό, όλα τα στοιχεία ενεργητικού πρέπει να είναι @ 1x ανάλυση (HD) και @ 2x (4K).

Απόσταση

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

Τυπογραφία και κείμενο

Το San Francicso (SF) είναι μια μεγάλη γραμματοσειρά συστήματος για tvOS. Υπάρχουν δύο παραλλαγές: το San Francisco Display και το κείμενο του Σαν Φρανσίσκο. Όταν σχεδιάζετε να χρησιμοποιείτε κείμενο SF για κείμενο 19 ή μικρότερο και SF Display για κείμενο 20 βαθμών ή μεγαλύτερο και προσαρμόστε κατάλληλα την απόσταση μεταξύ των γραμμάτων. Αν χρησιμοποιείτε αυτήν τη γραμματοσειρά, το tvOS εφαρμόζει αυτόματα το πιο κατάλληλο στυλ κειμένου βάσει του μεγέθους του σημείου. Αν θέλετε να χρησιμοποιήσετε μια προσαρμοσμένη γραμματοσειρά, βεβαιωθείτε ότι είναι ευανάγνωστη σε απόσταση και ότι σέβεται τις ρυθμίσεις προσβασιμότητας.

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

Πρότυπα & διατάξεις πλέγματος

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

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

Συμβουλή περιεχομένου εκτός οθόνης

Οι σειρές και οι στήλες που έχουν περιεχόμενο που υπερβαίνει την οθόνη πρέπει να ευθυγραμμιστούν κατά τρόπο που να δείχνει τουλάχιστον το 10-20% αυτού του περιεχομένου. Αυτό επιτρέπει στον χρήστη να καταλάβει ότι είναι δυνατό να πλοηγηθείτε περαιτέρω. Εάν ακολουθήσετε τη διάταξη πλέγματος που εμφανίζεται στο HIG της Apple, το περιεχόμενο θα ευθυγραμμιστεί όπως πρέπει.

ΑΛΛΗΛΕΠΙΔΡΑΣΗ

Κοινόχρηστο εναντίον προσωπικών / κινητών έναντι στάσιμων

Η Apple TV είναι η πιο σταθερή και κοινή συσκευή. Χρησιμοποιούμε την τηλεόραση σε κοινόχρηστα περιβάλλοντα όπως το καθιστικό, οι κοινόχρηστοι χώροι γραφείων, τα αθλητικά μπαρ και άλλοι δημόσιοι χώροι. Είναι μια συσκευή που μπορούν να απολαμβάνουν ταυτόχρονα πολλοί άνθρωποι, γεγονός που καθιστά την εμπειρία μοναδική από τις υπόλοιπες συσκευές της Apple. Έτσι, όταν σχεδιάζετε για tvOS έχετε αυτή την κοινή εμπειρία στο μυαλό. Οι άλλες συσκευές είναι πιο προσωπικές, ιδιωτικές και κινητές. Παρόλο που το MacBook σας επιτρέπει να έχετε πολλούς χρήστες, εξακολουθεί να αισθάνεται πολύ πιο ιδιωτικό σε σύγκριση με μια τηλεόραση Apple.

Χαλαρή και ακριβής αλληλεπίδραση

Σε ένα MacBook έχετε ένα πληκτρολόγιο και ένα ποντίκι, το οποίο σας επιτρέπει να είστε ακριβείς. Το ίδιο ισχύει για ένα iPad (ακόμη περισσότερο όταν χρησιμοποιείτε το μολύβι). Από την άλλη πλευρά, ένα ρολόι της Apple, με την μικρή οθόνη της, καθιστά πιο δύσκολο να είναι ακριβής. Επίσης, οι περισσότερες συσκευές είναι πιο κοντά σε εσάς. Τα έχουμε στη διάθεσή μας και αλληλεπιδράμε άμεσα μαζί τους. Αλλά, μια τηλεόραση δεν είναι στο χέρι σας, είναι ένα απομακρυσμένο. Το τηλεχειριστήριο με βάση την αφή κάνει τον έλεγχό μας να μειώνεται σε σχέση με τις άλλες συσκευές.

Απομακρυσμένες αλληλεπιδράσεις

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

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

https://developer.apple.com/tvos/human-interface-guidelines/remote-and-controllers/remote/

Αλληλεπιδράσεις βάσει εστίασης

Στην Apple TV χρησιμοποιούμε ένα τηλεχειριστήριο για να αλληλεπιδράμε έμμεσα με τα στοιχεία στην οθόνη. Η πλοήγηση βασίζεται σε μοντέλο εστίασης. Μπορείτε να περάσετε το περιεχόμενο και τα στοιχεία ελέγχου, με ένα αντικείμενο πάντα επιλεγμένο. Καθώς αλλάζει η εστίαση, οι λεπτές κινούμενες εικόνες και το εφέ παράλλαξης παράγουν ένα αίσθημα βάθους που προσδιορίζει σαφώς το στοιχείο που βρίσκεται επί του παρόντος στο επίκεντρο. Αυτός ο τρόπος πλοήγησης είναι μια τεράστια διαφορά από όλες τις άλλες συσκευές. Για να αποδώσετε μια συναρπαστική εμπειρία, είναι σημαντικό να κατανοήσετε τη μηχανή εστίασης και να εξετάσετε πώς πρέπει να φαίνονται τα στοιχεία όταν εστιάζονται.

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

Οριζόντια κατά κάθετη κύλιση

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

Περίληψη κλειδιών

  1. Γνωρίστε τις Οδηγίες Ανθρώπινης Διεπαφής της Apple για το TVOS. Χρησιμοποιήστε τις οδηγίες πλατφόρμας για την απόσταση, την τυπογραφία, τα πρότυπα διάταξης, τις παραμέτρους του πλέγματος και τα μεγέθη των στοιχείων διεπαφής, για να κάνετε τη διασύνδεση στην εφαρμογή σας φυσική και διαισθητική. Λάβετε υπόψη ότι αυτό είναι μόνο κατευθυντήριες γραμμές και μην ξεχνάτε να κάνετε τη δική σας λάμψη και να είστε δημιουργικοί.
  2. Οι εφαρμογές για tvOS είναι ως επί το πλείστον για κοινά περιβάλλοντα. Οι χρήστες απολαμβάνουν την εφαρμογή από ολόκληρο το δωμάτιο με ένα τηλεχειριστήριο. Αυτή είναι μια τεράστια διαφορά σε σύγκριση με άλλες συσκευές. Η εμπειρία για την εφαρμογή σας πρέπει να αντανακλά αυτήν την εμπειρία κοινού χρήστη.
  3. Κάνετε τους ανθρώπους να αισθάνονται συνδεδεμένοι με το περιεχόμενό σας χρησιμοποιώντας την επιφάνεια αφής, το επιταχυνσιόμετρο και το γυροσκόπιο του τηλεχειριστηρίου. Είναι ζωτικής σημασίας η διασύνδεση να διευκολύνει τις αλληλεπιδράσεις βάσει εστίασης. Σκεφτείτε πάντα πώς θα πρέπει να φαίνονται τα στοιχεία όταν εστιάζονται και να καταστήσετε εντελώς προφανές πού είναι ο επόμενος έλεγχος με δυνατότητα εστίασης.

Χρήσιμοι σύνδεσμοι