Ανταπόκριση του πλέγματος Flex στο σκίτσο χρησιμοποιώντας τις ομάδες AutoLayout και Stack

Βελτίωση συστημάτων σχεδιασμού για τη δομή, τη δομοστοιχία και την κλίμακα

Εργαλεία όπως το FlexBox στο CSS, το UIStackView στο iOS και το FlexboxLayout στο Android έχουν δώσει από καιρό σε προγραμματιστές τις απαραίτητες ροές εργασίας για να χειριστούν τα πλήθη προσαρμοστικών και ανταποκρινόμενων απόψεων που υπάρχουν σήμερα.

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

Με τη νέα δυνατότητα Stacks που είναι ενσωματωμένη στην πιο πρόσφατη προσθήκη Auto-Layout, έχουμε τώρα μια ροή εργασιών που φιλοξενεί καλύτερα την έξοδο του UI και μας επιτρέπει να επιτύχουμε μεγαλύτερη συνέπεια και συντηρησιμότητα σε όλα τα συστήματα σχεδιασμού μας. (Αποποίηση ευθυνών - Αυτή η ιδέα είναι ακόμα σε πρώιμο στάδιο. Όχι κάθε τύπος διάταξης θα επωφεληθεί από αυτό το σύστημα, ώστε να αναμίξετε και να ταιριάξετε όσο κρίνετε κατάλληλο).

Το demo

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

Ενώ βρίσκεστε ακόμα σε πρώιμα εξερευνητικά στάδια, στο πρότυπο ψήνεται η ακόλουθη λειτουργικότητα:

  • Desktop σε κινητό με μερικά κλικ.
  • Οι πίνακες τέχνης μπορούν να μεταβληθούν και η ευθυγράμμιση / διανομή του πλέγματος δεν σπάσει
  • Πλέγμα δομημένο από:
  • Σώμα
     - Κεφαλίδα
     - Κύριο
     - - τμήματα
     - - - ομάδες σειρών (έχει αδελφό στρώμα μεγέθους κιβωτίου)
     - - - - σειρές
     - - - - - στήλες
     - - - - - - ενότητες
     - - - - - - - εξαρτήματα (ένθετα σύμβολα με εσωτερική λογική)
     - Υποσέλιδο
  • Χρησιμοποιήστε ένθετα σύμβολα, που καθορίζονται από ένα συνδυασμό ιδιοτήτων αλλαγής μεγέθους σκίτσου, αποκοπής αυτόματης αντιστοίχισης και ομάδες στοίβων, για να δημιουργήσετε ένα αρθρωτό σύστημα μεταβλητών στοιχείων.
  • Η διάταξη προσαρμόζεται στο πλάτος τέχνης (το περιεχόμενο έχει μέγιστο πλάτος 1200px και το κινητό έχει ενσωματωμένα υδρορροές).
  • Ποικιλία διανομών στηλών και εύκολη κατάρρευση / τροποποίηση υδρορροών.
  • και
    αυξάνονται και συρρικνώνονται ανεξάρτητα από το
    .
  • Το ύψος αλλάζει στο
    και σπρώχνει το
    κάτω στον πίνακα τέχνης, διατηρώντας παράλληλα τα περιθώρια και τα παρεμβύσματα όπως μια ιστοσελίδα.
  • Το ύψος των <σειρών> μπορεί να ρυθμιστεί ώστε να επηρεάσει το ύψος των υποστυλωμάτων
  • Η ευθυγράμμιση των στηλών (κορυφή, μέση, κάτω, τέντωμα) μπορεί να οριστεί σε επίπεδο γραμμής.
  • Η προσθήκη μιας νέας στήλης (ή η διαγραφή μιας) από τη σειρά ρυθμίζει αυτόματα το πλάτος των κολπικών αδελφών ώστε να ταιριάζει ανάλογα.
  • Η προσθήκη μιας νέας υπομονάδας παιδιού μέσα στη στήλη θα κάνει την στήλη να αναπτύσσεται κάθετα (οι ενότητες περιέχουν οποιοδήποτε αριθμό τύπων περιεχομένου, όπως εικόνες, κείμενο, λίστες, πίνακες, ομάδες και σύμβολα)
  • Η ευθυγράμμιση των μονάδων (αριστερά, κεντρικά, δεξιά, τέντωμα) μπορεί να οριστεί σε επίπεδο στήλης.
  • σύμβολο ανταλλαγής συμβόλων για την αντικατάσταση περιεχομένου ή την αποτύπωση νέων επιπέδων στο υπάρχον στοιχείο.
  • Ο πίνακας γραφικών της επιφάνειας εργασίας έχει ρυθμιστεί ώστε να χρησιμοποιεί ένα πλέγμα αναφοράς 8pt.

