Καλύτερα συστήματα πλέγματος στα εργαλεία σχεδίασης του UI.

Οι σχεδιαστές πρέπει να είναι σε θέση να διερευνήσουν τις συνέπειες των δικτύων οπτικά - όχι μόνο στον κώδικα.

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

Τι συμβαίνει με τα πλέγματα στα εργαλεία σχεδιασμού του UI;

Οι προγραμματιστές λογισμικού διαθέτουν εργαλεία που βοηθούν στη διαχείριση της πολυπλοκότητας του layout της οθόνης: συστήματα περιορισμού όπως το AutoLayout του iOS και το ConstraintLayout, το Flexbox και ακόμη και τα ειδικά πλαίσια του δικτύου όπως το επερχόμενο CSS Grid. Ωστόσο, οι αποφάσεις σχεδίου πρέπει να λαμβάνονται από σχεδιαστές και να μην μεταβιβάζονται σε προγραμματιστές. Είναι κρίσιμες για τη μορφή και τη λειτουργία μιας διασύνδεσης. Οι σχεδιαστές πρέπει να είναι σε θέση να διερευνήσουν οπτικά τις συνέπειες των αποφάσεων διάταξης του πλέγματος, όχι μόνο στον κώδικα.

Το 75% των σχεδιαστών διεπαφών χρησιμοποιεί κυρίως Photoshop, Illustrator ή Sketch. Κάθε ένα από αυτά τα εργαλεία δημιουργήθηκε γύρω από τη μεταφορά της σελίδας, όχι στην οθόνη. Δεν είναι εκπληκτικό ότι οι μέθοδοι εργασίας με πλέγματα σε αυτά τα εργαλεία βασίζονται επίσης στην εκτύπωση της εκτύπωσης. Για τους σχεδιαστές ψηφιακών προϊόντων, αυτό οδηγεί σε μερικά μεγάλα σημεία πόνου στην καθημερινή χρήση.

Αποκριτικότητα

Για να δημιουργήσετε ένα πλέγμα, συνήθως ορίζετε παραμέτρους όπως το συνολικό πλάτος, τον αριθμό και το πλάτος των στηλών, των υδρορροών και των περιθωρίων:

Sketch και το πλέγμα του πλέγματος του Photoshop

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

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

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

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

