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

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

rest api με κόμβο js

Τι είναι ο τέλειος σχεδιασμός διεπαφής χρήστη για pixel;

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

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

Γιατί όμως το Pixel-Perfect Design;

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

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

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

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

Δημιουργία σχεδίασης διεπαφής χρήστη για iOS

Ας αρχίσουμε. Οι τέλειες εφαρμογές Pixel ξεκινούν προφανώς ως τέλεια σχέδια pixel και όλοι γνωρίζουμε από πού προέρχονται αυτές τις μέρες.

Βασικά εργαλεία σχεδίασης iOS

Νομίζω ότι σωστά το λέω αυτό Σκίτσο έχει γίνει το de facto πρότυπο για σχεδιαστές UI / UX για web και mobile. Ενώ Το Adobe XD είναι μια πολλά υποσχόμενη εναλλακτική λύση , υστερεί του Sketch από άποψη δημοτικότητας.

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

Η μόνη πραγματική ερώτηση εδώ είναι: Πώς πρέπει ο σχεδιαστής να μοιράζεται πληροφορίες σχετικά με την προσαρμογή διατάξεων για διαφορετικές οθόνες με τον προγραμματιστή;

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

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

Ρύθμιση του σχεδίου σας

Αυτό ακούγεται υπέροχο, αλλά δεν έχουμε επιλέξει το μέγεθος που θα χρησιμοποιήσουμε για να δημιουργήσουμε το σχέδιό μας ακόμα. Σύμφωνα με Στατιστικά iOS του David Smith , Το 57% όλων των χρηστών iPhone βασίζονται σε οθόνες 4,7 ιντσών, που εισήχθησαν στο iPhone 6 / 6s και αργότερα χρησιμοποιήθηκαν στο iPhone 7 και ακόμη και στο iPhone 8 που κυκλοφόρησε πρόσφατα.

Είμαι βέβαιος ότι είστε ήδη εξοικειωμένοι με τις οθόνες 4,7 ιντσών της Apple, αλλά σε περίπτωση που δεν είστε αριθμοί, μιλάμε για οθόνες 750x1334 pixel με 326 pixel ανά ίντσα (PPI). Αυτή είναι η τυπική οθόνη Retina και στον κώδικα θα έχουμε τη μισή ανάλυση. Επομένως, σας προτείνω να ξεκινήσετε 375x667 εικονοστοιχεία.

Στη συνέχεια, πρέπει να διασφαλίσουμε ότι ο σχεδιασμός διεπαφής χρήστη iOS μεγιστοποιεί την ευκρίνεια. Για να επιτύχετε αυτόν τον στόχο, πρέπει να ενεργοποιήσετε τοποθέτηση pixel :

Ακολουθεί ένα παράδειγμα ενός απλού ορθογωνίου με και χωρίς τη λήψη εικονοστοιχείων:

Χρήσεις Γύρος: Πλήρης εικονοστοιχεία κατά την επεξεργασία διανυσματικών αντικειμένων:

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

Μη διστάσετε να χρησιμοποιήσετε πολύπλοκα διανυσματικά κινούμενα σχέδια, επειδή ένας προγραμματιστής μπορεί εύκολα να παίξει χρησιμοποιώντας το βιβλιοθήκη lottie . Μπορείτε να αναπαράγετε κινούμενα σχέδια του Adobe After Effects σε μια κινητή συσκευή χωρίς να αντιμετωπίζετε αντικείμενα κλιμάκωσης. Απλώς δώστε το αρχείο JSON στον προγραμματιστή και τελειώσατε.

Χρησιμοποιήστε όσο το δυνατόν περισσότερο το προφίλ χρώματος sRGB. Εάν το sRGB δεν επαρκεί σε οθόνες ευρείας γκάμας, θα πρέπει να παρέχετε χρώματα ή γραφικά (ένα sRGB και ένα με ενσωματωμένο προφίλ χρωμάτων). Λεπτομερείς πληροφορίες για τα προφίλ χρωμάτων είναι διαθέσιμες στο Οδηγίες HID της Apple αν το χρειάζεστε.

Προσαρμοσμένος κώδικας για τέλεια αποτελέσματα Pixel

Εξαιρετική! Τώρα γνωρίζουμε αρκετά για να δημιουργήσουμε μια τέλεια διάταξη pixel. Πώς το μοιραζόμαστε με τον προγραμματιστή; Προφανώς πρέπει να φτάσουμε στην εργαλειοθήκη μας.

Επιλέγοντας τα σωστά εργαλεία

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

Ένα άλλο δροσερό εργαλείο είναι PaintCode , που μπορεί να δημιουργήσει κώδικα από διανυσματικές εικόνες. Το PaintCode χρησιμοποιεί τις διαδρομές SVG και τα δεδομένα χρωμάτων για τη δημιουργία κλάσεων Swift ή ObjC. Με το PaintCode, μπορείτε να χρησιμοποιήσετε εκφράσεις, μεταβλητές κ.λπ. για να δημιουργήσετε παθητικές / ενεργές καταστάσεις των κουμπιών σας, καταστάσεις πάνω / κάτω, δυναμικό κείμενο, μεταβλητή κίνηση και πολλά άλλα.

