Εργαλεία Και Σεμινάρια
Ποιος ήξερε ότι το Adobe CC θα μπορούσε να χρησιμοποιηθεί για την κατασκευή Wireframes;
Το Wireframing είναι ένα σημαντικό βήμα στο σχεδιασμό οποιασδήποτε διεπαφής χρήστη, είτε πρόκειται για ιστότοπο, εφαρμογή ή προϊόν λογισμικού. Χωρίς περισπασμούς με τη μορφή εικόνων, χρωμάτων, τυπογραφίας, στυλ και εφέ, μπορείτε να εστιάσετε περισσότερο στον καθορισμό της ιεραρχίας περιεχομένου και της εμπειρίας χρήστη.
Η κατασκευή καλωδίων χαμηλής πιστότητας και το πρωτότυπο θα σας βοηθήσουν να δοκιμάσετε και να επαναλάβετε νωρίτερα και συχνότερα στη διαδικασία. Τα σύρματα χαμηλής πιστότητας επιτρέπουν στους σχεδιαστές να εργάζονται πιο γρήγορα και να αναπτύσσουν προϊόντα που θα λατρέψουν οι χρήστες.
Υπάρχουν πολλά διαφορετικά εργαλεία εργαλεία καλωδίωσης να διαλέξετε από σήμερα. Ό, τι κι αν επιλέξετε θα εξαρτηθεί από τις προσωπικές σας προτιμήσεις και το στυλ ροής εργασίας.
Όπως πολλοί σχεδιαστές που έχουν μετακομίσει στο ψηφιακός σχεδιασμός Από τον κόσμο της εκτύπωσης, είμαι ειδικός σε εφαρμογές Adobe όπως το Illustrator, το InDesign και το Photoshop. Μπορώ να τα χρησιμοποιήσω αποτελεσματικά και διαισθητικά από οπουδήποτε και οποτεδήποτε (ακόμα κι αν κάποιος με ξυπνήσει στη μέση της νύχτας και αρνείται να μου δώσει ένα φλιτζάνι καφέ).
Δεν αποτελεί έκπληξη, αυτές οι ευέλικτες εφαρμογές έχουν γίνει επίσης τα εργαλεία που χρησιμοποιώ για να κάνω σχεδιασμό ιστοσελίδων και οπτική σχεδίαση εφαρμογών . Έτσι, για να κάνω τη ροή εργασίας μου την πιο αποτελεσματική, τις χρησιμοποιώ και για wireframing.
παραδείγματα εξαιρετικής σχεδίασης uxΗ σειρά εφαρμογών σχεδιασμού Adobe CC μπορεί να χρησιμοποιηθεί για την αποτελεσματική δημιουργία πλαισίων καλωδίων.
Με κάθε έργο, συνήθως αρχίζω να σχεδιάζω πολύ σκληρά σκίτσα σε χαρτί ή στην οθόνη του iPad ή του smartphone μου αν δεν βρίσκομαι κοντά στο τραπέζι του γραφείου μου. Αυτά τα σκίτσα είναι εκεί για να εστιάσω τις σκέψεις μου στην επιλεγμένη ιδέα. ο πελάτης πιθανότατα δεν θα δει ποτέ κανένα από αυτά. Όταν είμαι σίγουρος ότι η ιδέα μου λειτουργεί, προχωράω στο τι είναι το wireframing. Συνήθως χρησιμοποιώ το συνδυασμό Adobe Illustrator και InDesign: Illustrator για να δημιουργήσω τα περισσότερα από τα στοιχεία του κιτ UI και InDesign για το ίδιο το wireframing.
Θα ακολουθήσω μια διαδικασία βήμα προς βήμα για το πώς να ενσωματώσω αυτά τα εργαλεία στη ροή εργασίας του wireframing και αργότερα στο άρθρο, αλλά προτού μπω στις λεπτομέρειες, επιτρέψτε μου να σας δείξω τα πλεονεκτήματα και τις αδυναμίες της χρήσης του InDesign ως κύριο εργαλείο καλωδίωσης.
Τα πλεονεκτήματα και τα μειονεκτήματα της χρήσης του Adobe InDesign ως Prototyping and Wireframe Tool
Για αρκετό καιρό τώρα, το Adobe InDesign δεν ήταν μόνο μια εφαρμογή δημοσίευσης επιτραπέζιων υπολογιστών, αλλά έχει επίσης χρησιμοποιηθεί ευρέως για ψηφιακές εκδόσεις και δημιουργία EPUB. Υπάρχουν επίσης αρκετοί λόγοι για τους οποίους είναι επίσης ένα κατάλληλο εργαλείο για τη συρματοπλεκτική:
- Κύριες σελίδες - Μπορείτε να εφαρμόσετε γρήγορα και με συνέπεια στοιχεία καθολικού σχεδιασμού, όπως πλοήγηση, κεφαλίδες, υποσέλιδα κ.λπ., χρησιμοποιώντας κύριες σελίδες. Μπορείτε να δημιουργήσετε όσες κύριες σελίδες χρειάζεστε και επιπλέον, μια κύρια σελίδα μπορεί να βασίζεται σε άλλη.
- Solid Grid Support - Σας επιτρέπει να δημιουργείτε και να εφαρμόζετε εύκολα διαφορετικούς τύπους πλεγμάτων, συμπληρωματικές στήλες, οριζόντιους και κατακόρυφους οδηγούς για τη δημιουργία μονάδων και υπο-πλέγματος για μεγαλύτερη πολυπλοκότητα και ακρίβεια.
- Εναλλακτικές διατάξεις: ενεργοποίηση πλαισίων καλωδίων για πολλές συσκευές και προσανατολισμούς στο ίδιο αρχείο.
- CC Libraries - Δημιουργεί μια βιβλιοθήκη διαφορετικών επαναχρησιμοποιήσιμων στοιχείων όπως αντικείμενα, χρώματα, χαρακτήρες και στυλ παραγράφων που χρησιμοποιούνται συνήθως. Δημιουργήστε στοιχεία στο InDesign, Illustrator ή Photoshop ή με την εφαρμογή Adobe Capture για κινητά, όποια και αν προτιμάτε.
- Επίπεδα - Προσφέρει τη δυνατότητα επιλεκτικής οργάνωσης, ομαδοποίησης, εμφάνισης / απόκρυψης και κλειδώματος / ξεκλειδώματος αντικειμένων και περιεχομένου στο wireframe. Κάθε σελίδα σε ένα πολυσέλιδο έγγραφο InDesign έχει τον ίδιο αριθμό και σειρά επιπέδων. Όλες οι αλλαγές που κάνετε σε επίπεδα αντικατοπτρίζονται σε όλες τις σελίδες, όπως ορατότητα, σειρά στοίβαξης ή κατάργηση.
- Στυλ και πίνακες - Σας δίνει πλήρη έλεγχο της εμφάνισης του κειμένου, των αντικειμένων και των πινάκων σας χρησιμοποιώντας στυλ InDesign. Τα στυλ μπορούν να κληρονομηθούν το ένα από το άλλο και να παρέχουν τη δυνατότητα να ενσωματώσουν εύκολα την επιθυμητή μορφή σε όλο το έγγραφο. Η δημιουργία και μορφοποίηση πινάκων για χρήση ως στοιχεία περιεχομένου wireframe ή ακόμα και ως βοηθήματα διάταξης είναι πολύ απλή.
- Ενσωμάτωση Typekit: Σε mockup hi-fi, μπορείτε να χρησιμοποιήσετε οποιαδήποτε από τις γραμματοσειρές Typekit που συγχρονίζονται με την επιφάνεια εργασίας.
- Διαδραστικότητα και κινούμενες εικόνες: Μπορείτε να χρησιμοποιήσετε τις ενσωματωμένες λειτουργίες κινούμενης εικόνας και διαδραστικότητας του Adobe InDesign για να δημιουργήσετε διαφορετικές καταστάσεις στοιχείων σχεδίασης ιστού ή εφαρμογών για πρωτότυπο αλληλεπίδρασης. Οι περισσότεροι άνθρωποι χρησιμοποιούν αυτές τις δυνατότητες κατά τη δημιουργία περιοδικών για σταθερή διάταξη EPUB εξαγωγής και λύση ψηφιακών εκδόσεων, αλλά είναι επίσης κατάλληλα για πρωτότυπα.
- Επιλογές εξαγωγής: Το InDesign μπορεί να εξάγει τα πλαίσια και τα πρωτότυπα που δημιουργείτε σε διάφορες μορφές. Τα διαδραστικά PDF πιθανότατα θα είναι η μορφή επιλογής σας στις περισσότερες περιπτώσεις, αλλά μπορείτε επίσης να χρησιμοποιήσετε τη δυνατότητα Δημοσίευση στο Διαδίκτυο για να μετατρέψετε το έγγραφό σας σε διαδραστικό HTML, το οποίο μπορεί να προβληθεί σε σύγχρονα προγράμματα περιήγησης επιτραπέζιων υπολογιστών και κινητών. Δυστυχώς, δεν έχετε μεγάλο έλεγχο της εξαγωγής χρησιμοποιώντας το Publish Online και τα εξαγόμενα αρχεία φιλοξενούνται σε διακομιστές της Adobe. Μπορείτε να μοιραστείτε το πρωτότυπο URL με τον πελάτη σας ή να το ενσωματώσετε στον ιστότοπό σας. Για μεγαλύτερο έλεγχο και εξαγωγή απευθείας σε HTML5, μπορείτε να χρησιμοποιήσετε την επέκταση in5 του Ajar Productions .
Adobe InDesign Έχει πολλά πλεονεκτήματα για χρήση ως εργαλείο πρωτοτύπων και σύρματος, αλλά έχει επίσης ορισμένα μειονεκτήματα:
- Έλλειψη προτύπων και προκαθορισμένων στοιχείων wireframe. Επειδή το InDesign δεν προορίζεται να αποτελέσει εργαλείο συρματοπλέγματος, πρέπει να δημιουργήσετε και να προετοιμάσετε μόνοι σας πρότυπα και αντικείμενα αντικειμένου. (Θα σας δείξω πώς να χειριστείτε αυτό το βήμα αργότερα στο άρθρο.) Τα καλά νέα είναι ότι το μεγαλύτερο μέρος αυτής της εργασίας θα γίνει μόνο μία φορά και μετά από λίγες ώρες εργασίας, θα είστε έτοιμοι να ξεκινήσετε τη διαδικασία σύρματος καλωδίωσης InDesign. Επιπλέον, υπάρχουν πολλοί πόροι και κιτ wireframe που μπορείτε να κατεβάσετε από το Διαδίκτυο, οπότε δεν χρειάζεται να σχεδιάσετε τα πάντα μόνοι σας.
- Οι δυνατότητες αλληλεπίδρασης και κινούμενης εικόνας είναι περιορισμένες: Παρόλο που μπορείτε εύκολα να συνδέσετε σελίδες και να προσθέσετε κινούμενα σχέδια και διαδραστικότητα, η διαδικασία μπορεί μερικές φορές να διαρκέσει πολύ. Μερικά από τα απλά εργαλεία αλληλεπίδρασης δεν είναι πολύ διαισθητικά. Εάν δεν έχετε χρησιμοποιήσει τις δυνατότητες διαδραστικότητας του InDesign, θα πρέπει να ξεπεράσετε μια μικρή καμπύλη εκμάθησης για να τις εφαρμόσετε αποτελεσματικά.
- Τα έγγραφα του InDesign δεν μπορούν να εξαχθούν απευθείας ως πολυεπίπεδη αρχεία PSD. Εάν κάνετε την οπτική σας σχεδίαση στο Adobe Photoshop και θέλετε να έχετε ξεχωριστά στοιχεία για να δημιουργήσετε το σχέδιό σας, θα πρέπει πρώτα να εξάγετε τα wireframes σας σε PDF. Στη συνέχεια, θα πρέπει να ανοίξετε το PDF στο Illustrator και να το εξαγάγετε ξανά ως πολυεπίπεδο PSD. Τα άτομα που εργάζονται σε Mac μπορούν επίσης να χρησιμοποιήσουν ένα δωρεάν σενάριο γραμμένο από Ρομπ Ημέρα για να αποθηκεύσετε αρχεία InDesign ως πολυεπίπεδο PSD.
Η καλή προετοιμασία του wireframe είναι η μισή δουλειά
Ξεκινήστε προσαρμόζοντας το περιβάλλον εργασίας σας. Εάν δεν έχετε ήδη αποθηκευμένο χώρο εργασίας στο Illustrator και στο InDesign για αυτόν τον τύπο εργασίας, δημιουργήστε έναν. Στο Illustrator, ξεκινήστε με τον προκαθορισμένο χώρο εργασίας ιστού και προσαρμόστε τον σύμφωνα με τις προτιμήσεις σας: κλείστε τα πάνελ που δεν χρησιμοποιείτε συχνά, βεβαιωθείτε ότι έχετε ανοίξει αυτά που θα χρησιμοποιήσετε και, στη συνέχεια, προσαρμόστε τα ώστε να ταιριάζουν στο στυλ εργασίας σας.
Όταν τελειώσετε, αποθηκεύστε τον χώρο εργασίας επιλέγοντας Παράθυρο> Χώρος εργασίας> Νέος χώρος εργασίας. Κάντε το ίδιο στο InDesign χρησιμοποιώντας το χώρο εργασίας Digital Publishing ως εκκινητή.
Συγκρότημα πλαισίου καλωδίων / μακέτες / πρωτότυπα κιτ
Μια αποτελεσματική ροή εργασίας wireframing χρησιμοποιώντας το Illustrator και το InDesign απαιτεί να αφιερώσετε λίγο χρόνο δημιουργώντας το κιτ στοιχείων UI ως πρώτη εργασία. Από την εισαγωγή του Adobe Creative Cloud, οι βιβλιοθήκες CC είναι ο καλύτερος τρόπος αποθήκευσης όλων των στοιχείων του κιτ UI.
Μπορείτε να δημιουργήσετε μία ή περισσότερες βιβλιοθήκες για το wireframing και το πρωτότυπο. Για παράδειγμα, μπορείτε να δημιουργήσετε μια βιβλιοθήκη για wireframing ιστότοπου, μια άλλη για εφαρμογές iOS, μια τρίτη για εφαρμογές Android και ούτω καθεξής.
Για να δημιουργήσετε μια βιβλιοθήκη Adobe CC, ανοίξτε τον πίνακα 'Βιβλιοθήκες' και επιλέξτε 'Δημιουργία νέας βιβλιοθήκης' από το μενού χάμπουργκερ του πίνακα. Τα στοιχεία που τοποθετείτε στις Βιβλιοθήκες μπορούν να δημιουργηθούν και να χρησιμοποιηθούν σε διαφορετικές εφαρμογές της Adobe για επιτραπέζιους υπολογιστές ή κινητές συσκευές σε όλες τις συσκευές στις οποίες συνδέεστε με το Adobe ID σας. Αυτό σημαίνει ότι μπορείτε να ξεκινήσετε το έργο στο iPad ή το iPhone σας, να συνεχίσετε στην επιφάνεια εργασίας σας στο γραφείο και να κάνετε αλλαγές της τελευταίας στιγμής στον φορητό υπολογιστή σας στο σπίτι με τα ίδια διαθέσιμα στοιχεία σε όλες τις συσκευές.
Εάν εργάζεστε ως μέρος μιας μεγαλύτερης ομάδας, οι πόροι της βιβλιοθήκης μπορούν να μοιραστούν μεταξύ των μελών της ομάδας. Οι βιβλιοθήκες μπορούν να περιέχουν χρώματα, γραφικά, στυλ επιπέδων (μόνο στο Photoshop), καθώς και στυλ παραγράφων και χαρακτήρων. Προσθέστε στοιχεία σε βιβλιοθήκες κάνοντας κλικ στο αντίστοιχο κουμπί στο κάτω μέρος του πίνακα CC Library με επιλεγμένο το αντίστοιχο στοιχείο. Μπορείτε επίσης να προσθέσετε γραφικά στοιχεία σύροντάς τα απευθείας από τον πίνακα γραφικών σας στον πίνακα Βιβλιοθήκες.
Τα περιουσιακά στοιχεία στις βιβλιοθήκες οργανώνονται ανά κατηγορία. Παραμείνετε με καλές πρακτικές και μετονομάστε κάθε στοιχείο με ένα νόημα όνομα. Οι βιβλιοθήκες μπορούν να αναζητηθούν και η εύρεση ενός στοιχείου πληκτρολογώντας την αρχή του ονόματός σας θα σας εξοικονομήσει πολύ χρόνο αργότερα, ειδικά όταν έχετε πολλά διαφορετικά στοιχεία στις βιβλιοθήκες σας. Για να αλλάξετε το όνομα ενός στοιχείου, κάντε διπλό κλικ σε αυτό και πληκτρολογήστε ένα νέο.
Δημιουργήστε ένα Wireframe Component Kit
Παρόλο που το Adobe InDesign διαθέτει ορισμένα βασικά εργαλεία σχεδίασης που μοιάζουν αρκετά με το Illustrator, το Illustrator είναι μια πολύ καλύτερη επιλογή για τη σχεδίαση διαφόρων στοιχείων στο wireframe σας. Κατά γενικό κανόνα, δημιουργήστε όλα τα στοιχεία του κιτ που απαιτούν ένα πιο περίπλοκο σχέδιο από τα βασικά γεωμετρικά σχήματα στο Illustrator. Δημιουργήστε απλούστερα στοιχεία που περιέχουν κείμενο που θα χρειαστεί να αλλάξετε στη διάταξη, όπως απλά κουμπιά στο InDesign.
σχεδιασμός ιστοσελίδας ηλεκτρονικού εμπορίου
Για να ξεκινήσετε, δημιουργήστε μια λίστα με όλα τα στοιχεία που θα χρειαστείτε στο wireframe, όπως στοιχεία πλοήγησης, στοιχεία σελίδας, όπως εικόνες, πλαίσια βίντεο και πλαίσια κειμένου, εικονίδια, είδωλα, στοιχεία φόρμας και όλα τα άλλα στοιχεία της διασύνδεσης. Μόλις δημιουργηθεί η λίστα σας, μπορείτε να μεταβείτε στο Illustrator και στο InDesign για να δημιουργήσετε αυτά τα στοιχεία.
Ξεκινήστε δημιουργώντας ένα νέο έγγραφο για στοιχεία wireframe ή mockup kit. Ελέγξτε ξανά αν έχετε επιλέξει Προφίλ Ιστού / Συσκευής στο Illustrator ή Πρόθεση Ιστού / Ψηφιακής Έκδοσης στο παράθυρο διαλόγου 'Νέο έγγραφο'. Αυτό διασφαλίζει ότι τα pixel χρησιμοποιούνται ως μονάδες και η λειτουργία χρώματος έχει οριστεί σε RGB.
Κάντε τα περιουσιακά στοιχεία του κιτ wireframe όσο το δυνατόν πιο απλά, καθώς πρέπει να παρέχουν γρήγορες οπτικές ενδείξεις για το τι αντιπροσωπεύουν χωρίς να είναι πολύ λεπτομερείς. Θα πρέπει να χρησιμοποιείτε πολύ περιορισμένες παλέτες χρωμάτων, κατά προτίμηση μερικές αποχρώσεις του γκρι. Τονίστε οπτικά τα στοιχεία που είναι πιο σημαντικά, χρωματίζοντάς τα με πιο σκούρες αποχρώσεις ή δίνοντάς τους μεγαλύτερη αντίθεση.
Για υψηλότερα πρότυπα πιστότητας ή πρωτότυπα , δημιουργήστε κιτ UI με πιο λεπτομερή στοιχεία που χρησιμοποιούν την αντίστοιχη παλέτα χρωμάτων κάθε έργου. Για εύκολη πρόσβαση σε παλέτες χρωμάτων, προσθέστε τις στις βιβλιοθήκες CC.
Στοιχεία Adobe Illustrator σε βιβλιοθήκες CC
Τα στοιχεία που προσθέτετε σε βιβλιοθήκες από το Illustrator συνδέονται από προεπιλογή (από το Adobe CC 2015). Αυτό σημαίνει ότι όταν τροποποιείτε ένα στοιχείο στη βιβλιοθήκη του Illustrator, οι αλλαγές αντικατοπτρίζονται σε όλες τις παρουσίες που χρησιμοποιούνται. Εάν θέλετε να προσθέσετε ένα αποσυνδεδεμένο στοιχείο στο έγγραφο, πατήστε το πλήκτρο επιλογής / alt ενώ το σύρετε από τον πίνακα.
Όταν χρησιμοποιείτε στοιχεία που συνδέονται με το Illustrator στο InDesign, θα έχουν ένα μικρό εικονίδιο cloud στην επάνω αριστερή γωνία όταν το έγγραφο προβάλλεται σε λειτουργία 'Κανονική'. Όλα αυτά αναφέρονται επίσης στον πίνακα 'Σύνδεσμοι'. Εάν τροποποιήσετε ένα στοιχείο βιβλιοθήκης στο Illustrator, οι αλλαγές στο έγγραφο InDesign δεν θα γίνουν αυτόματα. Το εικονίδιο cloud θα αντικατασταθεί με ένα θαυμαστικό ενός τροποποιημένου συνδέσμου και θα πρέπει να ενημερώσετε αυτούς τους συνδέσμους.
Τα στοιχεία του InDesign που τοποθετείτε σε ένα έγγραφο του InDesign δεν είναι συνδεδεμένα. Αυτό σημαίνει ότι μπορείτε να επεξεργαστείτε παρουσίες ανεξάρτητα από το πρωτότυπο και όταν τροποποιηθεί το αρχικό στοιχείο, αυτές οι αλλαγές δεν αντικατοπτρίζονται σε στοιχεία που έχουν ήδη τοποθετηθεί στη διάταξη.
Λάβετε υπόψη αυτές τις ιδιότητες κατά τη δημιουργία wireframes: Προσθέστε στοιχεία στη βιβλιοθήκη από το Illustrator όταν υποθέσετε ότι θα πρέπει να τροποποιηθούν και να ενημερωθούν παγκοσμίως ή να τα προσθέσετε από το InDesign όταν γνωρίζετε ότι θέλετε να τις τροποποιήσετε ξεχωριστά. Σημειώστε ότι μπορείτε επίσης να δημιουργήσετε γραφικά στο Illustrator, να τα αντιγράψετε / να επικολλήσετε στο InDesign και, στη συνέχεια, να τα τροποποιήσετε εάν είναι απαραίτητο προτού τα προσθέσετε στη βιβλιοθήκη ως στοιχείο του InDesign.
Εάν ξεχάσετε ποιο γραφικό στοιχείο δημιουργείται με ποια εφαρμογή, κοιτάξτε τη δεξιά πλευρά κάθε στοιχείου στον πίνακα Βιβλιοθήκη ενώ χρησιμοποιείτε το 'Εμφάνιση στοιχείων ως λίστα'.
Adobe InDesign: Ευελιξία με περιεχόμενο και αντίγραφο
Για να βεβαιωθείτε ότι μπορείτε εύκολα να αλλάξετε το αντίγραφο και την τυπογραφία στα wireframes σας, δημιουργήστε κοντέινερ κειμένου στο InDesign. Το InDesign έχει μια ωραία δυνατότητα για τη συμπλήρωση πλαισίων κειμένου με κείμενο κράτησης θέσης. Όταν σχεδιάζετε ένα πλαίσιο κειμένου, κάντε δεξί κλικ πάνω του και επιλέξτε Συμπληρώστε με κείμενο δοκιμής .
Προσθέστε πλαίσια κειμένου στη βιβλιοθήκη Adobe όπως οποιοδήποτε άλλο γραφικό στοιχείο - σύροντας. Όταν χρησιμοποιείτε αυτά τα στοιχεία κειμένου αργότερα ως μέρος του σχεδιασμού του wireframe, μπορείτε να τροποποιήσετε το πλαίσιο κειμένου καθώς και το περιεχόμενό του στο wireframe σας.
Επίσης, σκεφτείτε να κάνετε κουμπιά ως στοιχεία διεπαφής χρήστη στο InDesign. Για να δημιουργήσετε ένα κουμπί, δημιουργήστε ένα πλαίσιο κειμένου, πληκτρολογήστε το κείμενο και, στη συνέχεια, χρησιμοποιήστε το αντικείμενο> Επιλογές πλαισίου κειμένου για να ορίσετε το διάστημα παρεμβολής. Προσαρμόστε την κάθετη αιτιολόγηση του κειμένου μέσα σε ένα πλαίσιο επιλέγοντας την επιθυμητή επιλογή από το αναπτυσσόμενο μενού 'Ευθυγράμμιση'.
Μεταβείτε στην καρτέλα 'Αυτοματοποίηση' και επιλέξτε το κατάλληλο μέγεθος αυτόματου μεγέθους (που πιθανώς είναι μόνο πλάτος) και ένα βολικό σημείο αναφοράς. Εάν δεν θέλετε να επιτρέψετε στο InDesign να κατακερματιστεί το κείμενό σας σε περισσότερες από μία γραμμές, ελέγξτε την επιλογή 'Χωρίς διάστιχο'.
Χρησιμοποιήστε υπάρχοντες πόρους
Υπάρχουν πολλά διαθέσιμα πακέτα Adobe Illustrator και UI στο Διαδίκτυο που μπορείτε να αγοράσετε ή ακόμα και να κατεβάσετε δωρεάν εάν θέλετε μια έτοιμη λύση. Ίσως έχετε ήδη στοιχεία που μπορείτε να εξαγάγετε από τα ολοκληρωμένα έργα σας. Ανοίξτε αυτά τα έγγραφα, τροποποιήστε αντικείμενα που δημιουργήθηκαν προηγουμένως, και τοποθετήστε τα στις αντίστοιχες βιβλιοθήκες τους.
Εάν σχεδιάζετε μια συγκεκριμένη πλατφόρμα, για παράδειγμα μια εφαρμογή iOS ή Android, φροντίστε να διαβάσετε προσεκτικά τις οδηγίες διεπαφής και να χρησιμοποιήσετε τους κατάλληλους πόρους. Μπορεί να είναι βολικό να έχετε στοιχεία διεπαφής χρήστη που είναι ειδικά για διάφορες πλατφόρμες στο κιτ σας.
Μην εστιάζετε υπερβολικά στην προσπάθεια λογαριασμού για κάθε στοιχείο ή μελλοντική κατάσταση στις βιβλιοθήκες σας πριν ξεκινήσετε την τρέχουσα διαδικασία wireframing. Μπορείτε να προσθέσετε στοιχεία στις βιβλιοθήκες σας αργότερα και να τα αναπτύξετε καθώς πηγαίνετε.
Δημιουργία προτύπων Wireframe InDesign
Απομένει ένα ακόμη σημαντικό βήμα προετοιμασίας: δημιουργία των προτύπων InDesign που θα χρησιμοποιήσετε για να περιμένετε. Ξεκινήστε δημιουργώντας ένα νέο έγγραφο με σκοπό την διαδικτυακή ή ψηφιακή δημοσίευση και ορίστε τα κατάλληλα μεγέθη σελίδων για τις οθόνες για τις οποίες σχεδιάζετε.
Καθώς συνιστάται να χρησιμοποιείτε κάποιο τύπο πλέγματος για να σχεδιάσετε τα στοιχεία του wireframe, να ορίσετε τα περιθώρια και να δημιουργήσετε ένα πλέγμα στηλών ρυθμίζοντας τον επιθυμητό αριθμό στηλών και το διάκενο. Μπορείτε να αλλάξετε αυτές τις ρυθμίσεις αργότερα από το Διάταξη> Περιθώρια και στήλες με την αντίστοιχη κύρια σελίδα (ή σελίδες) επιλεγμένη στον πίνακα Σελίδες.
Εάν χρειάζεστε επιπλέον οριζόντιους οδηγούς και κατακόρυφους οδηγούς, δημιουργήστε τους χειροκίνητα ή δημιουργήστε ένα επιπλέον πλέγμα χρησιμοποιώντας Διάταξη> Δημιουργία οδηγών. Κατά τη δημιουργία πλέγματος, είναι χρήσιμο να χρησιμοποιήσετε ένα από τα διαδικτυακά εργαλεία υπολογισμού πλέγματος όπως Πλέγμα .
Μπορείτε επίσης να δημιουργήσετε πρόσθετα πρότυπα για σκοπούς παρουσίασης με πρότυπα συσκευών ως πλαίσιο για τα wireframes σας. Δεδομένου ότι ένα έγγραφο InDesign μπορεί να συνδεθεί με άλλο, μπορείτε να δημιουργήσετε wireframes σε ένα έγγραφο InDesign και στη συνέχεια να το τοποθετήσετε σε άλλο έγγραφο για παρουσιάσεις.
Ποιο από τα παρακάτω πρέπει να ληφθεί υπόψη κατά τον υπολογισμό της τερματικής τιμής ενός έργου αντικατάστασης;
Αν και μπορεί να φαίνεται περίπλοκο στην αρχή, αυτή είναι μια πολύ απλή και αποτελεσματική ροή εργασίας. Η διατήρηση των πραγματικών πλαισίων καλωδίων σε ξεχωριστό έγγραφο καθιστά εύκολη τη συνέχιση της δημιουργίας από εγκεκριμένα πλαίσια καλωδίων σε ένα γυαλισμένο οπτικό σχέδιο.
Ένα άλλο απλό πράγμα είναι να δημιουργήσετε πρότυπα έτοιμα για παρουσίαση για να τοποθετήσετε wireframes, να προσθέσετε ετικέτες και σχόλια και να είστε σε θέση να δείξετε την καλύτερη λύση στον πελάτη. Όταν πραγματοποιείτε τροποποιήσεις σε ένα αρχείο wireframe, απλώς ενημερώστε το όπως οποιοσδήποτε άλλος σύνδεσμος σε ένα έγγραφο παρουσίασης και ¡ τα-νταα! Όλες οι αλλαγές είναι και στην παρουσίασή σας.
Στον πίνακα 'Επίπεδα', μπορείτε να προετοιμάσετε ξεχωριστά επίπεδα για διαφορετικούς τύπους περιεχομένου: στοιχεία διεπαφής χρήστη, διαδραστικές λειτουργίες, χειρονομίες, ετικέτες και σημειώσεις. Εάν χρειάζεστε περισσότερα επίπεδα για ένα συγκεκριμένο έργο, μπορείτε εύκολα να τα προσθέσετε ανά πάσα στιγμή κατά τη διάρκεια της διαδικασίας καλωδίωσης.
Όταν ολοκληρώσετε τη δημιουργία, αποθηκεύστε τα πρότυπά σας ως αρχεία προτύπων InDesign.indt. Μόλις αποθηκευτούν όλα τα πρότυπα που χρειάζεστε, είστε έτοιμοι να ξεκινήσετε αποτελεσματικά το wireframing.
Κατασκευή πλαισίων καλωδίων
Πρώτα πράγματα πρώτα: ξεκινήστε με την κύρια σελίδα. Σύρετε όλα τα παγκόσμια στοιχεία που θα είναι τα ίδια σε όλες τις οθόνες του έργου σας από τη βιβλιοθήκη. Εάν σχεδιάζετε έναν ιστότοπο, αυτές συνήθως είναι επικεφαλίδες με λογότυπο, πλοήγηση και υποσέλιδο. Εφόσον μπορείτε να δημιουργήσετε περισσότερες από μία κύριες σελίδες και μπορούν να κληρονομήσουν ο ένας από τον άλλο, μπορείτε να επωφεληθείτε από την ένθεση κύριων σελίδων.
Για παράδειγμα, ανάλογα με το έργο, μπορείτε να δημιουργήσετε μια κύρια σελίδα για ένα στοιχείο διεπαφής χρήστη, όπως ένα αναδυόμενο παράθυρο διαμόρφωσης ή διαλόγου και, στη συνέχεια, να δημιουργήσετε νέους κύριους με βάση το πρώτο κύριο, αλλάζοντας μόνο τα στοιχεία που πρέπει να είναι διαφορετικά.
Δεν μπορείτε να επιλέξετε, να αλλάξετε ή να διαγράψετε κύρια στοιχεία σε κανονικές σελίδες εγγράφων, εκτός εάν τα κάνετε κλικ ενώ κρατάτε πατημένο το Command / Control + Shift για να παρακάμψετε το κύριο. Μόλις το στοιχείο σας παρακαμφθεί, μπορείτε να αλλάξετε οποιαδήποτε από τις παραμέτρους σας ή να το καταργήσετε εντελώς από τη διάταξη.
Λάβετε υπόψη ότι ακόμη και όταν παρακάμψετε το στοιχείο, οι παράμετροι που δεν έχετε τροποποιήσει θα εξακολουθούν να κληρονομούνται από τον κύριο. Για παράδειγμα, εάν παρακάμψετε ένα στοιχείο αλλάζοντας το χρώμα του, το μέγεθός του δεν θα αλλάξει καθώς είναι ακόμα συνδεδεμένο με το κύριο. Επίσης, εάν το αλλάξετε στην κύρια σελίδα, θα τροποποιηθεί επίσης στο στοιχείο που παρακάμψατε νωρίτερα.
Κατά την εισαγωγή πρόσθετων σελίδων στο έγγραφό σας, θυμηθείτε να τις βάλετε στους αντίστοιχους κύριους. Εάν πρέπει να αλλάξετε το κύριο για τις σελίδες που βρίσκονται ήδη στη διάταξη, επιλέξτε τις στον πίνακα 'Σελίδες', κάντε δεξί κλικ και επιλέξτε 'Εφαρμογή κύριου σε σελίδες'. Χρησιμοποιήστε τους πόρους στη βιβλιοθήκη και οργανώστε τους χρησιμοποιώντας τους έξυπνους οδηγούς και τις επιλογές 'Ευθυγράμμιση' για να δημιουργήσετε τα τελικά σχέδια διεπαφής χρήστη για τη διεπαφή χρήστη.
Εάν δημιουργείτε διατάξεις για περισσότερα από ένα μεγέθη οθόνης, δημιουργήστε εναλλακτικές διατάξεις από το Layouts> Create Alternate Layout ή τον πίνακα 'Pages'. Μπορείς να χρησιμοποιήσεις υγροί κανόνες σχεδιασμού κατά τη δημιουργία εναλλακτικών διατάξεων για αυτόματη υιοθέτηση στοιχείων σελίδας από το ένα μέγεθος και τον προσανατολισμό στο άλλο ή μπορείτε να τα ελέγξετε χειροκίνητα. Για να εφαρμόσετε και να δοκιμάσετε κανόνες υγρού σχεδιασμού, χρησιμοποιήστε το εργαλείο 'Σελίδα' ή ανοίξτε το παράθυρο Παράθυρο> Διαδραστικό> Σχεδιασμός υγρού.
Προσθέστε διαδραστικότητα
Το Adobe InDesign διαθέτει πολλές δυνατότητες διαδραστικότητας που μπορείτε να επωφεληθείτε κατά τη δημιουργία καλωδίων ή πρωτοτύπων. Οι δυνατότητες που θα συμπεριλάβετε εξαρτώνται από την τελική μορφή που θα χρειαστείτε για τα wireframes, τα πρωτότυπα ή τις παρουσιάσεις σας.
Εάν κάνετε εξαγωγή ως PDF, η διαδραστικότητα θα είναι περιορισμένη, αλλά μπορείτε τουλάχιστον να κάνετε τους συνδέσμους μεταξύ οθονών να λειτουργούν χρησιμοποιώντας τον πίνακα υπερσυνδέσμων για να τους δημιουργήσετε. Επιλέξτε το στοιχείο που θέλετε να συμπεριφέρεστε ως σύνδεσμος και κάντε κλικ στο εικονίδιο 'Νέος υπερσύνδεσμος'. Στο αναπτυσσόμενο μενού 'Σύνδεσμος', επιλέξτε 'Σελίδα' και εισαγάγετε τον επιθυμητό αριθμό σελίδας. Επαναλάβετε αυτήν την ενέργεια σε όλα τα στοιχεία που θέλετε να ενεργείτε ως σύνδεσμοι μεταξύ των οθονών.
Μπορείτε επίσης να προσθέσετε υπερσυνδέσμους σε αντικείμενα που βρίσκονται σε κύριες σελίδες, τα οποία μπορούν να είναι εξοικονόμηση σε πραγματικό χρόνο. Δημιουργήστε συνδέσμους στην κύρια σελίδα μία φορά και θα λειτουργήσουν σε όλες τις οθόνες στο έγγραφό σας.
Μπορείτε να δημιουργήσετε κουμπιά από οποιοδήποτε γραφικό, κείμενο, εικόνα ή ομάδα στοιχείων. Για να δημιουργήσετε ένα κουμπί από ένα επιλεγμένο αντικείμενο, χρησιμοποιήστε τον πίνακα παραθύρων> Διαδραστικό> Κουμπιά και φόρμες και κάντε κλικ στο εικονίδιο 'Μετατροπή σε κουμπί'.
Τα κουμπιά μπορούν να δημιουργήσουν διαφορετικές καταστάσεις για κανονική εμφάνιση, ανατροπή και κλικ. Για να προσθέσετε ανατροπή ή καταστάσεις κουμπιού, κάντε κλικ σε αυτές στον πίνακα Κουμπιά και επεξεργαστείτε την εμφάνιση του κουμπιού για κάθε κατάσταση. Για να προσθέσετε μια ενέργεια σε ένα κουμπί, κάντε κλικ στο σύμβολο συν και επιλέξτε το από τη λίστα. Λάβετε υπόψη ότι οι ενέργειες στο SWF / EPUB δεν θα λειτουργούν σε διαδραστικά αρχεία PDF.
Για να δημιουργήσετε αναδυόμενα παράθυρα, επιλέξτε Εμφάνιση / Απόκρυψη κουμπιών και φορμών. Για να αποκρύψετε τα κουμπιά μέχρι να ενεργοποιηθεί η επιλογή, επιλέξτε 'Απόκρυψη έως λήψη'. Μπορείτε να συμπεριλάβετε αντικείμενα πολλαπλών καταστάσεων σε ένα διαδραστικό PDF, αλλά μόνο εξάγοντάς τα ως αρχείο SWF πρώτα και έπειτα τοποθετώντας τα ξανά στη διάταξη InDesign για εξαγωγή PDF. Αυτή η ροή εργασίας είναι κουραστική και τα αρχεία PDF δεν μπορούν να προβληθούν σωστά σε όλους τους αναγνώστες PDF, οπότε προσπαθήστε να αποφύγετε να το κάνετε, εκτός εάν είναι πραγματικά απαραίτητο.
Εάν θέλετε να μετατρέψετε το έγγραφό σας σε πρωτότυπο HTML χρησιμοποιώντας τη λειτουργία Publish Online του InDesign CC 2015, μπορείτε να χρησιμοποιήσετε πολλές περισσότερες διαδραστικές επιλογές όπως κινούμενα σχέδια, αντικείμενα πολλαπλών καταστάσεων και διάφορες ενέργειες κουμπιών, συμπεριλαμβανομένων όλων εκείνων που προορίζονται για εξαγωγή SWF / EPUB.
Μπορείτε να προσθέσετε απλές κινούμενες εικόνες χρησιμοποιώντας τον πίνακα Animation και να επιλέξετε μία από τις ενσωματωμένες προεπιλογές από το αναπτυσσόμενο μενού και να ορίσετε τις ιδιότητές του. Ένα αντικείμενο μπορεί να έχει μόνο μία κινούμενη εικόνα, αλλά αν πρέπει να προσθέσετε περισσότερα, ομαδοποιήστε το αντικείμενο σας με ένα κενό πλαίσιο και χρησιμοποιήστε τη νέα κινούμενη εικόνα σε αυτό το νέο αντικείμενο.
Για στοιχεία διεπαφής χρήστη που απαιτούν εμφάνιση διαφορετικών καταστάσεων, δημιουργήστε ένα αντικείμενο πολλών καταστάσεων. Δημιουργήστε ένα ξεχωριστό αντικείμενο για κάθε κατάσταση. Τα αντικείμενα μπορεί να είναι ένα μόνο στοιχείο (εικόνα, πλαίσιο κειμένου, γραφικό) ή μια ομάδα διαφορετικών στοιχείων. Ανοίξτε τον πίνακα Παράθυρο> Διαδραστικό> Κατάσταση αντικειμένων, επιλέξτε όλα τα αντικείμενα που δημιουργήσατε για το αντικείμενο πολλαπλών καταστάσεων και κάντε κλικ στο κουμπί 'Νέο' στο κάτω μέρος του πίνακα.
Αφού δημιουργήσετε το αντικείμενο πολλών καταστάσεων, θα χρειαστεί να δημιουργήσετε κουμπιά για εναλλαγή από τη μία κατάσταση αντικειμένου στην άλλη. Μετάβαση στο 'Επόμενη κατάσταση' ή Μετάβαση στο 'Προηγούμενες ενέργειες κατάστασης' αποκαλύπτει την κατάσταση του συγκεκριμένου αντικειμένου με την ενέργεια 'Μετάβαση σε κατάσταση'.
Εάν θέλετε να έχετε ένα πλαίσιο με δυνατότητα κύλισης στη δομή / πρωτότυπο σας, ο ευκολότερος τρόπος δημιουργίας ενός είναι με τη χρήση Καθολικά κουτιά κύλισης Επέκταση Ajar Productions. Μετά τη λήψη και εγκατάσταση της επέκτασης, μπορείτε να τη χρησιμοποιήσετε ως πίνακα ελέγχου του InDesign. Για ένα πλαίσιο με δυνατότητα κύλισης, θα πρέπει να δημιουργήσετε περιεχόμενο και ένα πλαίσιο για ένα κοντέινερ.
μετατρέψτε το raspberry pi σε διακομιστή ιστού
Το περιεχόμενο με δυνατότητα κύλισης μπορεί να είναι ένα πλαίσιο κειμένου, μια εικόνα ή πολλά ομαδοποιημένα στοιχεία. Όταν ολοκληρώσετε τη δημιουργία του περιεχομένου και του πλαισίου κοντέινερ, επιλέξτε το περιεχόμενο και Επεξεργασία> Αποκοπή. Στη συνέχεια, επιλέξτε το κοντέινερ και επικολλήστε το περιεχόμενο μέσα χρησιμοποιώντας Επεξεργασία> Επικόλληση σε. Επιλέξτε το κοντέινερ και χρησιμοποιώντας τα Universal Scroll Boxes, ορίστε την επιθυμητή κατεύθυνση κύλισης.
Συνδυάζοντας κουμπιά, αντικείμενα πολλαπλών καταστάσεων, κινούμενα σχέδια και πλαίσια με δυνατότητα κύλισης, μπορείτε να αποκτήσετε μια πλούσια διαδραστική εμπειρία. Για να ελέγξετε τη διαδραστικότητα στο InDesign, χρησιμοποιήστε τον πίνακα προεπισκόπησης στο EPUB Interactivity. Μπορείτε να κάνετε προεπισκόπηση μίας σελίδας ή ολόκληρου του εγγράφου. Αναπτύξτε τον πίνακα προεπισκόπησης όπως απαιτείται.
Εάν δεν έχετε χρησιμοποιήσει τις διαδραστικές δυνατότητες του Adobe InDesign, να είστε προετοιμασμένοι καθώς υπάρχει μια μικρή καμπύλη εκμάθησης στην αρχή. Αλλά με λίγη εξάσκηση και κάποια δοκιμή και λάθος, θα τα καταλάβετε γρήγορα.
Εξαγωγή τελικών εγγράφων
Όταν ολοκληρώσετε τη δημιουργία των wireframes και των αρχείων παρουσίασης, το μόνο που μένει είναι να δείξετε τις καλύτερες ιδέες σας στον πελάτη με τον καλύτερο δυνατό τρόπο. Για να το κάνετε αυτό, πρέπει να εξάγετε τα wireframes σε μορφή που μπορεί να κάνει προεπισκόπηση του πελάτη σας. Παρόλο που τα αρχεία InDesign μπορούν να εξαχθούν σε διάφορες μορφές, πιθανότατα θα χρησιμοποιήσετε το διαδραστικό PDF ή τη λειτουργία 'Δημοσίευση στο Διαδίκτυο' εάν δοκιμάζετε λειτουργικά πρωτότυπα χαμηλής πιστότητας ή υψηλής πιστότητας. Για να αποθηκεύσετε ως διαδραστικό PDF, επιλέξτε Adobe PDF (διαδραστικό) από το αναπτυσσόμενο μενού 'Μορφή' στο πλαίσιο διαλόγου 'Εξαγωγή' και προσαρμόστε τις ιδιότητες, όπως απαιτείται. Μην ξεχάσετε να επιλέξετε 'Φόρμες και πολυμέσα' εάν υπάρχουν διαδραστικά στοιχεία που θέλετε να συμπεριλάβετε. Οι πελάτες μπορούν να δουν τα wireframes PDF στο δωρεάν Adobe Reader και να γράψουν όλα τα σχόλιά τους στο ίδιο αρχείο.
Μπορείτε επίσης να χρησιμοποιήσετε ένα έγγραφο PDF που εξάγεται από το InDesign για να δημιουργήσετε ένα πρωτότυπο InVision (ή κάποιο άλλο εργαλείο που υποστηρίζει αρχεία PDF). Εάν το τυπικό σας εργαλείο πρωτότυπου, ίσως Θαύμα , δεν μπορείτε να εισαγάγετε PDF, να εξαγάγετε τα σύρματα InDesign ως εικόνες JPEG ή PNG.
Για να εξαγάγετε ένα διαδραστικό πρωτότυπο HTML που μπορεί να προβληθεί σε μοντέρνα προγράμματα περιήγησης σε διαφορετικές συσκευές, μεταβείτε στο Αρχείο> Δημοσίευση στο διαδίκτυο ή κάντε κλικ στο κουμπί 'Δημοσίευση σε απευθείας σύνδεση' στη γραμμή εφαρμογών. Μόλις το έγγραφο είναι έτοιμο για δημοσίευση και μεταφορτωθεί, μπορείτε να αντιγράψετε μια διεύθυνση URL εγγράφου για κοινή χρήση με τους ενδιαφερόμενους και να ξεκινήσετε τη διαδικασία ελέγχου. Μπορείτε επίσης να ενσωματώσετε το δημοσιευμένο πρωτότυπο στον ιστότοπό σας.
Ένα μειονέκτημα της δυνατότητας 'Δημοσίευση στο διαδίκτυο' είναι ότι δεν έχετε επιπλέον έλεγχο της εξαγωγής και τα αρχεία αποθηκεύονται πάντα στους διακομιστές της Adobe. Επίσης, εξακολουθεί να είναι μια δυνατότητα προεπισκόπησης και δεν μπορείτε να είστε σίγουροι ποια κατεύθυνση θα αναπτύξει η Adobe ή ακόμα και αν θα διακοπεί.
Μόλις εξαχθεί η δομή / το πρωτότυπο, ήρθε η ώρα να ξεκινήσετε τη δοκιμή, τον έλεγχο και την επαναληπτική διαδικασία.
