Πηγαίνοντας υλικό με σχεδιαστή Gravit

Η εκκίνηση ενός νέου έργου δεν είναι πάντα εύκολη υπόθεση, αλλά με τα σωστά εργαλεία στα σωστά χέρια η εργασία γίνεται χαρά και το αποτέλεσμα θα είναι πολύ ικανοποιητικό. Δεδομένου ότι έχουμε τα σωστά χέρια, τώρα το μόνο που πρέπει να κάνουμε τώρα είναι να βρούμε τα σωστά εργαλεία. Και αν είστε χρήστης των Windows όπως εγώ, δεν υπάρχει καλύτερο εργαλείο για το σχεδιασμό του UI από το Gravit Designer, αν πρέπει να σχεδιάσετε μια εφαρμογή για κινητά ή ίσως και έναν ιστότοπο.

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

Κουρασμένος από όλη τη θεωρία; Φυσικά είσαι, είχαμε πολλά από αυτά στο σχολείο. Δεδομένου ότι η πρακτική δεν μας κάνει τέλεια, αλλά καλύτερα σίγουρα, θα θελήσετε να μεταβείτε απευθείας στη λειτουργία παραγωγικότητας. Πηγαίνοντας κάτω από την τρύπα του κουνελιού στο material.io βρίσκουμε την ενότητα "Οδηγίες & Πόροι" με όλες τις προδιαγραφές που χρειαζόμαστε, από τις Παλέτες Χρωμάτων έως τα Πρότυπα Διάταξης και ακόμη και τις Σκιές.

Και ποιος καλύτερος τρόπος για να ξεκινήσετε ένα νέο έργο από το άνοιγμα της αυτοκόλλητης ετικέτας και να πάρετε όλα τα στοιχεία που χρειαζόμαστε; Διαθέτουμε αυτοκόλλητα για το Sketch, το Adobe XD, τα After Effects, το Photoshop και ακόμα και το Illustrator. Αλλά περιμένετε, πού είναι το αυτοκόλλητο εξαρτημάτων Gravit; Αυτό είναι σωστό, δεν υπάρχει κανένας, ίσως στο μέλλον η Google θα απελευθερώσει ένα, έτσι εν τω μεταξύ πήγα μπροστά και έκανα τον εαυτό μου.

Gravit Material UI Kit

Λαμβάνοντας έμπνευση από το επίσημο φύλλο αυτοκόλλητων ετικετών σχεδίασης Google και μερικές πρόσθετες πινελιές, γεννήθηκε το κιτ εργαλείων Gravit Material UI. Το κιτ είναι διαθέσιμο ως ανοικτή πηγή στο GitHub και μπορείτε να το κατεβάσετε από εδώ.

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

Τυπογραφία

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

Είναι λοιπόν μια μεγάλη γραμματοσειρά για να αρχίσουμε με το ότι μπορούμε εύκολα να αλλάξουμε αργότερα χρησιμοποιώντας ένα κομψό χαρακτηριστικό στο Gravit που ονομάζεται Shared Style, αλλά θα επιστρέψουμε σε αυτό σε ένα λεπτό. Υπάρχουν όλα τα βασικά στυλ γραμματοσειράς και τα μεγέθη σε αυτό το κιτ συν τις συνιστώμενες αδιαφάνειας για διαφορετικές καταστάσεις.

Οδηγοί οθόνης

Στη συνέχεια βρίσκουμε τους Οδηγοί οθόνης, οι οποίοι είναι πολύ σημαντικοί για την ευθυγράμμιση των στοιχείων UI στην οθόνη. Εδώ έχουμε και τους δύο κατακόρυφους κανόνες διαστήματος και τις οριζόντιες καγιάλες και περιθώρια. Για να τις χρησιμοποιήσετε, απλά δημιουργήστε ένα νέο έγγραφο για το Android (το πρότυπο που ονομάζεται Nexus 5 λειτουργεί καλά) και αντιγράψτε / επικολλήστε την απαιτούμενη ομάδα οδηγών οθόνης από το κιτ UI. Όλες οι ομάδες οδηγών χρησιμοποιούν τη λειτουργία ανάμειξης "Πολλαπλασιασμού", έτσι ώστε να δούμε μέσω του τρέχοντος σχεδίου μας ότι δουλεύουμε.

Συστατικά

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

