Σχεδιασμός για το iPhone X

Το iPhone X (διαβάστε: iPhone δέκα) είναι επίσημα εδώ, και θα είναι στις 3 Νοεμβρίου. Βράζει μια άκρη στην άκρη Super Retina Display με ανάλυση 1125 × 2436 px. Έχει επίσης ένα cut-out στην κορυφή της οθόνης, όπου μπορείτε να βρείτε μερικά φουτουριστικά χαρακτηριστικά ξεκλειδώματος προσώπου.

Ο σχεδιασμός για αυτό το όμορφο μηχάνημα θα φέρει μερικές νέες προκλήσεις, αλλά και μερικές νέες ευκαιρίες σχεδίασης. Το πλάτος της συσκευής σε πορτραίτο είναι το ίδιο με το iPhone 6, 7 και 8, αλλά είναι 145pt ψηλότερο, με αποτέλεσμα ± 20% περισσότερος κατακόρυφος χώρος. Όταν σχεδιάζετε @ 1x χρειάζεστε ένα artboard των 375 × 812px. Δεν θα εξάγετε εικόνες @ 2x όπως το iPhone 8, αλλά @ 3x όπως το iPhone 7-8 Plus, λόγω της νέας οθόνης Retina.

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

^ Δείτε αυτή τη λευκή γραμμή, αυτή είναι η νέα ένδειξη κατοικίας.

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

^ iPhone 8 σχεδιασμός στα αριστερά, αυτόματα προσαρμοσμένο στο iPhone X στα δεξιά

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

Ας αρχίσουμε

Πρώτα απ 'όλα, αγκαλιάστε το σχεδιασμό των συσκευών, οι εργαζόμενοι της Apple δεν δούλεψαν σκληρά για να αποκρύψετε τα υπέροχα χαρακτηριστικά αυτού του ακριβού κομμάτι υλικού.

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

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

Η νέα γραμμή κατάστασης. Λόγω των αισθητήρων στην κορυφή της οθόνης, η νέα γραμμή κατάστασης χωρίζεται σε 2 μέρη. Εάν το UI σας κάνει κάτι ξεχωριστό με αυτό το διάστημα (προηγουμένως 20pt υψηλής, τώρα 44pt), θα χρειαστεί να ενημερώσετε τη διεπαφή σας, επειδή θα είναι ψηλότερο στο iPhone X. Βεβαιωθείτε ότι μπορεί να αλλάξει δυναμικά σε ύψος. Ένα μεγάλο πράγμα είναι ότι το ύψος δεν θα αλλάξει αν ένας χρήστης πραγματοποιήσει μια τηλεφωνική κλήση ή χρησιμοποιεί μια εφαρμογή πλοήγησης, κάτι που συνέβαινε προηγουμένως σε άλλα iPhones.

^ διαχωρισμένη και ψηλότερη γραμμή κατάστασης

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

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

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

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

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

(Ενημέρωση: Το φάσμα χρωμάτων P3 προστέθηκε από το iPhone 7, χάρη στον Marcelo Ávalos)

Σύρετε προς τα επάνω, προσέχετε τη χρήση χειρονομίας. Δεδομένου ότι το φυσικό κουμπί του σπιτιού έχει φύγει, αλληλεπιδράτε με το iPhone σας (περισσότερο από ποτέ) χρησιμοποιώντας χειρονομίες. Όταν μετακινείτε με το δάχτυλό σας, πηγαίνετε στο σπίτι ή πηγαίνετε στην προβολή πολλαπλών εργασιών. Όταν μετακινείτε το αριστερό και το δεξί κουμπί στην αρχική ένδειξη, αλλάζετε μεταξύ των ανοιχτών εφαρμογών πολλαπλών εντολών. Πηγαίνοντας από το πάνω μέρος της οθόνης, μεταβείτε στο Κέντρο ειδοποιήσεων ή ελέγχου. Πιο συγκεκριμένα στα παιχνίδια, μπορείτε να χρησιμοποιήσετε προσαρμοσμένες χειρονομίες που μπορεί να αντικαταστήσουν τις εγγενείς χειρονομίες iOS. Μπορείτε να χρησιμοποιήσετε τις δικές σας κινήσεις, εφαρμόζοντας "προστασία από άκρη", η οποία είναι ένα χαρακτηριστικό που θα προτιμήσει πρώτα τη χειρονομία της εφαρμογής πρώτα, πριν από τη χειρονομία του OS, μόνο μία φορά όμως. Χρησιμοποιήστε αυτό με φειδώ, επειδή θα σας δυσκολευτεί να χρησιμοποιήσετε τις λειτουργίες του συστήματος.