Αυτή είναι μια αρκετά κακή προσομοίωση των μέσων εκτύπωσης, όμως, καθώς αντιπροσωπεύει μόνο τρεις πιθανές αναλύσεις συσκευών. (Στο παραπάνω παράδειγμα, είναι το iPhone 7, το iPad και το 13 "Macbook Pro.) Είναι οι αποφάσεις του δικτύου ακόμα ακούσει σε ένα Google Pixel ή ένα iMac 5K;

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

Διάδοση αλλαγών

Στα επιρροή συστήματα πλέγματος στον γραφικό σχεδιασμό, ο Josef Müller-Brockmann ζητάει να οριστούν πλέγματα στην αρχή ενός έργου, προτού γίνει οποιαδήποτε διάταξη σελίδας. Στην πραγματικότητα, ο Müller-Brockmann προτείνει να γνωρίζουμε όλες τις μεταβλητές ενός έργου πριν καθορίσουμε το δίκτυο:

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

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

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

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

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

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

Πειραματισμός

Κατά την κατασκευή ενός νέου πλέγματος, η Müller-Brockmann θα έκανε μικρά σκίτσα χειρός με πιθανές διαμορφώσεις. Η τεχνική δυσκολία της διαδικασίας ήταν φανερή ακόμα και σε αυτόν:

"Κατά τη σχεδίαση ενός πλέγματος, πρέπει να ληφθεί μέριμνα ώστε το σκίτσο να αντιστοιχεί όσο το δυνατόν περισσότερο στις αναλογίες του τελικού εντύπου. [...] Μόνο με αυτόν τον τρόπο είναι δυνατή η σταδιακή απόκτηση της ικανότητας παραγωγής, ακόμη και σε πολύ μικρά σκίτσα, τυπογραφικών μοτίβων τα οποία είναι ρεαλιστικά, δηλ. Τα οποία μπορούν να μεταφερθούν στην τελική μορφή χωρίς δυσκολία ".
 - Josef Müller-Brockmann, Grid Systems Graphic Design, σελ. 94, 49
Μερικά από τα σχέδια του Joseph Müller-Brockmann για το χέρι από το Grid Systems in Graphic Design.

Φυσικά, αυτός ήταν ο μόνος τρόπος για τον Müller-Brockmann να πειραματιστεί φτηνά με πιθανές διατάξεις πλέγματος: δεν είχε πρόσβαση στον υπολογιστή το 1981. Είναι όμως αρκετά περίεργο ότι σχεδόν 40 χρόνια αργότερα, τα εργαλεία σχεδιασμού με υπολογιστή δεν διευκολύνουν αυτό το είδος πειραματισμού.

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

Ώρα να σπάσει η αριθμομηχανή. Αποκτήστε το πλάτος του χώρου που περιέχει, αφαιρέστε τον αριθμό των υδρορροών πολλαπλασιασμένο με το πλάτος τους, στη συνέχεια διαιρέστε το υπόλοιπο με τον αριθμό των στοιχείων. Σχεδιάστε ένα στοιχείο με το αποτέλεσμα, αντιγράψτε το για κάθε στήλη και στη συνέχεια διανείμετε ομοιόμορφα όλα αυτά:

Αυτό είναι αρκετά απλό, αλλά με το χέρι οι υπολογισμοί όπως αυτό δεν συμβαδίζουν με την ταχύτητα της σκέψης. Όταν αρχίζετε να ρωτάτε ερωτήματα όπως "θα είναι πολύ μικρό εάν βάλω 8 φωτογραφίες σε αυτή τη σειρά αντί για 6;", κάνοντας τα μαθηματικά κάθε φορά είναι κουραστικό και αποθαρρύνει τους γρήγορους πειραματισμούς.

Ποια καλύτερα εργαλεία πλέγματος μοιάζουν;

Όλα αυτά τα σημεία πόνου οδηγούν σε ένα συμπέρασμα: οι σχεδιαστές UI / UX χρειάζονται καλύτερους τρόπους για να δουλέψουν με πλέγματα κατά τη διάρκεια του οπτικού σχεδιασμού. Ο Kevin Lynagh και εμείς εργαζόμαστε σε μερικές λύσεις στο εργαλείο σχεδιασμού του UI, Subform. Ας δούμε τις αρχές (και παραδείγματα) που έχουμε καταλήξει μέχρι τώρα. (Όλα αυτά τα demos καταγράφηκαν απευθείας από το Subform.)

Τα δίκτυα πρέπει να ανταποκρίνονται από τη φύση.

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

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

Οι τεντωμένες στήλες μπορούν να αναμιχθούν με σταθερές στήλες, υδρορροές και περιθώρια. Οι υδρορροές στο παραπάνω παράδειγμα έχουν οριστεί σε 12px, έτσι το πλάτος τους παραμένει σταθερό καθώς ο πίνακας art resizes.

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

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

Ξεχάστε τους οδηγούς και τα στοιχεία snapping θα πρέπει να έχουν μια επίσημη σχέση με το δίκτυο.

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

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

Για παράδειγμα, θα πρέπει να είστε σε θέση να τοποθετήσετε ένα στοιχείο χρησιμοποιώντας έναν κανόνα όπως "ξεκινήστε στη στήλη 2, στη συνέχεια επεκτείνετε 4 στήλες". Αυτό μπορεί να γίνει έμμεσα μέσω άμεσης χειραγώγησης ή ρητά με τη χρήση στενογραφίας όπως 2 / span 4. Τώρα όταν το πλέγμα αλλάζει, τα στοιχεία θα αλλάξουν αυτόματα και θα διατηρήσουν τις ευθυγραμμίσεις τους:

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

Τα πλέγματα πρέπει να επιτρέπουν γρήγορο πειραματισμό.

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

Έχοντας το εργαλείο σχεδίασης, οι υπολογισμοί αυτοί με τη σειρά τους - αντί να κάνουν με προσοχή τα μαθηματικά με το χέρι - κάνουν τον πειραματισμό γρήγορο και οπτικό. Ερωτήσεις όπως "πόσες φωτογραφίες θα πρέπει να εμφανίζονται σε μια σειρά στο smartphone;" μπορούν να δοκιμαστούν εύκολα μέσα σε λίγα δευτερόλεπτα, παρά μετά από πολλά επιμελή, κουραστικά pixel που πιέζουν:

Δεν πρέπει να παραβλέπονται τα δισδιάστατα πλέγματα.

Τα πλέγματα της στήλης καλύπτουν πολλές περιπτώσεις χρήσης, αλλά πολλές διατάξεις απαιτούν τόσο στήλες όσο και σειρές, παρόμοιες με το σπονδυλωτό πλέγμα της Müller-Brockmann. Θα πρέπει να μπορείτε να περιγράψετε στοιχεία και στις δύο αυτές διαστάσεις: "Οριζόντια, αυτό το στοιχείο θα πρέπει να ξεκινά στη στήλη 3 και να καλύπτει 2 στήλες. Κάθετα, θα πρέπει να ξεκινάει από τη σειρά 1 και να τελειώνει στη σειρά 2. "

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

Οτιδήποτε πρέπει να μπορεί να περιέχει ένα πλέγμα.

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

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

Η δυνατότητα να χρησιμοποιείτε πολλαπλά πλέγματα και να τα φωλιάζετε ανοίγει επίσης μια πολύ δημιουργική εκφραστικότητα για τον σχεδιαστή. (Ο Karl Gerstner έκανε κάποια αρκετά δροσερή δουλειά με πολλαπλά επικαλυμμένα πλέγματα για το Capital Magazine το 1962.)

συμπέρασμα

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

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

Και ίσως είναι κάτι που ο Joseph Müller-Brockmann θα μπορούσε να αναγνωρίσει: εργαλεία σχεδιασμού για την "σαφώς κατανοητή, αντικειμενική, λειτουργική και αισθητική ποιότητα της μαθηματικής σκέψης".

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