Οδηγός Adobe XD - Σχεδιασμός εμπειριών και πρωτοτύπωση

Καλώς ήρθατε στο μεγάλο μάθημα Adobe XD. Σε αυτή την εισαγωγή παρουσιάζομαι ως ο προπονητής σας.

Ποια είναι η διαφορά μεταξύ της εμπειρίας χρήστη (UX) και της διεπαφής χρήστη (UI); Ποια είδη σχεδιασμού επιπέδου υπάρχουν και για τι χρησιμοποιείται καλύτερα το Adobe XD; Η απάντηση βρίσκεται εδώ!

Ανοίγοντας για πρώτη φορά το Adobe XD - και ήδη προσφέρονται πολλές επιλογές που μπορεί κανείς να επιλέξει. Σε αυτό το βίντεο προσφέρεται ένα μικρό warm-up για το Adobe XD, μια επισκόπηση του προγράμματος καθώς και μια εισαγωγή στην οθόνη εκκίνησης του XD και τις λειτουργίες της.

Οι πίνακες (Artboards) μπορούν να δημιουργηθούν εύκολα στο Adobe XD για διαφορετικές αναλύσεις και συσκευές. Ποιες ειδικότητες πρέπει να ληφθούν υπόψη, μπορείς να τις δεις σε αυτό το εγχειρίδιο.

Διαφορετικές ρυθμίσεις πλέγματος μας διευκολύνουν στο καθαρό τακτοποίημα των στοιχείων και αντικειμένων μεταξύ τους. Γι' αυτό μας δίνεται ένα ορθογώνιο grid και μία διαίρεση σε στήλες για στήλες.

Η Google, η Apple και η Microsoft παρέχουν έτοιμα UI-Kits για γρήγορη εκκίνηση. Αυτά τα έτοιμα σκίτσα μας βοηθούν σημαντικά στην μετέπειτα ανάπτυξη πρωτοτύπων για διαφορετικές πλατφόρμες.

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

Υπάρχουν πολλές μέθοδοι για την εισαγωγή περιουσιακών στοιχείων όπως εικόνες, αρχεία, κειμενικά έγγραφα κ.λπ. στο Adobe XD. Σε αυτό το βίντεο παρουσιάζω μερικές διαδικασίες. Ωστόσο, εφόσον το XD είναι μέρος του Creative Cloud της Adobe, μπορείτε φυσικά να εργάζεστε με τις βιβλιοθήκες με άνεση και την άνεση.

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

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

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

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

Το πλέγμα επανάληψης είναι μία από τις πλέον σημαντικές λειτουργίες του Adobe XD. Μας βοηθάει να κλιμακώνουμε και να γεμίζουμε μεμονωμένα ομάδες αντικειμένων που έχουν δημιουργηθεί μία φορά.

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

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

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

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

Ένα από τα ισχυρότερα εργαλεία για την καλύτερη δυνατή οπτικοποίηση είναι η λειτουργία Auto-Animate του Adobe XD. Σε αυτό το παράδειγμα εξηγώ πώς μπορείτε να προσαρμόσετε την αρχή της λειτουργίας Auto-Animate για οποιονδήποτε σκοπό φανταστείτε.

Στα παρακάτω βίντεο μαθαίνουμε πώς να δημιουργήσουμε ένα πρωτότυπο για ένα online κατάστημα. Εκεί μαθαίνουμε τρόπους να δημιουργήσουμε ελκυστικά υψηλής ποιότητας πρωτότυπα από απλά artboards. Μέρος 1 από 4.

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

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

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

Το Adobe XD υποστηρίζει στη διαδικασία πρωτότυπων σχεδίων του τη διάδραση μέσω φωνητικών εντολών. Οι λεκτικές εντολές οδηγούν σε ενέργειες συστήματος που μπορούμε να ορίσουμε μόνοι μας. Πώς λειτουργεί αυτό, το δείχνω σε αυτό το εγχειρίδιο.

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

Να δοκιμάσετε ένα πρωτότυπο σε ένα εικονοποιημένο περιβάλλον είναι μια πράξη - να το παρουσιάσετε ζωντανά σε μια συσκευή είναι εντελώς διαφορετικό. Και ακριβώς αυτό μπορεί να επιλυθεί άνετα μέσω του Adobe XD είτε μέσω USB είτε μέσω σύνδεσης με το Creative Cloud. Για αυτό, χρησιμοποιούμε την εφαρμογή Adobe XD από το App Store.

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

Το Adobe XD αλλάζει ως πρόγραμμα πολύ νεότερης ηλικίας με κάθε ενημέρωση: Σε αυτό το βίντεο εξηγώ ποια καινούρια χαρακτηριστικά έχουν προκύψει με τη μετάβαση από την έκδοση 18 στην έκδοση 19, πώς χρησιμοποιούνται τα χαρακτηριστικά και σε ποιες καταστάσεις είναι χρήσιμα. Αυτά περιλαμβάνουν: Στοιχεία αντί για σύμβολα, Responsive Resize, οδηγοί, εργαλείο πολυγώνου, περαιτέρω επιλογές μορφοποίησης κειμένου και πολλά άλλα. Καλή διασκέδαση!