Αναγνωριστικό προσώπου. Το προηγούμενο iPhone διαθέτει ένα μεγάλο χαρακτηριστικό Touch ID, το οποίο επέτρεψε στους χρήστες να ξεκλειδώσουν τη συσκευή τους ή να πραγματοποιήσουν ενέργειες με κλειδωμένο κωδικό πρόσβασης μέσα στις εφαρμογές, χρησιμοποιώντας το δακτυλικό αποτύπωμα τους. Αυτός ο αισθητήρας ήταν κρυμμένος στο εσωτερικό του κουμπιού του σπιτιού, δεδομένου ότι έχει περάσει στο iPhone X, η Apple την αντικατέστησε με έναν πιο προηγμένο και ασφαλή τρόπο ξεκλειδώματος της συσκευής σας. Εισάγετε αναγνωριστικό προσώπου, χρησιμοποιεί μερικούς πολύ μεγάλους αλγόριθμους για να ανιχνεύσει το πρόσωπό σας και να ξεκλειδώσει τη συσκευή σας. Αυτό θα δείξει κάποια νέα UI σε εφαρμογές, βεβαιωθείτε ότι το εφαρμόζετε για τους (πλούσιους) χρήστες που διαθέτουν ένα iPhone X. Βεβαιωθείτε επίσης ότι δεν αναφέρετε πια στο Touch ID στο onboarding ή το μενού σας, αντικαταστήστε το με το Face ID .

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

Μεγαλύτερες γραμμές πλοήγησης. Με το iOS 11 ο σχεδιασμός των εγγενών γραμμών πλοήγησης πήρε μια ενημέρωση, είναι τώρα πιο ψηλά. Αυτό το σχέδιο θα είναι ιδιαίτερα καλό για το ψηλότερο iPhone X και θα συνδυάσει όμορφα με αυτή τη νέα γραμμή κατάστασης. Έτσι, σκεφτείτε να το χρησιμοποιήσετε στο σχεδιασμό σας. Αυτά θα έχουν επίσης κάποια ωραία εγχώρια κινούμενα σχέδια κατά την κύλιση.

TL · DR

  • Το iPhone X είναι 145pt ψηλότερο, έτσι σχεδιασμός για 375 × 812pt αντί για 375x667pt
  • Το iPhone X χρησιμοποιεί @ 3x περιουσιακά στοιχεία.
  • Δημιουργήστε μια εμπειρία πλήρους οθόνης, μην αποκρύψετε τις μοναδικές λειτουργίες των συσκευών.
  • Κεντράρετε το σημαντικό περιεχόμενο του διεπαφή χρήστη σας, για να βεβαιωθείτε ότι είναι πάντα ορατό και όχι κρυμμένο από τους αισθητήρες ή τις γωνίες της συσκευής.
  • Μια νέα, πιο ψηλή, γραμμή κατανομής σε δύο, προηγουμένως 22pt, τώρα ύψος 44pt.
  • Οι εικόνες πλήρους οθόνης ενδέχεται να / πρέπει να ενημερώνονται ώστε να εμφανίζονται πλήρως.
  • Μην προσθέτετε κουμπιά στο κάτω μέρος της οθόνης, κοντά στην ένδειξη του σπιτιού.
  • Μην κρύβετε την ένδειξη του σπιτιού, μόνο όταν είναι πραγματικά απαραίτητο.
  • Πλουσιότερα και πιο κορεσμένα χρώματα χάρη στο φάσμα χρωμάτων P3.
  • Λάβετε υπόψη τις προσαρμοσμένες χειρονομίες κοντά στην ένδειξη του σπιτιού και τη γραμμή κατάστασης, μην χάνετε τις αναμενόμενες εγγενείς χειρονομίες του χρήστη.
  • Το αναγνωριστικό προσώπου αντικαθιστά το αναγνωριστικό αφής, ενημερώνει το περιβάλλον εργασίας χρήστη και αντικαθιστά τις αναφορές κειμένων στο αναγνωριστικό αφής.
  • Τα προσαρμοσμένα πληκτρολόγια δεν χρειάζεται να προσθέτουν τα κουμπιά Emoji και υπαγόρευσης.
  • Οι μεγαλύτερες γραμμές πλοήγησης θα φαίνονται και θα ζωντανεύουν σε αυτή την υψηλή οθόνη.

Ή παρακολουθήστε το βίντεο της Apple σχετικά με το σχεδιασμό για το iPhone X.

Πώς μπορώ να προβάλω το προφίλ χρήστη του προγράμματός μου;

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

Πού μπορώ να βρω τους πόρους iOS 11 και iPhone X;

Είστε τυχεροί, η Apple έχει μερικούς εξαιρετικούς νέους πόρους για το Sketch, το Photoshop και το Adobe XD. Μπορείτε να τα βρείτε εδώ: Πόροι Σχεδιασμού της Apple.

Σημείωση: οι περισσότερες από αυτές τις πληροφορίες προέρχονται από τις Οδηγίες UI της Apple.