Εικονογράφηση από τον Justin Tran

Σχεδιασμός με πραγματικά δεδομένα

Πώς Dropbox χρησιμοποιεί Framer X και πραγματικά δεδομένα για το σχεδιασμό

Νωρίτερα το 2018, έγραψα σχετικά με τα πρωτότυπα επιφάνειας εργασίας και τον τρόπο με τον οποίο η ρύθμιση παίζει σημαντικό ρόλο στο σχεδιασμό των desktop interfaces. Αλλά το κιτ γραφείου δεν διέθετε ένα κρίσιμο στοιχείο - πραγματικά δεδομένα.

Με την κυκλοφορία του Framer X, η ομάδα μας αποφάσισε να αναδημιουργήσει το Desktop Kit από το έδαφος με πραγματικά δεδομένα στον πυρήνα του.

Φέρνοντας πραγματικά δεδομένα στο Framer X

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

Δοκιμή τοπικής προσαρμογής με το API του Google Translate

Επιθυμείτε να μεταφράσετε γρήγορα το κείμενό σας στα γερμανικά για να ελέγξετε αν έχετε αφήσει αρκετό χώρο για τον εντοπισμό; Δημιουργήσαμε ένα στοιχείο μεταφραστή που χρησιμοποιεί το API του Google Translate για να μετατρέψει το κείμενό σας σε περισσότερες από 100 γλώσσες.

Δυναμικά wallpapers με το API εικόνας της Unsplash

Θέλετε να εμφανίσετε γρήγορα το σχέδιό σας σε ένα ρεαλιστικό περιβάλλον περιήγησης; Δημιουργήσαμε ένα στοιχείο προγράμματος περιήγησης που τοποθετεί τη σελίδα σας σε ένα πρόγραμμα περιήγησης Safari ή Chrome με τυχαία ταπετσαρία από το API Unsplash.

Ρεαλιστικά προγράμματα περιήγησης με το favicon API του Statvoo

Στο προηγούμενο μας κιτ Desktop, συμπεριελάβαμε ένα πρόγραμμα περιήγησης Safari, παρά το γεγονός ότι το Chrome έχει σχεδόν το 60% του μεριδίου αγοράς. Χρησιμοποιώντας το Statvoo API για να τραβήξουμε το favicon ενός ιστότοπου, ήμασταν τελικά σε θέση να δημιουργήσουμε μια ρεαλιστική καρτέλα Chrome.

Κατασκευασμένα από την Κοινότητα

Υπάρχουν τόσα πολλά απίστευτα σύνολα δεδομένων που διατίθενται στα δημόσια APIs ότι αρχίζουμε μόλις τώρα να χαράξουμε την επιφάνεια του τι είναι δυνατό. Η κοινότητα έχει ήδη δημοσιεύσει κάποια καταπληκτικά στοιχεία στο Framer X Store που σας επιτρέπουν να τραβήξετε πράγματα όπως ρεαλιστικά είδωλα, διαδραστικούς Χάρτες Google, βίντεο με δυνατότητα αναπαραγωγής στο YouTube και ακόμη και έναν παίκτη του Spotify.

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

Δημιουργήστε κάτι με το API της εταιρείας σας

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

"Όταν δεν δουλεύουμε με πραγματικά δεδομένα, εξαπατούμε"
- Τζος Πουκέτ

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

Φέρνοντας το API Dropbox στο Framer X

Ο σχεδιασμός με πραγματικά δεδομένα χρήστη είναι κάτι που έχουμε ονειρευτεί από καιρό αλλά ήταν πάντα απρόσιτο. Είχαμε κατασκευάσει μια μονάδα Framer Studio που τραβούσε δεδομένα χρήστη από το API Dropbox (χρησιμοποιώντας το OAuth), αλλά απαιτούσε τη δημιουργία πολλών τεχνικών βημάτων και γνώσεων JavaScript. Μεγαλύτερες εταιρείες με εξειδικευμένες ομάδες εργαλείων σχεδίασης έχουν κατασκευάσει ισχυρά plug-in Sketch που τραβούν ανώνυμα δεδομένα χρήστη, αλλά δεν είμαστε ακόμα εκεί ακόμα.

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

Επιλέξτε μεταξύ γενικών δεδομένων ή πραγματικών δεδομένων από το API DropboxΟ κώδικας που συνδέει το API Dropbox με τα σχεδιαστικά μας στοιχεία

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

Τώρα που έχουμε πρόσβαση σε πραγματικά δεδομένα στο Framer X, μπορούμε να φέρουμε σχεδόν οποιοδήποτε σχέδιο στη ζωή με πραγματικές δομές δεδομένων. Στο Dropbox Desktop Kit (δείτε παρακάτω) θα βρείτε αυτό το πλήρως διαδραστικό παράθυρο Finder - δοκιμάστε το!

Αναζωογονεί την εμπειρία Finder χρησιμοποιώντας μόνο Framer X

Dropbox Desktop Kit X

Τώρα μπορείτε να κατεβάσετε το Dropbox Desktop Kit στο Framer X Store. Το ξαναχτίσαμε από το έδαφος με κώδικα και πραγματικά δεδομένα μίγαμε για να καταστήσουμε τα στοιχεία πιο ισχυρά από το αρχικό κιτ Desktop.

Στο εσωτερικό του θα βρείτε πάνω από εκατό στοιχεία macOS UI που κυμαίνονται από κουμπιά και ειδοποιήσεις push προς εφαρμογές εργασίας.

Κατεβάστε και απολαύστε!

Κατεβάστε το κιτ Desktop στο Framer X Store και ενημερώστε μας τι σκέφτεστε! Σχεδιάζουμε να προσθέσουμε σύντομα τα στοιχεία των Windows 10.

Τεράστια χάρη στον Justin Tran για την απεικόνιση, ο Wes O'Haire για τη δημιουργία του Desktop Kit και ο Andrea Drugay για να βοηθήσουν να γράψουν αυτή τη θέση.

Θέλετε περισσότερα από την ομάδα Dropbox Design; Ακολουθήστε τη δημοσίευσή μας, το Twitter και το Dribbble. Θέλετε να κάνετε μαγεία μαζί; Προσλαμβάνουμε!