Βρίσκεσαι μπροστά στην πρόκληση να δημιουργήσεις ένα ελκυστικό Prototyping για μια Mobility-App. Αυτό δεν αφορά μόνο το σχέδιο; είναι θέμα αποτελεσματικής σχεδίασης της εμπειρίας χρήστη από την αρχή, ώστε να βοηθά τον χρήστη να περιηγείται διαισθητικά μέσα στην εφαρμογή. Σε αυτό το εκπαιδευτικό πρόγραμμα, θα καθοδηγηθείς βήμα προς βήμα στη διαδικασία δημιουργίας ενός πρωτοτύπου στο Sketch. Ας ξεκινήσουμε αυτό το συναρπαστικό ταξίδι στον κόσμο του σχεδιασμού!
Σημαντικότερα ευρήματα
- Το Prototyping είναι ένα κρίσιμο βήμα στην ανάπτυξη εφαρμογών.
- Στο Sketch μπορείς να αρχίσεις με απλά σχήματα και σχέδια.
- Μια σαφής δομή και καθοδήγηση χρήστη είναι απαραίτητες για την επιτυχία της εφαρμογής σου.
Βήμα-βήμα οδηγίες
Ξεκίνησε δημιουργώντας τη βασική δομή της εφαρμογής σου στο Sketch. Μπορείς να χρησιμοποιήσεις το εργαλείο πινέλου για να σχεδιάσεις τα πρώτα σου στοιχεία σχεδίασης. Απλώς πήγαινε στο εργαλείο πινέλου ή πάτα το πλήκτρο „P“ για να το επιλέξεις.
Δημιούργησε ένα ορθογώνιο που θα εκπροσωπεί την οθόνη της εφαρμογής σου. Κράτησε πατημένο το πλήκτρο „Alt“ ενώ σχεδιάζεις ένα ορθογώνιο με το ποντίκι. Αυτό θα διασφαλίσει ότι το ορθογώνιο θα παραμείνει αναλογικό. Το αποτέλεσμα θα είναι ήδη αρκετά καλό.
Ήρθε η ώρα να σχεδιάσεις την πρώτη σελίδα της εφαρμογής. Ξεκίνα με τη κάτω μπάρα καρτελών. Χρησιμοποίησε ξανά το εργαλείο πινέλου και σχεδίασε μια ευθεία γραμμή κρατώντας πατημένο το πλήκτρο Shift, για να διασφαλίσεις ότι θα έχεις μια ευθεία γραμμή.
Αφού σχεδιάσεις την μπάρα καρτελών, πρόσθεσε τρία εικονίδια που να εκπροσωπούν τις κύριες λειτουργίες της εφαρμογής. Με το πλήκτρο ALT μπορείς εύκολα να διπλασιάσεις τα σχήματα ενώ τα μετακινείς στην κατάλληλη θέση.
Τώρα ας επικεντρωθούμε στην επάνω γραμμή πλοήγησης. Κράτησε πάλι πατημένο το πλήκτρο ALT καθώς σχεδιάζεις μια ακόμη ορθογώνια περιοχή για τη γραμμή πλοήγησης.
Οι φυσαλίδες συνομιλίας είναι το επόμενο μέρος της εφαρμογής σου που θέλουμε να σχεδιάσουμε. Χρησιμοποίησε το εργαλείο πινέλου για να σχεδιάσεις μια φυσαλίδα συνομιλίας. Αυτή θα εμφανίζεται αμέσως για να καλωσορίσει τον χρήστη. Πρόσθεσε ένα σύντομο κείμενο που να απευθύνεται στον χρήστη, όπως „Γεια σου και καλώς ήρθες στην Mobility App!“
Για να διασφαλίσεις ότι το σύνολο φαίνεται ελκυστικό, μπορείς να αντιγράψεις και να προσαρμόσεις τις φυσαλίδες. Επίλεξε τις φυσαλίδες και πέρνα τις προς τα κάτω με το πλήκτρο ALT για να προσθέσεις ένα άλλο μήνυμα καλωσορίσματος, όπως "Ξεκίνα με την πρώτη σου Mobility Session".
Η επόμενη κίνηση είναι η προσθήκη του κουμπιού βίντεο, με το οποίο οι χρήστες θα μπορούν να αναπαράγουν τα μαθήματά τους. Σχεδίασε ένα στρογγυλό κουμπί με το εργαλείο πινέλου και συνδύασέ το με ένα τρίγωνο, ώστε να είναι σαφής η εμφάνιση και η λειτουργία.
Τώρα, αντιγράψε όλα τα σημαντικά στοιχεία UI – όπως τις πάνω και κάτω γραμμές πλοήγησης – στη νέα σελίδα, για να διασφαλίσεις τη συνέπεια στο σχέδιο. Μπορείς απλώς να τραβήξεις ένα στιγμιότυπο οθόνης με το πλήκτρο ALT για να διπλασιάσεις τα στοιχεία στη νέα σελίδα.
Σε αυτή τη νέα οθόνη που δημιούργησες, σχεδίασε τις επιλογές μαθημάτων. Εδώ θα πρέπει να δημιουργήσεις μια απλή επισκόπηση των διαθέσιμων μαθημάτων, που ο χρήστης μπορεί να επιλέξει.
Στη σελίδα προφίλ, μπορείς να δημιουργήσεις χώρο για τη φωτογραφία προφίλ, το όνομα χρήστη και τον αριθμό των ολοκληρωμένων ωρών μαθημάτων. Εδώ είναι σημαντικό να παρουσιάσεις τις πληροφορίες σαφώς και ευκρινώς.
Ολοκλήρωσε το σχέδιο για την επιλογή μαθημάτων και μαθημάτων, δημιούργησε την επισκόπηση για τα μαθήματα και πρόσθεσε ένα κουμπί κλεισίματος, έτσι ώστε ο χρήστης να μπορεί να κλείσει την επιλογή οποιαδήποτε στιγμή.
Έτσι, ολοκληρώθηκε το βασικό πρωτότυπο για την Mobility App σου. Τώρα έχεις ένα ελκυστικό σχέδιο που έρχεται σε σαφή δομή καθοδήγησης του χρήστη και ταυτόχρονα σε βοηθά να οραματιστείς σαφώς την όραση της εφαρμογής ως σχεδιαστής.
Σύνοψη – Prototyping μιας Mobility App στο Sketch
Κατά τη διάρκεια αυτού του εκπαιδευτικού προγράμματος, έμαθες βήμα προς βήμα πώς να προτύπωσες μια Mobility-App στο Sketch. Από την αρχική ιδέα μέχρι τα τελευταία στοιχεία σχεδίασης, μπόρεσες να επεκτείνεις τις γνώσεις σου και να δημιουργήσεις ένα χρήσιμο εργαλείο για την περαιτέρω ανάπτυξη της εφαρμογής σου.
Συχνές ερωτήσεις
Πώς μπορώ να ξεκινήσω το σχέδιο στο Sketch;Επίλεξε το εργαλείο πινέλου (P) και ξεκίνα με τη δημιουργία των πρώτων στοιχείων.
Πώς μπορώ να διπλασιάσω τα στοιχεία αποτελεσματικά;Κράτησε πατημένο το πλήκτρο ALT καθώς μετακινείς το στοιχείο με το ποντίκι.
Τι κάνω αν δεν είμαι ευχαριστημένος με το σχέδιο;Μπορείς να προσαρμόσεις ή να ξανασχεδιάσεις οποιαδήποτε στιγμή τα υπάρχοντα στοιχεία για να πετύχεις το επιθυμητό αποτέλεσμα.
Πώς μπορώ να διασφαλίσω ότι η καθοδήγηση χρήστη είναι σαφής;Φρόντισε όλες οι λειτουργίες να είναι λογικά οργανωμένες και ο χρήστης να μπορεί να περιηγείται διαισθητικά.
Μπορώ να σχεδιάσω και για κινητές συσκευές στο Sketch;Ναι, μπορείς να προσαρμόσεις τον τύπο και το μέγεθος των στοιχείων ανάλογα με το μέγεθος της οθόνης των κινητών συσκευών.
