Διάταξη περιορισμών (για τους σχεδιαστές)

Ένας εισαγωγικός οδηγός για τη μεταβίβαση απόκρισης κινητών διατάξεων

Πίσω στην ημέρα μου * προσαρμόζει τα γυαλιά * οι σχεδιαστές έπρεπε να πάρουν μαθήματα ανάπτυξης και κόκκινη γραμμή όλων των αρχείων μας με το χέρι!

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

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

Οι περιορισμοί

Αυτό το αρχείο σκίτσων που έχει όλα αυτά τα στοιχεία έτοιμο για να ξεκινήσετε!

Βασική μονάδα

8x8

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

  • 8 είναι πιο διαίρεσης! 10/4 = 2,5 έναντι 8/4 = 2
  • Η πλειοψηφία των δημοφιλών μεγεθών οθόνης διαιρούνται με 8, γεγονός που καθιστά εύκολη την τοποθέτηση (έναντι 6 ή 10)
  • Συσκευές που έχουν ανάλυση 1,5x θα έχουν έναν σκληρό χρόνο καθαρά rendering έναν περιττό αριθμό. Η κλιμάκωση 5 κατά 1.5x θα έχει ως αποτέλεσμα την μετατόπιση ενός ημίσεος pixel.

Στην επιλογή Σκίτσο> Προτιμήσεις> Καμβά, μεταβείτε στο "Μετακίνηση αντικειμένων [10] px χρησιμοποιώντας τα πλήκτρα Shift-Arrow" στο [8]. Θα σας εξοικονομήσει πολλή πονοκέφαλο.

Μονάδες διαχωρισμού

Οι μονάδες Spacer είναι οπτικές αναπαραστάσεις των κοινών αποστάσεων που σημειώνονται με την πολλαπλασιαζόμενη ποσότητα της μονάδας βάσης. Για παράδειγμα, μια "μονάδα διαχωριστικού 2" είναι 16 pt / dp επειδή 2x8 = 16. Αυτά τα σύμβολα θα πρέπει να χρησιμοποιούνται στο σχεδιασμό και το ψευδώνυμο θα πρέπει να είναι κτισμένο κωδικοποιεί έτσι ώστε να μιλάτε την ίδια γλώσσα κατά τη μεταβίβαση.

Κάθετοι και οριζόντιοι διαχωριστές

Μερικές φορές δεν υπάρχει αρκετός χρόνος για να είναι pixel-perfect - θα κάνετε λάθη. Χρησιμοποιώντας αυτά τα σύμβολα αντί της αυτόματης μαύρης κόκκινης επένδυσης, λέει στον μηχανικό σας την πρόθεση απόστασης από το πραγματικό διάστημα. Το ψευδώνυμο αριθμού αντιστοιχεί στον αριθμό των φορών που κάνετε 'Shift + πλήκτρο βέλους' μετακινήστε ένα αντικείμενο αντί να απομνημονεύσετε τον πίνακα πολλαπλασιασμού για 8 δευτερόλεπτα.

Ανταπόκριση κουμπιά: iPhone 8, Samsung Galaxy S8, και iPhone SE

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

Ενδείξεις ευθυγράμμισης

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

Κέντρο κάθετα, οριζόντια και αμφότερα. Κατασκευάστηκε από τον Sam

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

Βασική ευθυγράμμιση

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

Πατήστε Στόχοι

48 x 48

Στο κινητό, το ελάχιστο μέγεθος στόχου βρύσης είναι 48x48 dp / pt. Αυτό προέρχεται από τις κατευθυντήριες γραμμές σχεδίασης υλικών για απόσταση ~ 12 ". (Το HIG συνιστά 44x44pt, γι 'αυτό πηγαίνω με το μεγαλύτερο.) Για το μέγεθος του στόχου βρύσης, όταν τοποθετείτε τα στοιχεία το ένα δίπλα στο άλλο, μπορείτε επίσης να χρησιμοποιήσετε τη βρύση σύμβολο στόχου για να δηλώσετε ποια μέρη ενός στοιχείου είναι ευκίνητα.

Διάταξη στοιχείων

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

Παράδειγμα στοιχείων: Στοιχείο λίστας, Κουμπί και Σημείο ελέγχου

Μέγεθος βάσης

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

Οπτικό μέγεθος εξαρτήματος σε σχέση με το ελάχιστο ύψος στόχου βρύσης: ακριβές, πάνω και κάτω.

Υλικό παραγεμίσματος

Χρησιμοποιήστε διαχωριστικά για να υποδείξετε την επένδυση μέσα σε ένα στοιχείο.

Οριζόντια τοποθέτηση με μεγάλες χορδές

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

Οριζόντια και κατακόρυφη γεμίσματα με δυναμικό τύπο

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

Ευθυγραμμία

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

Κείμενο κάθετα κεντρικού στοιχείου λίστας, ευθυγραμμισμένη τιμή βάσης και κεντρικό σημείο επιλογής

Διάταξη οθόνης

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

Εικονογράφηση από τον Meg

... και voila! Εκεί το έχετε λαοί - μια προσαρμοστική διάταξη κινητού!

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

Τελευταίες σκέψεις

Ακόμη και ένα άψογα δημιουργημένο αρχείο μεταβίβασης δεν αντικαθιστά τη λεκτική επικοινωνία μόδας με τον μηχανικό σας. Αυτό θα πρέπει να χρησιμοποιείται σε συνδυασμό με kickoffs, handoffs, και γραπτή τεκμηρίωση. Όσο περισσότερο κρατάτε τους μηχανικούς σας στο βρόχο με το σχέδιό σας, τόσο πιο κοντά θα είναι αυτό που πραγματικά τα πλοία. Και! Χειρισμός συγκεκριμένων αρχείων και για τις δύο κινητές πλατφόρμες - πάντα.

Φωνάξτε με τους μηχανικούς που μου δίδαξαν ό, τι γνωρίζω: Kathy και Sam! Είμαι Linzi Berry, επί του παρόντος υπεύθυνος συστημάτων σχεδιασμού στο Lyft. Νιώθω ιδρωμένος για τις λεπτομέρειες, ώστε να μην χρειαστεί. Παρακαλώ εγγραφείτε!