Το αρχείο σκίτσων

Εδώ είναι. Μη διστάσετε να την βελτιώσετε με οποιονδήποτε τρόπο και να μου ενημερώσετε.
* ΣΗΜΑΝΤΙΚΟ * - Το αρχείο ΔΕΝ θα λειτουργήσει αν δεν έχετε την τελευταία έκδοση του Auto Layout με υποστήριξη Stacks (.0.2.0 από αυτό το γράψιμο).

https://cl.ly/2v2I373P2E1f

Κάποιες τελικές σκέψεις

Ελπίζω ότι αυτό ήταν χρήσιμο σε ορισμένους ανθρώπους. Ξέρω ότι θα διερευνήσω τις δυνατότητες του Autolayout και των Stacks βαθύτερα. Από αυτή την έκδοση, έχω παρατηρήσει μερικές μικρές ιδιορρυθμίες με τη στρογγυλοποίηση μαθηματικών, αλλά ελπίζω ότι αυτές θα διευθετηθούν εγκαίρως. Μεταξύ ορισμένων αιτημάτων που έχω προτείνει στους devs, νομίζω ότι αυτά θα μπορούσαν να είναι πολύτιμα.

  • Η δυνατότητα προσθήκης φόντου σε μια στοιβαζόμενη ομάδα (γονική σειρά των στηλών) χωρίς να επηρεάζεται η λογική της στοίβας. Σε HTML / CSS, αυτό θα γίνει απλά στο επίπεδο ή "div", αλλά το Sketch δεν επιτρέπει έναν τρόπο να το κάνει από τώρα.
    Υπάρχει μια προσέγγιση για να γίνει αυτό τώρα που περιλαμβάνει την ομαδοποίηση ενός στρώματος φόντου με μια στοιβαζόμενη ομάδα και την προσάρτηση του bg στο πάνω / αριστερό / 100% πλάτος & ύψος, ενώ ενώ το φόντο μεγαλώνει για να φιλοξενήσει το περιεχόμενο, δεν συρρικνώνεται όταν το περιεχόμενο καταργείται. Πιστεύω ότι η συρρίκνωση είναι ήδη στον κατάλογο TO-DO της ομάδας.
  • Η εισαγωγή των σημείων διακοπής στον πίνακα τέχνης και το σύμβολο ανταλλαγής βασισμένο στον πίνακα τέχνης (εναλλαγή ενός ποντικιού 4 τεμαχίων με εικονίδιο χάμπουργκερ όταν πίνακας artboard <400px, ή ακόμα καλύτερα, χρησιμοποιώντας μια προσέγγιση ερωτημάτων για τα εμπορευματοκιβώτια.
  • Με τα εν λόγω σημεία διακοπής, η δυνατότητα εναλλαγής μεταξύ οριζόντιων έως κάθετων στοιβαγμένων ομάδων, έτσι ώστε οι στήλες να στοιβάζονται το ένα πάνω στο άλλο όταν δεν υπάρχει επαρκής χώρος. Και για τις κολώνες να τυλίγονται αν είναι καθορισμένες.
  • Η δυνατότητα καθορισμού ποσοστιαίου πλάτους ανά στήλη.
    (Ενημέρωση - Μια έκδοση αυτής της ιδέας έχει μόλις εφαρμοστεί στο plugin χρησιμοποιώντας τη λειτουργία Βάρη)
  • Παρόλο που αυτό δεν θα έπρεπε απαραίτητα να πέσει στην ομάδα του Anima, το Sketch θα πρέπει επίσης να εισαγάγει υποστήριξη για τις μεταβλητές, ειδικά τώρα με ιδιότητες όπως απόσταση, ελάχιστο και μέγιστο ύψος και άλλες τιμές που πρέπει να διατηρούνται συνεπείς σε διάφορα επίπεδα. Αυτές οι μεταβλητές θα μπορούσαν να χρησιμοποιηθούν περαιτέρω για να χαρτογραφηθούν τα χρώματα και να βοηθήσουν στη διαδικασία μεταβίβασης Sass.

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

Εάν έχετε οποιεσδήποτε ερωτήσεις ή (ωραία!) Σχόλια, μη διστάσετε να δημοσιεύσετε παρακάτω ή να απευθυνθείτε στο Twitter.