Πώς να πρωτότυπο μια εφαρμογή κινητής τηλεφωνίας με το Adobe XD

Αυτό το σεμινάριο, που σας δείχνει πώς να κάνετε ένα πρωτότυπο εφαρμογής για κινητά στο Adobe XD, βάλτε μαζί χρησιμοποιώντας τη χρήση Adobe XD CC (2017 Beta) το 2016. ο Πρόσφατα ξεκίνησε το Adobe XD CC Έχει λίγα τσιμπήματα, καθιστώντας ακόμα πιο εύκολη τη χρήση.

• Πάρτε έκπτωση 15% στο Adobe Creative Cloud εδώ

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

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

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

Τι γίνεται αν υπήρχε ένα ενιαίο εργαλείο που σήμαινε ότι θα μπορούσατε να απολαύσετε μια πλήρως συνδεδεμένη ροή εργασίας; Όπου μπορείτε να σχεδιάσετε και να πρωτότυπα τις εμπειρίες σας μέσα σε λίγα λεπτά, να τις μοιραστείτε στο διαδίκτυο για να καταγράψετε τα σχόλια, στη συνέχεια να κάνετε επεξεργασία εύκολα χωρίς να σπάσετε το βήμα σας; Ο στόχος με το σχεδιασμό της εμπειρίας της Adobe CC - ή, όπως το ονομάζουμε, το Adobe XD - ήταν να κάνει ακριβώς αυτό.

Σε αυτό το σεμινάριο, θα σας δείξουμε τους κύριους τομείς της Adobe XD, σχεδιάζοντας, πρωτότυπα και μοιράζοντας μια απλή «Γνωρίστε την εφαρμογή της ομάδας».

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

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

Σημειώστε ότι ορισμένες διαδικασίες ενδέχεται να έχουν αλλάξει ελαφρώς στην νεότερη έκδοση του Adobe XD.

01. Εγκαταστήστε το Adobe XD και ξεκινήστε ένα νέο σχέδιο

Πρώτον, βεβαιωθείτε ότι είναι το Adobe XD Εγκατεστημένο στον υπολογιστή σας . Εκκινήστε το, ρίξτε μια ματιά στην οθόνη υποδοχής και ξεκινήστε ένα νέο σχέδιο με ένα πρότυπο Artboard iPhone.

02. Δημιουργία δεύτερης γραφίδας

Χρησιμοποιήστε το εργαλείο Artboard ( ΕΝΑ ) Για να δημιουργήσετε μια δεύτερη γραφίδα, στη συνέχεια αλλάξτε τους τίτλους τους (κάνοντας διπλό κλικ σε αυτά) στη σελίδα "iPhone - ομάδα" και 'iPhone - λεπτομέρεια σελίδα'. Αλλάξτε τα χρώματα φόντου των τεχνών σε μαύρο χρώμα χρησιμοποιώντας τον επιθεωρητή ιδιοκτησίας στα δεξιά σας. Με το εργαλείο επιλογής ( V ) Επιλεγμένο, μπορείτε να πατήσετε το πλήκτρο διαστήματος ανά πάσα στιγμή για να τοποθετήσετε το σχεδιασμό σας.

03. Κατεβάστε τα περιουσιακά στοιχεία tutorial

Έχω συγκεντρώσει ένα φάκελο περιουσιακών στοιχείων που θα χρησιμοποιήσω σε όλο αυτό το σεμινάριο. Μπορείτε να τα κατεβάσετε εδώ . Από το Finder, σύρετε το iPhone-status-bar.svg 'στην κορυφή της γραφίδας 1 ( x: 8, Y: 5 ). Στη συνέχεια, αντιγράψτε και επικολλήστε το σε Artboard 2, οπότε και τα δύο τέχνη έχουν τη γραμμή κατάστασης στην κορυφή. Κτύπημα cmd + l Για να κλειδώσετε αυτές τις ράβδους κατάστασης και στα δύο τέχνη, ώστε οι ιδιότητές τους να μην μπορούν να τροποποιηθούν. Για να τους ξεκλειδώσετε, μπορείτε να χρησιμοποιήσετε ξανά τη συντόμευση ή κάντε κλικ στο εικονίδιο 'Lock'.

