Υπερφόρτωση ροής εργασίας κινητού σχεδίου στο Sketch

Το σκίτσο είναι αρκετά πιο διάσημο στο πεδίο εργαλείων σχεδιασμού την τρέχουσα ώρα. Πιστεύω πάντα ότι ένας από τους λόγους είναι το Sketch έχει μια μεγάλη βιβλιοθήκη plugin - κοινότητα. Σήμερα, θέλω να παρουσιάσω 2 plugins: Paddy και RenameIt που θα σας βοηθήσουν να μειώσετε το χρόνο που κάνετε σε επαναλαμβανόμενες ενέργειες και να εξομαλύνετε τη ροή εργασίας του Mobile Design. Ειδικά, αν χτίζετε ένα Σχεδιαστικό Σύστημα, νομίζω ότι θα είναι πολύ χρήσιμο.

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

Λόγω του περιορισμού του GIF. Λυπούμαστε για την ταχύτητα των εικόνων GIF σε αυτή τη θέση! Μπορείτε να δείτε το αρχικό άρθρο μου εδώ για να δείτε τα βίντεο με πλήρη ή χαμηλή ταχύτητα.

Η παλιά ροή εργασίας μου

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

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

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

Κουμπί

Νομίζω ότι είναι ένα από τα πιο δημοφιλή συστατικά γι 'αυτό θα το δοκιμάσουμε πρώτα. Αν χρησιμοποιούσατε προηγουμένως το κουμπί Dynamic, θα το εξοικειώσετε γρήγορα. Αυτή είναι η δομή ενός κουμπιού: Ιστορικό, κείμενο. Θα προσθέσουμε το [topPadding rightPadding bottomPadding leftPadding] στο όνομα του επιπέδου του φόντου. Στη συνέχεια, θα ενημερώσει αυτόματα τη βάση του παρασκηνίου σας σε μήκος κειμένου. Αν τα επάνω παραπετάσματα και το καπάκι είναι τα ίδια, το αριστερό μαξιλάρι, το δεξιό μαξιλάρι είναι το ίδιο, μπορείτε να χρησιμοποιήσετε στενογραφία όπως το CSS στενογραφία:

Θα ήταν πιο χρήσιμο αν δημιουργήσαμε το σύμβολο Button, όπως αυτό:

Κουμπί με εικονίδιο

Εφαρμόστε αυτόν τον μηχανισμό, μπορούμε να δημιουργήσουμε ένα κουμπί με το εικονίδιο δύο:

Παραλλαγές κουμπιών

Πιστεύω ότι είστε εξοικειωμένοι με: κουμπί-προεπιλογή, κουμπί-κίνδυνο, προειδοποίηση κουμπιού, ... Αυτό είναι όπου το μενού Μετονομασία plugin θα είναι ο τέλειος συνδυασμός με Paddy. Πήγα στην κατάσταση που δημιουργούν πολλά σύμβολα του κουμπιού, έπειτα κάνανε μερικά πειράματα, τότε βρήκα ότι πρέπει να μειώσω το μέγεθος του κουμπιού. Τώρα επιλέγουμε όλα τα Background φόντα> Fine και Replace Layer Name> Resize για να ταιριάζει με το περιεχόμενο. Αλήτης! όλα είναι καθαρά και πάλι.

Συστατικό

Τώρα, θα δημιουργήσουμε ένα δημοφιλές στοιχείο, ένα οριζόντιο στοιχείο:

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

Paddy Auto Ευθυγράμμιση Cheet Sheet

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

Χάρη στη λειτουργία αυτόματης ευθυγράμμισης του Paddy, μπορώ να οριζόντιος κέντρο Avatar και Πληροφορίες. Η απόσταση μεταξύ Avatar και Info είναι 16px, οπότε η ομάδα θα έχει το όνομα "[16h m]". Ο χώρος μεταξύ Τίτλου και Υπότιτλου είναι 2px και δύο στοιχεία ευθυγραμμίζονται αριστερά, οπότε προσθέτουμε "[2v l]" στην ομάδα πληροφοριών. Τέλος, η δομή της ομάδας θα πρέπει να είναι έτσι:

