Σχεδιασμός όμορφων εφαρμογών για κινητά από το μηδέν

Άρχισα να μαθαίνω γραφιστική όταν ήμουν 13 ετών. Έμαθα να σχεδιάζω ιστότοπους από διαδικτυακά μαθήματα και συνήθιζα να παίζω με το Photoshop και το Affinity Designer όλη την ημέρα. Αυτή η εμπειρία μου δίδαξε πώς να σκέφτομαι σαν σχεδιαστής.

Σχεδιάζω και αναπτύσσω εφαρμογές για σχεδόν ένα χρόνο τώρα. Παρακολούθησα ένα πρόγραμμα στο MIT όπου συνεργάστηκα με μια ομάδα για την ανάπτυξη του Universeaty. Πριν από δύο μήνες, άρχισα να δουλεύω σε μια νέα εφαρμογή, Crypto Price Tracker, την οποία ξεκίνησα πρόσφατα στις 28 Ιανουαρίου.

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

Διαδικασία σχεδιασμού :

  1. Δημιουργήστε ένα διάγραμμα ροής χρήστη για κάθε οθόνη.
  2. Δημιουργία / σχεδίαση καλωδίων.
  3. Επιλέξτε μοτίβα σχεδίασης και παλέτες χρωμάτων.
  4. Δημιουργήστε μακέτες.
  5. Δημιουργήστε ένα κινούμενο πρωτότυπο εφαρμογής και ζητήστε από τους χρήστες να το δοκιμάσουν και να δώσουν σχόλια.
  6. Δώστε στο τελικό άγγιγμα τα mock-up για να έχετε όλες τις τελικές οθόνες έτοιμες να ξεκινήσουν την κωδικοποίηση.

Ας αρχίσουμε!

Διάγραμμα ροής χρήστη

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

Συνήθως, ένα διάγραμμα ροής χρήστη αποτελείται από 3 τύπους σχημάτων.

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

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

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

Πλαίσια καλωδίων

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

Χρησιμοποιώ τυπωμένα πρότυπα από το UI Stencils για τη σχεδίαση των καλωδίων. Εξοικονομεί χρόνο και δίνει ένα ωραίο καμβά για να σχεδιάσετε και να σημειώσετε.

Ακολουθεί ένα παράδειγμα wireframe.

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

Σχέδια μοτίβων και χρωματικές παλέτες

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

Οι καλύτερες πλατφόρμες για να βρείτε μοτίβα σχεδίασης είναι Mobile Patterns και Pttrns. Και για να βρείτε καλές παλέτες χρωμάτων, μεταβείτε στο Color Hunt.

Μακέτα

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

Υπάρχουν σχεδιαστικά λογισμικά και εργαλεία για τη δημιουργία mock-up. Χρησιμοποιώ το σχεδιαστή Affinity. Το πιο συχνά χρησιμοποιούμενο εργαλείο για το σχεδιασμό iOS είναι το Sketch.

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

Πειραματίστηκα περισσότερο με διάφορες παλέτες χρωμάτων.

Μοιράστηκα τα αρχικά mockups με τους φίλους μου για τα σχόλιά τους. Πολλοί άνθρωποι έμοιαζαν με το χρυσό ντεγκραντέ και το μαύρο σχέδιο.

Να είστε πρόθυμοι να λάβετε σχόλια και να πειραματιστείτε με νέες προτάσεις! Θα βρείτε καταπληκτικές ιδέες που προέρχονται από τους χρήστες σας όταν τους μιλάτε, όχι όταν κάνετε κύλιση με τρομοκρατία στο Dribbble ή στο Behance.

Έτσι επανασχεδιάστησα το mock-up και αφαίρεσα τα γραφήματα φόντου επειδή η δημιουργία τους ήταν μια τεχνικά χρονοβόρα διαδικασία και μείωσαν την αναγνωσιμότητα. Αυτό ήταν το επανασχεδιασμένο μακέτα.

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

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

Μετά από τελικές πινελιές και έτσι, μοιάζει με το τελικό μου σχέδιο.

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

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

Τελειώνω την ανάρτηση με ένα από τα αγαπημένα μου αποσπάσματα σχετικά με το σχεδιασμό.

«Ο σχεδιασμός δεν είναι μόνο όπως φαίνεται και μοιάζει. Ο σχεδιασμός είναι πώς λειτουργεί »

-Ο Steve Jobs