Προγραμματισμός

Τα 7 καλύτερα εργαλεία wireframing και prototyping για κατασκευαστές εφαρμογών

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

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

Παρόλο που οι όροι χρησιμοποιούνται συχνά μαζί, υπάρχει σαφής διάκριση μεταξύ ενός καλωδίου και ενός πρωτοτύπου.

Το wireframe είναι μια σκελετική διάταξη γυμνών οστών της δομής της εφαρμογής σας. Συνήθως γίνεται χωρίς χρώμα - απλό ασπρόμαυρο - και ενώ ένα wireframe δείχνει πού πηγαίνουν κείμενο, εικόνες και άλλα στοιχεία σχεδίασης, δεν περιλαμβάνει πραγματικές εικόνες, κείμενο κ.λπ. Ωστόσο, καθένα από τα στοιχεία wireframe είναι εμφανίζεται σε πραγματική κλίμακα. Ο λόγος για αυτό είναι ότι τα wireframes προορίζονται να εστιάσουν την προσοχή σας στη δομή και όχι στην πραγματική σχεδίαση. Μοιάζει πολύ με τα σχεδιαγράμματα για ένα σπίτι ή ένα κτίριο: έχετε μια ξεκάθαρη ιδέα για τη δομή και την τοποθέτηση όλων, χωρίς να αποσπάται η προσοχή από το σχεδιασμό.

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

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

1. Balsamiq

Εάν ενδιαφέρεστε μόνο να δημιουργήσετε ένα wireframe της ιδέας της εφαρμογής σας, τότε το Balsamiq είναι το εργαλείο για εσάς. Διαθέσιμο τόσο ως επιτραπέζιος υπολογιστής όσο και ως εφαρμογή ιστού, το Balsamiq υπάρχει από το 2008.

Τα πλαίσια καλωδίων προορίζονται να απαιτούν πολύ λίγη προσπάθεια και χρόνο, οπότε το Balsamiq έχει σχεδιαστεί για να σας βοηθά να δημιουργήσετε γρήγορα wireframes. Απλά προσθέστε τα βασικά στοιχεία που χρειάζεστε, μετά αλλάξτε το μέγεθος, τοποθετήστε και προσαρμόστε όπως απαιτείται. Τα wireframes που δημιουργείτε με το Balsamiq θα φαίνονται λίγο τραχύ, αλλά αυτό είναι σκόπιμο. Η δημιουργική ομάδα πίσω από το εργαλείο πιστεύει ότι ένα περίγραμμα που μοιάζει περισσότερο με ένα σκίτσο ενθαρρύνει την ανταλλαγή ιδεών. Ποιος είναι ένας μεγάλος λόγος για την καλωδίωση.

Ο απλός έλεγχος έκδοσης θα σας βοηθήσει να παρακολουθείτε από πού ξεκινήσατε και πού βρίσκεστε τώρα. Και επειδή αυτό είναι ένα wireframe δεν σημαίνει ότι δεν μπορείτε να λάβετε πληροφορίες από πιθανούς χρήστες / πελάτες. Δεν μπορείτε να δημιουργήσετε ένα πλήρως διαδραστικό πρωτότυπο χρησιμοποιώντας το Balsamiq, αλλά μπορείτε να συνδέσετε τις οθόνες / τις σελίδες που δημιουργείτε για να δημιουργήσετε ένα απλό πρωτότυπο κλικ. Χωρίς κινούμενα σχέδια ή αλληλεπιδράσεις: ο σκοπός είναι αποκλειστικά η επίδειξη ροής.

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

Το Balsamiq διατίθεται ως εφαρμογή για επιτραπέζιους υπολογιστές, με τιμή 89 $ / χρήστη, εφαρμογή που βασίζεται στον ιστό ξεκινώντας από 12 $ / μήνα ή μια συνδεδεμένη εφαρμογή Google Drive, με τιμή 5 $ / χρήστη / μήνα. Αλλά μπορείτε να ξεκινήσετε με μια δωρεάν δοκιμή πρώτα, για να δείτε αν είναι το σωστό εργαλείο για εσάς.

2. WireframePro

Αν και μια άδεια MockFlow περιλαμβάνει πρόσβαση σε οκτώ διαφορετικές εφαρμογές, είναι το WireframePro που θα σας ενδιαφέρει καθώς αρχίζετε να αναπτύσσετε τη δική σας εφαρμογή. Και πάλι είναι μια εφαρμογή που βασίζεται στον ιστό, με μια διεπαφή μεταφοράς και απόθεσης για να δημιουργήσετε εύκολα ένα wireframe.

Έρχεται με όλα τα τυπικά στοιχεία διεπαφής χρήστη, καθώς και πολλά άλλα στοιχεία που μπορεί να χρειαστείτε, συμπεριλαμβανομένης μιας επιλογής για έξυπνα ρολόγια Apple και Android. Η εφαρμογή σάς παρέχει επίσης πρόσβαση στο Mock Store, το οποίο προσφέρει μια μεγάλη ποικιλία προτύπων τρίτων που μπορείτε να χρησιμοποιήσετε είτε για έμπνευση είτε ως γρήγορη αφετηρία για το δικό σας wireframe.

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

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

