8pt Πρότυπα GUI σχεδίασης υλικών

Μια βόλτα με την οπτική σχεδίαση και βασικές μετρήσεις του Design Inc.

Οκτώ..8, 16, 24, 32, 40, 48, 56, 64, 72, 80, 88, 96. Αυτοί είναι οι αριθμοί που τρέχουν το κεφάλι μου τη νύχτα. Έχω χρησιμοποιήσει ένα 8pt που βασίζεται από το χρόνο μου στο Android Auto και έχω απολαύσει την εφαρμογή των βασικών μεθοδολογιών Σχεδιασμού Υλικών στις διεπαφές χρήστη Design Inc. Την περασμένη εβδομάδα στην εβδομαδιαία έκθεση UNDO, ο σχεδιαστής, Danaan Clarke, ρώτησε για το δίκτυο των 8pt και, αν ή όχι, είχαμε εμπειρία με αυτό. Πάντα έχω "ξεφύγει" από τη δομή που υποστηρίζει το σχεδιασμό και σκέφτηκα ότι θα έδειχνε τη διασκέδαση να μοιραστεί μερικά "πίσω από τα σκηνικά".

1. Πλέγμα γραμμής βάσης

Το πρώτο και σημαντικότερο βήμα είναι να εξασφαλίσετε τη δομή του πυρήνα για το πλέγμα των εγγράφων σας. Μπορείτε να ορίσετε τις τιμές πλέγματος με την πλοήγηση στην Προβολή> καμβά> Ρυθμίσεις πλέγματος ...

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

Πηγή: Σχεδιασμός υλικού Google: https://material.io/guidelines

2. Πρότυπα διάταξης

Το επόμενο βήμα είναι να ορίσετε ένα σύστημα στήλης για διατάξεις σε διάφορες οθόνες. Προσπαθώ να μείνω συντηρητικός στα μεγέθη του καμβά μου, αλλά πάντα να προσπαθήσω να χρησιμοποιήσω ένα πλέγμα 4, 8 ή 16 στηλών με ένα στύλο 8pt (ή οποιοδήποτε πολλαπλασιαστή αυτού). Για κάθετους ρυθμούς, έχω ένα απλό επαναλαμβανόμενο πλέγμα 48pt. Μπορείτε να ορίσετε τις τιμές διάταξης με την πλοήγηση στην προβολή> Καμβά> Ρυθμίσεις διάταξης ...

Παρακάτω είναι ένα απλό παράδειγμα του τρόπου με τον οποίο αξιοποιώ το πλέγμα της στήλης μου (8 στήλες, 16pt υδρορροή), τις μετρήσεις της γραμμής βάσης (8pt) και τον κάθετο ρυθμό (48pt) σε μια νέα μαρτυρία UI που εστάλησαν αυτήν την εβδομάδα.

3. Εικόνες

Τα εικονίδια αποτελούν τεράστιο κομμάτι της δημιουργίας μιας γραμμής βάσης που λειτουργεί σωστά σε μια διεπαφή χρήστη. Υπάρχει πολύ δύσκολο μαθηματικό για να γίνει αυτό τέλειο, αλλά αν γίνει σωστά η ακεραιότητα του εικονιδίου σας θα διατηρηθεί στο φάσμα των πυκνοτήτων οθόνης (Retina, 1x, 2x, MDPI-XXXHDPI ... αν αυτό δεν έχει νόημα να διαβάσετε αυτό) . Το κλειδί για την εκτέλεση εικονιδίων με αυτόν τον τρόπο είναι να διασφαλιστεί ότι όλα τα σχήματα, τα εγκεφαλικά επεισόδια και τα περιθώρια είναι "ομαλά" (2, 4, 6, 8), έτσι ώστε να μένετε με ένα κεντρικό εικονίδιο στην περιοχή 24 x 24pt που μπορεί επίσης να πολλαπλασιάζονται (x2, x3, x4) και να κατατάσσονται ομοιόμορφα.

https://material.io/guidelines/style/icons.html#icons-system-icons

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

4. Δομή GUI

Δεν υπάρχει πραγματικά κανένας κανονιστικός κανόνας για τον καλύτερο τρόπο δημιουργίας αυτών των οδηγών, αλλά αυτά τα έγγραφα αποτελούν πηγή αλήθειας που μου δίνουν (και ελπίζω ότι οι συνεργάτες μου στην τεχνολογία) την ειρήνη του μυαλού. Ο στόχος είναι να υπάρχει μια "pixel-perfect" εκδοχή κάθε συστατικού πυρήνα όλα σε ένα έγγραφο, έτσι ώστε να μην χρειάζεται να σχεδιαστεί κάθε οθόνη και κατάσταση της εφαρμογής για παραγωγή. Υπάρχει ένας τόνος εξαιρετικών παραδειγμάτων και πόρων σε απευθείας σύνδεση για αναφορά, αλλά αν θέλετε να ξεκινήσετε από το μηδέν μπορείτε να κατεβάσετε το αρχείο βάσης μου με τις δομές και τη δομή της στήλης που ορίζεται.

ΚΑΤΕΒΑΣΤΕ ΤΟ ΑΡΧΕΙΟ ΠΗΓΗΣ

Ευχαριστώ!

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

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