Adobe Expertise Design Tricks, Συμβουλές και Τεχνικές
Όταν η Adobe εισήγαγε το Design Experience ως δημόσια προβολή, η εταιρία ολοκλήρωσε ταυτόχρονα δύο εκπληκτικά επιτεύγματα. Πρώτον, κατέβαλαν ένα χώρο στην αναδυόμενη αγορά λογισμικού πρωτοτύπων. Δεύτερον, δημιούργησαν μια ευκαιρία για τους χρήστες να παίζουν με μια "εργασία σε εξέλιξη" και αφήνουν τους χρήστες να επηρεάσουν την πρόοδο. Τώρα που η εφαρμογή ήταν διαθέσιμη για μερικούς μήνες, σκέφτηκα ότι θα ήταν μια καλή στιγμή να μοιραστώ μερικά τεχνάσματα εμπειρίας σχεδίου, συμβουλές και τεχνικές.
Αλλά πρώτα, ίσως να αναρωτιέστε τι εννοείται με το λογισμικό πρωτοτύπου. Μεταξύ των σημαντικότερων παικτών αυτού του χώρου είναι οι Proto.io, Principle, UXPin, Atomic.io, Design Experience και InVision. Σε αντίθεση με εφαρμογές όπως το Sketch 3, το Photoshop και το Illustrator όπου παράγονται στατικά σχέδια, αυτοί οι γραφικοί συντάκτες εισάγουν διαδραστικότητα, κίνηση και άλλα χαρακτηριστικά γνωρίσματα που είναι κοινά στο σημερινό χώρο του κινητού και του web design.
Με την άνοδο της κινητής και την αναπόφευκτη, εστιασμένη με λέιζερ εστίαση στον Χρήστη, δεν είναι πλέον αρκετό για έναν σχεδιαστή να μαστίζει μερικά σκίτσα, να τραβάει μαζί μερικά comps και στη συνέχεια να απελευθερώνει το έργο ή να το φορτώνει σε ένα web server. Η ροή εργασίας UI / UX άλλαξε ουσιαστικά τα πράγματα. Κάθε βήμα της διαδικασίας, από τον εντοπισμό του χρήστη, σκίτσα, wireframes, mockups, και πρωτότυπα υποβάλλονται τώρα σε εκτεταμένες δοκιμές χρηστών.
Είναι αυτό το τελευταίο στάδιο - πρωτότυπο - όπου τα σημεία πόνου ανακαλύπτονται και σταθεροποιούνται πριν το έργο μεταφερθεί στην τελική παραγωγή. Αυτό είναι όπου η διαδραστικότητα, η κίνηση, οι μεταβάσεις της οθόνης και η τοποθέτηση όλων των στοιχείων στην οθόνη είναι τόσο κρίσιμες. Τα ζητήματα και τα προβλήματα δεν μπορούν απλά να παρουσιαστούν ως στατική εικόνα ή να εξηγηθούν προφορικά. Μετά από όλα, αυτά τα προϊόντα είναι για τους πραγματικούς ανθρώπους. Αντί να μεταφέρουμε όλα αυτά σε κώδικα, η διαδικασία δημιουργίας πρωτοτύπων γίνεται ολοένα και περισσότερο από λογισμικό γραφικών σχεδιασμένο για αυτόν ακριβώς τον σκοπό. Είναι πιο εύκολο να διορθώσετε ένα λάθος, να αντικαταστήσετε μια εικόνα, να ξαναγράψετε κάποιο κείμενο, να μετακινήσετε ένα κουμπί και ούτω καθεξής, χρησιμοποιώντας έναν επεξεργαστή εικόνας αντί του κώδικα συνεχούς επανεγγραφής και αποσφαλμάτωσης.
Στην πραγματικότητα, αυτό το λογισμικό έχει γίνει ένα βασικό συστατικό στο σημερινό περιβάλλον "Rapid Prototyping" Design and Development.
Με αυτό είπε, ας πάρουμε κάποια διασκέδαση με το Design Experience.
02 του 07Δημιουργήστε μια καρφίτσα προορισμού με έναν απλό κύκλο στο σχέδιο Adobe Experience
Μια καθαρή πτυχή της XD είναι η χρήση εργαλείων σχεδίασης διάνυσμα. Δεν είναι δυνατή η εύρεση ενός εικονιδίου; Κανένα πρόβλημα. Ρίξτε το δικό σας. Δείτε πώς:
- Επιλέγω Το εργαλείο ελλείψεων και, πατώντας τα πλήκτρα Option / Alt-Shift, σχεδιάστε έναν κύκλο.
- Με τον επιλεγμένο κύκλο, ρυθμίστε το Συμπληρώστε το χρώμα σε FF0000 και το σύνορο στο "κανένα" στις ιδιότητες.
- Κάντε διπλό κλικ στον κύκλο για να εμφανίσετε τα σημεία αγκύρωσης. Σύρετε την κάτω άγκυρα προς τα κάτω.
- Κάντε διπλό κλικ στο επιλεγμένο σημείο αγκύρωσης και οι καμπύλες αντικαθίστανται από γραμμές.
- Σχεδιάστε έναν άλλο μικρό κύκλο με μια λευκή γέμιση και χωρίς πινέλο. Μετακινήστε τη στη θέση και επιλέξτε τον πείρο και τον κύκλο. Στον πίνακα "Ευθυγράμμιση" στην κορυφή των "Ιδιότητες", κάντε κλικ στο κουμπί "Οριζόντιο κέντρο" και δημιουργήστε τον πείρο.
Δημιουργήστε μια ασάφεια φόντου στο Adobe Experience Design
Είναι κοινό να έχετε κείμενο ή άλλο περιεχόμενο πάνω σε μια εικόνα φόντου. Το πρόβλημα εδώ είναι ότι η εικόνα, πολύ συχνά, εξουδετερώνει το περιεχόμενο πάνω από αυτό. Ένας τρόπος επίλυσης αυτού του ζητήματος είναι να θολάρετε την εικόνα φόντου. Μπορείτε να θολάρετε την εικόνα στο Photoshop ή σε άλλο λογισμικό επεξεργασίας εικόνας, αλλά αυτό είναι κάπως αναποτελεσματικό, ειδικά επειδή η XD μπορεί τώρα να χειριστεί αυτό το έργο για εσάς. Δείτε πώς:
- Δημιουργήστε έναν νέο πίνακα γραφικών και προσθέστε την εικόνα φόντου.
- Επιλέξτε το εργαλείο ορθογώνιου πλαισίου aκαι να σχεδιάσετε ένα ορθογώνιο πάνω από την εικόνα. Με το επιλεγμένο ορθογώνιο, ρυθμίστε το πλήκτρο Fill to White και το Stroke στο None.
- Με το επιλεγμένο ορθογώνιο, επιλέξτε Φωλιά φόντου στον πίνακα ιδιοτήτων. Τα τρία ρυθμιστικά είναι το μέγεθος θολού, η φωτεινότητα και η αδιαφάνεια. Εδώ είναι τι κάνουν:
- Ποσό θολού: Ρυθμίζει την θολότητα της εικόνας κάτω από το σχήμα. Η μέγιστη τιμή είναι +50.
- Λάμψη: Ρυθμίζει τις φωτεινές ενδείξεις και τις σκιές στην εικόνα. Η ελάχιστη τιμή είναι -50 και η μέγιστη τιμή είναι +50.
- Αδιαφάνεια: Επηρεάζει τη διαφάνεια του σχήματος και την ορατότητα της εικόνας κάτω από το σχήμα. Οι τιμές κυμαίνονται από 0% έως 100%.
Εάν θέλετε να αλλάξετε τα πράγματα, αλλάξτε το χρώμα του σχήματος και πατήστε με την τιμή Opacity για να αλλάξετε το "look" της εικόνας.
04 του 07Δημιουργήστε ένα Scrim στο Adobe Experience Design
Ένα κοινό πρόβλημα σχεδίασης είναι τα στοιχεία στοιχείων διεπαφής που πρέπει να είναι ένα κοινό χρώμα αλλά χάνονται όταν τοποθετούνται πάνω σε μια εικόνα φόντου ή ένα συμπαγές χρώμα. Η λύση είναι ένα scrim. Ένα πλέγμα είναι μια κάπως αδιαφανής κλίση τοποθετημένη μεταξύ του στοιχείου διασύνδεσης και του φόντου. Αυτό είναι εύκολο να επιτευχθεί στο XD. Δείτε πώς:
- Δημιουργήστε τον πίνακα γραφικών σας στο XD, προσθέστε μια εικόνα και αντιγράψτε και επικολλήστε τα στοιχεία διεπαφής από το κατάλληλο UI Kit - Αρχείο> Άνοιγμα κιτ UI … - στον πίνακα γραφικών. Στην παραπάνω εικόνα η φωτογραφία καθιστά δύσκολη την εμφάνιση της γραμμής κατάστασης και της γραμμής εφαρμογών.
- Επιλέξτε το Εργαλείο ορθογωνίου και να σχεδιάσετε ένα ορθογώνιο. Στον πίνακα "Ιδιότητες" επιλέξτε "Πληρωμή" και επιλέξτε "Βαθμονόμηση" από το αναδυόμενο παράθυρο στον επιλογέα χρωμάτων. Ορίστε τα χρώματα κλίσης σε Ασπρόμαυρο. Ρυθμίστε την τιμή Α - Αδιαφάνεια - στο 60% και το Λευκή τιμή Α έως 0%.
- Με το επιλεγμένο ορθογώνιο, επιλέξτε Αντικείμενο> Ταξινόμηση> Αποστολή προς τα πίσω. Τα στοιχεία διεπαφής είναι τώρα ορατά πάνω στην εικόνα.
Δημιουργήστε ένα Avatar Avatar στο Adobe Experience Design
Ένα κοινό μοτίβο σχεδίασης βρίσκεται στις εφαρμογές συνομιλίας, όπου οι άνθρωποι μιλούν ο ένας στον άλλο και η εικόνα του ομιλητή εμφανίζεται στην οθόνη. Αυτά τα είδωλα είναι συνήθως εικόνες που έχουν καλυφθεί. Είναι νεκρό απλό να επιτευχθεί αυτό στο XD. Δείτε πώς:
- Ξεκινάτε με μια εικόνα και ένα κύκλο ή άλλο σχήμα στο artboard. Μπορείτε να γεμίσετε τον κύκλο με οποιοδήποτε χρώμα. Αυτό που δεν χρειάζεται να κάνετε είναι να προσθέσετε ένα χρώμα εγκεφαλικού επεισοδίου. Θα εξαφανιστεί όταν δημιουργείτε το εφέ, οπότε γιατί να ενοχλείτε. Αν χρειάζεται να χτυπήσετε τον κύκλο, αντιγράψτε το στο πρόχειρο.
- Μετακινήστε τον κύκλο στην εικόνα και επιλέξτε τόσο την εικόνα όσο και τον κύκλο. Με επιλεγμένα αντικείμενα bot, επιλέξτε Αντικείμενο> Μάσκα με σχήμα. Όταν αφήσετε το ποντίκι, δημιουργείται το Avatar. Από εκεί μπορείτε να το αλλάξετε το μέγεθος.
- Εάν πρέπει να προσθέσετε ένα εγκεφαλικό επεισόδιο, επικολλήστε τον κύκλο που βρίσκεται στο πρόχειρο σας πάνω στο artboard. Με το επιλεγμένο αντίγραφο απενεργοποιήστε το πλήκτρο των ιδιοτήτων και προσθέστε χρώμα και πλάτος διαδρομής. Για να τα ταξινομήσετε, επιλέξτε και τα δύο αντικείμενα και κάντε κλικ στα κουμπιά Center Align στο μενού Align (Ευθυγράμμιση) στο επάνω μέρος του πίνακα ιδιοτήτων.
- Αν θέλετε να μετακινήσετε τη φωτογραφία γύρω στη μάσκα, κάντε διπλό κλικ στη μάσκα. Αυτό θα δείξει την εικόνα και το σχήμα μάσκας. Κάντε κλικ στην εικόνα και σύρετέ την στη θέση. Όταν αφήσετε το ποντίκι, η εικόνα θα βρίσκεται στη νέα της θέση μέσα στη μάσκα.
Παίξτε με το Adobe Experience Design Artboards
Οι πίνακες γραφικών Experience Experience δεν είναι μόνο εκεί για να τοποθετήσετε περιεχόμενο. Μπορούν επίσης να χειραγωγούνται. Ακολουθούν μερικά πράγματα που μπορείτε να κάνετε:
- Εάν χρειάζεστε εκδόσεις σε τοπίο και σε πορτραίτο ενός γραφικού πίνακα, αντιγράψτε τον πίνακα γραφικών και, με το επιλεγμένο αντίγραφο, κάντε κλικ στο κουμπί οριζόντιου προσανατολισμού στον πίνακα Ιδιότητες. Ο πίνακας γραφικών θα αλλάξει σε προσανατολισμό τοπίου. Αν το Artboard έχει περιεχόμενο σε αυτό, κάντε κλικ στο όνομα του Artboard και οι ιδιότητες Artboard θα εμφανιστούν στον πίνακα Properties.
- Για να προσθέσετε ένα προσαρμοσμένο χρώμα στο Artboard και το έργο για αυτό το θέμα, επιλέξτε το Artboard και κάντε κλικ στο τσιπ χρώματος Fill στην ενότητα Appearance του panel Properties. Καταχωρίστε την δεκαεξαδική τιμή για το χρώμα και κάντε κλικ στο σύμβολο +. Το χρώμα θα προστεθεί ως προσαρμοσμένο χρώμα. Για να εφαρμόσετε αυτό το χρώμα σε άλλο σημείο, επιλέξτε ένα αντικείμενο και κάντε κλικ στο τσιπ Custom Color για να εφαρμόσετε το χρώμα.
- Οι πίνακες τέχνης μπορούν να γίνουν κάθετα κύλινδροι. Για να το κάνετε αυτό, επιλέξτε τον πίνακα γραφικών και αλλάξτε το ύψος του είτε στα Πάνελ Ιδιότητες είτε σύροντας το κάτω μέρος του πίνακα γραφικών προς τα κάτω. Στην περιοχή με δυνατότητα κύλισης του πίνακα ιδιοτήτων, επιλέξτε κατακόρυφα από το αναδυόμενο μενού και εισαγάγετε το ύψος προβολής για την οθόνη. Αυτή η διακεκομμένη μπλε γραμμή δείχνει το κάτω μέρος του παραθύρου προβολής. Για να το δοκιμάσετε, κάντε κλικ στο κουμπί Αναπαραγωγή και κάντε κύλιση. Για να απενεργοποιήσετε την κύλιση, επιλέξτε Καμία στην αναδυόμενη γραμμή κύλισης.
Επεξεργαστείτε ένα κιτ κινητού UI στο Adobe Experience Design
Το Design Experience περιλαμβάνει ένα κιτ UI για την ανάπτυξη iOS, Android και Windows UI's. Όταν τα ανοίγετε για πρώτη φορά, μπορεί να νομίζετε ότι είναι αρκετά καλά στη θέση τους. Δεν είναι αρκετά - κάθε ένα από τα κομμάτια σε αυτά τα κιτ είναι πλήρως επεξεργάσιμο. Ας μάθουμε με την οικοδόμηση ενός wireframe Android.
- Ξεκινάτε επιλέγοντας το εργαλείο Artboard και επιλέγοντας Android Mobile στην ενότητα Google του πίνακα Ιδιότητες.
- Επιλέξτε Αρχείο> Άνοιγμα κιτ UI> Υλικό Google. Αυτό ανοίγει το κιτ υλικού σχεδιασμού UI. Επιλέξτε το μεγεθυντικό φακό και το marquee tο πίνακας οθόνης των οδηγών οθόνης. Θα ήθελα να ξεκινήσω με αυτό γιατί μου δίνει τους οδηγούς για την σωστή τοποθέτηση των στοιχείων διεπαφής στην οθόνη. Εάν κάνετε κλικ σε μία από τις μπλε γραμμές, θα δείτε ότι είναι κλειδωμένη. Κάντε κλικ στο κλείδωμα που είναι προσαρτημένο σε κάθε ένα από αυτά για να το ξεκλειδώσετε. Τοποθετήστε το γραφικό πίνακα και αντιγράψτε την επιλογή στο πρόχειρο. Επιστρέψτε στο έγγραφό σας και επικολλήστε την οθόνη στον πίνακα γραφικών σας.
- Κάντε κλικ μία φορά στη γραμμή εφαρμογών που βρίσκεται στην κορυφή του πίνακα τέχνης. Παρατηρήστε πώς μπορείτε να το επιλέξετε.Επιλέξτε Αντικείμενο> Ταξινόμηση> Φέρτε στο μπροστινό μέρος. Η επιλογή σας είναι πλέον πάνω από τους Οδηγοί οθόνης. Αυτό θα πρέπει να σας πει ότι κάθε ένα από τα στοιχεία στην οθόνη είναι σε θέση να επεξεργαστεί.
- Κάντε διπλό κλικ στη γραμμή κατάστασης στην κορυφή και στην καρτέλα "Ιδιότητες"και το χρώμα πληρώσεως στο 455A64. Κάντε διπλό κλικ στη γραμμή εφαρμογών και ρυθμίστε τη γέμισή της στο 607D8B. Αυτό θα πρέπει να σας λέει ότι κάθε στοιχείο σε ένα κιτ UI μπορεί να επεξεργαστεί για να ικανοποιήσει τις προδιαγραφές χρώματος του έργου.
- Τι γίνεται με τα εικονίδια; Δείτε πώς μπορείτε να αλλάξετε το χρώμα τους. Κάντε διπλό κλικ στην καρδιά για να την επιλέξετε. Αν κοιτάξετε τον πίνακα "Ιδιότητες", μπορείτε να υποθέσετε ότι δεν μπορείτε να επεξεργαστείτε την επιλογή. ΟΧΙ ακριβως. Κάντε διπλό κλικ στην καρδιά για άλλη μια φορά. Οι ιδιότητες ανοίγουν και αλλάζετε το χρώμα πλήρωσης σε FF0000. Επαναλάβετε αυτό το διπλό διπλό κλικ για τα υπόλοιπα εικονίδια και το κείμενο.