04. Σχεδιάστε ένα ορθογώνιο και ορίστε διαστάσεις

Ας εστιάσουμε στο Artboard 1 (η σελίδα της ομάδας). Χρησιμοποιώντας το εργαλείο ορθογωνίου ( R ), Σχεδιάστε ένα ροζ ορθογώνιο (# FF2BC2 χωρίς σύνορα) στο Artboard 1 και ορίστε τις διαστάσεις του σε 375 x 230 χρησιμοποιώντας τον πίνακα επιθεωρητών ιδιοτήτων στα δεξιά.

05. Αντικείμενα αναδιάταξης

Για να μετατρέψετε το περίγραμμα ή να συμπληρώσετε και να απενεργοποιήσετε, κάντε κλικ στο εικονίδιο 'Eye' στα δεξιά. Κτύπημα SHIFT + CMD + [ να το στείλετε μέχρι το πίσω μέρος, ή να πάτε Αντικείμενο & GT; Φροντίστε & gt; Στείλτε πίσω . Εάν θέλετε να αλλάξετε τα χρώματα χρησιμοποιώντας δεκαεξαδικές τιμές, κάντε κλικ στο εικονίδιο έγχρωμης χρώματος και όταν εμφανιστεί ο παζάρι του εγγονού χρώματος, επιλέξτε τη δεύτερη γλωττίδα στην κορυφή και αλλάξτε την αναπτυσσόμενη σε αναπτυσσόμενες ρυθμίσεις 'RGB.

06. Δημιουργία κεφαλίδας

Χρησιμοποιώντας το εργαλείο κειμένου ( T ), κάντε κλικ για να δημιουργήσετε μια κεφαλίδα για τη σελίδα της ομάδας σας. Το ορυχείο είναι Helvetica Bold, 20, #FFFFF, X: 18, Y: 123. Ας αρχίσουμε να θέτουμε μαζί τη λίστα των μελών της ομάδας. Σχεδιάστε μια γκρίζα τετράγωνο όπου η φωτογραφία του μέλους της ομάδας θα καθίσει (100 x 100, x: 8, Y: 238, # D0D0D0 χωρίς σύνορα).

07. Προσθέστε ένα άλλο ορθογώνιο

Στα δεξιά αυτού, χρειαζόμαστε ένα λευκό ορθογώνιο (260 x 100, X: 108, Y: 238, #FFFFF με κανένα όριο) στο οποίο θα συμπεριλάβουμε το όνομα του μέλους της ομάδας ως κεφαλίδα και τίτλο εργασίας ως υποψήφια. Προς το παρόν, χρησιμοποιήστε κείμενο κράτησης θέσης και στυθείτε προς τα επάνω όπως θέλετε.

08. Προσθέστε ένα εικονίδιο βέλους

Για να εμφανιστεί αυτό το κουτί θα είναι μια περιοχή Tappable, θα συμπεριλάβουμε ένα εικονίδιο βέλους. Σύρετε το 'Path.SVG' από το Finder πάνω στο XD καμβά σε ένα σημείο από το Artboard. Στη συνέχεια, επανατοποθετήστε το σε x: 330, Y: 279.

09. Τοποθετήστε το headshot σας

Από το Finder, σύρετε ένα headshot στη θέση του στην γκρίζα πλατεία.

10. Δημιουργήστε τη λίστα

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

Λοιπόν, όχι με το Adobe XD - μπορείτε να χρησιμοποιήσετε τη λειτουργία επαναλαμβανόμενου πλέγματος. Επιλέξτε τα στοιχεία που θέλετε να επαναλάβετε, κάντε κλικ στο κουμπί "Επαναλάβετε το πλέγμα" στον επιθεωρητή ιδιοτήτων στα δεξιά σας ( cmd + r ) και να χρησιμοποιήσετε τις πράσινες λαβές για να επαναλάβετε τα αντικείμενα κάθετα. Θα μπορούσατε επίσης να τα επαναλάβετε οριζόντια για μια έκδοση tablet.

11. Ρυθμίστε το περιθώριο

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

12. Επεξεργαστείτε τα πεδία κειμένου

Ενώ οι ιδιότητες (χρώματα, x και y θέσεις, και ούτω καθεξής) είναι παγκόσμια, το περιεχόμενο κάθε στοιχείο μπορεί να είναι μοναδικό. Επεξεργαστείτε τα πεδία κειμένου στο όνομα και τον τίτλο εργασίας του κάθε ατόμου. Μπορείτε να κάνετε διπλό κλικ για να μπείτε στο πλέγμα και την ομάδα, ή cmd + κλικ Για να κατευθύνετε - επιλέξτε οποιοδήποτε στοιχείο μέσα σε μια ομάδα ή ένα επαναλαμβανόμενο δίκτυο. Τώρα πρέπει απλά να πιάσουμε όλες τις headshots ταυτόχρονα και να τα σύρετε στο πλέγμα και τελειώσαμε με αυτήν την οθόνη.

13. Δημιουργήστε ένα σκοτεινό αποτέλεσμα

Ας πηδήσουμε στο Artboard 2 (η σελίδα λεπτομερειών). Και πάλι, θα ξεκινήσουμε με ένα ορθογώνιο κράτησης θέσης (375 x 444, x: 0, y: 0, #ffffff με κανένα όριο) και να σύρετε ένα headshot για να το γεμίσετε. Θα δημιουργήσουμε ένα σκοτεινό αποτέλεσμα αλλάζοντας την αδιαφάνεια της εικόνας σε 60 τοις εκατό και στέλνοντας την στην πλάτη ( SHIFT + CMD + [ ).

14. Προσθέστε ένα άλλο βέλος

Στη συνέχεια, κλείστε το στοιχείο headshot ( cmd + l ) Και προσθέστε ένα άλλο βέλος ('back-arrow.svg') για να υποδείξετε ότι ο χρήστης μπορεί να επιστρέψει στη λίστα ομάδων. Αυτό πρέπει να καθίσει στο X: 20, Y: 40. Είναι σημαντικό να κλειδώσετε πρώτα την εικόνα, επειδή διαφορετικά το SVG θα αντικαταστήσει το headshot.

15. Προσθέστε τις πληροφορίες επικοινωνίας Bar

Θέλουμε να συμπεριλάβουμε ένα ροζ μπαρ σε κάθε σελίδα, η οποία θα παραθέσει τα στοιχεία επικοινωνίας του μέλους της ομάδας (375 x 45, x: 0, y: 400). Χρησιμοποιήστε το εργαλείο κειμένου ( T ) Για να δημιουργήσετε ένα στοιχείο κειμένου που διαβάζει το σύμβολο κράτησης θέσης, το κέντρο, το στυθεί, και τοποθετήστε το στο X: 169, Y: 416.

16. Δημιουργήστε περισσότερες εμφανίσεις του στοιχείου κειμένου

Ας χρησιμοποιήσουμε το εργαλείο επαναλαμβανόμενης πλέγματος για να δημιουργήσουμε δύο ακόμη περιπτώσεις αυτού του στοιχείου κειμένου. Πρώτον, μετατρέψτε το κείμενο σε ένα επαναλαμβανόμενο δίκτυο ( cmd + r ), στη συνέχεια, κρατήστε πατημένο το πλήκτρο επιλογής ενώ επεκτείνετε το δίκτυο οριζόντια. Όμορφη, έτσι δεν είναι; Απευθείας-Επιλέξτε το κείμενο ( cmd + κλικ ) και να αλλάξετε το περιεχόμενο για να διαβάσετε το "email", το «twitter» και το «linkedin».

17. Δημιουργία ονόματος και βιο

Για να ολοκληρώσετε το σχεδιασμό, δημιουργήστε ένα λευκό κουτί (360 x 214, X: 8, Y: 445) που θα περιλαμβάνει το όνομα και το BIOG του μέλους της ομάδας. Προσθέστε πρώτα ένα στοιχείο κειμένου χρησιμοποιώντας το όνομα του προσώπου κράτησης θέσης. Για το στοιχείο κειμένου που διαθέτει το BIOG, θέλουμε να χρησιμοποιήσουμε κείμενο περιοχής. Για να το κάνετε αυτό, επιλέξτε το εργαλείο κειμένου ( T ) και κάντε κλικ και σύρετε για να ορίσετε την περιοχή για το αντίγραφό σας. Και πάλι, πληκτρολογήστε κάποιο κείμενο θέσης θέσης για τώρα και ρυθμίστε τις ιδιότητες στυλ του.

18. Δημιουργήστε τέχνη για άλλα μέλη της ομάδας

Τώρα ας κάνουμε μερικά νέα τέχνη για άλλα μέλη της ομάδας. Αρχικά ξεκλειδώστε την κύρια εικόνα ( cmd + l ), στη συνέχεια, κάντε κλικ στον τίτλο του Artboard 2 για να το επιλέξετε και να χτυπήσετε cmd + c για να το αντιγράψετε. Σμίκρυνση ( cmd + - ή να χρησιμοποιήσετε το trackpad για να πιέσετε το to-zoom), στη συνέχεια χτυπήστε cmd + v να επικολλήσετε τρία νέα τέχνη. Προσθέστε μερικές πληροφορίες BIOG σε κάθε σελίδα. Ενημερώστε τα ονόματα και τις εικόνες headshot και ρυθμίστε τα τέχνη του καμβά. Δροσερός! Ο σχεδιασμός μας έχει τελειώσει για τώρα.

19. Ρυθμίστε τη ροή

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

20. Συνδεθείτε

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

21. Δοκιμάστε το πρωτότυπο

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

22. Κάντε ένα βίντεο

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

23. Μοιραστείτε την εργασία σας

Για να μοιραστείτε τα πρωτότυπα στον Ιστό, κάντε κλικ στο τελευταίο κουμπί στην επάνω δεξιά γωνία (κοινή χρήση σε απευθείας σύνδεση). Κάντε κλικ στο κουμπί Δημιουργία συνδέσμου. Όλα τα περιουσιακά στοιχεία θα μεταφορτωθούν στο Creative Cloud και θα δημιουργηθεί ένας σύνδεσμος. Εάν είναι απαραίτητες αλλαγές, μπορείτε να επιστρέψετε στη λειτουργία σχεδιασμού, να κάνετε τις αλλαγές και να μοιραστείτε ξανά. Ολόκληρη η ροή απλά λειτουργεί.

24. Εξαγωγή αρχείων

Από το XD, μπορείτε να εξάγετε PNGS για web, iOS και Android σε διαφορετικά μεγέθη, καθώς και εξαιρετικά βελτιστοποιημένα αρχεία SVG.

25. Απολαύστε τα αποτελέσματα

Συγχαρητήρια! Έχετε καταφέρει τα βασικά στοιχεία του σχεδιασμού εμπειρίας της Adobe CC (προεπισκόπηση). Μη διστάσετε να μοιραστείτε τα πρωτότυπα σας στο Web και τα κοινωνικά μέσα - προσθέστε #adobexd Έτσι μπορούμε να δούμε τη δουλειά σας.

Αυτό το άρθρο εμφανίστηκε αρχικά στο καθαρό περιοδικό Τεύχος 280. Εγγραφείτε στο καθαρό εδώ .

Σχετικά Άρθρα

• Πώς να αποφύγετε τις παγίδες πρωτοτύπων
• Πώς να χρησιμοποιήσετε κινούμενα σχέδια σε εφαρμογές για κινητά
• 10 συμβουλές για το καλύτερο σχεδιασμό κινητού UX