Το WireframePro δεν διαθέτει δωρεάν πακέτα, αλλά μπορείτε να το δοκιμάσετε για 30 ημέρες πριν μεταβείτε σε πρόγραμμα επί πληρωμή. Οι άδειες ξεκινούν από $ 19 / μήνα για έναν χρήστη και 39 $ / μήνα για έως και τρία μέλη της ομάδας.

3. UXPin

Όπως υποδηλώνει το όνομα, η ομάδα πίσω από το UXPin δίνει έμφαση στο UX. Τίποτα δεν είναι λάθος με αυτό, το wireframing και το πρωτότυπο είναι να σας βοηθήσουν να βελτιώσετε το UX της εφαρμογής σας. Με το UXPin, μπορείτε να φροντίσετε τόσο το wireframing όσο και το πρωτότυπο, οπότε δεν χρειάζεται να αλλάξετε εργαλεία.

Όπως θα περίμενε κανείς, το UXPin υποστηρίζει αρχεία προέλευσης Sketch και αρχεία Photoshop. Αλλά διαθέτει επίσης ένα ενσωματωμένο πρόγραμμα επεξεργασίας που υποστηρίζει αποσπάσματα κώδικα CSS, επιτρέποντάς σας να προσαρμόσετε οποιοδήποτε στοιχείο χρησιμοποιείται στο wireframe και το πρωτότυπο σας. Και το UXPin το καθιστά εξαιρετικά εύκολο να παρακολουθείτε κάθε επανάληψη κάθε αρχείου που προσθέτετε ή δημιουργείτε, οπότε δεν χρειάζεται να κάνετε κλικ σε δεκάδες αρχεία που αναζητούν την αρχική έκδοση.

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

Το UXPin υποστηρίζει wireframing και prototyping ιστότοπων, εφαρμογών για κινητά και εφαρμογών ιστού και διαθέτει 14 προκαθορισμένα σημεία διακοπής, επιτρέποντάς σας να βλέπετε εύκολα το σχέδιό σας σε πολλές συσκευές. Η τιμολόγηση ξεκινά από 19 $ / μήνα για το βασικό πρόγραμμα και 29 $ / μήνα για να ξεκλειδώσετε προηγμένες λειτουργίες.

4. Prott

Παρόλο που το Prott έχει χαρακτηριστεί ως εργαλείο πρωτοτύπων, περιλαμβάνει επίσης μια δυνατότητα wireframing. Εάν η ιδέα της εφαρμογής σας είναι κάτι παραπάνω από περίπου σκίτσα, μπορείτε να φωτογραφίσετε τα σκίτσα σας και να τα εισαγάγετε απευθείας στην εφαρμογή. Αυτά τα σκίτσα μπορούν στη συνέχεια να είναι κινούμενα ή να χρησιμοποιηθούν ως θεμέλια για το wireframe σας. Μεταφέρετε και αποθέστε προκαθορισμένα σχήματα και στοιχεία διεπαφής χρήστη απευθείας στο σκίτσο σας για να μεταβείτε αμέσως από ασταθείς γραμμές, σε επαγγελματικό lo-fi wireframe.

Το Prott περιλαμβάνει μεγάλο αριθμό κιτ UI για μια ποικιλία συσκευών, από iOS έως Android και web. Αλλά μπορείτε επίσης να δημιουργήσετε τη δική σας βιβλιοθήκη στοιχείων διεπαφής.

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

Η Prott προσφέρει μια πλήρη δοκιμαστική περίοδο 30 ημερών, με ένα δωρεάν πρόγραμμα χωρίς όρια εκτός από τον αριθμό των έργων που μπορείτε να δημιουργήσετε. Εάν πρέπει να δημιουργήσετε περισσότερα έργα, μπορείτε να μεταβείτε σε πρόγραμμα Starter ή Pro, με τιμή από 19 $ / μήνα.

5. InVision

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

Η διαδικασία είναι τόσο απλή όσο:

  • Προσθέστε τα στοιχεία σχεδιασμού σας (το InVision υποστηρίζει GIF, PNG, JPEG, PSD και αρχεία προέλευσης Σκίτσο) μέσω μεταφοράς και απόθεσης ή συγχρονισμού με το Dropbox.
  • Σχεδιάστε hotspot σε κάθε στοιχείο και ρυθμίστε τα να συνδέονται με άλλα στοιχεία, εξωτερικά URL ή αγκύρια.
  • Προσθέστε τη διαδραστικότητα με τη μορφή χειρονομιών (κτυπήματα ή ολίσθηση), σταθερές περιοχές (γραμμή μενού κ.λπ.) και μεταβάσεις.

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

