Εκπαιδευτικά Σκετς

Σύστημα σχεδιασμού υλικού με σύμβολα σκίτσου

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

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

Περιεχόμενα οδηγών:

  1. Εισαγωγή - Επιστροφή και ιδέα πίσω από τη δημιουργία.
  2. Επισκόπηση - Μια γρήγορη ματιά στα κύρια τμήματα.
  3. 🎛 Ρύθμιση - Πίνακας ελέγχου για κάθε λεπτομέρεια.
  4. Εξαρτήματα - Στοιχεία υλικού με σύμβολα.
  5. Περίληψη - Χρησιμοποιήστε περιπτώσεις και συχνές ερωτήσεις

1. Εισαγωγή

Γιατί ο κόσμος χρειάζεται ένα άλλο σύστημα σχεδιασμού σκίτσων;

Κυρίως επειδή βρίσκω ότι η κλασική εμφάνιση του Υλικού ήταν ξεπερασμένη, και αφού διεξήγαγα μικρή έρευνα, ήμουν πεπεισμένος για αυτό. Οι περισσότεροι άνθρωποι (* Σχεδιαστές) θα το βρούσαν φθαρμένο ή "πολύ σκιερό" για να το χρησιμοποιήσουν μόνο τυφλά στα προϊόντα τους, καθώς θα μπορούσε να οδηγήσει σε ένα μη μοναδικό UI εφαρμογής που μπορεί εύκολα να χαθεί από όλες τις άλλες εφαρμογές που είναι ήδη στην αγορά.

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

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

https: //dribbble.com/shots/Material-Design-System-with-Sketch-Symbols

2. Επισκόπηση

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

Περιεχόμενα:

  • Ξεκινήστε - Το σημείο εκκίνησης και ένας πίνακας ελέγχου για ένα νέο έργο. Προσαρμόστε εδώ τα χρώματα, τα στυλ και τις γραμματοσειρές σας για να μεταδώσετε γρήγορα τις αλλαγές σε όλο το σύστημα.
  • Οδηγός στυλ - Σχήματα χρωμάτων, φύλλα στυλ, εικονίδια και γραμματοσειρά, όλα μαζί σας εξυπηρετούν ως την απόλυτη πηγή της αλήθειας για το εμπορικό σήμα ή το έργο σας.
  • Στοιχεία - Τα δομικά στοιχεία του συστήματος είναι κατασκευασμένα σε 3 διαφορετικά έγχρωμα θέματα, παρουσιάζοντας τεράστιες επιλογές προσαρμογής σε κάθε στοιχείο και στοιχείο.
  • Οθόνες - Αυτή η σελίδα περιέχει μια συνεχώς αυξανόμενη συλλογή προ-σχεδιασμένων προτύπων οθόνης που έχουν κατασκευαστεί με εξαρτήματα του συστήματος, τα οποία μπορούν να προσαρμοστούν ελεύθερα και να χρησιμοποιηθούν ως υλικά εργασίας.
  • Σύμβολα - Η καρδιά του συστήματος, ο τόπος για όλα τα σύμβολα που κατηγοριοποιούνται και ταξινομούνται χειροκίνητα σύμφωνα με τον τύπο του. ♥ ️

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

3. Ρύθμιση

Για να ρυθμίσετε το γύψο και να έχετε τη μοναδική έκδοση του συστήματός σας, απαιτείται μόνο να αντικατασταθούν οι προεπιλεγμένες ιδιότητες του Layer και του κειμένου.

Ναι, είναι τόσο εύκολο. ️

Για να το κάνετε αυτό, μεταβείτε στη σελίδα Get Started, επιλέξτε τα στρώματα και τα στυλ που θέλετε να προσαρμόσετε, να τα αλλάξετε σε μια ομάδα ή μία προς μία και να εφαρμόσετε. Τα υπόλοιπα θα γίνουν με τη βοήθεια της μαγείας Shared Styles που θα συγχρονίσει όλα τα υπάρχοντα σύμβολα με τα πιο πρόσφατα επιλεγμένα στυλ, συμπεριλαμβανομένων των συμβόλων κειμένου.

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

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

4. Εξαρτήματα

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

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

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

Συμβουλή: Χρησιμοποιώντας τα ίδια στοιχεία, είναι δυνατή η πραγματοποίηση αλλαγών σε πολλά σύμβολα ταυτόχρονα.

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

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

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

Σε αυτό το παράδειγμα, όλα τα 4 σύμβολα είναι ενσωματωμένα σε ένα μόνο στοιχείο, που αντιπροσωπεύει οπτικές ιδιότητες που μπορούν να προσαρμοστούν ή να αλλάξουν, όπως το σχήμα, το χρώμα ή το σκιασμένο κείμενο (στοιχείο λίστας), οι διαχωριστές (διαχωριστικό), ένα εικονίδιο Εικόνισμα).

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

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

Κατεβάστε το αρχείο επίδειξης

5. Περίληψη

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

Χρησιμοποιήστε περιπτώσεις

  • Επικύρωση ιδεών πιο γρήγορα. Έχοντας προ-σχεδιασμένα εξαρτήματα στην απογραφή σας, εξοικονομείτε πολύ χρόνο από τη μηδενική παραγωγή πρωτοτύπων τόσο για τους σχεδιαστές όσο και για τους προγραμματιστές, επαναλαμβάνοντας τις αποδεδειγμένες και υπάρχουσες λύσεις.
  • Δημιουργήστε έναν όμορφο οδηγό στυλ και χρησιμοποιήστε τον ως πηγή αλήθειας για το έργο σας, δημιουργήστε νέα θέματα και στυλ με βάση αυτό.
  • Δημιουργήστε κινούμενα σχέδια και ροές χρηστών χρησιμοποιώντας τις λειτουργίες του Sketch ή εξαγάγετε εξαρτήματα σε οποιαδήποτε άλλη εφαρμογή της επιλογής σας.
  • Μάθετε τις κατευθυντήριες γραμμές σχετικά με το Material.io και τις βέλτιστες πρακτικές εφαρμογών Sketch, με έναν διασκεδαστικό και διαδραστικό τρόπο, να γίνετε πιο εξειδικευμένοι σε αυτό το πεδίο σχεδιασμού.
  • Συγχρονίστε και μοιραστείτε τη βιβλιοθήκη με τους συμπαίκτες σας για να συνεργαστείτε και να είστε ενημερωμένοι με κάθε αλλαγή χρησιμοποιώντας πολλά πρόσθετα και εφαρμογές.

Κάνετε περισσότερα σε λιγότερο χρόνο, δημιουργήστε τολμηρές και όμορφες εφαρμογές.

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

Συχνές ερωτήσεις

Πώς να αποκτήσετε την πιο πρόσφατη έκδοση;
Στέλνουμε ειδοποιήσεις μέσω ηλεκτρονικού ταχυδρομείου μέσω του Gumroad και τιτίβισμα όταν κυκλοφορήσει η νέα έκδοση, επομένως σιγουρευτείτε ότι ακολουθείτε και αν έχετε ήδη αγοράσει το γύψο, μεταβείτε στη σελίδα Προϊόν και κάντε λήψη της τελευταίας έκδοσης.

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

Θέλετε να προτείνετε ένα χαρακτηριστικό ή ένα στοιχείο;
Μεγάλος! Διστάσετε να επικοινωνήσετε μαζί μας μέσω του hello@robowolf.net.

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

Πριν φύγεις:

  • Ακολουθήστε το Twitter και το Dribbble για περισσότερες ειδήσεις και ενημερώσεις.
  • Μάθετε περισσότερα σχετικά με το σχεδιασμό άρθρα και freebies: