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

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

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



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



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

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



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

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

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



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

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

Ξεκινήστε το σχέδιό σας επιλέγοντας το artboard iPhone από τις επιλογές προτύπου σας

Ξεκινήστε το σχέδιό σας επιλέγοντας το artboard iPhone από τις επιλογές προτύπου σας

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

02. Δημιουργήστε έναν δεύτερο πίνακα γραφικών

Χρησιμοποιήστε το εργαλείο Artboard ( ΠΡΟΣ ΤΗΝ ) για να δημιουργήσετε έναν δεύτερο πίνακα γραφικών και, στη συνέχεια, αλλάξτε τους τίτλους τους (κάνοντας διπλό κλικ πάνω τους) σε «iPhone - Σελίδα ομάδας» και «iPhone - Σελίδα λεπτομερειών». Αλλάξτε και τα δύο χρώματα φόντου του Artboards σε μαύρο χρησιμοποιώντας το εργαλείο επιθεώρησης ιδιοτήτων στα δεξιά σας. Με το εργαλείο επιλογής ( Β ) επιλεγμένο, μπορείτε να πατήσετε το πλήκτρο διαστήματος ανά πάσα στιγμή για να μετακινηθείτε στο σχέδιό σας.

03. Λήψη στοιχείων φροντιστηρίου

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

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

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

05. Αναδιάταξη αντικειμένων

Για να ανοίξετε το περίγραμμα ή να γεμίσετε και να απενεργοποιήσετε, κάντε κλικ στο εικονίδιο «μάτι» στα δεξιά. Κτύπημα μετατόπιση + cmd + [ για να το στείλετε μέχρι το πίσω μέρος ή να πάτε Αντικείμενο> Τακτοποίηση> Αποστολή προς Πίσω . Εάν θέλετε να αλλάξετε χρώματα χρησιμοποιώντας δεκαεξαδικές τιμές, κάντε κλικ στο εικονίδιο χρώματος και όταν εμφανιστεί το εγγενές εργαλείο επιλογής χρωμάτων, επιλέξτε τη δεύτερη καρτέλα στο επάνω μέρος και αλλάξτε το αναπτυσσόμενο μενού σε 'RGB Sliders'.

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

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

ασπρόμαυρο νόημα στην τέχνη

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

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

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

Για να εμφανιστεί αυτό το πλαίσιο θα είναι μια περιοχή με δυνατότητα επιλογής, θα συμπεριλάβουμε ένα εικονίδιο βέλους. Σύρετε το 'path.svg' από το Finder στον καμβά XD σε ένα σημείο από το artboard. Στη συνέχεια επανατοποθετήστε το σε x: 330, y: 279.

09. Τοποθετήστε το κεφάλι σας

Από το Finder, σύρετε μια κεφαλή στη θέση της στο γκρι τετράγωνο.

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

Χρησιμοποιήστε το ισχυρό χαρακτηριστικό Repeat Grid για να δημιουργήσετε τη λίστα των μελών της ομάδας σας

Χρησιμοποιήστε το ισχυρό χαρακτηριστικό Repeat Grid για να δημιουργήσετε τη λίστα των μελών της ομάδας σας

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

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

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

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

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

Σύρετε όλα τα στιγμιότυπα στο πλέγμα

Σύρετε όλα τα στιγμιότυπα στο πλέγμα

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

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

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

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

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

15. Προσθέστε τη γραμμή πληροφοριών επαφών

Θέλουμε να συμπεριλάβουμε μια ροζ γραμμή σε κάθε σελίδα, στην οποία θα αναφέρονται τα στοιχεία επικοινωνίας του μέλους της ομάδας (375 x 45, x: 0, y: 400). Χρησιμοποιήστε το εργαλείο κειμένου ( Τ ) για να δημιουργήσετε ένα στοιχείο κειμένου με την ένδειξη 'Placeholder link', να το κεντράρετε, να το στυλ και να το τοποθετήσετε στο x: 169, y: 416.

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

Ας χρησιμοποιήσουμε το εργαλείο Repeat Grid για να δημιουργήσουμε δύο ακόμη παρουσίες αυτού του στοιχείου κειμένου. Αρχικά, μετατρέψτε το κείμενο σε πλέγμα επανάληψης ( cmd + R ) και, στη συνέχεια, κρατήστε πατημένο το πλήκτρο επιλογής ενώ επεκτείνετε το πλέγμα σας οριζόντια. Ωραίο, έτσι δεν είναι; Επιλέξτε απευθείας το κείμενο ( cmd + κλικ ) και αλλάξτε τα περιεχόμενα για να διαβάσετε «Email», «Twitter» και «LinkedIn».

17. Δημιουργήστε το όνομα και το βιογραφικό πλαίσιο

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

18. Δημιουργήστε πίνακες γραφικών για άλλα μέλη της ομάδας

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

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

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

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

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

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

Συνδέστε κάθε στοιχείο στη λίστα σας στην αντίστοιχη σελίδα λεπτομερειών του

Συνδέστε κάθε στοιχείο στη λίστα σας στην αντίστοιχη σελίδα λεπτομερειών του

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

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

Τυχόν αλλαγές στο σχέδιό σας θα αντικατοπτρίζονται αμέσως στην προεπισκόπηση

Τυχόν αλλαγές στο σχέδιό σας θα αντικατοπτρίζονται αμέσως στην προεπισκόπηση

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

22. Δημιουργήστε ένα βίντεο

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

23. Μοιραστείτε τη δουλειά σας

Μοιραστείτε πρωτότυπα στον ιστό

Μοιραστείτε πρωτότυπα στον ιστό

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

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

Μπορείτε να εξαγάγετε σχέδια ως PNG για Web, iOS και Android σε διαφορετικά μεγέθη ή SVG

Μπορείτε να εξαγάγετε σχέδια ως PNG για Web, iOS και Android σε διαφορετικά μεγέθη ή SVG

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

γραμματοσειρές που συνδυάζονται καλά με το helvetica

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

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

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

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