5 βασικοί τρόποι χρήσης των περιορισμών σχεδιασμού

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

Οι εργασίες των σχεδιαστών αυξήθηκαν εκθετικά με την εισαγωγή κινητών τηλεφώνων και tablet. Σχεδιάζετε για ατελείωτες προσαρμογές και περιβάλλοντα, ένα ατελείωτο έργο Sisyphean.

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

Μπορείτε να τα βρείτε εδώ, στο πλαίσιο των ιδιοτήτων δεξιά, όταν επιλέγετε ένα πλαίσιο:

Διαφορετικές επιλογές περιορισμού

Οι περιορισμοί είναι εκπληκτικοί, αλλά παίρνουν λίγο να συνηθίσουν. Στο Figma, σας αφήνουμε να καθορίσετε αντικείμενα αριστερά, δεξιά, πάνω, κάτω, κεντρικά, κλίμακα, αριστερά & δεξιά ή πάνω & κάτω. Μπορείτε να παίξετε με ένα απλό κουμπί σε ένα πλαίσιο για να δείτε πώς αντιδρούν τα αντικείμενα σε διαφορετικούς τύπους περιορισμών.

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

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

1) Καρφίτσωμα ενός κουμπιού στη γωνία

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

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

2) Η μαγεία των συστατικών + περιορισμούς

Μπορείτε να εργαστείτε με κάποια μαγεία σχεδιασμού διασκέδασης χρησιμοποιώντας τη λειτουργία των στοιχείων του Figma σε σχέση με τα δίκτυα. Τα στοιχεία (τα οποία άλλες εφαρμογές καλούν σε σύμβολα) σάς επιτρέπουν να μετατρέπετε τμήματα του σχεδίου σας σε επαναλαμβανόμενες, αντικατοπτρισμένες περιπτώσεις. Όταν κάνετε αλλαγές στο πρωτότυπο, οι αλλαγές αντικατοπτρίζονται οπουδήποτε αλλού χρησιμοποιείτε αυτό το στοιχείο. (Μπορείτε να διαβάσετε περισσότερα για τα στοιχεία εδώ.)

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

3) Η μαγεία των περιορισμών + πλέγματα

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

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

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

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

4) Επιτραπέζια κελιά

Μπορείτε να χρησιμοποιήσετε περιορισμούς για να κάνετε επαναχρησιμοποιήσιμα σχέδια κυψελοειδών κυττάρων που είναι ευέλικτα. Οι σχεδιαστές συχνά χρειάζονται κυψέλες πίνακα για να παρουσιάσουν καταλόγους ανθρώπων ή πληροφοριών και προσθέτοντας περιορισμούς στο βασικό κελί διευκολύνει την προσαρμογή. Για παράδειγμα, ομαδοποιήθηκα ένα κείμενο και ένα avatar μαζί (πατώντας το πλήκτρο ελέγχου g) και περιορίζοντάς το στο κέντρο αριστερά του πλαισίου. Έπειτα ομαδοποιήθηκα ένα κείμενο και ένα ορθογώνιο με στρογγυλεμένες γωνίες μαζί σε ένα κουμπί και το περιόρισε στο κέντρο της δεξιάς πλευράς του πλαισίου.

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

5) Εικόνες διασκέδασης

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

Μεγάλες ευχαριστίες στους Chris Hamamoto, Johan Prag και Rasmus Andersson για τη βοήθεια και τις εικονογραφήσεις τους για αυτή τη θέση.