Το πρωτότυπο, ως έννοια, ήταν γύρω από πριν από το Διαδίκτυο. Συνήθως, οι άνθρωποι που αναπτύσσουν ένα νέο φυσικό προϊόν θα κατασκευάζονταν πρώτα το πράγμα και θα εξασφάλιζαν ότι λειτουργούσε όπως είχε προβλεφθεί. Η πρώτη έκδοση μπορεί να κατοχυρωθεί με δίπλωμα ευρεσιτεχνίας και ενδεχομένως θα παρουσιαστεί σε δυνητικούς επενδυτές. Εάν ο εφευρέτης είχε πρόσβαση στα δικά του μέσα κατασκευής (αν εργάζονταν σε μια υπάρχουσα εταιρεία, για παράδειγμα), θα πήγαιναν ακριβώς μπροστά και θα επεξεργάζονταν τα σφάλματα μέχρι να έχουν ένα μοντέλο έτοιμο για παραγωγή.
Θυμάστε αυτούς τους παλιούς δίσκους επίδειξης; Ξέρετε, αυτά που ήρθαν με προγράμματα με περιορισμένη λειτουργικότητα, ή το πρώτο επίπεδο ή δύο σε ένα παιχνίδι; Τα πρωτότυπα είναι πολύ παρόμοια με εκείνα τα demos, μόνο και πιο απλά.
Δημιουργείτε ένα πρωτότυπο ενός δικτυακού τόπου ή μιας εφαρμογής για να βεβαιωθείτε ότι η ιδέα θα λειτουργήσει όπως προβλέπεται
Ο σκοπός τους δεν είναι τόσο πολύ να πάρουν οι υποψήφιοι πελάτες να αγοράσουν ένα προϊόν, ώστε να σας βοηθήσουν να κάνετε ένα καλύτερο. Δημιουργείτε ένα πρωτότυπο ενός δικτυακού τόπου ή μιας εφαρμογής για να βεβαιωθείτε ότι η ιδέα θα λειτουργήσει όπως προβλέπεται. Μπορείτε επίσης να το χρησιμοποιήσετε για να δείξετε στους πελάτες σας, ή πιθανούς επενδυτές, πώς πρέπει να εργάζονται.
Πρόσφατα, έχουμε δει πολλές εφαρμογές που στοχεύουν στην κατασκευή πρωτοτύπων για τον ιστό και για εφαρμογές για κινητά. Τώρα, κυκλοφόρησε το Adobe Experience Designer, συνδυάζοντας τη λειτουργικότητα μιας «εφαρμογής σχεδιασμού» για το web και το κινητό με εκείνη μιας εφαρμογής πρωτότυπου. Δεδομένης της φήμης της Adobe και του μεριδίου της αγοράς στον επαγγελματικό τομέα, είναι λογικό ότι πολλοί άνθρωποι που δεν έχουν κάνει πολλά πρωτότυπα στο παρελθόν θα μπορούσαν τώρα να κάνουν αυτό το βήμα.
Έτσι, όπως και οι περισσότεροι τελικοί οδηγοί, αυτό είναι για αρχάριους. Είναι για ανθρώπους που μόλις αρχίζουν να κατασκευάζουν πρωτότυπα σε τακτική βάση, ανεξάρτητα από την προηγούμενη εμπειρία τους (ή την έλλειψή τους) στη βιομηχανία σχεδιασμού.
Σε αυτόν τον οδηγό, προσπαθήσαμε πρώτα απ 'όλα να καλύψουμε τις βασικές αρχές. Μετά από αυτό, υπάρχουν σύνδεσμοι με οδηγούς με περισσότερες πληροφορίες και, φυσικά, μια μεγάλη μακρά λίστα εφαρμογών και εργαλείων με τα οποία μπορείτε να εργαστείτε.
Τώρα, και ο σχεδιαστής που έχει περάσει για λίγο, πιθανότατα έχει ήδη εργαστεί με wireframes ή / και έχει σχεδιάσει mockups σε κάποιον επεξεργαστή εικόνας. Δεν είναι αυτά τα πρωτότυπα;
Οχι. Όχι πάντα, ούτως ή άλλως.
Το πρόβλημα με τα wireframes και τα στατικά mockups είναι ότι είναι ... καλά ... στατικά. Υπάρχουν πολλές πληροφορίες που απλά δεν μπορούν να μεταφέρουν σχετικά με τη λειτουργικότητα ενός πράγματος. Αυτό μπορεί να οδηγήσει σε παρερμηνείες στο μυαλό των πελατών, ή ακόμα και των προγραμματιστών σας, για το πώς το πράγμα υποτίθεται ότι θα λειτουργήσει. Για το λόγο αυτό, τα πρωτότυπα είναι συνήθως αλληλεπιδραστικά με κάποιο τρόπο.
Οι πιο συνηθισμένες εξαιρέσεις είναι τα εννοιολογικά πρωτότυπα και τα εξαιρετικά καλά τεκμηριωμένα στατικά πρωτότυπα. Αυτό που κάνει τη διαφορά δεν είναι η ίδια η διαδραστικότητα, αλλά η μεταφορά πληροφοριών σχετικά με την προοριζόμενη λειτουργικότητα ενός προϊόντος.
Τα εν λόγω σύρματα και κουκκίδες χρησιμοποιούνται συχνά για την κατασκευή πρωτοτύπων, επομένως κανείς δεν τα εγκαταλείπει.
Κάθε φορά που πρέπει να δείξετε πώς πρέπει να λειτουργήσει κάτι. Αυτό είναι.
Το προφανές παράδειγμα είναι ένα web ή μια εφαρμογή για κινητά. Οι εφαρμογές τείνουν να έχουν ένα δίκαιο κομμάτι λειτουργικότητας που μπορεί να μην είναι εύκολα αντιληπτό ή να εξαχθεί από ένα mockup. Ωστόσο, ακόμη και αρκετά στατικές ιστοσελίδες που βασίζονται σε περιεχόμενο ενδέχεται να απαιτούν πρωτότυπο.
Για ένα πράγμα, είχα πελάτες να δούμε μακέτες για έναν απλό επιχειρηματικό ιστότοπο και να ρωτήσουν "Εντάξει, εάν κάνουν κλικ σε εκείνα τα πράγματα στην κορυφή," Σχετικά με εμάς "," Υπηρεσίες "και άλλα πράγματα που τα μεταφέρουν σε άλλα σελίδες; "ή" Όταν κάνετε κλικ στην αποστολή της φόρμας επικοινωνίας, λαμβάνω ένα μήνυμα ηλεκτρονικού ταχυδρομείου; "
Ακόμα και απλά ... τα καθήκοντα είναι συχνά γεμάτα αβεβαιότητα ... τα πρωτότυπα μπορούν να βοηθήσουν να βγάλουν μέρος από τις εικασίες
Ακόμη και οι απλές εργασίες περιήγησης συχνά δημιουργούνται με αβεβαιότητα σε ορισμένους χρήστες και υποψήφιους πελάτες, έτσι ώστε τα πρωτότυπα να βοηθήσουν στην εξαγωγή ορισμένων από τις εικασίες από τη διαδικασία υπογραφής.
Επιπλέον, είναι πάντα χρήσιμες στη δοκιμή των χρηστών. Μετά από όλα, εάν πρόκειται να κάνετε δοκιμές χρηστών καθόλου, είναι καλύτερο να ξεκινήσετε με μια έγκαιρη προεπισκόπηση του έργου. Το τελευταίο πράγμα που θέλετε είναι να κάνετε μεγάλες αλλαγές αφού το μεγαλύτερο μέρος των εργασιών έχει ήδη γίνει.
Πριν ξεκινήσετε τη δημιουργία πρωτοτύπων, θα θέλετε να καθορίσετε τι είδους θα θέλετε να χρησιμοποιήσετε. Μπορείτε πάντα να χρησιμοποιήσετε περισσότερα από ένα είδη σε οποιοδήποτε έργο. οι περισσότεροι σχεδιαστές κάνουν, σε κάποιο σημείο.
Το είδος του πρωτοτύπου που θα επιλέξετε θα πρέπει να είναι κατάλληλο για εσάς, τον πελάτη σας, το έργο και ακόμη και το συγκεκριμένο στάδιο του έργου στο οποίο βρίσκεστε. Τώρα, αυτό θα μπορούσε να ακούγεται πολύπλοκο, αλλά δεν είναι πραγματικά τόσο κακό.
Κάθε ένα από αυτά προορίζεται να χρησιμοποιηθεί σε διαφορετικά στάδια στη φάση σχεδιασμού. Τα υπόλοιπα εξαρτώνται από την προτίμησή σας και πόσο καλός είναι ο πελάτης σας στην κατανόηση των αφηρημένων οπτικών.
Οι πελάτες που είναι λιγότερο έμπειροι με τις σύγχρονες διαδικασίες σχεδίασης μπορεί να περιμένουν να δουν κάτι που μοιάζει πιο "γυαλισμένο" έτσι ώστε να μπορούν να σας πουν να κάνετε το λογότυπο μεγαλύτερο, να μετακινήσετε εκείνη τη γραμμή μια ίντσα προς τα αριστερά και ότι ο ιστότοπός τους δεν θα είναι στα Λατινικά , έτσι θα μπορούσατε να βάλετε κάποιο αγγλικά στο παρακαλώ;
Εάν έχετε προβλήματα με αυτό, πιο λεπτομερή πρωτότυπα - και πολύ καφές - είναι το καλύτερο στοίχημά σας. Εάν όχι, τότε μπορείτε να χρησιμοποιήσετε κάτι λίγο πιο αόριστο και να επικεντρωθείτε στο χτύπημα της προβλεπόμενης λειτουργικότητας.
Αυτά συχνά δεν φαίνονται κάτι σαν το τελικό προϊόν με οποιοδήποτε τρόπο σχήμα ή μορφή. Με τα εννοιολογικά πρωτότυπα, οι λεπτομέρειες και η διάταξη της διασύνδεσης δεν έχουν σημασία. Τα μόνα πράγματα στα οποία εργάζεστε είναι οι αλληλεπιδράσεις και οι διαδικασίες.
Ο στόχος οποιουδήποτε πρωτοτύπου είναι να δείξει πώς λειτουργεί κάτι ή θα λειτουργήσει. Υπό αυτή την έννοια, αυτό είναι πρωτότυπο στην καθαρότερη μορφή του. Είναι κυριολεκτικά όλα σχετικά με τη λειτουργία, και η μορφή δεν έρχεται καν σε αυτό.
Μπορούν να μοιάζουν σχεδόν με οτιδήποτε, σε αυτό το στάδιο. Μπορείτε να χρησιμοποιήσετε ένα διάγραμμα ροής, ένα post-it σημειώσεις, μια παρουσίαση PowerPoint, ένα βίντεο που εξηγεί τη διαδικασία με ακατέργαστα εικονογραφημένα εικονογραφήματα ή μια ηχογράφηση του εαυτού σας μιλώντας στην κάμερα και ξεκουράζοντας άγρια τα χέρια σας. Οτιδήποτε παίρνει το σημείο σε όλη θα το κάνει.
Τα εννοιολογικά πρωτότυπα χρησιμοποιούνται συνήθως στο πολύ αρχικό στάδιο κάθε έργου. Το έργο σας μπορεί να μην έχει καν όνομα. Είναι απλώς μια ιδέα για μια εφαρμογή ή έναν ιστότοπο και θα λέτε πράγματα όπως: "Ναι, νομίζω ότι θα πρέπει να δουλέψει έτσι ..."
Τα πρωτότυπα low-fi είναι εκεί που αρχίζετε να συμπεριλαμβάνετε πράγματα όπως η διάταξη και το μέγεθος της οθόνης και άλλες πιο απτές ανησυχίες. Συνήθως γίνονται γρήγορα και απορρίπτονται γρηγορότερα.
Σκοπός τους είναι να παράσχουν τον ταχύτερο δυνατό τρόπο για να επαναλάβετε τις ιδέες σας έως ότου εσείς ή / και ο πελάτης σας είστε ευχαριστημένοι με τα βασικά. Γι 'αυτό μην τα συνδέετε. Τα περισσότερα από αυτά δεν θα είναι πολύ καιρό, και αυτό είναι καλό.
Όπως αναφέρθηκε προηγουμένως, ο όρος "πρωτότυπα χαμηλής πιστότητας" είναι συχνά εναλλάξιμος με τα "σύρματα". Πράγματι, αυτό το στάδιο συχνά γίνεται σε χαρτί.
Όταν γίνεται σε μια εφαρμογή, είναι σκόπιμο να χρησιμοποιήσετε μια εφαρμογή που έχει βασικές λειτουργίες δημιουργίας πρωτοτύπων όπως σύνδεση με άλλες οθόνες, σχολιασμό κλπ. Οι εφαρμογές Wireframing έχουν το πλεονέκτημα ότι διευκολύνουν τη συνεργασία μέσω του Διαδικτύου, αλλά συχνά είναι λίγο πιο αργά για χρήση.
Αυτά χρησιμοποιούνται επίσης στην αρχή ενός έργου, αλλά πιθανότατα έχετε ένα επιχειρηματικό μοντέλο και μια ιδέα για ένα όνομα μέχρι τώρα. Ήρθε η ώρα να ταξινομήσετε τις μυριάδες ιδέες που επιπλέουν γύρω από το κεφάλι σας και επαναλάβετε μέχρι να έχετε κάτι που είστε σίγουροι ότι θα λειτουργήσει.
Μερικές φορές ένα πρωτότυπο χαμηλής πιστότητας απλά δεν θα πάρει το σημείο αρκετά καλά, και μια υψηλή πιστότητα είναι πάρα πολλή δουλειά προς το παρόν. Ίσως δεν έχετε τελειοποιήσει τελείως τον οδηγό στυλ, ή δεν έχουν γίνει όλα τα γραφικά στοιχεία σας ακόμα.
Σε κάθε περίπτωση, αυτό είναι το είδος του πρωτοτύπου που μπορείτε να χρησιμοποιήσετε στην αρχή έως τη μέση της φάσης σχεδιασμού. Συχνά γίνονται με πρωτότυπες εφαρμογές, οι οποίες κάνουν μεγάλη χρήση προσομοιωμένης αλληλεπίδρασης. Μπορούν επίσης να κατασκευαστούν με HTML και CSS, συνήθως με τη βοήθεια ενός πλαισίου CSS.
Yup, Bootstrap και Foundation είναι πιθανώς δύο από τα μεγαλύτερα εργαλεία δημιουργίας πρωτοτύπων εκεί έξω τώρα.
Θα πρέπει να χρησιμοποιήσετε επώνυμες εικόνες για αυτά, αν το έχετε, αλλά οι εικόνες θα το κάνουν. Τα στοιχεία UI αποθέματος χρησιμοποιούνται συνήθως για την ταχύτερη δημιουργία της προσομοιωμένης διεπαφής. Πολλές εφαρμογές με πρωτότυπα έρχονται με βιβλιοθήκες αυτών των στοιχείων για να κάνουν τη δουλειά σας γρηγορότερη.
Αυτά τα είδη πρωτοτύπων είναι μεγάλα για τους πιο κυριολεκτικούς στοχαστές που πρέπει να δουν μια προσεκτική προσέγγιση για το πώς θα φανεί και θα δουλέψει. Είναι πιο εύκολο για αυτούς να αγνοήσουν μια κεφαλίδα που "δεν έχει τελειώσει ακόμα", από ένα σκακιέζικο σχήμα που δεν μοιάζει με μια κεφαλίδα ιστότοπου όπως το ξέρουν.
Για αυτούς τους πελάτες, ίσως θέλετε να διαμορφώσετε γρήγορα τις ιδέες σας και να μην τις παρουσιάσετε ποτέ στον πελάτη. Στη συνέχεια, κάντε ένα πρωτότυπο μεσαίας πιστότητας που διευκολύνει τους χρήστες να δουν πού πηγαίνετε.
Λοιπόν, είμαστε εδώ. Και το έργο σας. Έχετε τα mockups σας για κάθε οθόνη και όλα φαίνονται υπέροχα. Ήρθε η ώρα να δείξουμε στους ανθρώπους πώς θα λειτουργήσει αυτό, σε όλη τη δόξα της, όταν κάποιος τελικά την ενσωματώνει με τον κωδικό back-end.
Τα πρωτότυπα υψηλής πιστότητας χρησιμοποιούνται συνήθως για την τελική απόσπαση του σχεδίου από τον πελάτη. Αλλά δεν μπορείτε απλά να τους στείλετε τα PSD. Αυτό το υλικό πρέπει να είναι διαδραστικό.
Αυτό επιτυγχάνεται συνήθως με έναν από τους δύο τρόπους. Κάποιοι χρησιμοποιούν το στατικό κώδικα HTML και CSS για να βάζουν μαζί τα τελικά οπτικά με τρόπο που είναι ημι-διαδραστικά. Άλλοι χρησιμοποιούν εφαρμογές που εισάγουν εικόνες ή ακόμα και ακατέργαστα αρχεία PSD και προσθέτουν ψευδο-διαδραστικές λειτουργίες που μιμούνται την τελική λειτουργικότητα της εφαρμογής.
Ανάλογα με την εφαρμογή, μπορείτε ακόμη και να αποδείξετε αυτά τα πρωτότυπα στον ιστό (ή σε μια κινητή συσκευή, εάν έχετε δουλέψει σε μια εφαρμογή).
Τώρα που έχουμε περάσει τα κύρια πρωτότυπα που μπορείτε να κάνετε, ήρθε η ώρα να καλύψετε τα εργαλεία που χρησιμοποιούνται για να τα κάνετε. Αναφέρω τα περισσότερα από αυτά στην προηγούμενη ενότητα και τη βασική τους χρήση. αλλά θα ήθελα να μπω σε λίγο περισσότερες λεπτομέρειες.
Και πάλι, η μέθοδος που επιλέγετε πρέπει να εξαρτάται από το τι και εσείς και ο πελάτης είστε άνετοι.
Αυτά συχνά γίνονται για να πουλήσουν μια ιδέα πριν γίνει οποιαδήποτε συγκεκριμένη δουλειά. Έτσι, συνήθως απευθύνονται σε δυνητικούς επενδυτές. Μπορούν να χρησιμοποιηθούν και για πελάτες. αλλά συχνά υπάρχουν πιο αποτελεσματικοί τρόποι επικοινωνίας με έναν πελάτη. Η διανυόμενη απόσταση μπορεί να διαφέρει.
Τα πρωτότυπα που βασίζονται σε βίντεο και παρουσιάσεις που γίνονται για θέσεις πώλησης συνήθως ακολουθούν έναν εμπορικό τύπο:
Ορισμένα από αυτά τα πρωτότυπα χρησιμοποιούν μόνο εικονίδια, κείμενο και εικονογραφήσεις. Άλλοι έχουν κινούμενα σχέδια. και άλλοι χρησιμοποιούν ζωντανή δράση για να πάρουν το σημείο. Και αυτό είναι ... το σημείο. Όσο πωλίζετε την ιδέα σας, το έχετε κάνει σωστό.
Εδώ είναι ένα φοβερό παράδειγμα που αναμιγνύει πρωτότυπα βίντεο με πρωτότυπα χαρτιού.
Τα συρματοπλέγματα μπορούν να γίνουν σε χαρτί ή σε εφαρμογές. Είναι σχεδόν πάντοτε θεωρούνται πρωτότυπα χαμηλής πιστότητας, αν και μπορούν να αναβαθμιστούν σε μεσαία πίστη, αν βάζετε αρκετό χρόνο σε αυτά. Σπάνια αξίζει την προσπάθεια.
Συνήθως, τα καλώδια είναι σχεδιασμένα να τραβούν και να απορρίπτονται γρήγορα. Αυτό είναι ένα από τα πράγματα που κάνει τα χαρτάκια τόσο ελκυστικά. Οι εφαρμογές μπορούν να είναι πολύ ακριβέστερες και μπορείτε να επεξεργάζεστε εύκολα υπάρχοντα σύρματα. αλλά τίποτα δεν κτυπά την ταχύτητα ενός σκίτσου που κανείς δεν υποτίθεται ότι βλέπει παρά μόνο τον εαυτό σου ... πάντα.
Ωστόσο, όπως αναφέρθηκε προηγουμένως, τα καλωδιακά πλαίσια βάσει εφαρμογών έχουν το πλεονέκτημα ότι μιμούνται ευκολότερα τη λειτουργικότητα μιας διασύνδεσης. Πατώντας σε ένα συρματόσχοινο χαρτιού, θα φτιάξετε έναν ευχάριστο θόρυβο.
Αυτό μπορεί να είναι διασκεδαστικό, αλλά μπορεί να μην μεταφέρει το νόημά σας.
Μπορείτε να επιλέξετε να χρησιμοποιήσετε και τα δύο: χαρτί για να καρφώσετε τις πιο βασικές έννοιες, και μια εφαρμογή για να το σαρκώσετε και μοιραστείτε εύκολα.
Αυτά διαφέρουν από τα wireframes στο ότι είναι πολύ περισσότερα από τα σχέδια. Σε αυτό το είδος πρωτοτύπου, το χαρτί χρησιμοποιείται για να κάνει ένα φυσικό, αν και μάλλον μάλλον, επίπεδο πρότυπο της διασύνδεσης. Μπορείτε να δείτε ένα από αυτά στο παραπάνω βίντεο.
Τα στοιχεία διασύνδεσης συνήθως σχεδιάζονται, κόβονται, μερικές φορές αντιγράφονται για να κάνουν πρόσθετα και στη συνέχεια συναρμολογούνται σε άλλο κομμάτι χαρτιού. Αυτό τους δίνει το πλεονέκτημα της ευελιξίας. Όπου μπορείτε να πετάξετε ένα ολόκληρο φύλλο χαρτιού με ένα συρμάτινο πλαίσιο, μπορείτε απλώς να αναδιοργανώσετε τα στοιχεία ενός χαρτιού μέχρι να είστε ικανοποιημένοι. Έχετε ένα στοιχείο που είναι το λάθος μέγεθος, αφού έχετε ανανεώσει τα πράγματα μερικές φορές; Απλά κόψτε μια νέα έκδοση έξω.
Τείνουν επίσης να αισθάνονται λίγο πιο "πραγματικές" από ένα σύρμα-πλαίσιο. Παρόλο που δεν θα συμβεί τίποτα ενδιαφέρον, ένας πελάτης μπορεί να αγγίξει ένα μοντέλο χαρτιού. Μπορούν να το αισθανθούν. Αυτή η αίσθηση της αφής μπορεί μερικές φορές να εξηγήσει περισσότερο σε έναν πελάτη από οτιδήποτε άλλο θα μπορούσε ποτέ να τους δείξει.
Ο καθένας χρειάζεται σωματική επαφή για την καλύτερη κατανόηση οποιουδήποτε αντικειμένου. Το ήμισυ του σχεδίου UX είναι για την επαναδημιουργία της αίσθησης της φυσικής αλληλεπίδρασης με μια ψηφιακή διεπαφή.
Αυτά έχουν πολλά κοινά με τα πρωτότυπα χαρτιού. Τα πρωτότυπα που έχουν δημιουργηθεί με μια εφαρμογή όπως η Invision ή μια από τις πολλές άλλες επιλογές εκεί έξω (δείτε την παρακάτω λίστα) είναι συνήθως κατασκευασμένα από προ-σχεδιασμένα στοιχεία διεπαφής και μετά συναρμολογημένα ώστε να μιμούνται το τελικό προϊόν.
Η διαφορά είναι, βεβαίως, ότι όλα γίνονται στην οθόνη. Ω, και μπορείτε να το κάνετε με τα τελικά γραφικά και branding, κάνοντας το πρωτότυπο να μοιάζει ακριβώς με το τελικό προϊόν. Στη συνέχεια, όπως ανέφερα προηγουμένως, ορισμένες εφαρμογές μπορούν να κάνουν demo του προϊόντος στο πρόγραμμα περιήγησης και σε κινητές συσκευές.
Αυτό φέρνει πίσω στο παιχνίδι το αίσθημα αφής και θέλετε αυτό. Εάν μπορείτε να δώσετε στους πελάτες σας την αίσθηση και σας αρέσει, έχετε πάρει ουσιαστικά την τελική τους έγκριση.
Φυσικά, εάν η αλληλεπίδραση είναι αυτό που θέλετε, τότε η κατασκευή πρωτοτύπων διεπαφής με κώδικα είναι ένας καλός τρόπος για να το αποκτήσετε. Τώρα, μπορείτε να επιλέξετε πρωτότυπα βασισμένα σε κώδικα για έναν από τους πολλούς λόγους:
Το πρωτότυπο στο πρόγραμμα περιήγησης μπορεί να είναι λίγο πιο αργό, ειδικά αν ακόμη γίνονται σημαντικές αναθεωρήσεις. Δεν θα το συνιστούσα για τα αρχικά στάδια ενός έργου, οπότε είναι καλύτερο για πρωτότυπα μέτριας έως υψηλής πιστότητας.
Ακόμα, είναι ένας από τους καλύτερους τρόπους για να δείξετε ένα σχεδόν ολοκληρωμένο έργο, αν θέλετε ήδη να δουλέψετε με HTML και CSS.
Πρωτότυπο με πλαίσια
Πρέπει να σημειωθεί ότι η χρήση ενός πλαισίου για την κατασκευή πρωτοτύπων μπορεί να επιταχύνει σημαντικά τα πρωτότυπα με βάση τον κώδικα. Ως μπόνους, εάν χρησιμοποιείτε το πλαίσιο που προορίζεται να χρησιμοποιηθεί για το τελικό προϊόν, υπάρχει λιγότερη κωδικοποίηση για να γίνει συνολικά.
Ως πλαϊνό σημείωμα, μερικοί άνθρωποι έχουν δημιουργήσει επεξεργαστές ιστοσελίδων drag 'n' που βασίζονται σε πιο δημοφιλή πλαίσια, όπως Bootstrap και θεμέλιο . Χρησιμοποιώντας αυτά, θα μπορούσε κανείς να δημιουργήσει τα πάντα από τα πρωτότυπα χαμηλής πιστότητας μέχρι το τελικό προϊόν με κωδικό.
Ωστόσο, μερικοί άνθρωποι τα χρησιμοποιούν μόνο για να χτίσουν πρωτότυπα γρήγορα, και στη συνέχεια να χρησιμοποιήσουν προσαρμοσμένο κώδικα για το τελικό έργο. Λειτουργεί με κάθε τρόπο.
Τώρα που καλύψαμε όλα τα βασικά στοιχεία, ήρθε η ώρα να εισαγάγουμε πραγματικά λεπτομέρειες. Όπως συμβαίνει σχεδόν με όλα τα υπόλοιπα στο σχεδιασμό και στη ζωή, δεν υπάρχει κανένας σωστός τρόπος για να χτίσετε ένα πρωτότυπο. Υπάρχει μόνο ο τρόπος που λειτουργεί για σας. Τούτου λεχθέντος, οι επιτυχημένες διαδικασίες σχεδιασμού τείνουν να έχουν μερικά κοινά πράγματα.
Εδώ είναι μερικοί διαφορετικοί οδηγοί για τα πρωτότυπα που εστιάζουν σε διαφορετικές μεθόδους και πιστότητα, απλά για να ξεκινήσετε. Πάρτε από αυτούς ό, τι λειτουργεί για σας, αγνοήστε τι δεν κάνει.
(Δεν θα συμπεριλάβουμε ειδικά σεμινάρια για εφαρμογές επειδή υπάρχουν απλά πάρα πολλά.)
Αυτός ο οδηγός από το περιοδικό Smashing Magazine επικεντρώνεται σε μια μεθοδολογία για την κατασκευή πρωτοτύπων γρήγορα και συχνά ερμηνεύεται.
Αυτό είναι ένα πιο προσωπικό άρθρο από τον Nick Pettit στο blog Treehouse που περιγράφει τη δική του προσέγγιση για τη δημιουργία πρωτοτύπων.
Εδώ είναι α τρίτο άρθρο σχετικά με τα γρήγορα πρωτότυπα. Φαίνεται να είναι δημοφιλής. Αυτό είναι εδώ στο Webdesigner Depot, και περιγράφει μερικές συμβουλές για και τις παγίδες που είναι εγγενείς στη διαδικασία.
Ένα άλλο άρθρο από το περιοδικό Smashing , αυτό πηγαίνει σε περισσότερες λεπτομέρειες σχετικά με την πρωτοτυπία χαμηλής πιστότητας.
Σε αυτό το σε βάθος, και ειλικρινά συναρπαστικό άρθρο η υπηρεσία Newfangled περιγράφει τη διαδικασία σε βάθος. Περιστρέφεται γύρω από το πρωτότυπο της έκθεσης σε γκρίζα οθόνη με βάση το πρόγραμμα περιήγησης και κάνουν μια πειστική υπόθεση για να το δοκιμάσετε.
Μια άλλη εδώ στο WDD , αυτό το άρθρο είναι μόνο για να βεβαιωθείτε ότι τα πρωτότυπά σας έχει ένα σημείο. Αν κάνετε μόνο τις δοκιμές ευχρηστίας σας μετά την ολοκλήρωση του τελικού έργου, τότε πιθανόν να το κάνετε λάθος.
Θα πρέπει να δώσετε κάποια από τα προσωπικά σας στοιχεία (ή απλώς ψέμα) για να τα πάρετε αυτό το ebook , αλλά hey, δεν ζητούν χρήματα! Περιλαμβάνει περισσότερες πληροφορίες σχετικά με τις δημοφιλείς μεθόδους δημιουργίας πρωτοτύπων, τα σεμινάρια με βάση την εφαρμογή και τις βέλτιστες πρακτικές από μεγάλες εταιρείες όπως η Google, η Apple, η Zurb και πολλά άλλα.
Τώρα, γίνεται από τους ανθρώπους που βρίσκονται πίσω από το UXPin, ένα πρωτότυπο app, έτσι μπορεί να είναι ελαφρώς προκατειλημμένες σχετικά με την εφαρμογή που θα πρέπει να χρησιμοποιήσετε. Ακόμα, έχει πολλές καλές πληροφορίες.
Εντάξει, έτσι έχετε τη θεωρία. Ήρθε η ώρα να πάρουμε ρωγμές στην κατασκευή πρωτοτύπων. Υποθέτοντας ότι δεν πρόκειται να επιμείνετε σε μοντέλα χαρτιού ή κώδικα, θα χρησιμοποιήσετε κάποια εφαρμογή κάποια στιγμή.
Τα καλά νέα: Υπάρχουν πολλές εξαιρετικές εφαρμογές για να διαλέξετε. Τα κακά νέα: Υπάρχουν πολλές εξαιρετικές εφαρμογές για να διαλέξετε.
Για άλλη μια φορά, όλα θα καταλήξουν στον τρόπο που εργάζεστε. Χρειάζεστε τη δυνατότητα προβολής εφαρμογών για κινητά; Χρειάζεται να συγχρονίσετε τα αρχεία σας με το Google Drive, το Dropbox ή κάποια άλλη υπηρεσία; Τι γίνεται με την ολοκλήρωση του Github; Χαμηλός, μεσαίος ή υψηλός; Σύνθετες δέσμες ενεργειών;
Οι εφαρμογές που αναφέρονται παρακάτω θα περιλαμβάνουν ορισμένες ή όλες αυτές τις επιλογές. Θα αναφερθώ στις πιο συναφείς λειτουργίες για κάθε μία για να σας δώσω μια ιδέα για το πού να κοιτάξω.
Πρέπει να σημειωθεί ότι πολλά από αυτά είναι κυρίως γνωστά ως εργαλεία πλαισίωσης καλωδίων. Είναι συνηθισμένο για το λογισμικό περιστροφής καλωδίων για την ενσωμάτωση των χαρακτηριστικών που χρειάζονται για διαδραστικά πρωτότυπα. Τα χιλιόμετρα σας με αυτές τις εφαρμογές μπορεί να διαφέρουν.
Αυτό είναι η νεότερη προσφορά στην αγορά αυτή τη στιγμή και είναι έτοιμη να προσφέρει ένα σοβαρό ανταγωνισμό σε μια κάπως κορεσμένη αγορά. Δεν είναι απλώς μια εφαρμογή πλαισίωσης καλωδίων ή πρωτοτύπων. είναι μια εφαρμογή σχεδιασμού. Είναι σαν Σκίτσο , ή οι νεκροί Πυροτεχνήματα , αλλά τα πράγματα χρειάζονται ένα βήμα παραπέρα επιτρέποντάς σας να φτιάξετε πρωτότυπα από ό, τι μόλις σχεδιάσατε.
Αυτή τη στιγμή είναι μόνο Mac, και στο στάδιο προεπισκόπησης σε αυτό, αλλά μια έκδοση των Windows οφείλεται πριν από το τέλος του έτους.
Η εκ των προτέρων έκδοση είναι δωρεάν, μόλις αποσταλεί η τελική έκδοση, θα αποτελεί μέρος του προγράμματος εγγραφής Creative Cloud της Adobe.
Microsoft PowerPoint , Apple Keynote , LibreOffice Εντυπωσιάστε , και Παρουσιάσεις Google μπορούν όλοι να χρησιμοποιηθούν για την κατασκευή πρωτοτύπων. Κυρίως, αυτά τα πρωτότυπα θα είναι της εννοιολογικής ποικιλίας. Μπορείτε, ωστόσο, να μιμείται ένα ορισμένο βαθμό διαδραστικότητας, με τη σύνδεση των διαφανειών μεταξύ τους.
Θα μπορούσε να λειτουργήσει εξίσου καλά για τη δημιουργία πρωτότυπων ιστοτόπων που βασίζονται σε περιεχόμενο και είναι πιθανό ότι χρησιμοποιείτε ήδη τουλάχιστον ένα από αυτά τα προγράμματα. Εάν όχι, το Impress και οι Παρουσιάσεις είναι δωρεάν.
Invision είναι ένα ακόμη από τα "μεγάλα ονόματα", με περισσότερα πρωτότυπα υψηλής πιστότητας. Τονίζει τον έλεγχο της έκδοσης και υπερηφανεύεται για τη συνεργασία σε πραγματικό χρόνο και τις λειτουργίες ανατροφοδότησης. Όπως και η εφαρμογή Marvel, διαθέτει επίσης κινούμενα σχέδια, ενσωμάτωση πρωτοτύπων, demos σε συσκευές και πολλά άλλα.
Επιπλέον, μόλις αγόρασαν πρόσφατα τα Silver Flows, ένα εργαλείο που ενσωματώνει τη λειτουργικότητα του πρωτοτύπου με το Sketch. Προτίθενται να το χρησιμοποιήσουν για να ενσωματώσουν το Sketch με το λογισμικό τους στο διαδίκτυο.
Υπάρχει ένα δωρεάν σχέδιο, αλλά μπορείτε να κάνετε μόνο ένα πρωτότυπο. Μετά από αυτό, μπορείτε να ξεκινήσετε από $ 15USD ανά μήνα.
Justinmind φαίνεται σκόπιμα να στραφεί προς τη δημιουργία πρωτότυπων εφαρμογών υψηλής πιστότητας. Ο ιστότοπος αναφέρει επίσης ιστοτόπους που ανταποκρίνονται σε πρωτότυπα. Υπάρχουν επίσης επιδείξεις εντός εφαρμογής.
Η τιμολόγηση ξεκινάει σήμερα από $ 19USD ανά χρήστη, ανά μήνα, εάν πληρώνετε ετησίως.
Marvel App είναι ένα τεράστιο app (ένα από τα "μεγάλα ονόματα" στο πρωτότυπο) με δωρεάν σχέδιο και μέτρια τιμολόγηση για όλες τις αναβαθμίσεις. Αξιοσημείωτα χαρακτηριστικά περιλαμβάνουν: υποστήριξη για Photoshop και σκίτσο, συγχρονισμό με το Drive και Dropbox, ενσωμάτωση πρωτότυπων σε ιστοσελίδες) και χαρακτηριστικά που μετατρέπουν τα πρωτότυπά σας σε κινούμενες παρουσιάσεις.
Αυτό είναι για πρωτότυπα υψηλής πιστότητας.
Άξονες είναι ένα κομμάτι περίεργο με χαρακτηριστικά τόσο για low-fi και high-fi πρωτότυπα. είναι ακόμα πιο περίεργο, επειδή είναι μια εφαρμογή για υπολογιστές με μια μοναδική τιμή. Είναι σχεδιασμένο για επιχειρηματικούς χρήστες και μεγάλες ομάδες, με δυνατότητες για τη σύνταξη της δικής σας τεκμηρίωσης, διαχείρισης έργου και πολλά άλλα.
Οι τυποποιημένες εκδόσεις έρχονται σε $ 289USD ανά άδεια.
HotGloo είναι όλα σχετικά με τα πλαίσια χαμηλής έως μεσαίας πιστότητας και τα πρωτότυπα. Ξεκίνησε ως πρωτίστως μια εφαρμογή wireframing, κυρίως, αλλά η λειτουργικότητα για πιο προηγμένα πρωτότυπα είναι εκεί.
Όπου άλλες εφαρμογές επικεντρώνονται σε εφαρμογές πρωτότυπων εφαρμογών, η HotGloo ξεκίνησε με τους σχεδιαστές ιστοσελίδων. Έτσι, μπορείτε να το κάνετε, πραγματικά.
Τα σχέδια ξεκινούν από $ 14USD ανά μήνα και το σχέδιο αυτό μπορεί να περιλαμβάνει μέχρι 10 άτομα που συνεργάζονται.
Annnnnd είμαστε πίσω στο πρωτότυπο υψηλής πιστότητας με Proto.io . Έχει πολύπλοκες αλληλεπιδράσεις, κινούμενα σχέδια, εξαγωγή, εκτύπωση, ενσωμάτωση και διασκευές συσκευών που είναι ενσωματωμένες. Οι τιμές ξεκινούν από $ 24USD ανά μήνα, αλλά υπάρχει μια δωρεάν δοκιμή 15 ημερών, εάν θέλετε να την δώσετε.
Στερεοποιώ μας φέρνει ο Zurb, η ίδια εταιρεία που κάνει το πλαίσιο του Ιδρύματος. Έχει σχεδιαστεί για να χειρίζεται (και να λαμβάνει σχόλια σχετικά με) τα πάντα, από σκίτσα σε υψηλής πιστότητας πρωτότυπα και mockups.
Αντί να επικεντρωθεί σε κινούμενα σχέδια και άλλα εργαλεία παρουσίασης, το Solidify προσφέρει μια πληθώρα χαρακτηριστικών δοκιμών χρήστη. Μπορείτε να εκτελέσετε δοκιμές προσωπικά ή εξ αποστάσεως και να μοιραστείτε τα αποτελέσματα με την ομάδα σας.
ΚΡΟΤΟΣ Διακρίνεται από άλλες εφαρμογές, βοηθώντας σας να δημιουργήσετε ένα υβρίδιο σκίτσων καλωδίων και ψηφιακών πρωτοτύπων. Ξεκινάτε φωτογραφίζοντας τα σκίτσα σας με ένα iPhone, τηλέφωνο Android ή τηλέφωνο Windows και μετατρέποντας τα σκίτσα σε ένα πρωτότυπο αλληλεπίδρασης.
Εάν κάνετε το μεγαλύτερο μέρος της εργασίας σας σε χαρτί, θα μπορούσε να είναι ένας πολύ καλός τρόπος για να μοιραστείτε τα αποτελέσματα. Η υπηρεσία είναι δωρεάν για δύο έργα, και στη συνέχεια τα σχέδια ξεκινούν από $ 10USD ανά μήνα.
Flairbuilder είναι μια άλλη εφαρμογή για επιτραπέζιους υπολογιστές, αν και έχει έναν θεατή σε απευθείας σύνδεση για έργα. Φαίνεται ότι είναι προσανατολισμένη προς τα μεσαία-πιστά σύρματα και τα πρωτότυπα. Διαθέτει δυνατότητες που σας επιτρέπουν να προσθέσετε αλληλεπίδραση, να κάνετε εκδηλώσεις σε συσκευές και δίνει ιδιαίτερη έμφαση στον σχεδιασμό βάσει δικτύου.
Διατιμάται με ένα εφάπαξ τέλος $ 99USD. Αυτό είναι απότομο, σίγουρο, αλλά πολύ φθηνότερο από τον Axure.
Flinto έχει στην πραγματικότητα δύο εκδόσεις: υπάρχει μια εφαρμογή Mac και μια έκδοση Lite που βασίζεται στον ιστό. Η διαφορά? Η έκδοση Mac φέρνει στο τραπέζι πιο περίπλοκες κινούμενες εικόνες, δυνατότητες και αλληλεπιδράσεις. Σας επιτρέπει επίσης να εισάγετε τα στοιχεία σας από το Sketch, το οποίο δεν μπορεί να κάνει η έκδοση του διαδικτύου.
Κοστίζει $ 99USD ως μια μοναδική αγορά. Είναι ενδιαφέρον ότι η έκδοση Lite (η οποία κοστίζει 20USD το μήνα) περιλαμβάνει μια άδεια για την έκδοση desktop, δίνοντάς σας το καλύτερο και των δύο κόσμων.
UXPin είναι μια εφαρμογή πρωτοτύπου μέτριας έως υψηλής πιστότητας με όλα τα χαρακτηριστικά που έχουμε περιμένουν. Όπως μερικές από τις άλλες, έχει επίσης συνεργασία σε πραγματικό χρόνο, ενσωματωμένα χαρακτηριστικά δοκιμών ευχρηστίας και διαχείριση έργων.
Σε αντίθεση με άλλες εφαρμογές, το UXPin στοχεύει να είναι ένα one-stop shop design. Όπως και στο, μπορείτε να παραλείψετε το Photoshop, το Σκίτσο ή τι έχετε και να μετατρέψετε τα σύρμα σας σε mockups. Αυτό είναι τουλάχιστον φιλόδοξο, αλλά αν λειτουργήσει όπως υποσχεθήκαμε, μπορώ να δω ότι είναι χρήσιμο για πολλούς σχεδιαστές.
Η τιμολόγηση ξεκινά από $ 19UD ανά μήνα, ανά χρήστη.