Αυτόματη διάταξη: Εισαγωγή στοίβων - Flexbox για σκίτσο

Οι στοίβες αλλάζουν όλα όσα γνωρίζατε σχετικά με το διάγραμμα απόκρισης στο Sketch

Ενημέρωση: Εξαγωγή απάντησης HTML & CSS από Sketch με το Anima ToolKit.
Δημιουργία ευαίσθητων και αλληλεπιδραστικών πρωτοτύπων υψηλής πιστότητας, όλων των εσωτερικών σκίτσων

Ακριβώς όπως το Flex Box στο CSS, το UIStackView στο iOS και το FlexboxLayout στο Android - το Auto-Layout's με τη νέα του Stacks είναι για άλλη μια φορά η αλλαγή του παιχνιδιού.

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

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

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

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

Τι είναι μια στοίβα;

Μια στοίβα είναι ένας ειδικός τύπος ομάδας που ορίζει τη διάταξη των παιδικών επιπέδων.

Ένα εικονίδιο Stack Group έχει ένα ειδικό μπλε χρώμα και ένα δείκτη της κατεύθυνσής του.Για να στοιβάξετε τα επίπεδα - επιλέξτε τα και κάντε κλικ στο κουμπί Stack στο πλαίσιο Auto-Layout.
Συμβουλή:
- Η χρήση Stacks οδηγεί σε συνέπεια.
- Η συνέπεια οδηγεί στη σαφήνεια.
- Η χρήση Stacks οδηγεί σε σαφήνεια.

Μια στοίβα έχει 3 ιδιότητες:

  • Κατεύθυνση: Καθορίζει αν η στοίβαξη των παιδιών Τα επίπεδα είναι οριζόντια ή κάθετα.
Κατεύθυνση
  • Ευθυγράμμιση: Μπορεί να είναι Κορυφαία / Κέντρο / Κάτω / Διάσπαρτα
Ευθυγραμμία
  • Διάκενο: Καθορίζει την απόσταση μεταξύ κάθε επιπέδου παιδιού.
Μπορούν να τοποθετηθούν στοίβες!
Φορτωμένες στοίβες

Επίλυση αυτού του παζλ!

9 από τους 10 σχεδιαστές έχουν αυτό το λάθος την πρώτη φορά!
Πόσες στοίβες υπάρχουν σε αυτήν την εικόνα:
Μετακινηθείτε προς τα κάτω για να αποκαλύψετε την απάντηση

Η σωστή απάντηση είναι 3:

Το εικονίδιο στοίβας έχει ειδικό μπλε χρώμα και ένδειξη της κατεύθυνσής του.
  1. Μικρή κόκκινη οριζόντια στοίβα με 2 εσωτερικά στοιχεία: αστέρια και ανασκόπηση.
  2. Μεσαίου μεγέθους μπλε κατακόρυφη στοίβα με 4 εσωτερικά στοιχεία: Όνομα εφαρμογής, συγγραφέα, κατηγορία και ομάδα στοίβων 1.
  3. Η μεγαλύτερη πράσινη οριζόντια στοίβα με 2 εσωτερικά στοιχεία: Εικονίδιο εφαρμογής και ομάδα ομάδας 2.

Μερικά ενδιαφέροντα γεγονότα σχετικά με τους Stacks:

  • Οι στοίβες είναι ένας πολύ καλός τρόπος για τον καθορισμό των περιορισμών διάταξης μεταξύ των αδελφών Layers.
  • Η προσθήκη ή η αφαίρεση των επιπέδων μέσα σε μια στοίβα επαναπροσδιορίζει τα παιδικά της επίπεδα.
  • Το Layer Text μπορεί να ωθήσει τα αδέλφια Layers όταν επεκταθεί. Κατεβάστε
  • Η μεταφορά και ο ρίψη είναι ένας εύκολος τρόπος για την αναδιάταξη των επιπέδων παιδιών.

Εισαγωγή βίντεο μάθημα από Pablo Stanley

Flex πλέγμα χρησιμοποιώντας στοίβα

️ Ο Alan Roy, ένα παραγωγικό μέλος του beta προγράμματος μας, δημιούργησε ένα σύστημα Flex Grid χρησιμοποιώντας Stack.

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

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

Αποκτήστε το πρόσθετο Anima (το Auto-Layout είναι τώρα το Anima Layout)

Οδηγός & Τεκμηρίωση

Δημιουργία ευαίσθητων και αλληλεπιδραστικών πρωτοτύπων υψηλής πιστότητας, όλων των εσωτερικών σκίτσων

Από τους φίλους σας στο Anima App

Για συζήτηση μπορείτε να συμμετάσχετε στο Facebook Group μας