Η τιμολόγηση για το InVision ξεκινά χωρίς κόστος για ένα πρωτότυπο, 25 $ / μήνα για απεριόριστα πρωτότυπα και 99 $ / μήνα για ομάδες έως 5 μελών.

6. Θαυμάσιο

Όπως το InVision, η εφαρμογή Marvel προορίζεται για πρωτότυπα. Περιλαμβάνει τυπική υποστήριξη για αρχεία Sketch και Photoshop, ή μπορείτε να χρησιμοποιήσετε το ενσωματωμένο εργαλείο σχεδίασης Canvas. Η Marvel διαθέτει επίσης μια εφαρμογή iOS και Android που σας επιτρέπει να φωτογραφίζετε τα δικά σας σκετσάκια και σχέδια και να τα ανεβάζετε απευθείας στη βιβλιοθήκη σας Marvel.

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

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

Οι τιμές στο Marvel ξεκινούν από 0 $ / μήνα για έναν χρήστη και έως και δύο έργα, αλλά με περιορισμένες δυνατότητες. Για 14 $ / μήνα λαμβάνετε απεριόριστα έργα και όλες τις δυνατότητες, με ξεχωριστή τιμολόγηση για ομάδες και εταιρικούς πελάτες.

7. Proto.io

Το Proto.io είναι ένα δημοφιλές εργαλείο πρωτοτύπων που έλαβε μια τεράστια ενημέρωση το 2016. Το Proto.io περιλαμβάνει όλες τις δυνατότητες που απαιτούνται σε ένα εργαλείο πρωτοτύπων, αλλά η ενημέρωση έχει επίσης φέρει πολλές απλουστευμένες δυνατότητες.

Μαζί με ένα επανασχεδιασμένο περιβάλλον χρήστη που καθιστά όλες τις βασικές δυνατότητες πιο προσιτές, το Proto.io έδωσε επίσης μεγάλη έμφαση στην κίνηση. Το Motion είναι ένα σημαντικό χαρακτηριστικό των εφαρμογών για κινητά και η λειτουργία State Transitions του Proto.io διευκολύνει τον καθένα να δημιουργήσει και να προσαρμόσει κινούμενες εικόνες στο πρωτότυπό τους.

Το Proto.io έχει επίσης εισαγάγει μια βιβλιοθήκη μοτίβων αλληλεπίδρασης, καθιστώντας την προσθήκη αλληλεπιδράσεων εύκολη. Αυτά τα μοτίβα περιλαμβάνουν αλληλεπιδράσεις, όπως μενού slide-in και pull to refresh. Το μόνο που έχετε να κάνετε είναι να προσθέσετε μια αλληλεπίδραση στο έργο σας και να την προσαρμόσετε.

Η νέα έκδοση του Proto.io επεκτείνει τη δυνατότητά σας να κάνετε τους χρήστες να δοκιμάζουν και να σχολιάζουν το πρωτότυπο σας. Ενσωματώνεται με πλατφόρμες δοκιμών χρηστών όπως Validately και UserTesting, δίνοντάς σας πρόσβαση σε μια μεγαλύτερη ομάδα πραγματικών χρηστών. Και με την ενσωμάτωση του Lookback, λαμβάνετε απεριόριστες εγγραφές - μόνο στο iOS, προς το παρόν - που σας δείχνουν πώς αλληλεπιδρούν και περιηγούνται οι χρήστες στην εφαρμογή σας.

Το Proto.io προσφέρει μια πλήρη δοκιμαστική περίοδο 15 ημερών, μετά την οποία μπορείτε να μεταβείτε σε έναν πολύ περιορισμένο δωρεάν λογαριασμό. Τα προγράμματα επί πληρωμή ξεκινούν από 29 $ / μήνα, ανάλογα με το μέγεθος της ομάδας σας.

συμπέρασμα

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

Επειδή τα wireframes είναι τόσο βασικά στο σχεδιασμό, σας αναγκάζουν να επικεντρωθείτε στη σωστή ροή και την εμπειρία χρήστη. Τα πρωτότυπα μπορούν να σας βοηθήσουν να βελτιώσετε τόσο τη ροή όσο και το UX, να επισημάνετε τυχόν ελαττώματα σχεδίασης, και το πιο σημαντικό, να βλέπετε καλύτερα από τα wireframes, εάν πρέπει να παρουσιάσετε σε πελάτες ή επενδυτές. Και ενώ μπορεί να είναι δελεαστικό να βρεις ένα εργαλείο που συνδυάζει καλωδίωση και πρωτότυπο, ο αποφασιστικός παράγοντας πρέπει πάντα να είναι ποιο εργαλείο περιλαμβάνει όλα τα χαρακτηριστικά που πραγματικά χρειάζεσαι και είναι πιο άνετο στη χρήση. Και δεδομένου ότι κάθε ένα από τα εργαλεία που αναφέρονται εδώ προσφέρουν ένα δωρεάν πρόγραμμα ή δοκιμή, γιατί να μην περάσετε μια μέρα δοκιμάζοντάς τα όλα πριν λάβετε μια απόφαση;