Βέλτιστη προσαρμογή του σχεδίου σου για το iPhone X

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

Κύριες παρατηρήσεις

• Το ύψος οθόνης του iPhone X είναι 812 pixel, δημιουργώντας χώρο για νέα στοιχεία διεπαφής χρήστη.
• Η πλοήγηση και η Tab Bar είναι ψηλότερες και απαιτούν προσαρμογές στο layout.
• Είναι σημαντικό να προσέξεις την Safe Area, για να διασφαλίσεις ότι κανένα περιεχόμενο δεν πέφτει στη στρογγυλεμένη περιοχή της οθόνης.
• Ο Home Indicator είναι ένα νέο στοιχείο διεπαφής που πρέπει να ληφθεί υπόψη κατά το σχεδιασμό.

Βήμα-προς-βήμα οδηγίες

Ξεκίνα με τη δημιουργία ενός νέου σχεδίου iPhone X στο Sketch. Πάτησε A για να προσθέσεις ένα νέο στοιχείο και στη συνέχεια κάνε κλικ στο σχέδιο iPhone X.

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

Αντέγραψε τον Home Controller και προσαρμόστε το σχέδιο. Είναι προτιμότερο να μην χρησιμοποιήσεις τις standard βιβλιοθήκες, αλλά τη συγκεκριμένη βιβλιοθήκη iPhone X για μια πιο ακριβή προσαρμογή. Μετάβηκε στις ρυθμίσεις του Sketch και ενεργοποίησε τη βιβλιοθήκη iOS 11, εάν δεν είναι ήδη διαθέσιμη.

Πρόσθεσε μια προεπιλεγμένη γραμμή πλοήγησης για να διατηρήσεις τη συνέπεια της διεπαφής. Βεβαιώσου ότι το ύψος της Navigation Bar είναι 88 pixel σε σύγκριση με τα 44 pixel του iPhone 8.

Αναζήτησε τη Status Bar στη βιβλιοθήκη iOS 11 και πρόσθεσέ την επίσης. Πρέπει να τοποθετηθεί στην άνω άκρη της οθόνης.

Για την Tab Bar ισχύει το ίδιο: Επίλεξε μια έκδοση με τρεις tabs από τη βιβλιοθήκη iOS 11 και φρόντισε να έχει ύψος 83 pixel ώστε να προσαρμόζεται καλά στο layout.

Δώσε προσοχή ώστε κατά το σχεδιασμό να μην προεξέχουν στοιχεία στη στρογγυλεμένη περιοχή. Στον προγραμματισμό αυτό ονομάζεται Safe Area Layout Guide – είναι ο χώρος που χρειάζεσαι για μια ασφαλή εμφάνιση.

Πρόσθεσε τον Home Indicator ως αναπόσπαστο μέρος του σχεδιασμού σου. Αυτός πρέπει να τοποθετηθεί στη μέση της κάτω άκρης.

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

Επαναλαβέ αυτή τη διαδικασία για τον Chat Controller. Δημιούργησε ένα αντίγραφο του σχεδίου και άλλαξε το όνομά του ανάλογα.

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

Πρόσεξε τα περιθώρια, ειδικά μεταξύ των Chat Bubbles και της Tab Bar. Διατήρησε απόσταση 16 pixel για να διασφαλίσεις ότι τα στοιχεία εναρμονίζονται καλά μεταξύ τους.

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

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

Σύνοψη – Αποτελεσματικός σχεδιασμός iPhone X στο Sketch

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