Κατεβάστε το χαρακτηριστικό αλλαγής μεγέθους ομάδας στο σκίτσο

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

Ενημέρωση: το νέο μου άρθρο σχετικά με αυτό το θέμα:

Προετοιμασία ενός σχεδιασμού ιδεών για την εφαρμογή Sketch για να παρουσιάσω τις ιδέες μου. Χρησιμοποίησα την beta έκδοση του Sketch (3.9) για να δοκιμάσω τα νέα χαρακτηριστικά και επίσης να δοκιμάσω τα plugins μου για να δούμε αν δουλεύουν ακόμα.

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

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

Οι βασικές αρχές

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

Αυτή τη στιγμή έχουμε τέσσερις επιλογές αλλαγής μεγέθους

Αυτή η λειτουργία μπορεί να χρησιμοποιηθεί και στις ομάδες σχήματος! Yaaay!

Παραδείγματα και τεχνικές πραγματικής ζωής

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

Θα πρέπει επίσης να αναφέρω ότι υποστηρίζεται η ομαδοποίηση, μπορείτε να φωλιάσετε όσο θέλετε. Αυτή τη στιγμή έχει ένα μειονέκτημα: όταν αλλάζετε το μέγεθος μιας ομάδας, τα στρώματα στις ομάδες των απογόνων μπορεί να έχουν κυμαινόμενους αριθμούς στη θέση τους, παρόλο που τα παιδιά δεν θα παίρνουν πλωτούς αριθμούς - μόνο αν η ρύθμιση "pixel-fit when aligning layers" είναι ενεργοποιημένη, διαφορετικά και στις δύο περιπτώσεις μπορεί να έχετε πλωτούς αριθμούς. Νομίζω ότι θα ήταν καλό να έχουμε μια ρύθμιση γι 'αυτό στο μέλλον.

Ας δούμε τα παραδείγματα για να μάθετε περισσότερες λεπτομέρειες:

1. Συστατικά UI συνομιλίας

1.1. Η προβολή μηνυμάτων κειμένου

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

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

Μια συμβουλή για την αλλαγή του ύψους

1.2. Η προβολή μηνυμάτων φωνής

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

1.3. Η προβολή μηνυμάτων φωτογραφιών

1.4. Η προβολή εισόδου

2. Σκίτσο επιλογής χρωμάτων

Το πλαίσιο και το επίπεδο φόντου

Το στρώμα φόντου του πίνακα είναι μια ομάδα μορφών που χρησιμοποιεί χαρακτηριστικά αλλαγής μεγέθους ομάδας. Πρέπει να χρησιμοποιήσουμε λειτουργίες boolean για να την ανταποκριθούμε. Εάν απλώς ενώσετε ένα τρίγωνο και ένα στρογγυλεμένο ορθογώνιο, δεν λειτουργεί λόγω του ίδιου λόγου στο παράδειγμα "3 άκρων" της προβολής μηνυμάτων κειμένου.

3. Σχεδιάστε τη διεπαφή χρήστη

Η κύρια δομή

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

συμπέρασμα

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