Προφανώς θα πρέπει να βασιστείτε στον Xcode και σε ορισμένα τυπικά εργαλεία ανάπτυξης iOS, αλλά θα το φτάσουμε αργότερα.

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

Εντάξει, ο προγραμματιστής έχει τελικά όλα όσα χρειάζονται, οπότε πώς εφαρμόζουμε τέλεια την τέλεια διάταξη των pixel (συγγνώμη για το λογοπαίγνιο);

Διαμόρφωση και συγχρονισμός των εργαλείων σας

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

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

Για να το κάνετε σωστά, πρέπει να συγχρονίσετε τα εργαλεία σας:

• Ορίστε το προφίλ χρώματος οθόνης σε sRGB: μεταβείτε στο Προτιμήσεις συστήματος - Οθόνες - Χρώμα και επιλέξτε sRGB IEC61966-2.1 .

• Σε Ψηφιακός μετρητής χρώματος , ή οποιοδήποτε άλλο εργαλείο επιλογής χρωμάτων, επιλέξτε να εμφανίζεται sRGB .

• Βεβαιωθείτε ότι το προφίλ χρώματος στην παλέτα χρωμάτων Xcode έχει ρυθμιστεί σε Συσκευή RGB.

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

Στο Xcode 9, θυμηθείτε Διατήρηση διανυσματικών δεδομένων όταν ειναι απαραίτητο. Ενώ θα αυξήσει το μέγεθος της εφαρμογής, αυτό θα σας επιτρέψει επίσης να χρησιμοποιήσετε την εικόνα της για οποιοδήποτε μέγεθος οθόνης. Ωστόσο, στο iOS 10 και σε παλαιότερες εκδόσεις του λειτουργικού συστήματος για κινητά της Apple, οι εικόνες _ δεν θα μεγεθυνθούν_ χρησιμοποιώντας τα πρόσθετα διανυσματικά δεδομένα.

Αντ 'αυτού, οι παλαιότερες εκδόσεις του λειτουργικού συστήματος θα χρησιμοποιούν μηχανισμούς κλιμάκωσης παλαιού τύπου και θα σας αφήσουν μια θολή εικόνα όταν κλιμακώνονται πέρα ​​από το αρχικό μέγεθος. Μπορείτε να συμβουλευτείτε την επίσημη τεκμηρίωση της Apple για πρόσθετες πληροφορίες αυτό το συγκεκριμένο θέμα .

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

Δώστε ζωή στη σχεδίαση διεπαφής χρήστη iOS

Όσον αφορά την εφαρμογή του σχεδιασμού διεπαφής χρήστη iOS, υπάρχουν μερικές προσεγγίσεις για να διαλέξετε: Storyboard, XIB και προσαρμοσμένος κώδικας .

• Storyboard - Προβάλετε τις οθόνες και την πλοήγηση μεταξύ τους, αλλά δεν υπάρχουν επιλογές για να κληρονομήσετε μια διάταξη από τον έναν ελεγκτή στον άλλο.

• XIBs - Δείτε μια οθόνη ή το τμήμα της, εύκολο να κληρονομηθεί. Πριν από το Xcode 9, δεν υπήρχε επιλογή χρήσης οδηγών διάταξης πάνω / κάτω, ενώ στον Xcode 9 μπορούμε να χρησιμοποιήσουμε Ασφαλής περιοχή .

• Κώδικας - Μακράν η πιο ευέλικτη επιλογή, αλλά δεν παρέχει άμεση προβολή.

Για storyboard, θα πρέπει να διαιρέσετε τη διάταξή σας σε ροές, για παράδειγμα LoginFlow.storyboard, SettingsFlow.storyboard ή NewsFeedFlow.storyboard. Με αυτόν τον τρόπο, θα κρατήσετε τους πίνακες ιστοριών σας ανοιχτούς.

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

Δείτε το παρακάτω παράδειγμα για ομαδοποιημένα και μη ομαδοποιημένα στοιχεία:

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

Για να χρησιμοποιήσετε χρώματα στο IB, μπορείτε να προετοιμάσετε μια παλέτα στο κάτω μέρος του Xcode Color Picker.

πώς να βελτιώσετε την απόδοση του διακομιστή sql

Σημείωση: Εάν η ελάχιστη έκδοση iOS της εφαρμογής σας είναι 11, μπορείτε να χρησιμοποιήσετε την επιλογή 'Named Colors' στον Κατάλογο στοιχείων.

Να τελειωσει

Αυτό είναι. Τώρα πρέπει απλώς να στείλουμε το αποτέλεσμα στην ομάδα ποιοτικού ελέγχου, να επαληθεύσουμε ότι όλα είναι εντάξει και voilà! Η τέλεια εφαρμογή pixel είναι έτοιμη.

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