Σχέδιο 39 Αλλαγή μεγέθους: Εξαφάνιση φύλλου

Πώς λειτουργεί το Σύμβολο & Αλλαγή ομάδας, λεπτομερώς

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

... ορισμένοι από αυτούς τους κανόνες αλλαγής μεγέθους περιέχουν κρυφό λειτουργικό σύστημα.

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

Τέντωμα

  • Αυτή είναι η προεπιλεγμένη επιλογή και είναι η συνάρτηση αλλαγής μεγέθους που όλοι έχουμε συνηθίσει.
  • Σκεφτείτε το ως αλλαγή μεγέθους όλων των επιπέδων με βάση τα ποσοστά. Εάν ένα στρώμα καταλαμβάνει το 50% του πλάτους της ομάδας, θα συνεχίσει να - σε οποιοδήποτε μέγεθος.

Κορδόνι προς γωνία

  • Τα επίπεδα εντός της ομάδας παραμένουν στο ίδιο μέγεθος.
  • Κάθε στρώμα διατηρεί την απόσταση στην πλησιέστερη γωνία του στην ομάδα.
  • Όταν είναι εξίσου κοντά σε 2 γωνίες, το Pin to Corner αλλάζει για να κρατήσει το κέντρο στο κέντρο. Το στρώμα θα διατηρήσει την ίδια απόσταση από εκείνη την κοινή άκρη μεταξύ αυτών των γωνιών.

Αλλαγή μεγέθους αντικειμένου

  • Το μέγεθος αλλαγών στρώματος διατηρεί τις ίδιες αποστάσεις από κάθε άκρη της ομάδας.
  • ΑΛΛΑ, όταν ένα στρώμα αγγίζει 3 από τις 4 άκρες μιας ομάδας, το Resize Object αλλάζει τη συμπεριφορά του - επιτρέποντας την απόσταση από την 4η άκρη να είναι εύκαμπτη και το στρώμα να παραμένει το ίδιο μέγεθος κατά μήκος αυτού του άξονα. Αυτό συμβαίνει μόνο όταν η απόσταση από την 4η άκρη είναι μικρότερη από το ήμισυ της διάστασης της ομάδας προς αυτή την κατεύθυνση (ευχαριστώ για το γεγονός αυτό, ο Raphael Schaad). Η συμπεριφορά είναι ιδιαίτερα χρήσιμη για τις γραμμές τίτλου, όπως φαίνεται σε αυτή τη σύγκριση:

Πετάξτε στη θέση

  • Δεν υπάρχει ομοιότητα με το Float στο CSS
  • Τα επίπεδα σε μια ομάδα παραμένουν στο ίδιο μέγεθος
  • Τα επίπεδα επανατοποθετούνται βάσει ποσοστών. Για παράδειγμα, ένα στρώμα μπορεί να έχει θέση x 25% εντός αυτής της ομάδας και θα διατηρήσει αυτή τη σχετική θέση ανεξάρτητα από το πλάτος της ομάδας.
  • Τα επίπεδα τοποθετημένα κατά μήκος των άκρων μιας ομάδας θα παραμείνουν εκεί
  • Το Float in Place είναι πιο περίπλοκο κάτω από την κουκούλα από την απλή ανάθεση ποσοστιαίων συντεταγμένων στην πάνω αριστερή γωνία ή το κεντρικό σημείο κάθε στρώματος, όπως αποδεικνύεται από την ικανότητα τοποθέτησης άκρων. Εκτός από τα στρώματα που είναι τοποθετημένα στο 0% (άκρο), 100% (άλλη άκρη) και 50% (κέντρο), παρατηρήσαμε ότι μπορεί να εμφανιστεί μια μικρή μετατόπιση στη θέση ενός στρώματος μετά την αλλαγή μεγέθους της ομάδας. Με άλλα λόγια, το Float in Place επανατοποθετεί τα επίπεδα σε περίπου το σωστό μέρος, αλλά μπορεί να είναι εκτός ενός ή δύο ποσοστών. Όταν η ακρίβεια είναι υψίστης σημασίας, κάντε διπλό έλεγχο Πλοήγηση στη θέση μετά την αλλαγή μεγέθους μιας ομάδας.

ΣΥΜΒΟΥΛΕΣ

  • Προτείνω ιδιαίτερα να ενεργοποιήσετε την εφαρμογή "Pixel fit when resizing layers" στις προτιμήσεις του Sketch. Ενίοτε απενεργοποιώ αυτό όταν εργάζομαι με στοιχεία από ένα κιτ UI (το οποίο συχνά χρησιμοποιεί δεκαδικά ψηφία για μεγέθη ή θέσεις στρώματος, για να επαναλάβει τέλεια το αρχικό στοιχείο).
  • Τόσο το Pin to Corner όσο και το Float in Place θα διατηρήσουν ένα κεντρικό επίπεδο. Εάν εστιάζετε μόνο σε έναν άξονα, η διαφορά είναι ότι το Pin to Corner θα διατηρήσει την ίδια απόσταση από την πλησιέστερη ακμή της ομάδας, ενώ το Float in Place θα αλλάξει αυτή την απόσταση επειδή το στρώμα είναι τοποθετημένο χρησιμοποιώντας ποσοστά για τις συντεταγμένες. Αν κάνετε κεντράρισμα κατά μήκος και των δύο αξόνων, χρησιμοποιήστε το Float in Place για πιο αξιόπιστα αποτελέσματα.
  • Λάβετε υπόψη ότι οι κανόνες αλλαγής μεγέθους θεωρούνται ότι αποτελούν μέρος των βασικών χαρακτηριστικών ενός επιπέδου, και όχι των χαρακτηριστικών στυλ του και επομένως εξαιρούνται από τα κοινά στυλ.
  • Οι συντομεύσεις πληκτρολογίου ^ 1, ^ 2, ^ 3 και ^ 4 θα εκχωρήσουν κάθε κανόνα αλλαγής μεγέθους στο επιλεγμένο σας επίπεδο.
  • Στην τρέχουσα μορφή τους, δεν προτείνω να χρησιμοποιείτε αυτούς τους κανόνες αλλαγής μεγέθους για στρώματα που εκτείνονται έξω από μια μάσκα ομάδα. Αυτή η λειτουργικότητα θα ήταν εκπληκτική όταν εργαζόταν με μάσκες και τα στρώματα μέσα σε αυτά, οπότε ας ελπίσουμε ότι θα προστεθεί σε μια μελλοντική ενημέρωση.

Εγγραφείτε στο ενημερωτικό δελτίο μου για να είστε οι πρώτοι που γνωρίζω πότε δημοσιεύω νέα άρθρα και πόρους σχεδίου.
 
Εάν σας άρεσε αυτό το άρθρο, θα αγαπήσετε το Master Sketch - τα online μαθήματα κατάρτισης για τους επαγγελματίες που μαθαίνουν το Sketch. Θα μάθετε τόνους κόλπων και πρακτικές ροές εργασίας, σχεδιάζοντας έργα πραγματικού UI / UX και εικονίδια εφαρμογής.