Πιο πολύπλοκα εξαρτήματα

Τώρα χτίζουμε ένα πιο σύνθετο συστατικό με το πλάτος ένθετο συστατικό, ένα τμήμα λίστας:

Ακολουθήστε το πνεύμα διάσπασης-οτιδήποτε, το σπάμε σε μικρότερα συστατικά:

Τώρα, θα δούμε τι συμβαίνει όταν προσθέτω ένα νέο στοιχείο:

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

Σελίδα / Οθόνη

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

Επί του σκάφους

Τώρα, θα δοκιμάσουμε αυτήν την οθόνη σε διάφορα μεγέθη οθόνης:

Αρχική οθόνη

Διαχωρίζουμε την οθόνη σε 3 κύρια τμήματα:

  • Ανάρτηση σελίδας: Τίτλος σελίδας και Avatar χρήστη
  • Οριζόντιο τμήμα.
  • Κάθετη ενότητα.

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

Ο τίτλος σελίδας και το Avatar είναι κέντρο κατακόρυφης ευθυγράμμισης.

Οριζόντιο τμήμα

  • Το διάστημα μεταξύ τίτλου και λίστας είναι 24px → [24v l].
  • Ο χώρος μεταξύ του στοιχείου στη λίστα είναι 16px → [16h t].

Κάθετη ενότητα

  • Το διάστημα μεταξύ τίτλου και λίστας είναι 24px → [24v l].
  • Ο χώρος μεταξύ του στοιχείου στη λίστα είναι 24px → [24v l].

Τέλος, έχουμε μια σελίδα που ρυθμίζει αυτόματα και ευθυγραμμίζει τα στοιχεία σας με τον τρόπο σας. Τώρα θα χρειαστώ λίγο τον κατάλογο:

  • Αλλαγή μεγέθους της μικρογραφίας στην οριζόντια ενότητα.
  • Προσθέστε περισσότερο στοιχείο στην κατακόρυφη ενότητα.

Ακούω! Όλα είναι καθαρά και πάλι!

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

συμπέρασμα

Χρησιμοποιούνται πρόσθετα

  • Αναποφλοίωτο ρύζι
  • Μετονομάστε το

4 πράγματα που πρέπει να θυμάστε

Χωρίστε τη σελίδα σας σε μικρότερα κομμάτια όπως στο βιβλίο Atomic.

Αυτόματο υπόβαθρο μεγέθους προσθέτοντας το [πάνω δεξιά κάτω κάτω αριστερά] στο όνομα του στρώματος φόντου.

Ευθυγραμμίστε τα πάντα σε μια ομάδα προσθέτοντας αυτές τις συμβολοσειρές στο όνομα γονικής ομάδας:

  • Κάθετο: [t] => πάνω, [m] => μεσαίο, [b] => κάτω
  • Οριζόντια: [l] => αριστερά, [c] => κέντρο, [r] => δεξιά

Διαστήστε τα πάντα σε μια ομάδα προσθέτοντας αυτές τις συμβολοσειρές στο όνομα γονικής ομάδας:

  • Κάθετη: [Xv], δηλαδή [16v] => ο χώρος μεταξύ των παιδιών στον κάθετο άξονα είναι 16px.
  • Οριζόντια: [Xh], δηλαδή, [24v] => ο χώρος μεταξύ των παιδιών στον οριζόντιο άξονα είναι 24px.

Ήμουν εμπνευσμένη από αυτό το άρθρο μεγαλοφυΐας που εφάρμοσα αυτόν τον παρόμοιο μηχανισμό στη δουλειά μου και κατανοώ κάποιες καλές πρακτικές όπως ανέφερα παραπάνω.

Ευχαριστώ για την ανάγνωση! Happy Sketching!

Αυτά τα άρθρα δημοσιεύονται αρχικά στην ιστοσελίδα μου εδώ. Θέλετε να μάθετε περισσότερα; Είμαι Duy Luong, σχεδιαστής προϊόντων και προγραμματιστής front-end. Δείτε το χαρτοφυλάκιό μου εδώ!