Τώρα που έχουμε τα κατάλληλα "υλικά" για να συνεργαστούμε, ας επιστρέψουμε στο εργαλείο μας και να δούμε πώς ο Gravit Designer μπορεί να κάνει τη ζωή μας ευκολότερη κατά το σχεδιασμό του UI και να κάνει όλη τη διαδικασία μια ευχάριστη εμπειρία.

Χρησιμοποιώντας το εργαλείο

Όπως και κάθε νέο ψηφιακό εργαλείο, ο Gravit ξεφυτρώνει ωραία από το καθιερωμένο λογισμικό, αλλά προσθέτει αρκετά μοναδικά χαρακτηριστικά για να το ξεχωρίσει από το πλήθος. Με αυτό τον τρόπο είναι πραγματικά εύκολο να κάνετε τη μετάβαση από ένα προηγούμενο εργαλείο, ειδικά όταν υπάρχουν ήδη όλες οι συνήθεις συντομεύσεις, τα εργαλεία και οι πίνακες. Αλλά μακράν το καλύτερο χαρακτηριστικό είναι ... η πλατφόρμα. Αυτό σημαίνει ότι μπορείτε να χρησιμοποιήσετε το αγαπημένο σας UI εργαλείο είτε σε Mac ή σε υπολογιστή που εκτελεί Windows ή Linux και αν δεν σας αρέσει να εγκαταστήσετε νέο λογισμικό τότε μπορείτε να το χρησιμοποιήσετε ακόμα και από το πρόγραμμα περιήγησης. Αρκετά τακτοποιημένο, χα; Συν όλη τη δουλειά που δημιουργείτε, μπορείτε να την αποθηκεύσετε δωρεάν στο Gravit Cloud. Τώρα επιτρέψτε μου να σας δείξω μερικά κόλπα όπου ο Gravit μπορεί να κάνει τη ζωή σας πιο εύκολη ως σχεδιαστής UI.

Κοινή στυλ. Οι περισσότερες εφαρμογές UI χρησιμοποιούν κάποιο είδος λίστας για την εμφάνιση επαναλαμβανόμενων πληροφοριών. Εδώ είναι όπου τα κοινά στυλ έρχονται βολικά. Ας υποθέσουμε ότι έχουμε την οθόνη εισερχομένων μιας εφαρμογής ηλεκτρονικού ταχυδρομείου όπου θέλουμε να αλλάξουμε εύκολα το στυλ του θέματος για όλο το μήνυμα. Απλά επιλέξτε το πρώτο θέμα, ορίστε σωστά τη γραμματοσειρά και δημιουργήστε ένα νέο Shared Style. Τώρα επιλέγουμε τα άλλα θέματα και εφαρμόζουμε το νεοδημιουργημένο Shared Style. Η αλλαγή ενός θέματος θα τα αλλάξει όλα. Μπορούμε να χρησιμοποιήσουμε αυτή τη λειτουργία για να δημιουργήσουμε κοινόχρηστα στυλ για οποιοδήποτε τύπο αντικειμένου, αφού μπορούν να θυμούνται το ύφος, το πλήθος, τα σύνορα, τα εφέ ή το κείμενο του αντικειμένου.

Μετασχηματισμός πίνακα. Η μετακίνηση και η αντιγραφή αντικειμένων είναι κάτι που κάνουμε όλη την ώρα ως σχεδιαστές του UI και για να μας βοηθήσετε με αυτά τα καθήκοντα, ο Gravit προσφέρει ένα ωραίο πάνελ με πολλές επιλογές. Ας υποθέσουμε ότι πρέπει να αντιγράψετε γρήγορα και να τοποθετήσετε ένα αντικείμενο μετά το άλλο. Πραγματικά εύκολο ... απλά εισάγετε τις συντεταγμένες και τον αριθμό των αντιγράφων και πατήστε "Apply", και τελειώσατε.

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

Ένα τελευταίο κόλπο με το οποίο θέλω να σας αφήσω. Πέστε ότι έχουμε δημιουργήσει ένα ωραίο στυλ κουμπιού και θέλουμε να δούμε πώς θα μπορούσε να φαίνεται σε διαφορετικό σχήμα. Τίποτα δεν μπορεί να είναι ευκολότερο. Επιλέξτε το σχήμα στυλ και πατήστε Ctrl + C (Cmd + C σε Mac) απλά σχεδιάστε ένα διαφορετικό σχήμα - ίσως έναν κύκλο - χτυπήστε το F4 και τελειώσατε.

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

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

Ιστοσελίδα | Facebook | Twitter | Δικαστήριο