01 από 09
Πώς να ξεκινήσετε τον εαυτό σας με το UXPin
Καθώς προχωράμε στον τομέα του σχεδιασμού κινητών τηλεφώνων, του σχεδιασμού των εφαρμογών και του ευαίσθητου σχεδιασμού, επικεντρωνόμαστε συνεχώς στην UX (User Experience) και στην wireframing , στα διαδραστικά πρωτότυπα και στα mockups. Υπάρχει ένας τόνος εργαλείων εκεί έξω που στοχεύουν σε αυτή την εξειδικευμένη θέση και τρέχουν το πλήρες φάσμα από πολύπλοκες, χαρακτηριστικές φορτωμένες μεγαθήρες σε αραιές και μόλις χρήσιμες. Ένα από τα εργαλεία που έβγαλε το μάτι μου είναι το UXPin απλά επειδή αναπτύχθηκε από σχεδιαστές σχεδιαστές.
Πριν προχωρήσουμε ... μια προειδοποίηση. Εάν ο δικός σας είναι ένας οργανισμός που προτιμά να κατέχει το λογισμικό τότε το UXPin δεν είναι για εσάς. Όλες οι εργασίες που γίνονται σε αυτή την εφαρμογή γίνονται στο πρόγραμμα περιήγησης και τα έργα που αποθηκεύετε αποθηκεύονται στο λογαριασμό σας.
Για να ξεκινήσετε με το UXPin, ξεκινήστε ένα πρόγραμμα περιήγησης και κατευθυνθείτε στο UXPin. Από εδώ μπορείτε να εγγραφείτε για δωρεάν δοκιμή ή να κανονίσετε ένα μηνιαίο σχέδιο με βάση την αναμενόμενη ανάγκη σας. Η διαδικασία εγγραφής είναι πολύ εύκολη και μόλις ορίσετε το όνομα χρήστη και τον κωδικό πρόσβασής σας, είστε έτοιμοι να ξεκινήσετε.
02 του 09
Πώς να ξεκινήσετε ένα έργο στο UXPin
Όταν συνδεθείτε φτάνετε στον Πίνακα Ταμπλό και από εδώ μπορείτε να αποφασίσετε να δημιουργήσετε ένα νέο wireframe, ένα νέο κινητό έργο ή ένα σχέδιο Responsive Web Design. Υπάρχουν επίσης plug-ins για το UXPin που θα σας επιτρέψουν να φέρετε τα έργα Photoshop ή Sketch. Για αυτό, πώς θα δημιουργήσω ένα banner με κάποιο κείμενο και θα προσθέσω ένα κουμπί ηλεκτρονικού ταχυδρομείου στο banner. Για να ολοκληρώσω αυτό, επέλεξα Δημιουργία νέου πλαισίου.
03 του 09
Πώς να χρησιμοποιήσετε τη διεπαφή UXPin
Η επιφάνεια σχεδίασης χωρίζεται σε τέσσερις περιοχές. Στη μαύρη περιοχή στα αριστερά υπάρχει μια σειρά εργαλείων που σας επιτρέπουν να επιστρέψετε στο ταμπλό, να ανοίξετε τα Στοιχεία που θα χρησιμοποιήσετε, να ανοίξετε τον πίνακα Smart Elements, να αναζητήσετε στοιχεία, να προσθέσετε σημειώσεις στη σελίδα και να προσθέσετε μέλη της ομάδας. Στο κάτω μέρος υπάρχει ένα κουμπί που ανοίγει ένα σύντομο φροντιστήριο, ένα άλλο που σας επιτρέπει να αποκτήσετε πρόσβαση στο λογαριασμό σας και ένα άλλο που έχει πρόσβαση στις Συχνές Ερωτήσεις, ας σας υποβάλουμε ερωτήσεις και μάλιστα παρέχουμε ανατροφοδότηση.
Στη μπλε περιοχή κατά μήκος της κορυφής υπάρχει μια σειρά εργαλείων και ιδιοτήτων. Τα πιο σκούρα κουμπιά στη δεξιά πλευρά σάς επιτρέπουν να επαναλάβετε το σχεδιασμό σας, να προσαρμόσετε τις ρυθμίσεις του έργου, να μοιραστείτε τη σελίδα και να κάνετε προσομοίωση της σελίδας στο πρόγραμμα περιήγησης.
Ο πίνακας "Στοιχεία" είναι ο χώρος στον οποίο αρπάγετε τα κομμάτια για την επιφάνεια σχεδίασης, ονομάζετε το έργο σας και προσθέτετε ή αφαιρείτε τις σελίδες.
Η βιβλιοθήκη Elements είναι μια ευχάριστη έκπληξη για τους σχεδιαστές της UX. Αυτό το pop up σας επιτρέπει να επιλέξετε από 30 βιβλιοθήκες από το iOS έως το Android Lolipop Επίσης έχετε πρόσβαση στα στοιχεία Bootstrap και Foundation μαζί με τα εικονίδια Font Awesome, τα εικονίδια χειρονομίας για κινητά και μια συλλογή κοινωνικών widgets.
04 του 09
Πώς να προσθέσετε ένα στοιχείο σε μια σελίδα UXPin
Για να ξεκινήσω, σέρνω το στοιχείο Κουτί στην επιφάνεια του σχεδίου και, όταν απελευθερώσω το ποντίκι, ανοίγει ο πίνακας Ιδιότητες . Το κουμπί "Ιδιότητες" σάς επιτρέπει να ονομάσετε το στοιχείο και να ορίσετε τις τιμές ύψους και θέσης του πλάτους του στοιχείου. Μπορείτε επίσης να προσθέσετε την επένδυση στο στοιχείο, να ολοκληρώσετε τις γωνίες και να προσαρμόσετε την αδιαφάνεια. Κάνοντας κλικ στο κουμπί Χρώμα φόντου ανοίγει μια επιλογή χρώματος RGBA.
Μπορείτε επίσης να αντιστοιχίσετε μια γραμματοσειρά, περιγράμματα και μοτίβο στο επιλεγμένο στοιχείο. Το Bolt Lightning σας δίνει τη δυνατότητα να προσθέσετε διαδραστικότητα σε ένα επιλεγμένο στοιχείο.
05 του 09
Πώς να προσθέσετε και να μορφοποιήσετε κείμενο στο UXPin
Για να προσθέσετε κείμενο, σύρετε το στοιχείο κειμένου στην επιφάνεια του σχεδίου και πληκτρολογήστε το κείμενό σας. Κάντε κλικ στο κουμπί " Ιδιότητα κειμένου " για να ανοίξετε τις ιδιότητες γραμματοσειράς και να διαμορφώσετε το κείμενό Εάν χρειάζεστε ένα μπλοκ ψεύτικου κειμένου, προσθέστε ένα στοιχείο κειμένου και κάντε κλικ στο κουμπί GENERATE LOREM IPSUM στις ιδιότητες γραμματοσειράς.
06 του 09
Πώς να προσθέσετε μια εικόνα σε μια σελίδα UXPin
Υπάρχουν μερικοί τρόποι για να ολοκληρώσετε αυτό το έργο. Μπορείτε να χρησιμοποιήσετε το Εργαλείο εικόνας στη γραμμή εργαλείων, να προσθέσετε ένα στοιχείο εικόνας από τη Βιβλιοθήκη ή απλά να σύρετε και να αποθέσετε μια εικόνα από την επιφάνεια εργασίας σας πάνω στο στοιχείο στην επιφάνεια του σχεδίου όπως φαίνεται παραπάνω.
07 του 09
Πώς να προσθέσετε ένα κουμπί σε μια σελίδα UXPin
Παρόλο που υπάρχει ένα στοιχείο Κουμπιού, εισάγοντας " Κουμπί " στην περιοχή Αναζήτηση , όπως φαίνεται παραπάνω, ανοίγει όλα τα κουμπιά που βρέθηκαν σε όλες τις Βιβλιοθήκες. Σύρετε αυτό που εργάζεται για εσάς πάνω στην επιφάνεια του σχεδιασμού και χρησιμοποιήστε τις ιδιότητες για να αλλάξετε το χρώμα, τη γραμματοσειρά και ακόμη και την ακτίνα του περιγράμματος. Για να αλλάξετε το κείμενο μέσα στο κουμπί, κάντε κλικ μία φορά στο κείμενο και εισάγετε το νέο κείμενο.
08 από 09
Πώς να προσθέσετε αλληλεπιδραστικότητα σε μια σελίδα UXPin
Αυτό δεν είναι τόσο περίπλοκο όσο μπορεί να εμφανιστεί αρχικά. Για την είσοδο ηλεκτρονικού ταχυδρομείου, προστέθηκα ένα στοιχείο εισόδου, το έκανα μέγεθος, εισήγαγα το κείμενο και μορφοποίησα το κείμενο. Με το επιλεγμένο στοιχείο εισόδου κάντε κλικ στο κουμπί Ιδιότητες και, όταν εμφανίζονται οι ιδιότητες του στοιχείου, κάντε κλικ στο κουμπί Ορατότητας - στο βολβό - στην επάνω δεξιά γωνία του πίνακα.
Επιλέξτε το κουμπί και κάντε κλικ στο κουμπί "Αλληλεπιδράσεις" ( "Αλληλεπιδράσεις") - στις "ιδιότητες". Όταν ανοίγει ο πίνακας Αλληλεπιδράσεις, επιλέξτε Νέα αλληλεπίδραση. Επιλέξτε το στοιχείο Κλικ από το αναπτυσσόμενο μενού. Στην περιοχή Δράση επιλέξτε Εμφάνιση στοιχείου. Τώρα θα σας ζητηθεί ποιο στοιχείο θα εμφανιστεί. Κάντε κλικ μία φορά στο gunsite και κάντε κλικ στο στοιχείο Input. Με το στοιχείο που προσδιορίσατε, μπορείτε τώρα να προσδιορίσετε εάν θα ενεργοποιήσετε ή όχι το στοιχείο. Σε αυτή την περίπτωση αποφάσισα να δείξω το κιβώτιο εισόδου με ευκολία και να πάω με την προεπιλεγμένη τιμή διάρκειας 300ms.
Θέλω επίσης να μετακινήσω το κουμπί περίπου 65 εικονοστοιχεία προς τα δεξιά όταν πατηθεί. Επιλέξαμε το κουμπί, ανοίξαμε τον πίνακα Αλληλεπιδράσεις και επιλέξαμε τη Νέα αλληλεπίδραση . Χρησιμοποίησα αυτές τις ρυθμίσεις:
- Trigger : Πατήστε
- Δράση: Μετακίνηση με
- Μετακίνηση κατεύθυνσης : 65 px στον άξονα x
- Κινούμενα σχέδια : Γραμμικά
- Διάρκεια: 300 ms
Για να καταργήσετε μια αλληλεπίδραση, επιλέξτε το στοιχείο και ανοίξτε τον πίνακα "Αλληλεπιδράσεις". Επιλέξτε την αλληλεπίδραση στον πίνακα και κάντε κλικ στο Κάδος απορριμμάτων για να το διαγράψετε.
09 του 09
Πώς να δοκιμάσετε τη σελίδα σας στο UXPin
Λόγω του γεγονότος ότι εργάζεστε στο πρόγραμμα περιήγησης, ο έλεγχος είναι απλός. Κάντε κλικ στο κουμπί προσομοίωσης σχεδιασμού . Η σελίδα θα ανοίξει στο πρόγραμμα περιήγησης και μπορείτε να δοκιμάσετε τον τρόπο. Θα υπάρχει επίσης ένας πίνακας που προστίθεται στην αριστερή πλευρά της σελίδας, ο οποίος επιτρέπει την εμφάνιση σχολίων, έναν Χάρτη ιστοτόπου εάν υπάρχουν πολλαπλές σελίδες, δοκιμές χρηστικότητας, ζωντανή κοινή χρήση, επεξεργασία και επιστροφή στον πίνακα ελέγχου.
Στο κάτω μέρος της σελίδας υπάρχει ένα άλλο μικρό πλαίσιο που σας επιτρέπει να εμφανίσετε τα στοιχεία Interactive, να εμφανίσετε ή να αποκρύψετε σχόλια και να μοιραστείτε το σύνδεσμο του έργου με άλλους.