Στα παρασκήνια :)

Στοιχεία προσαρμοστικού κειμένου στο σκίτσο

Γλυκός!

Ενημέρωση: Η ομάδα Sketch ανακοίνωσε χθες ότι μια από τις πιο απαιτούμενες λειτουργίες της είναι διαθέσιμη στη beta έκδοση της εφαρμογής.
Το αποκαλούν "Smart Layout" και μοιάζει με A M Z Z I N G.
Αυτό που σημαίνει επίσης είναι ότι η μέθοδος σε αυτή τη θέση θα καταστεί άνευ αντικειμένου (τέλος!).

Μερικά παραδείγματα από τον ιστό για ό, τι είναι δυνατό:
twitter.com/mds/status/1167145339457069062
twitter.com/svorklab/status/1167350673857482752
twitter.com/gaddafirusli/status/1167157688867835904

Πηγαίνετε και ελέγξτε το> www.sketch.com/beta

Αυτή η ανάρτηση έγινε αρχικά σκέψη στις 19 Αυγούστου 2016, αλλά ποτέ δεν είδα το φως της ημέρας (λόγω της τεμπελιάς / αναβλητικότητας / το ονομάζεις). Με την πάροδο του χρόνου, παρατήρησα ότι οι άνθρωποι μιλούν (και μάλιστα γράφουν Μεσαίες θέσεις) για τη συμπεριφορά που θα μιλήσω. Έτσι αποφάσισα να τελειώσω την επεξεργασία του σχεδίου και να το δημοσιεύσω. Yay για μένα ...

Όλα άρχισαν με μια απλή ερώτηση ...

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

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

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

Αυτό που ήθελα πραγματικά να επιτύχουμε ήταν ένα δυναμικό στοιχείο κειμένου που θα ωθηθεί ο ένας τον άλλον όταν αλλάξει το μέγεθός του. Έτσι, για παράδειγμα, αν χρησιμοποιήσω ένα plugin όπως το Craft by InVision (ή οποιοδήποτε άλλο plugin που συμπληρώνει αυτόματα τα δεδομένα), το στοιχείο ονόματος χρήστη θα ωθήσει το στοιχείο ημερομηνίας δίπλα του και ούτω καθεξής, όπως σε ένα πραγματικό λειτουργικό προϊόν.

Ενώ συζητούσα ένα παρόμοιο θέμα με τον Eran Lahav (έναν συνάδελφό μου ο οποίος είναι επίσης ένας φοβερός σχεδιαστής ), ήμουν αποφασισμένη από ποτέ να βρω μια λύση για το πρόβλημα. Θυμήθηκα την ανάγνωση ενός άρθρου σχετικά με τη δυνατότητα δημιουργίας δυναμικών πινάκων με τη νέα δυνατότητα αλλαγής μεγέθους (που παρουσιάστηκε στην έκδοση 39). Ο τρόπος που το έκανε ο Reony Tonneyck χρησιμοποίησε κρυμμένα γραφικά στοιχεία που χρησιμοποιήθηκαν για την συμπλήρωση του περιεχομένου του πίνακα. Αυτό μου έδωσε μια ιδέα να βάλω ένα κρυφό γραφικό στοιχείο μεταξύ δύο αντικειμένων κειμένου. Και μάντεψε τι?

Δούλεψε!
Επομένως, ακολουθούσα πραγματικά τη μέθοδο της Reony για να δημιουργήσω μια δυναμική σειρά, αλλά όταν έστειλα το αρχείο στον Eran, μου είπε ότι λειτούργησε με οποιαδήποτε επιλογή αλλαγής μεγέθους επιλέγετε για τα στοιχεία.

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

Και αυτή είναι η αρχική ανάρτηση για αυτό το χαρακτηριστικό:

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

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

Εκσυγχρονίζω:
Φαίνεται ότι αυτό το χαρακτηριστικό εξακολουθεί να λειτουργεί στην έκδοση 44. Επίσης, συνειδητοποίησα ότι όταν η απόσταση μεταξύ δύο στοιχείων κειμένου που στέκονται δίπλα σε κάθε είναι μικρότερη ή ίση με 20px η αυτόματη αλλαγή μεγέθους θα λειτουργήσει. Εάν η απόσταση είναι μεγαλύτερη από 20px, τα πράγματα θα αρχίσουν να υποβαθμίζονται. Δεν υπάρχουν "κηδεμόνες" :)

Τα πειράματα του Eran

Τώρα, το πρόβλημα με την αντικατάσταση, είναι ότι τα πραγματικά plugins (όπως το Craft) δεν θα λειτουργούν πάντα. Εκτός από ένα (από όσο γνωρίζω - ευχαριστίες Eran): Sketch Data Populator από το πολύτιμο στούντιο σχεδιασμού. Όταν χρησιμοποιείτε το plugin, επηρεάζει την ενότητα παράκαμψης αντί του αρχικού περιεχομένου συμβόλων και επιλύει τέλεια την παράκαμψη του προβλήματος πληθυσμιακών προβλημάτων.

EDIT: Προφανώς το plugin Craft υποστηρίζει την υπερκάλυψη του κειμένου, οπότε συγγνώμη για το λάθος (Όταν άρχισα να γράφω αυτή την ανάρτηση πίσω στον Αύγουστο του Craft δεν υποστήριζε ακυρώσεις κειμένου, εξ ου και το λάθος)

συμπέρασμα

Αυτό το χαρακτηριστικό είναι μακράν ένα από τα πιο απροσδιόριστα που αντιμετώπισα στο Sketch, αλλά hey, είναι ακόμα καλύτερο από το Illustrator.
Συνοψίζοντας, το σημαντικότερο πράγμα που πρέπει να εξετάσετε πριν χρησιμοποιήσετε αυτή τη μέθοδο είναι ότι αν προσπαθήσετε να αλλάξετε το πλάτος ή το ύψος του κύριου συστατικού, όλη η κόλαση θα χαλαρώσει σε σας.
Γνωρίζω ότι οι φοβεροί τύποι από το Anima App δουλεύουν για να βελτιώσουν την προσθήκη τους για να δουλέψουν με παρόμοιο τρόπο και θα κάνει το στοιχείο να ανταποκρίνεται πλήρως (αν και όταν δοκιμάσαμε τη μέθοδο μου με το plugin τους σήμερα, Jan 30, το Sketch συνετρίβη).

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